/* ============================================================
       WAITLIST PAGE STYLES
       ============================================================ */

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
      overflow-x: hidden;
    }

    /* --- Rainbow animation (design-system canonical) --- */
    @keyframes rainbow {
      0% { background-position: 0%; }
      100% { background-position: 200%; }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes terminalBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    @keyframes progressPulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    /* --- Dot background --- */
    .dot-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }

    .dot-bg img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: auto;
      min-height: 100%;
      object-fit: cover;
      opacity: 0.50;
    }

    .dot-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(#000000, transparent);
      z-index: 1;
    }

    .dot-bg::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(transparent, #000000);
      z-index: 1;
    }

    /* --- Section shared --- */
    .wl-section {
      position: relative;
      padding: 64px var(--space-6);
    }

    .wl-section-inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .wl-section-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--space-3);
      text-shadow: 0 1px 8px rgba(0,0,0,0.8);
    }

    .wl-section-heading {
      font-size: 48px;
      font-weight: 400;
      letter-spacing: -1.8px;
      line-height: 1.08;
      color: var(--text-primary);
      margin-bottom: var(--space-3);
      text-shadow: 0 2px 16px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
    }

    .wl-section-desc {
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-secondary);
      letter-spacing: -0.15px;
      max-width: 580px;
      text-shadow: 0 1px 10px rgba(0,0,0,0.8);
    }

    /* Boost text readability on sections with ASCII art backgrounds */
    .video-showcase-section .wl-section-desc,
    .daw-section .wl-section-desc,
    .numbers-section .wl-section-desc {
      color: rgba(255,255,255,0.95);
      text-shadow: 0 0 8px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,1), 0 0 50px rgba(0,0,0,1), 0 0 100px rgba(0,0,0,1);
    }
    .video-showcase-section .wl-section-label,
    .daw-section .wl-section-label,
    .numbers-section .wl-section-label {
      color: rgba(255,255,255,0.7);
      text-shadow: 0 0 6px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,1);
    }
    .video-showcase-section .wl-section-heading,
    .daw-section .wl-section-heading,
    .numbers-section .wl-section-heading {
      text-shadow: 0 2px 16px rgba(0,0,0,1), 0 0 50px rgba(0,0,0,0.9), 0 0 100px rgba(0,0,0,0.5);
    }

    /* ============================================================
       1. HERO + EMAIL SIGNUP (Waitlist Scroll Reveal)
       ============================================================ */

    .hero-shader-wrap {
      position: relative;
      padding-top: 140px;
    }

    .hero-shader-wrap .waitlist-scroll-header h1 {
      text-shadow: 0 0 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,1), 0 0 50px rgba(0,0,0,0.9), 0 0 100px rgba(0,0,0,0.5);
    }
    .hero-shader-wrap .waitlist-scroll-header p {
      color: rgba(255,255,255,0.85);
      text-shadow: 0 0 6px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,1), 0 0 80px rgba(0,0,0,0.8);
    }

    .waitlist-scroll-container {
      position: relative;
      z-index: 1;
      min-height: 120vh;
      padding: var(--space-6);
    }

    .waitlist-scroll-inner {
      position: sticky;
      top: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--space-8) 0;
      gap: var(--space-5);
    }

    .waitlist-scroll-header {
      text-align: center;
      transition: transform var(--duration-slow) var(--ease-out);
      will-change: transform;
    }

    .waitlist-form {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      margin-top: var(--space-4);
    }

    .waitlist-input {
      width: 320px;
      max-width: 100%;
      height: 40px;
      padding: 0 var(--space-4);
      border-radius: var(--radius-4);
      border: 1px solid var(--gray-a6);
      background: var(--gray-2);
      color: var(--gray-12);
      font-family: var(--font-sans);
      font-size: 14px;
      letter-spacing: -0.1px;
      outline: none;
      transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
    }

    .waitlist-input::placeholder {
      color: var(--gray-10);
    }

    .waitlist-input:hover {
      border-color: var(--gray-a7);
    }

    .waitlist-input:focus {
      border-color: var(--gray-a8);
      box-shadow: var(--shadow-1);
    }

    .waitlist-btn {
      position: relative;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 40px;
      padding: 0 18px;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: -0.2px;
      color: var(--text-primary);
      border: 1px solid transparent;
      outline: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-full);
      white-space: nowrap;
      box-shadow: none;
      background:
        linear-gradient(#0a0a0a, #0a0a0a),
        linear-gradient(#0a0a0a 50%, rgba(10, 10, 10, 0.6) 80%, rgba(10, 10, 10, 0)),
        linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      background-clip: padding-box, border-box, border-box;
      background-origin: border-box;
      animation: rainbow 2s linear infinite;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .waitlist-btn::before {
      content: '';
      position: absolute;
      bottom: -20%;
      left: 50%;
      z-index: -1;
      height: 20%;
      width: 60%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      animation: rainbow 2s linear infinite;
      filter: blur(12px);
      opacity: 0.6;
    }

    .waitlist-btn:hover {
      transform: translateY(-1px);
    }

    .waitlist-btn:active {
      transform: scale(0.97);
    }

    .waitlist-btn:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .rainbow-glow-wrap {
      position: relative;
    }

    .waitlist-hint {
      width: 100%;
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: -0.1px;
      text-align: center;
      margin-top: 8px;
    }

    .waitlist-success {
      display: none;
      text-align: center;
      font-size: 13px;
      color: var(--green-11);
      margin-top: var(--space-3);
    }
    .waitlist-success.visible { display: block; }

    .waitlist-error {
      display: none;
      text-align: center;
      font-size: 13px;
      color: #ef4444;
      margin-top: var(--space-2);
    }
    .waitlist-error.visible { display: block; }

    .waitlist-scroll-card {
      max-width: 900px;
      width: 100%;
      height: 680px;
      border-radius: var(--radius-4);
      border: 1px solid var(--border-subtle);
      background: var(--surface-1);
      box-shadow: var(--shadow-2);
      overflow: hidden;
      will-change: transform;
      transition: transform var(--duration-slow) var(--ease-out);
    }

    .waitlist-scroll-card-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: inherit;
    }

    /* ============================================================
       LIVE RENDER MOCKUP
       ============================================================ */

    .live-render {
      width: 100%;
      height: 100%;
      display: flex;
      background: var(--surface-1);
      font-family: var(--font-sans);
      letter-spacing: 0;
      overflow: hidden;
    }

    /* --- Left: Terminal + Rules (60%) --- */
    .lr-terminal {
      flex: 6;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--border-subtle);
      min-width: 0;
    }
    /* Terminal body gets 60% on desktop, rules panel gets 40% */
    .lr-term-wrap {
      flex: 6;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .lr-term-header {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background: var(--gray-2);
      border-bottom: 1px solid var(--border-subtle);
      gap: var(--space-2);
      flex-shrink: 0;
    }
    .lr-term-dots {
      display: flex; gap: 5px;
    }
    .lr-term-dots span {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--gray-a5);
    }
    .lr-term-dots span:first-child { background: rgba(255, 100, 100, 0.6); }
    .lr-term-dots span:nth-child(2) { background: rgba(212, 167, 44, 0.6); }
    .lr-term-dots span:last-child { background: rgba(45, 164, 78, 0.6); }
    .lr-term-title {
      font-size: 10px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      letter-spacing: 0.02em;
    }
    .lr-term-body {
      flex: 1;
      overflow: hidden;
      padding: 10px 14px;
      background: var(--surface-1);
      position: relative;
    }
    .lr-term-lines {
      display: flex;
      flex-direction: column;
      gap: 1px;
      font-family: var(--font-mono);
      font-size: 10px;
      line-height: 1.65;
      letter-spacing: 0;
    }
    .lr-line {
      white-space: nowrap;
      overflow: hidden;
      opacity: 0;
      animation: fadeInUp 200ms var(--ease-out) forwards;
    }
    .lr-line-prompt { color: var(--green-11); }
    .lr-line-cmd { color: var(--gray-12); }
    .lr-line-info { color: var(--gray-11); }
    .lr-line-success { color: var(--green-11); }
    .lr-line-warn { color: var(--yellow-11); }
    .lr-line-accent { color: hsl(var(--color-3)); }
    .lr-line-dim { color: var(--text-muted); }
    .lr-line-error { color: var(--red-11); }

    .lr-cursor {
      display: inline-block;
      width: 6px; height: 12px;
      background: var(--gray-12);
      animation: terminalBlink 1s step-end infinite;
      vertical-align: middle;
      margin-left: 2px;
    }

    .lr-term-status {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 12px;
      background: var(--gray-2);
      border-top: 1px solid var(--border-subtle);
      font-size: 9px;
      color: var(--text-muted);
      letter-spacing: 0;
      flex-shrink: 0;
    }
    .lr-term-status i { font-size: 10px; margin-right: 2px; }
    .lr-status-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green-9);
      animation: progressPulse 2s ease infinite;
    }

    /* --- Right: Preview + Agent (40%) --- */
    .lr-right {
      flex: 4;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    /* Top: Video preview */
    .lr-preview {
      flex: 3;
      position: relative;
      background: #000;
      border-bottom: 1px solid var(--border-subtle);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lr-preview img,
    .lr-preview video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: #000;
    }
    .lr-preview-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .lr-spinner {
      width: 28px; height: 28px;
      border: 2px solid var(--gray-a5);
      border-top-color: var(--gray-12);
      border-radius: 50%;
      animation: spinnerRotate 1s linear infinite;
    }
    @keyframes spinnerRotate { to { transform: rotate(360deg); } }
    .lr-preview-text {
      font-size: 10px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: -0.1px;
    }
    .lr-preview-eta {
      font-size: 9px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .lr-preview-progress {
      position: absolute;
      bottom: 0; left: 0;
      height: 3px;
      background: var(--gray-12);
      transition: width var(--duration-slow) var(--ease-out);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    /* Bottom: Agent chat */
    .lr-agent {
      flex: 7;
      display: flex;
      flex-direction: column;
      background: var(--surface-1);
      overflow: hidden;
    }
    .lr-agent-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: var(--gray-2);
      border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    .lr-agent-avatar {
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--gray-a5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: var(--gray-11);
    }
    .lr-agent-name {
      font-size: 10px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: 0;
    }
    .lr-agent-badge {
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 1px 5px;
      border-radius: var(--radius-full);
      background: var(--green-4);
      color: var(--green-11);
      margin-left: auto;
    }
    .lr-agent-body {
      flex: 1;
      overflow: hidden;
      padding: var(--space-2) 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .lr-msg {
      display: flex;
      gap: 6px;
      opacity: 0;
      animation: fadeInUp 250ms var(--ease-out) forwards;
    }
    .lr-msg-icon {
      flex-shrink: 0;
      width: 14px; height: 14px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      margin-top: 1px;
    }
    .lr-msg-icon-agent {
      background: var(--gray-a4);
      color: var(--gray-11);
    }
    .lr-msg-icon-system {
      background: var(--green-4);
      color: var(--green-11);
    }
    .lr-msg-icon-warn {
      background: var(--yellow-4);
      color: var(--yellow-11);
    }
    .lr-msg-content {
      flex: 1;
      min-width: 0;
    }
    .lr-msg-sender {
      font-size: 8px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 1px;
    }
    .lr-msg-text {
      font-size: 9px;
      color: var(--gray-11);
      line-height: 1.45;
      letter-spacing: 0;
    }
    .lr-msg-text strong {
      color: var(--gray-12);
      font-weight: 500;
    }
    .lr-msg-text code {
      font-family: var(--font-mono);
      font-size: 8px;
      padding: 1px 4px;
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      color: hsl(var(--color-3));
    }
    .lr-msg-time {
      font-size: 7px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      margin-top: 2px;
    }
    .lr-agent-input {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-top: 1px solid var(--border-subtle);
      background: var(--gray-2);
      flex-shrink: 0;
    }
    .lr-agent-input-field {
      flex: 1;
      font-size: 9px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      letter-spacing: 0;
    }
    .lr-agent-input i {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* --- Editing Rules Panel (bottom 40% of left column, desktop only) --- */
    .lr-rules {
      flex: 0 0 40%;
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--border-subtle);
      background: var(--surface-1);
      overflow: hidden;
    }
    .lr-rules-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: var(--gray-2);
      border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    .lr-rules-header i {
      font-size: 10px;
      color: var(--gray-11);
    }
    .lr-rules-title {
      font-size: 10px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: 0;
    }
    .lr-rules-badge {
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 1px 5px;
      border-radius: var(--radius-full);
      background: var(--blue-4);
      color: var(--blue-11);
      margin-left: auto;
    }
    .lr-rules-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: var(--space-2) 10px;
      scrollbar-width: none;
    }
    .lr-rules-body::-webkit-scrollbar { display: none; }
    .lr-rules-group {
      margin-bottom: var(--space-2);
    }
    .lr-rules-group-title {
      font-size: 8px;
      font-weight: 400;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 5px;
      padding-bottom: 3px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .lr-rules-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px 10px;
    }
    .lr-rules-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 5px 8px;
    }
    .lr-ctrl {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .lr-ctrl-label {
      font-size: 8px;
      color: var(--text-muted);
      letter-spacing: 0;
      font-family: var(--font-mono);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lr-ctrl-field {
      display: flex;
      align-items: center;
      height: 18px;
      padding: 0 5px;
      border: 1px solid var(--border-subtle);
      background: var(--gray-a3);
      font-size: 8px;
      font-family: var(--font-mono);
      color: var(--gray-12);
      letter-spacing: 0;
    }
    .lr-ctrl-field-select {
      justify-content: space-between;
      cursor: default;
    }
    .lr-ctrl-field-select::after {
      content: '\25BE';
      font-size: 7px;
      color: var(--text-muted);
      margin-left: 4px;
    }

    /* Toggle switch */
    .lr-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .lr-toggle-label {
      font-size: 8px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .lr-toggle-track {
      width: 20px;
      height: 10px;
      border-radius: var(--radius-full);
      background: var(--gray-a5);
      position: relative;
      flex-shrink: 0;
    }
    .lr-toggle-track.on {
      background: var(--green-9);
    }
    .lr-toggle-knob {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gray-12);
      position: absolute;
      top: 1px;
      left: 1px;
      transition: left var(--duration-normal) var(--ease-default);
    }
    .lr-toggle-track.on .lr-toggle-knob {
      left: 11px;
    }

    /* Slider */
    .lr-slider {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .lr-slider-label {
      display: flex;
      justify-content: space-between;
      font-size: 8px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .lr-slider-track {
      width: 100%;
      height: 4px;
      background: var(--gray-a5);
      border: 1px solid var(--gray-a4);
      position: relative;
      overflow: hidden;
    }
    .lr-slider-fill {
      height: 100%;
      background: var(--gray-11);
      position: absolute;
      left: 0; top: 0;
    }
    .lr-slider-thumb {
      width: 6px;
      height: 8px;
      background: var(--gray-12);
      position: absolute;
      top: -2px;
      transform: translateX(-50%);
    }

    /* Knob (rotary) */
    .lr-knob-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .lr-knob {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .lr-knob-dial {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid var(--gray-a6);
      background: var(--gray-a3);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lr-knob-indicator {
      width: 1.5px;
      height: 7px;
      background: var(--gray-12);
      position: absolute;
      top: 2px;
      left: 50%;
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(var(--knob-angle, 0deg));
    }
    .lr-knob-label {
      font-size: 7px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      text-align: center;
    }
    .lr-knob-value {
      font-size: 7px;
      color: var(--gray-11);
      font-family: var(--font-mono);
    }

    /* Chip tags */
    .lr-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 5px;
      border-radius: var(--radius-full);
      font-size: 7px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      background: var(--gray-a3);
      border: 1px solid var(--border-subtle);
    }
    .lr-chip.active {
      background: var(--gray-a5);
      color: var(--gray-12);
      border-color: var(--border-strong);
    }
    .lr-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
    }

    /* Rules status bar */
    .lr-rules-status {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 3px 10px;
      background: var(--gray-2);
      border-top: 1px solid var(--border-subtle);
      font-size: 8px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      flex-shrink: 0;
    }
    .lr-rules-status i { font-size: 9px; margin-right: 2px; }

    /* ============================================================
       2. RENDER ACTIVITY TICKER
       ============================================================ */

    .ticker-section {
      padding: 0;
      overflow: hidden;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }

    .ticker-wrap {
      overflow: hidden;
      padding: 14px 0;
    }

    .ticker-track {
      display: flex;
      gap: var(--space-5);
      animation: tickerScroll 40s linear infinite;
      width: max-content;
    }

    @keyframes tickerScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .ticker-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .ticker-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green-9);
      animation: tickerPulse 2s ease-in-out infinite;
    }

    @keyframes tickerPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .ticker-id {
      font-size: 13px;
      font-family: var(--font-mono);
      color: var(--text-muted);
    }

    .ticker-desc {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .ticker-time {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      font-size: 11px;
      font-family: var(--font-mono);
      background: var(--green-4);
      color: var(--green-11);
      border: 1px solid rgba(45, 164, 78, 0.25);
      border-radius: var(--radius-full);
    }

    /* ============================================================
       3. THE INTERSECTION
       ============================================================ */
    .intersection-section {
      margin-bottom: 0;
    }

    .ix-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      margin-top: 0;
    }

    .ix-copy .section-heading {
      text-align: left;
      max-width: 540px;
      margin-bottom: var(--space-5);
    }

    .ix-copy .section-desc {
      text-align: left;
      max-width: 520px;
      margin-bottom: 0;
    }

    .ix-copy-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .ix-para {
      font-size: 15px;
      line-height: 1.7;
      color: var(--gray-11);
      letter-spacing: -0.15px;
      margin: 0;
    }

    .ix-para .ix-inline-rule {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--gray-12);
      background: var(--surface-2);
      padding: 1px 7px;
      border: 1px solid var(--border-subtle);
      letter-spacing: 0;
    }

    .ix-para em {
      font-style: italic;
      color: var(--gray-12);
    }

    .ix-moat {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-muted);
      letter-spacing: -0.1px;
      border-top: 1px solid var(--border-subtle);
      padding-top: var(--space-5);
      margin: 0;
    }

    .ix-moat strong {
      color: var(--gray-11);
      font-weight: 500;
    }

    /* ---- Right: Drag & Drop Mockup ---- */
    .ix-mockup {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-4);
      overflow: hidden;
      position: relative;
    }

    .ix-mockup-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--border-subtle);
      font-size: 12px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: -0.2px;
    }

    .ix-mockup-header i {
      font-size: 14px;
      color: var(--gray-11);
    }

    .ix-mockup-body {
      padding: var(--space-5);
      min-height: 320px;
      position: relative;
    }

    /* Drop zone */
    .ix-dropzone {
      border: 1px dashed var(--gray-a5);
      border-radius: var(--radius-4);
      padding: 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
      min-height: 100px;
      transition: border-color var(--duration-complex) var(--ease-default),
                  background var(--duration-complex) var(--ease-default);
      animation: ixDropPulse 5s ease-in-out infinite;
      will-change: border-color, background;
    }

    @keyframes ixDropPulse {
      0%, 25% { border-color: var(--gray-a5); background: transparent; }
      32%, 42% { border-color: rgba(59,130,246,0.45); background: rgba(59,130,246,0.04); }
      46%, 56% { border-color: rgba(45,164,78,0.5); background: rgba(45,164,78,0.04); }
      65%, 100% { border-color: var(--gray-a5); background: transparent; }
    }

    .ix-dropzone-icon {
      font-size: 24px;
      color: var(--text-muted);
      animation: ixDropIcon 5s ease-in-out infinite;
    }

    @keyframes ixDropIcon {
      0%, 25% { color: var(--text-muted); transform: translateY(0); }
      32%, 42% { color: #3b82f6; transform: translateY(-2px); }
      46%, 56% { color: #2da44e; transform: translateY(0); }
      65%, 100% { color: var(--text-muted); transform: translateY(0); }
    }

    .ix-dropzone-text {
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: -0.1px;
    }

    .ix-dropzone-sub {
      font-size: 10px;
      color: var(--text-muted);
      opacity: 0.6;
    }

    /* Animated file being dragged */
    .ix-drag-file {
      position: absolute;
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      background: var(--surface-2);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-3);
      z-index: 5;
      pointer-events: none;
      animation: ixDragPath 5s ease-in-out infinite;
      opacity: 0;
      will-change: transform, opacity;
      top: 10px;
      left: 50%;
    }

    .ix-drag-file i {
      font-size: 14px;
      color: #3b82f6;
    }

    .ix-drag-file span {
      font-size: 11px;
      color: var(--gray-12);
      font-weight: 500;
      white-space: nowrap;
    }

    .ix-drag-file .ix-drag-size {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      font-weight: 400;
    }

    /* Cursor */
    .ix-cursor {
      position: absolute;
      z-index: 6;
      pointer-events: none;
      font-size: 18px;
      color: var(--gray-12);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
      animation: ixCursorPath 5s ease-in-out infinite;
      opacity: 0;
      will-change: transform, opacity;
      top: 30px;
      left: 50%;
    }

    @keyframes ixDragPath {
      0% { opacity: 0; transform: translateX(40%) translateY(0) scale(0.95); }
      10% { opacity: 1; transform: translateX(25%) translateY(0) scale(1); }
      20% { opacity: 1; transform: translateX(25%) translateY(0); }
      42% { opacity: 1; transform: translateX(-50%) translateY(50px) scale(1); }
      48% { opacity: 0.5; transform: translateX(-50%) translateY(50px) scale(0.88); }
      53% { opacity: 0; transform: translateX(-50%) translateY(50px) scale(0.75); }
      100% { opacity: 0; transform: translateX(-50%) translateY(50px); }
    }

    @keyframes ixCursorPath {
      0% { opacity: 0; transform: translate(120px, -15px); }
      10% { opacity: 1; transform: translate(100px, -10px); }
      20% { opacity: 1; transform: translate(100px, -10px); }
      42% { opacity: 1; transform: translate(5px, 30px); }
      48% { opacity: 0; transform: translate(5px, 30px); }
      100% { opacity: 0; transform: translate(5px, 30px); }
    }

    /* Landed file rows */
    .ix-file-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .ix-file-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 10px;
      background: var(--gray-3);
      border: 1px solid var(--gray-a6);
      border-radius: var(--radius-3);
    }

    .ix-file-row i {
      font-size: 14px;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .ix-file-row .ix-fname {
      font-size: 11px;
      color: var(--gray-11);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ix-file-row .ix-fmeta {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .ix-file-row .ix-fcheck {
      font-size: 12px;
      color: #2da44e;
      flex-shrink: 0;
    }

    /* New file appears with animation */
    .ix-file-new {
      animation: ixFileAppear 5s ease-in-out infinite;
      opacity: 0;
    }

    @keyframes ixFileAppear {
      0%, 48% { opacity: 0; transform: translateY(-4px); }
      55% { opacity: 1; transform: translateY(0); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .ix-file-new .ix-fcheck {
      animation: ixCheckAppear 5s ease-in-out infinite;
      opacity: 0;
    }

    @keyframes ixCheckAppear {
      0%, 60% { opacity: 0; transform: scale(0.5); }
      68% { opacity: 1; transform: scale(1.1); }
      72%, 100% { opacity: 1; transform: scale(1); }
    }

    /* Cataloged badge */
    .ix-cataloged {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: var(--space-3);
      padding: var(--space-2) 10px;
      background: rgba(45,164,78,0.06);
      border: 1px solid rgba(45,164,78,0.15);
      border-radius: var(--radius-3);
      animation: ixCataloged 5s ease-in-out infinite;
      opacity: 0;
    }

    @keyframes ixCataloged {
      0%, 65% { opacity: 0; transform: translateY(4px); }
      75% { opacity: 1; transform: translateY(0); }
      100% { opacity: 1; }
    }

    .ix-cataloged i {
      font-size: 12px;
      color: #2da44e;
    }

    .ix-cataloged span {
      font-size: 10px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      letter-spacing: 0;
    }

    .ix-cataloged-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1);
      margin-left: auto;
    }

    .ix-cataloged-tags span {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      padding: 1px 6px;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-1);
      letter-spacing: 0;
    }

    /* ============================================================
       3b. VIDEO SHOWCASE
       ============================================================ */

    .video-showcase-section {
      text-align: center;
    }

    .video-showcase-wrap {
      max-width: 900px;
      margin: 0 auto;
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-6);
      overflow: hidden;
      box-shadow: var(--shadow-5);
      transition:
        border-color var(--duration-normal) var(--ease-default),
        box-shadow var(--duration-slow) var(--ease-default);
    }

    .video-showcase-wrap:hover {
      border-color: var(--border-interactive);
      box-shadow: var(--shadow-6);
    }

    .video-showcase-player {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--gray-1);
    }

    .video-showcase-player video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ============================================================
       4. HOW IT WORKS
       ============================================================ */

    .hiw-section {
      position: relative;
      text-align: center;
    }

    .hiw-timeline {
      position: relative;
      margin-top: 56px;
    }

    .hiw-timeline::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background: var(--gray-a4);
      transform: translateX(-50%);
    }

    .hiw-timeline::after {
      display: none;
    }

    .hiw-step {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      margin-bottom: 72px;
      padding: 0;
    }

    .hiw-step:last-child {
      margin-bottom: 0;
    }

    .hiw-step::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 28px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      transform: translateX(-50%);
      z-index: 3;
      border: 1px solid var(--color-background);
      box-shadow: none;
      transition: box-shadow var(--duration-slow) var(--ease-default);
    }

    .hiw-step:hover::before {
      box-shadow: none;
    }

    .hiw-step.hiw-c-blue::before { background: #3b82f6; }
    .hiw-step.hiw-c-cream::before { background: var(--accent-9); }
    .hiw-step.hiw-c-green::before { background: #2da44e; }
    .hiw-step.hiw-c-purple::before { background: hsl(var(--color-2)); }

    .hiw-step-text {
      text-align: right;
      padding-right: var(--space-7);
      padding-top: var(--space-2);
    }

    .hiw-step-card {
      padding-left: var(--space-7);
    }

    .hiw-step:nth-child(even) .hiw-step-text {
      order: 2;
      text-align: left;
      padding-right: 0;
      padding-left: var(--space-7);
    }

    .hiw-step:nth-child(even) .hiw-step-card {
      order: 1;
      padding-left: 0;
      padding-right: var(--space-7);
    }

    .hiw-step-number {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: var(--font-mono);
      margin-bottom: var(--space-2);
    }

    .hiw-step.hiw-c-blue .hiw-step-number { color: rgba(59, 130, 246, 0.6); }
    .hiw-step.hiw-c-cream .hiw-step-number { color: rgba(255, 255, 255, 0.5); }
    .hiw-step.hiw-c-green .hiw-step-number { color: rgba(45, 164, 78, 0.6); }
    .hiw-step.hiw-c-purple .hiw-step-number { color: rgba(130, 100, 255, 0.6); }

    .hiw-step-title {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: -0.8px;
      margin-bottom: var(--space-2);
      color: var(--gray-12);
      line-height: 1.15;
    }

    .hiw-step-desc {
      font-size: 14px;
      color: var(--gray-11);
      line-height: 1.6;
      letter-spacing: -0.2px;
    }

    .hiw-card {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
      transition: border-color var(--duration-complex) var(--ease-default);
    }

    .hiw-step:hover .hiw-card {
      border-color: var(--border-strong);
      box-shadow: none;
    }

    .hiw-card-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 10px 14px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--gray-2);
    }

    .hiw-card-header i {
      font-size: 14px;
    }

    .hiw-card-header span {
      font-size: 11px;
      font-weight: 400;
      letter-spacing: -0.2px;
    }

    .hiw-card-body {
      padding: 14px;
    }

    .hiw-upload-zone {
      border: 1.5px dashed var(--gray-a5);
      border-radius: var(--radius-4);
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      transition: border-color var(--duration-normal) var(--ease-default);
    }

    .hiw-step:hover .hiw-upload-zone {
      border-color: rgba(59, 130, 246, 0.3);
    }

    .hiw-upload-zone i {
      font-size: 22px;
      color: #3b82f6;
      opacity: 0.6;
    }

    .hiw-upload-zone span {
      font-size: 10px;
      color: var(--text-muted);
    }

    .hiw-file-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 6px var(--space-2);
      border-radius: 0px;
      background: var(--surface-2);
      border: 1px solid var(--gray-a3);
      margin-bottom: var(--space-1);
    }

    .hiw-file-row:last-child { margin-bottom: 0; }

    .hiw-file-row i {
      font-size: 14px;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .hiw-file-row .name {
      font-size: 10px;
      color: var(--gray-11);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .hiw-file-row .size {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .hiw-file-row .check {
      font-size: 12px;
      color: #2da44e;
      flex-shrink: 0;
    }

    .hiw-rule-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .hiw-rule-row:last-child { border-bottom: none; }

    .hiw-rule-label {
      font-size: 10px;
      color: var(--gray-11);
      letter-spacing: -0.1px;
    }

    .hiw-rule-toggle {
      width: 26px;
      height: 14px;
      border-radius: 7px;
      background: var(--gray-a5);
      position: relative;
      flex-shrink: 0;
    }

    .hiw-rule-toggle.on {
      background: var(--accent-9);
    }

    .hiw-rule-toggle::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text-muted);
      top: 2px;
      left: 2px;
      transition: left var(--duration-normal) var(--ease-spring),
                  background var(--duration-normal) var(--ease-spring);
    }

    .hiw-rule-toggle.on::after {
      left: 14px;
      background: var(--accent-contrast);
    }

    .hiw-rule-select {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      padding: 2px var(--space-2);
      border-radius: var(--radius-2);
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .hiw-rule-select i {
      font-size: 8px;
      color: var(--text-muted);
    }

    .hiw-rule-count {
      text-align: center;
      padding: 6px 0 2px;
      font-size: 9px;
      color: var(--text-muted);
      letter-spacing: -0.1px;
    }

    .hiw-render-stage {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .hiw-render-task {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 6px var(--space-2);
      border-radius: 0px;
      background: var(--surface-2);
    }

    .hiw-render-task .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .hiw-render-task .dot.done { background: #2da44e; }
    .hiw-render-task .dot.active {
      background: #3b82f6;
      box-shadow: none;
      animation: pulse 1.5s ease infinite;
    }
    .hiw-render-task .dot.pending { background: var(--gray-a5); }

    .hiw-render-task .label {
      font-size: 10px;
      color: var(--gray-11);
      flex: 1;
    }

    .hiw-render-task .status {
      font-size: 8px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      letter-spacing: 0;
    }

    .hiw-render-task .status.done-text { color: #2da44e; }
    .hiw-render-task .status.active-text { color: #3b82f6; }

    .hiw-render-bar {
      position: relative;
      height: 4px;
      border-radius: 2px;
      background: var(--gray-a4);
      overflow: visible;
      margin-top: 2px;
    }

    .hiw-render-bar-fill {
      position: relative;
      height: 100%;
      border-radius: 2px;
      background: var(--accent-9);
      transition: width var(--duration-slow) var(--ease-out);
      overflow: visible;
    }

    .hiw-render-bar-fill::after {
      display: none;
    }

    .hiw-result-preview {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: 10px;
      border-radius: var(--radius-4);
      background: var(--surface-2);
      border: 1px solid var(--gray-a3);
      margin-bottom: var(--space-2);
    }

    .hiw-result-thumb {
      width: 72px;
      height: 42px;
      border-radius: 0px;
      background: rgba(130, 100, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .hiw-result-thumb i {
      font-size: 18px;
      color: hsl(var(--color-2));
      opacity: 0.6;
    }

    .hiw-result-info {
      flex: 1;
      min-width: 0;
    }

    .hiw-result-name {
      font-size: 11px;
      font-weight: 400;
      color: var(--gray-12);
      letter-spacing: -0.2px;
      margin-bottom: 2px;
    }

    .hiw-result-meta {
      font-size: 9px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }

    .hiw-result-actions {
      display: flex;
      gap: 6px;
      margin-top: 2px;
    }

    .hiw-result-btn {
      font-size: 10px;
      font-weight: 500;
      padding: 5px 14px;
      border-radius: var(--radius-full);
      border: none;
      cursor: pointer;
      letter-spacing: -0.1px;
      transition: background var(--duration-normal) var(--ease-default),
                  color var(--duration-normal) var(--ease-default);
    }

    .hiw-result-btn.primary {
      background: var(--accent-9);
      color: var(--accent-contrast);
    }

    .hiw-result-btn.secondary {
      background: var(--gray-a3);
      color: var(--gray-11);
      border: 1px solid var(--gray-a4);
    }

    /* ============================================================
       5. DAW TIMELINE
       ============================================================ */

    .daw-section {
      text-align: center;
    }

    .daw-hero {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--surface-1);
      font-family: var(--font-sans);
      letter-spacing: 0;
    }

    .daw-preview {
      display: flex;
      align-items: stretch;
      background: var(--gray-3);
      border-bottom: 1px solid var(--border-subtle);
      flex: 0 0 auto;
      height: 42%;
      max-height: 260px;
      min-height: 140px;
    }
    .daw-preview-video {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: var(--color-background);
      overflow: hidden;
    }
    .daw-preview-video-inner {
      position: relative;
      width: auto;
      height: 100%;
      aspect-ratio: 16 / 9;
      max-width: 100%;
      overflow: hidden;
    }
    .daw-preview-video-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .daw-preview-video-inner {
      position: relative;
      width: auto;
      height: 100%;
      aspect-ratio: 16 / 9;
      max-width: 100%;
      overflow: hidden;
    }
    .daw-preview-video-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .daw-preview-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      color: var(--text-muted);
    }
    .daw-preview-placeholder i { font-size: 32px; opacity: 0.4; }
    .daw-preview-placeholder span { font-size: 10px; letter-spacing: 0; }
    .daw-preview-timecode {
      position: absolute;
      bottom: 6px; left: 10px;
      font-family: var(--font-mono);
      font-size: 12px; font-weight: 400;
      color: var(--gray-12);
      background: var(--color-background);
      padding: 2px 6px; border-radius: var(--radius-full);
      letter-spacing: 0.04em;
    }
    .daw-preview-scene {
      position: absolute;
      top: 6px; left: 10px;
      font-size: 9px; font-weight: 400;
      color: var(--gray-a11);
      background: var(--surface-1);
      padding: 2px 6px; border-radius: var(--radius-1);
      letter-spacing: 0;
    }
    .daw-sidebar {
      width: 210px; min-width: 210px;
      display: flex; flex-direction: column;
      padding: var(--space-3) var(--space-4);
      gap: 6px;
      border-left: 1px solid var(--border-subtle);
      background: var(--gray-2);
      overflow: visible;
    }
    .daw-sidebar-title {
      font-size: 10px; font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .daw-sidebar-item {
      font-size: 11px; color: var(--gray-11);
      line-height: 1.4; letter-spacing: 0;
    }
    .daw-sidebar-label {
      color: var(--text-muted); font-size: 8px; letter-spacing: 0;
    }
    .daw-rerender {
      display: flex; flex-direction: column;
      align-items: stretch; gap: 3px;
      margin-top: auto;
      padding-top: 6px;
      border-top: 1px solid var(--border-subtle);
    }
    .daw-rerender-changes {
      font-size: 8px; color: var(--yellow-11);
      display: flex; align-items: center; gap: 3px;
      letter-spacing: 0;
      padding-bottom: 6px;
    }
    .daw-rerender-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 10px;
      height: 24px;
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 500;
      color: var(--gray-12);
      border: 1px solid transparent;
      outline: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-full);
      background:
        linear-gradient(#0a0a0a, #0a0a0a),
        linear-gradient(#0a0a0a 50%, rgba(10, 10, 10, 0.6) 80%, rgba(10, 10, 10, 0)),
        linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      background-clip: padding-box, border-box, border-box;
      background-origin: border-box;
      animation: rainbow 2s linear infinite;
      cursor: pointer;
      letter-spacing: 0;
      box-shadow: none;
      transition:
        transform var(--duration-fast) var(--ease-default),
        opacity 0.2s ease;
      z-index: 0;
    }
    .daw-rerender-btn::before {
      content: '';
      position: absolute;
      bottom: -20%;
      left: 50%;
      z-index: -1;
      height: 20%;
      width: 60%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      animation: rainbow 2s linear infinite;
      filter: blur(12px);
      opacity: 0.6;
    }
    .daw-rerender-btn:hover {
      transform: translateY(-1px);
    }
    .daw-rerender-btn:active {
      transform: scale(0.97);
    }
    .daw-rerender-btn:focus-visible {
      outline: none;
      box-shadow: none;
    }
    .daw-rerender-btn .logomark {
      width: 10px; height: 10px;
      margin-right: var(--space-1); flex-shrink: 0;
    }
    .daw-toolbar {
      display: flex;
      align-items: center;
      padding: var(--space-2) var(--space-4);
      border-bottom: 1px solid var(--border-subtle);
      border-top: 1px solid var(--border-subtle);
      background: var(--surface-2);
      gap: 6px;
      height: 34px;
      flex-shrink: 0;
    }
    .daw-transport { display: flex; gap: 2px; }
    .daw-tbtn {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border: none; background: transparent;
      color: var(--text-secondary); border-radius: var(--radius-3);
      cursor: pointer; font-size: 16px;
      transition: background var(--duration-normal) var(--ease-default),
                  color var(--duration-normal) var(--ease-default);
    }
    .daw-tbtn:hover { background: var(--surface-hover); color: var(--gray-11); }
    .daw-tbtn-active { color: var(--gray-12); background: var(--gray-a4); }
    .daw-sep { width: 1px; height: 18px; background: var(--border-subtle); margin: 0 var(--space-1); }
    .daw-timecode {
      font-family: var(--font-mono); font-size: 12px; font-weight: 500;
      color: var(--gray-12); letter-spacing: 0.04em;
      background: var(--gray-a3);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-full);
      padding: 3px 10px;
      min-width: 90px; text-align: center;
    }
    .daw-tgroup { display: flex; gap: 2px; }

    .daw-ruler {
      position: sticky;
      top: 0;
      z-index: 10;
      height: 26px;
      background: var(--gray-2);
      border-bottom: 1px solid var(--border-subtle);
      margin-left: 160px;
      flex-shrink: 0;
    }
    .daw-rmark {
      position: absolute; top: 0; bottom: 0; width: 1px;
      background: var(--gray-a4);
    }
    .daw-rmajor { background: var(--gray-a5); }
    .daw-rmajor span {
      position: absolute; top: 3px; left: var(--space-1);
      font-size: 8px; color: var(--text-muted);
      font-family: var(--font-mono); font-variant-numeric: tabular-nums;
      letter-spacing: 0;
    }
    .daw-playhead {
      position: absolute; top: 0; width: 1px; height: 100%;
      background: var(--red-9); z-index: 15;
    }
    .daw-playhead::before {
      content: ''; position: absolute; top: -1px; left: -5px;
      width: 0; height: 0;
      border-left: 5px solid transparent; border-right: 5px solid transparent;
      border-top: 7px solid var(--red-9);
    }

    .daw-body {
      flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .daw-playhead-line {
      position: absolute; top: 0; bottom: 0; width: 1px;
      background: var(--red-9); opacity: 0.4; z-index: 15;
      pointer-events: none;
    }

    .daw-track {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      min-height: 0;
      flex: 1;
    }
    .daw-track-scene { flex: 1.3; }

    .daw-thead {
      width: 160px; min-width: 160px;
      display: flex; align-items: center;
      padding: 0 var(--space-3); gap: var(--space-2);
      border-right: 1px solid var(--border-subtle);
      background: rgba(255, 255, 255, 0.01);
    }
    .daw-tcolor { width: 3px; height: 60%; border-radius: 2px; flex-shrink: 0; }
    .daw-ticon { font-size: 11px; flex-shrink: 0; }
    .daw-tinfo { flex: 1; min-width: 0; }
    .daw-tname { font-size: 11px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
    .daw-tmeta { font-size: 7px; color: var(--text-muted); letter-spacing: 0; }
    .daw-tctrls { display: flex; gap: 1px; }
    .daw-cbtn {
      width: 16px; height: 16px;
      display: flex; align-items: center; justify-content: center;
      border: none; background: transparent;
      color: var(--text-muted); border-radius: 2px;
      cursor: pointer; font-size: 7px; font-weight: 400;
      font-family: var(--font-sans);
    }
    .daw-cbtn:hover { background: var(--gray-a4); color: var(--gray-11); }
    .daw-cbtn-muted { color: var(--red-11); }
    .daw-cbtn-solo { color: var(--yellow-11); }

    .daw-lane {
      flex: 1; position: relative;
      padding: 2px 6px; min-height: 0;
    }
    .daw-lane::before {
      content: ''; position: absolute; inset: 0;
      background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 100px);
      pointer-events: none;
    }

    .daw-clip {
      position: absolute; top: 3px; bottom: 3px;
      border-radius: var(--radius-3); display: flex; align-items: center;
      padding: 0 8px; font-size: 10px; font-weight: 500;
      color: rgba(255, 255, 255, 0.85); overflow: hidden;
      white-space: nowrap; cursor: grab;
      transition: filter var(--duration-normal) var(--ease-default);
    }
    .daw-clip:hover { filter: brightness(1.15); }
    .daw-clabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
    .daw-clip-video { background: rgba(130, 100, 255, 0.35); outline: 1px solid rgba(130, 100, 255, 0.5); }
    .daw-clip-audio { background: rgba(45, 164, 78, 0.32); outline: 1px solid rgba(45, 164, 78, 0.5); }
    .daw-clip-music { background: rgba(59, 130, 246, 0.32); outline: 1px solid rgba(59, 130, 246, 0.5); }
    .daw-clip-text { background: rgba(212, 167, 44, 0.32); outline: 1px solid rgba(212, 167, 44, 0.5); }
    .daw-clip-effect { background: rgba(255, 100, 100, 0.32); outline: 1px solid rgba(255, 100, 100, 0.5); }
    .daw-clip-overlay { background: rgba(100, 220, 220, 0.28); outline: 1px solid rgba(100, 220, 220, 0.5); }
    .daw-clip-tr {
      background: rgba(212, 167, 44, 0.28); outline: 1px solid rgba(212, 167, 44, 0.45);
      justify-content: center; text-align: center;
    }

    .daw-waveform {
      position: absolute; inset: 0;
      padding: 0; opacity: 0.45; pointer-events: none;
      overflow: hidden;
    }
    .daw-waveform svg {
      width: 100%; height: 100%; display: block;
    }

    .daw-scene {
      position: absolute; top: 2px; bottom: 2px;
      border-radius: var(--radius-3); display: flex; flex-direction: column;
      justify-content: space-between; padding: 4px 8px 3px; gap: 1px;
      font-size: 10px; color: rgba(255, 255, 255, 0.85);
      background: rgba(130, 100, 255, 0.35); outline: 1px solid rgba(130, 100, 255, 0.5);
      overflow: hidden; cursor: default;
      transition: filter var(--duration-normal) var(--ease-default);
    }
    .daw-scene:hover { filter: brightness(1.15); }
    .daw-scene-sel { outline: 1.5px solid var(--accent-9); }
    .daw-scene-hdr { display: flex; align-items: center; gap: 3px; }
    .daw-snum { font-size: 7px; font-weight: 500; color: rgba(255, 255, 255, 0.5); letter-spacing: 0; }
    .daw-sbadge {
      display: inline-flex; padding: 0 var(--space-1);
      border-radius: 3px; font-size: 8px; font-weight: 400;
      letter-spacing: 0; line-height: 1.5; white-space: nowrap;
    }
    .daw-sb-full { background: rgba(130, 100, 255, 0.30); color: rgba(180, 160, 255, 0.95); }
    .daw-sb-ken { background: rgba(45, 164, 78, 0.30); color: rgba(120, 220, 140, 0.95); }
    .daw-sb-vid { background: rgba(59, 130, 246, 0.30); color: rgba(130, 180, 255, 0.95); }
    .daw-sb-char { background: rgba(255, 100, 100, 0.30); color: rgba(255, 160, 160, 0.95); }
    .daw-sb-split { background: rgba(212, 167, 44, 0.30); color: rgba(240, 210, 100, 0.95); }
    .daw-sb-plx { background: rgba(100, 220, 220, 0.30); color: rgba(160, 240, 240, 0.95); }
    .daw-sasset { font-size: 7px; color: rgba(255, 255, 255, 0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }

    .daw-context-menu {
      position: absolute;
      width: 180px;
      background: var(--gray-3);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-4);
      padding: var(--space-1) 0;
      font-size: 10px;
      z-index: 50;
      box-shadow: var(--shadow-4);
    }
    .daw-ctx-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      color: var(--gray-11);
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-default);
    }
    .daw-ctx-item:hover {
      background: var(--gray-a4);
      color: var(--gray-12);
    }
    .daw-ctx-icon {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .daw-ctx-icon i { font-size: 12px; }
    .daw-ctx-shortcut {
      font-size: 8px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      letter-spacing: 0;
    }
    .daw-ctx-separator {
      height: 1px;
      background: var(--border-subtle);
      margin: 3px 0;
    }

    .daw-status {
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-1) var(--space-4);
      border-top: 1px solid var(--border-subtle);
      background: var(--surface-2);
      font-size: 10px; color: var(--text-muted);
      letter-spacing: 0; flex-shrink: 0;
    }
    .daw-status i { font-size: 10px; margin-right: 2px; }

    .daw-section-centered {
      text-align: center;
    }
    .daw-feature-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
      margin-top: var(--space-8);
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .daw-feature-card {
      position: relative;
      background: #000000;
      border: none;
      border-right: 1px solid var(--border-subtle);
      border-radius: 0;
      padding: var(--space-6) 28px;
      text-align: left;
    }
    .daw-feature-card:last-child {
      border-right: none;
    }
    .daw-feature-card .daw-fc-icon {
      width: var(--space-6);
      height: var(--space-6);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-5);
      font-size: 22px;
      color: var(--gray-12);
      background: transparent;
    }
    .daw-feature-card .daw-fc-title {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: -0.3px;
      color: var(--gray-12);
      margin-bottom: 6px;
    }
    .daw-feature-card .daw-fc-desc {
      font-size: 14px;
      color: var(--gray-11);
      line-height: 1.6;
      letter-spacing: -0.2px;
    }

    /* ============================================================
       6. EDITING RULES ENGINE
       ============================================================ */

    .rules-engine-section {
      position: relative;
    }

    .rules-engine-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
      align-items: start;
      margin-top: var(--space-7);
    }

    .rules-engine-text {
      padding-top: 20px;
    }

    .rules-engine-text h3 {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: var(--space-3);
    }

    .rules-engine-text p {
      font-size: 14px;
      color: var(--gray-11);
      line-height: 1.65;
      letter-spacing: -0.2px;
      margin-bottom: var(--space-4);
    }

    .rules-stat-row {
      display: flex;
      gap: var(--space-5);
      margin-top: var(--space-5);
      margin-bottom: var(--space-5);
    }

    .rules-stat {
      display: flex;
      flex-direction: column;
    }

    .rules-stat-number {
      font-size: 36px;
      font-weight: 400;
      letter-spacing: -1.5px;
      line-height: 1;
      color: var(--gray-12);
    }

    .rules-stat-label {
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: -0.1px;
      margin-top: var(--space-1);
    }

    .rules-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: var(--space-4);
    }

    .rules-category-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-1) 10px;
      border-radius: var(--radius-full);
      background: var(--gray-2);
      border: 1px solid var(--gray-a4);
      font-size: 11px;
      color: var(--gray-11);
      letter-spacing: -0.1px;
    }

    .rules-category-chip i {
      font-size: 12px;
      color: var(--text-muted);
    }

    .rc-video       { background: rgb(18,32,52); border-color: rgba(59,130,246,0.35); color: rgba(140,185,255,0.95); }
    .rc-video i     { color: rgba(100,160,255,0.9); }
    .rc-transitions { background: rgb(30,20,46); border-color: rgba(168,85,247,0.35); color: rgba(200,165,255,0.95); }
    .rc-transitions i { color: rgba(185,140,255,0.9); }
    .rc-audio       { background: rgb(16,36,22); border-color: rgba(45,164,78,0.35); color: rgba(120,220,140,0.95); }
    .rc-audio i     { color: rgba(90,200,110,0.9); }
    .rc-subtitles   { background: rgb(40,34,14); border-color: rgba(234,179,8,0.35); color: rgba(250,220,100,0.95); }
    .rc-subtitles i { color: rgba(240,200,60,0.9); }
    .rc-color       { background: rgb(42,18,32); border-color: rgba(236,72,153,0.35); color: rgba(255,150,190,0.95); }
    .rc-color i     { color: rgba(245,120,175,0.9); }
    .rc-kenburns    { background: rgb(14,32,46); border-color: rgba(14,165,233,0.35); color: rgba(110,200,250,0.95); }
    .rc-kenburns i  { color: rgba(80,185,245,0.9); }
    .rc-watermark   { background: rgb(18,38,38); border-color: rgba(100,220,220,0.35); color: rgba(150,240,240,0.95); }
    .rc-watermark i { color: rgba(120,230,230,0.9); }
    .rc-effects     { background: rgb(44,26,14); border-color: rgba(249,115,22,0.35); color: rgba(255,175,110,0.95); }
    .rc-effects i   { color: rgba(250,150,80,0.9); }
    .rc-scenes      { background: rgb(28,22,46); border-color: rgba(139,92,246,0.35); color: rgba(185,155,255,0.95); }
    .rc-scenes i    { color: rgba(165,130,255,0.9); }
    .rc-voiceover   { background: rgb(44,18,22); border-color: rgba(244,63,94,0.35); color: rgba(255,140,155,0.95); }
    .rc-voiceover i { color: rgba(250,110,130,0.9); }
    .rc-music       { background: rgb(26,22,46); border-color: rgba(130,100,255,0.35); color: rgba(180,160,255,0.95); }
    .rc-music i     { color: rgba(160,140,255,0.9); }
    .rc-pacing      { background: rgb(34,34,32); border-color: rgba(255,255,255,0.30); color: rgba(255,255,255,0.85); }
    .rc-pacing i    { color: rgba(255,255,255,0.7); }

    .rules-mockup {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
    }

    .rules-mockup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px var(--space-4);
      background: var(--surface-2);
      border-bottom: 1px solid var(--border-subtle);
    }

    .rules-mockup-header-title {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .rules-mockup-header-title i {
      font-size: 14px;
      color: var(--accent-9);
    }

    .rules-mockup-header-badge {
      font-size: 9px;
      font-weight: 500;
      font-family: var(--font-mono);
      color: var(--text-muted);
      padding: 2px var(--space-2);
      border-radius: var(--radius-full);
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
    }

    .rules-mockup-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-subtle);
      padding: 0 var(--space-3);
      background: var(--gray-2);
      overflow-x: auto;
    }

    .rules-mockup-tab {
      padding: var(--space-2) var(--space-3);
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: -0.1px;
      white-space: nowrap;
      border-bottom: 1px solid transparent;
      transition: color var(--duration-normal) var(--ease-default),
                  border-color var(--duration-normal) var(--ease-default);
      cursor: pointer;
    }

    .rules-mockup-tab.active {
      color: var(--gray-12);
      border-bottom-color: var(--accent-9);
    }

    .rules-mockup-tab:hover:not(.active) {
      color: var(--gray-11);
    }

    .rules-mockup-body {
      padding: var(--space-3) var(--space-4);
      max-height: 520px;
      overflow-y: auto;
    }

    .rules-mockup-body::-webkit-scrollbar {
      width: 4px;
    }

    .rules-mockup-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .rules-mockup-body::-webkit-scrollbar-thumb {
      background: var(--gray-a5);
      border-radius: 2px;
    }

    .rules-group {
      margin-bottom: 14px;
    }

    .rules-group-title {
      font-size: 9px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: var(--space-2);
      padding-bottom: var(--space-1);
      border-bottom: 1px solid var(--gray-a3);
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .rules-group-title i {
      font-size: 10px;
    }

    .rs-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-1) 0;
      min-height: 24px;
    }

    .rs-label {
      font-size: 10px;
      color: var(--gray-11);
      letter-spacing: -0.1px;
      flex: 1;
    }

    .rs-value {
      font-size: 9px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      letter-spacing: 0;
    }

    .rs-toggle {
      width: 26px;
      height: 14px;
      border-radius: 7px;
      background: var(--gray-a5);
      position: relative;
      flex-shrink: 0;
    }

    .rs-toggle.on {
      background: var(--accent-9);
    }

    .rs-toggle::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text-muted);
      top: 2px;
      left: 2px;
      transition: left var(--duration-normal) var(--ease-spring),
                  background var(--duration-normal) var(--ease-spring);
    }

    .rs-toggle.on::after {
      left: 14px;
      background: var(--accent-contrast);
    }

    .rs-select {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      padding: 2px var(--space-2);
      border-radius: var(--radius-full);
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      letter-spacing: 0;
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .rs-select i {
      font-size: 8px;
      color: var(--text-muted);
    }

    .rs-slider {
      width: 80px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .rs-slider-track {
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: var(--gray-a5);
      position: relative;
    }

    .rs-slider-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--accent-9);
      position: relative;
    }

    .rs-slider-fill::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gray-12);
      border: 1.5px solid var(--accent-9);
      top: -2px;
      right: -3px;
    }

    .rs-swatch {
      width: 16px;
      height: 16px;
      border-radius: var(--radius-1);
      border: 1px solid var(--gray-a5);
      flex-shrink: 0;
    }

    .rs-input {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      padding: 2px 6px;
      border-radius: var(--radius-full);
      background: var(--gray-2);
      border: 1px solid var(--gray-a4);
      width: 54px;
      text-align: right;
      letter-spacing: 0;
    }

    .rules-mockup-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-4);
      border-top: 1px solid var(--border-subtle);
      background: var(--gray-2);
    }

    .rules-mockup-footer-text {
      font-size: 9px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .rules-mockup-footer-text i {
      font-size: 10px;
    }

    .rules-mockup-save {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-size: 10px;
      font-weight: 500;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      border: 1px solid transparent;
      outline: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(#0a0a0a, #0a0a0a),
        linear-gradient(#0a0a0a 50%, rgba(10, 10, 10, 0.6) 80%, rgba(10, 10, 10, 0)),
        linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      background-clip: padding-box, border-box, border-box;
      background-origin: border-box;
      animation: rainbow 2s linear infinite;
      color: var(--gray-12);
      cursor: pointer;
      letter-spacing: -0.1px;
      z-index: 0;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .rules-mockup-save::before {
      content: '';
      position: absolute;
      bottom: -20%;
      left: 50%;
      z-index: -1;
      height: 20%;
      width: 60%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      animation: rainbow 2s linear infinite;
      filter: blur(12px);
      opacity: 0.6;
    }
    .rules-mockup-save:hover {
      transform: translateY(-1px);
    }
    .rules-mockup-save:active {
      transform: scale(0.97);
    }
    .rules-mockup-save:focus-visible {
      outline: none;
      box-shadow: none;
    }
    .rules-mockup-save .logomark {
      width: 9px; height: 9px;
      flex-shrink: 0;
    }

    /* ── Rule Examples (below rules engine) ── */
    .rule-examples {
      margin-top: var(--space-8);
    }

    .rule-examples-heading {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: -0.8px;
      margin-bottom: 4px;
    }

    .rule-examples-desc {
      font-size: 13px;
      color: var(--gray-11);
      margin-bottom: var(--space-5);
      letter-spacing: -0.1px;
    }

    .rule-ex-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .rule-ex-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-3);
      flex-wrap: wrap;
    }

    .rule-ex-row.rule-ex-negative {
      border-color: rgba(244,63,94,0.25);
      background: rgba(244,63,94,0.04);
    }

    .rule-ex-keyword {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .rule-ex-negative .rule-ex-keyword {
      color: rgba(244,63,94,0.7);
    }

    .rule-ex-value {
      font-size: 12px;
      font-family: var(--font-mono);
      padding: 3px 10px;
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      border-radius: var(--radius-2);
      color: var(--gray-12);
      letter-spacing: 0;
      white-space: nowrap;
    }



    .rule-ex-arrow {
      font-size: 14px;
      color: var(--text-muted);
    }

    .rule-ex-toggle {
      width: 28px;
      height: 16px;
      border-radius: 8px;
      background: var(--accent-9);
      position: relative;
      flex-shrink: 0;
      margin-left: auto;
    }

    .rule-ex-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #0a0a0a;
    }

    .rule-ex-negative .rule-ex-toggle {
      background: rgba(244,63,94,0.5);
    }

    @media (max-width: 767px) {
      .rule-ex-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .rule-ex-row {
        padding: 8px 10px;
        gap: 6px;
      }
      .rule-ex-value {
        white-space: normal;
        font-size: 11px;
        padding: 2px 8px;
      }
      .rule-ex-keyword {
        font-size: 10px;
      }
      .rule-ex-arrow {
        font-size: 12px;
      }
      .rule-ex-toggle {
        width: 24px;
        height: 14px;
      }
      .rule-ex-toggle::after {
        width: 10px;
        height: 10px;
      }
      .rule-examples-heading {
        font-size: 18px;
      }
      .rule-examples-desc {
        font-size: 12px;
      }
    }

    /* ============================================================
       7. ASSET LIBRARY
       ============================================================ */

    .asset-library-section {
      position: relative;
    }

    .asset-library-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
      align-items: start;
      margin-top: var(--space-7);
    }

    .asset-library-text {
      padding-top: 20px;
      order: 2;
    }

    .asset-library-text h3 {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: var(--space-3);
    }

    .asset-library-text p {
      font-size: 14px;
      color: var(--gray-11);
      line-height: 1.65;
      letter-spacing: -0.2px;
      margin-bottom: var(--space-4);
    }

    .asset-stats-row {
      display: flex;
      gap: var(--space-5);
      margin-top: var(--space-5);
      margin-bottom: var(--space-5);
    }

    .asset-stat {
      display: flex;
      flex-direction: column;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-4);
      background: var(--gray-3);
      border: 1px solid var(--gray-a5);
      flex: 1;
    }

    .asset-stat-number {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: -0.8px;
      line-height: 1;
      color: #7ddc8c;
      font-family: var(--font-mono);
    }

    .asset-stat-label {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: -0.1px;
      margin-top: var(--space-1);
    }

    .asset-feature-list {
      list-style: none;
      margin-top: var(--space-4);
    }

    .asset-feature-list li {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 6px 0;
      font-size: 13px;
      color: var(--gray-11);
      letter-spacing: -0.2px;
    }

    .asset-feature-list li i {
      font-size: 14px;
      color: var(--accent-9);
      flex-shrink: 0;
    }

    /* Asset Library Mockup Panel */
    .al-mockup {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
      order: 1;
    }

    .al-mockup-toolbar {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 10px 14px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border-subtle);
    }

    .al-search {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: var(--radius-full);
      background: var(--gray-2);
      border: 1px solid var(--gray-a4);
    }

    .al-search i {
      font-size: 13px;
      color: var(--text-muted);
    }

    .al-search span {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: -0.1px;
    }

    .al-search-shortcut {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      padding: 1px 5px;
      border-radius: var(--radius-1);
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      margin-left: auto;
    }

    .al-toolbar-btn {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid var(--gray-a4);
      cursor: pointer;
      transition: color var(--duration-normal) var(--ease-default),
                  background var(--duration-normal) var(--ease-default);
    }

    .al-toolbar-btn:hover {
      color: var(--gray-11);
      background: var(--gray-a3);
    }

    .al-toolbar-btn.active {
      color: var(--accent-9);
      background: var(--accent-4);
      border-color: var(--gray-a6);
    }

    .al-filter-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: var(--space-2) 14px;
      border-bottom: 1px solid var(--border-subtle);
      overflow-x: auto;
    }

    .al-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: -0.1px;
      white-space: nowrap;
      cursor: pointer;
      transition: color var(--duration-normal) var(--ease-default),
                  background var(--duration-normal) var(--ease-default),
                  border-color var(--duration-normal) var(--ease-default);
      background: var(--gray-2);
      border: 1px solid var(--gray-a4);
      color: var(--gray-11);
    }

    .al-filter-chip.active {
      background: var(--accent-4);
      border-color: var(--gray-a6);
      color: var(--accent-9);
    }

    .al-filter-chip i {
      font-size: 11px;
    }

    .al-body {
      display: flex;
      min-height: 380px;
    }

    .al-sidebar {
      width: 140px;
      border-right: 1px solid var(--border-subtle);
      padding: var(--space-2) 0;
      background: rgba(255, 255, 255, 0.01);
    }

    .al-sidebar-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px var(--space-3);
      font-size: 10px;
      color: var(--gray-11);
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-default);
      letter-spacing: -0.1px;
    }

    .al-sidebar-item:hover {
      background: var(--gray-2);
    }

    .al-sidebar-item.active {
      background: var(--gray-a3);
      color: var(--gray-12);
    }

    .al-sidebar-item i {
      font-size: 12px;
      color: var(--text-muted);
    }

    .al-sidebar-item.active i {
      color: var(--accent-9);
    }

    .al-sidebar-count {
      font-size: 8px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      margin-left: auto;
    }

    .al-sidebar-divider {
      height: 1px;
      background: var(--border-subtle);
      margin: 6px var(--space-3);
    }

    .al-grid-area {
      flex: 1;
      padding: 10px;
    }

    .al-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-2);
    }

    .al-asset-card {
      border-radius: var(--radius-3);
      overflow: hidden;
      border: 1px solid var(--gray-a3);
      background: var(--surface-2);
      cursor: pointer;
      transition: border-color var(--duration-normal) var(--ease-default);
    }

    .al-asset-card:hover {
      border-color: var(--border-strong);
    }

    .al-asset-thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .al-asset-thumb i {
      font-size: 24px;
      opacity: 0.2;
    }

    .al-asset-thumb img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .al-asset-thumb .al-type-badge {
      position: absolute;
      top: var(--space-1);
      right: var(--space-1);
      font-size: 7px;
      font-weight: 400;
      padding: 1px 5px;
      border-radius: var(--radius-1);
      background: var(--surface-1);
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .al-asset-thumb .al-res-badge {
      position: absolute;
      bottom: var(--space-1);
      left: var(--space-1);
      font-size: 7px;
      font-weight: 500;
      padding: 1px 5px;
      border-radius: var(--radius-1);
      background: var(--surface-1);
      color: rgba(255, 255, 255, 0.6);
      font-family: var(--font-mono);
      letter-spacing: 0;
    }

    .al-asset-info {
      padding: 6px var(--space-2);
      border-top: 1px solid var(--gray-a3);
    }

    .al-asset-name {
      font-size: 9px;
      font-weight: 500;
      color: var(--gray-11);
      letter-spacing: -0.1px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 2px;
    }

    .al-asset-meta {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .al-asset-meta span {
      font-size: 8px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      letter-spacing: 0;
    }

    .al-asset-tag {
      font-size: 7px;
      padding: 0 5px;
      border-radius: var(--radius-full);
      line-height: 1.6;
      letter-spacing: 0;
      font-weight: 500;
    }

    .al-tag-anime { background: rgba(130, 100, 255, 0.15); color: rgba(180, 160, 255, 0.9); }
    .al-tag-nature { background: rgba(45, 164, 78, 0.15); color: rgba(120, 220, 140, 0.9); }
    .al-tag-action { background: rgba(229, 72, 77, 0.15); color: rgba(255, 140, 140, 0.9); }
    .al-tag-gaming { background: rgba(59, 130, 246, 0.15); color: rgba(130, 180, 255, 0.9); }
    .al-tag-bg { background: rgba(212, 167, 44, 0.15); color: rgba(240, 210, 100, 0.9); }
    .al-tag-sfx { background: rgba(100, 220, 220, 0.15); color: rgba(160, 240, 240, 0.9); }

    .al-mockup-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) 14px;
      border-top: 1px solid var(--border-subtle);
      background: var(--gray-2);
    }

    .al-footer-info {
      font-size: 9px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .al-footer-info i {
      font-size: 10px;
      margin-right: 2px;
    }

    .al-footer-pages {
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .al-footer-page {
      width: 20px;
      height: 18px;
      border-radius: var(--radius-1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      background: var(--gray-2);
      border: 1px solid var(--gray-a4);
      cursor: pointer;
    }

    .al-footer-page.active {
      color: var(--gray-12);
      background: var(--gray-a4);
      border-color: var(--gray-a5);
    }

    /* ── Asset Metadata Demo ── */
    .asset-meta-demo {
      margin-top: var(--space-8);
    }

    .asset-meta-demo-heading {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: -0.8px;
      margin-bottom: 4px;
    }

    .asset-meta-demo-desc {
      font-size: 13px;
      color: var(--gray-11);
      margin-bottom: var(--space-5);
      letter-spacing: -0.1px;
    }

    .asset-meta-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
      align-items: start;
    }

    .asset-meta-video-wrap {
      border-radius: var(--radius-4);
      overflow: hidden;
      border: 1px solid var(--border-subtle);
      background: #000;
      position: relative;
    }

    .asset-meta-video-wrap video {
      display: block;
      width: 100%;
      height: auto;
    }

    .asset-meta-video-label {
      position: absolute;
      bottom: 8px;
      left: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(8px);
      border-radius: var(--radius-2);
      font-size: 10px;
      color: rgba(255,255,255,0.8);
      font-family: var(--font-mono);
      letter-spacing: 0;
    }

    .asset-meta-panel {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-4);
      overflow: hidden;
      max-height: 520px;
      display: flex;
      flex-direction: column;
    }

    .asset-meta-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px var(--space-4);
      background: var(--surface-2);
      border-bottom: 1px solid var(--border-subtle);
    }

    .asset-meta-panel-title {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .asset-meta-panel-title i {
      font-size: 14px;
      color: var(--accent-9);
    }

    .asset-meta-panel-badge {
      font-size: 9px;
      font-weight: 500;
      font-family: var(--font-mono);
      color: var(--text-muted);
      padding: 2px var(--space-2);
      border-radius: var(--radius-full);
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
    }

    .asset-meta-body {
      padding: var(--space-3) var(--space-4);
      overflow-y: auto;
      flex: 1;
    }

    .asset-meta-body::-webkit-scrollbar {
      width: 4px;
    }

    .asset-meta-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .asset-meta-body::-webkit-scrollbar-thumb {
      background: var(--gray-a5);
      border-radius: 2px;
    }

    .am-group {
      margin-bottom: 14px;
    }

    .am-group-title {
      font-size: 9px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: var(--space-2);
      padding-bottom: var(--space-1);
      border-bottom: 1px solid var(--gray-a3);
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .am-group-title i {
      font-size: 10px;
    }

    .am-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 3px 0;
      min-height: 22px;
      gap: 8px;
    }

    .am-label {
      font-size: 10px;
      color: var(--gray-11);
      letter-spacing: -0.1px;
      flex-shrink: 0;
    }

    .am-value {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--gray-12);
      letter-spacing: 0;
      text-align: right;
    }

    .am-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: flex-end;
    }

    .am-tag {
      font-size: 9px;
      font-family: var(--font-mono);
      padding: 1px 7px;
      border-radius: var(--radius-full);
      letter-spacing: 0;
    }

    .am-tag-mood     { background: rgba(168,85,247,0.12); color: rgba(200,165,255,0.9); }
    .am-tag-content  { background: rgba(59,130,246,0.12);  color: rgba(140,185,255,0.9); }
    .am-tag-style    { background: rgba(234,179,8,0.12);   color: rgba(250,220,100,0.9); }
    .am-tag-subject  { background: rgba(45,164,78,0.12);   color: rgba(120,220,140,0.9); }
    .am-tag-setting  { background: rgba(14,165,233,0.12);  color: rgba(110,200,250,0.9); }
    .am-tag-action   { background: rgba(249,115,22,0.12);  color: rgba(255,175,110,0.9); }
    .am-tag-emotion  { background: rgba(244,63,94,0.12);   color: rgba(255,140,155,0.9); }

    .am-score-bar {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .am-score-track {
      width: 60px;
      height: 3px;
      border-radius: 2px;
      background: var(--gray-a5);
      position: relative;
    }

    .am-score-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--accent-9);
    }

    .am-score-num {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--gray-12);
    }

    @media (max-width: 767px) {
      .asset-meta-layout {
        grid-template-columns: 1fr;
      }
      .asset-meta-panel {
        max-height: none;
      }
    }

    /* ============================================================
       8. API & MCP SERVER
       ============================================================ */

    .api-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
    }

    .api-text {
      padding-top: var(--space-5);
    }

    .api-text h3 {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: var(--space-3);
    }

    .api-text p {
      font-size: 14px;
      color: var(--gray-11);
      line-height: 1.65;
      letter-spacing: -0.2px;
      margin-bottom: var(--space-4);
    }

    .api-badge-row {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-5);
      flex-wrap: wrap;
    }

    .api-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: -0.1px;
    }

    .api-badge i { font-size: 13px; }

    .api-badge-rest {
      background: rgba(59,130,246,0.12);
      color: rgba(130,180,255,0.9);
      border: 1px solid rgba(59,130,246,0.2);
    }

    .api-badge-mcp {
      background: rgba(130,100,255,0.12);
      color: rgba(180,160,255,0.9);
      border: 1px solid rgba(130,100,255,0.2);
    }

    .api-badge-ws {
      background: rgba(45,164,78,0.12);
      color: rgba(120,220,140,0.9);
      border: 1px solid rgba(45,164,78,0.2);
    }

    .api-endpoints {
      list-style: none;
      margin-top: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .api-endpoints li {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 10px var(--space-3);
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-3);
      font-size: 13px;
      color: var(--gray-11);
      letter-spacing: -0.2px;
    }

    .api-endpoints .method {
      font-size: 8px;
      font-weight: 500;
      font-family: var(--font-mono);
      padding: 2px 6px;
      border-radius: var(--radius-1);
      letter-spacing: 0.04em;
      flex-shrink: 0;
      min-width: 36px;
      text-align: center;
    }

    .api-endpoints .method-post { background: rgba(59,130,246,0.15); color: #6daaff; }
    .api-endpoints .method-get { background: rgba(45,164,78,0.15); color: #7ddc8c; }
    .api-endpoints .method-put { background: rgba(212,167,44,0.15); color: #f0d264; }
    .api-endpoints .method-del { background: rgba(229,72,77,0.15); color: #ff8c8c; }

    .api-endpoints .path {
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      letter-spacing: 0;
    }

    .api-endpoints .path-post { color: #6daaff; }
    .api-endpoints .path-get  { color: #7ddc8c; }
    .api-endpoints .path-put  { color: #f0d264; }
    .api-endpoints .path-del  { color: #ff8c8c; }

    .api-endpoints .ep-desc {
      font-size: 10px;
      color: var(--text-muted);
      margin-left: auto;
      white-space: nowrap;
    }

    /* === Dual-pane mockup: Code + Agent chat === */
    .api-mockup {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      min-width: 0;
      overflow: hidden;
    }

    /* --- Code panel --- */
    .api-code-panel {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
      min-width: 0;
    }

    .api-code-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 9px 14px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--surface-2);
    }

    .api-code-dots {
      display: flex;
      gap: 5px;
    }

    .api-code-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .api-code-dots span:nth-child(1) { background: #e5484d; opacity: 0.7; }
    .api-code-dots span:nth-child(2) { background: #d4a72c; opacity: 0.7; }
    .api-code-dots span:nth-child(3) { background: #2da44e; opacity: 0.7; }

    .api-code-tab {
      font-size: 10px;
      font-family: var(--font-mono);
      color: var(--gray-11);
      padding: 2px 10px;
      border-radius: var(--radius-full);
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      margin-left: var(--space-1);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .api-code-tab i { font-size: 11px; color: var(--text-muted); }

    .api-code-lang {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      margin-left: auto;
      padding: 1px 7px;
      border-radius: var(--radius-1);
      background: var(--gray-2);
    }

    .api-code-body {
      padding: 14px var(--space-4);
      font-size: 11px;
      font-family: var(--font-mono);
      line-height: 1.7;
      color: var(--gray-11);
      overflow-x: auto;
      letter-spacing: 0;
    }

    .api-code-body > div {
      white-space: nowrap;
    }

    .api-code-body .ln {
      color: var(--gray-a6);
      user-select: none;
      display: inline-block;
      width: 22px;
      text-align: right;
      margin-right: 14px;
    }

    .api-code-body .kw { color: #c678dd; }
    .api-code-body .fn { color: #61afef; }
    .api-code-body .str { color: #98c379; }
    .api-code-body .num { color: #d19a66; }
    .api-code-body .cm { color: rgba(255,255,255,0.22); font-style: italic; }
    .api-code-body .key { color: #e5c07b; }
    .api-code-body .op { color: #56b6c2; }
    .api-code-body .par { color: rgba(255,255,255,0.35); }

    .api-code-status {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 7px 14px;
      border-top: 1px solid var(--border-subtle);
      background: var(--gray-2);
    }

    .api-code-status .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2da44e;
    }

    .api-code-status span {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--text-muted);
    }

    .api-code-status .status-code {
      color: #2da44e;
      font-weight: 400;
    }

    .api-code-status .latency {
      margin-left: auto;
    }

    /* --- MCP Agent chat panel --- */
    .mcp-chat-panel {
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
    }

    .mcp-chat-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 9px 14px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--surface-2);
    }

    .mcp-chat-header i {
      font-size: 14px;
      color: hsl(var(--color-2));
    }

    .mcp-chat-header span {
      font-size: 11px;
      font-weight: 400;
      color: var(--gray-12);
      letter-spacing: -0.2px;
    }

    .mcp-badge {
      font-size: 8px;
      font-weight: 400;
      font-family: var(--font-mono);
      padding: 2px 7px;
      border-radius: var(--radius-full);
      background: rgba(130,100,255,0.12);
      color: rgba(180,160,255,0.9);
      border: 1px solid rgba(130,100,255,0.2);
      margin-left: auto;
      letter-spacing: 0.03em;
    }

    .mcp-chat-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mcp-msg {
      max-width: 88%;
      padding: var(--space-2) var(--space-3);
      border-radius: 10px;
      font-size: 11px;
      line-height: 1.55;
      letter-spacing: -0.1px;
    }

    .mcp-msg-user {
      align-self: flex-end;
      background: rgba(59,130,246,0.15);
      border: 1px solid rgba(59,130,246,0.2);
      color: rgba(180,210,255,0.95);
      border-bottom-right-radius: var(--radius-1);
    }

    .mcp-msg-agent {
      align-self: flex-start;
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      color: var(--gray-11);
      border-bottom-left-radius: var(--radius-1);
    }

    .mcp-msg-label {
      font-size: 8px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 3px;
      display: block;
    }

    .mcp-msg-user .mcp-msg-label { color: rgba(130,180,255,0.6); }
    .mcp-msg-agent .mcp-msg-label { color: rgba(180,160,255,0.6); }

    .mcp-tool-call {
      background: rgba(0,0,0,0.25);
      border-radius: 0px;
      padding: var(--space-2) 10px;
      margin-top: 6px;
      font-family: var(--font-mono);
      font-size: 9px;
      line-height: 1.6;
      color: var(--gray-11);
      border: 1px solid var(--gray-a3);
    }

    .mcp-tool-call .tool-name {
      color: #61afef;
      font-weight: 400;
    }

    .mcp-tool-call .tool-key { color: #e5c07b; }
    .mcp-tool-call .tool-str { color: #98c379; }
    .mcp-tool-call .tool-num { color: #d19a66; }
    .mcp-tool-call .tool-bool { color: #c678dd; }

    .mcp-tool-result {
      background: rgba(45,164,78,0.06);
      border: 1px solid rgba(45,164,78,0.12);
      border-radius: 0px;
      padding: 6px 10px;
      margin-top: 6px;
      font-family: var(--font-mono);
      font-size: 9px;
      line-height: 1.5;
      color: rgba(120,220,140,0.85);
    }

    .mcp-tool-result i {
      font-size: 10px;
      margin-right: var(--space-1);
    }

    .mcp-chat-footer {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 14px;
      border-top: 1px solid var(--border-subtle);
      background: var(--gray-2);
    }

    .mcp-chat-input {
      flex: 1;
      font-size: 10px;
      color: var(--text-muted);
      padding: 5px 10px;
      border-radius: var(--radius-full);
      background: var(--gray-2);
      border: 1px solid var(--gray-a4);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mcp-chat-input i { font-size: 12px; }

    .mcp-chat-send {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-full);
      background: rgba(130,100,255,0.15);
      border: 1px solid rgba(130,100,255,0.25);
      color: rgba(180,160,255,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      transition: background var(--duration-normal) var(--ease-default);
    }

    .mcp-chat-send:hover {
      background: rgba(130,100,255,0.25);
    }

    /* ============================================================
       9. CARD STACK
       ============================================================ */

    .card-stack-section {
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .card-stack-stage {
      position: relative;
      width: 100%;
      height: 380px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: visible;
      margin-top: calc(-1 * var(--space-4));
    }

    .stack-card {
      position: absolute;
      bottom: 0;
      width: 420px;
      height: 280px;
      border-radius: var(--radius-5);
      border: 1px solid var(--border-subtle);
      overflow: hidden;
      box-shadow: var(--shadow-2);
      transition: transform var(--duration-complex) cubic-bezier(0.22, 1, 0.36, 1),
                  opacity var(--duration-complex) cubic-bezier(0.22, 1, 0.36, 1);
      cursor: pointer;
      will-change: transform;
      background: var(--surface-1);
    }

    .stack-card.active {
      cursor: grab;
      z-index: 100;
    }

    .stack-card .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: var(--radius-5);
    }

    .stack-card .card-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: var(--text-muted);
      letter-spacing: 0;
    }

    .stack-card .card-gradient-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      pointer-events: none;
    }

    .stack-card .card-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: var(--space-4) var(--space-5);
      z-index: 5;
    }

    .stack-card .card-info h4 {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: -0.5px;
      color: var(--gray-12);
    }

    .stack-card .card-info p {
      font-size: 12px;
      color: var(--gray-a11);
      letter-spacing: 0;
      margin-top: 2px;
    }

    .stack-card .card-tag {
      position: absolute;
      top: var(--space-3);
      left: var(--space-3);
      padding: 3px var(--space-3);
      border-radius: var(--radius-full);
      background: var(--surface-1);
      border: 1px solid var(--border-subtle);
      font-size: 11px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: 0;
    }

    .card-stack-dots {
      display: flex;
      justify-content: center;
      gap: var(--space-2);
      margin-top: var(--space-5);
    }

    .card-stack-dots button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: none;
      background: var(--gray-a6);
      cursor: pointer;
      transition: background var(--duration-slow) var(--ease-default),
                  transform var(--duration-slow) var(--ease-default);
    }

    .card-stack-dots button.active {
      background: var(--gray-12);
      transform: scale(1.3);
    }

    .card-stack-dots button:hover:not(.active) {
      background: var(--gray-a9);
    }

    /* ============================================================
       9b. CREATIVE TOOLKIT - Tabbed preview gallery
       ============================================================ */

    .toolkit-section {
      text-align: center;
    }

    .toolkit-tabs {
      display: flex;
      justify-content: center;
      gap: var(--space-2);
      margin: var(--space-6) auto 0;
      flex-wrap: wrap;
    }

    .toolkit-tab {
      padding: 8px 20px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: transparent;
      color: var(--text-muted);
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: all var(--duration-slow) var(--ease-default);
    }

    .toolkit-tab:hover {
      color: var(--text-primary);
      border-color: var(--gray-a8);
    }

    .toolkit-tab.active {
      background: var(--gray-12);
      color: var(--gray-1);
      border-color: var(--gray-12);
    }

    .toolkit-panel {
      display: none;
    }

    .toolkit-panel.active {
      display: block;
    }

    .toolkit-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
      margin-top: var(--space-6);
    }

    .toolkit-card {
      border-radius: var(--radius-4);
      border: 1px solid var(--border-subtle);
      overflow: hidden;
      background: var(--surface-1);
      transition: border-color var(--duration-slow) var(--ease-default),
                  box-shadow var(--duration-slow) var(--ease-default);
      text-align: left;
    }

    .toolkit-card:hover {
      border-color: var(--gray-a8);
      box-shadow: var(--shadow-2);
    }

    .toolkit-card-preview {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: var(--gray-2);
    }

    .toolkit-card-preview video,
    .toolkit-card-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* play-hint removed - LUT cards autoplay on hover without overlay */

    .toolkit-card-info {
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
    }

    .toolkit-card-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      letter-spacing: -0.2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .toolkit-badge {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* LUT category badges */
    .badge-warm { background: rgba(255, 160, 60, 0.15); color: #ffa03c; }
    .badge-cool { background: rgba(100, 160, 255, 0.15); color: #64a0ff; }
    .badge-bw   { background: rgba(180, 180, 180, 0.15); color: #b4b4b4; }
    .badge-stylized { background: rgba(200, 120, 255, 0.15); color: #c878ff; }
    .badge-cinematic { background: rgba(255, 200, 80, 0.15); color: #ffc850; }

    /* Scene cards now use video preview format - old icon styles removed */

    /* Caption style preview cards - real animated styles from design system */
    .caption-card-preview {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: url('/caption-bg-poster.jpg') center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .caption-card-preview video.caption-bg-video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 1;
      display: none;
    }
    .caption-card-preview .caption-text-group { z-index: 2; position: relative; }

    /* Hover / Tap to Preview badge */
    .hover-preview-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: var(--space-3);
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(99, 102, 241, 0.15);
      border: 1px solid rgba(99, 102, 241, 0.3);
      color: #a5b4fc;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.03em;
    }

    /* Integrations section */
    .integrations-mockup {
      max-width: 480px;
      margin: var(--space-6, 32px) auto 0;
      border-radius: var(--radius-5, 12px);
      border: 1px solid var(--gray-a6, rgba(255, 255, 255, 0.16));
      background: var(--gray-2, #0a0a0a);
      padding: var(--space-5, 24px);
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    .mockup-header {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: var(--space-4, 16px);
      padding-bottom: var(--space-3, 12px);
      border-bottom: 1px solid var(--gray-a6, rgba(255, 255, 255, 0.16));
    }
    .mockup-dot {
      width: 7px; height: 7px; border-radius: var(--radius-full, 9999px);
    }
    .mockup-dot.red { background: #ff5f57; }
    .mockup-dot.yellow { background: #febc2e; }
    .mockup-dot.green { background: #28c840; }
    .mockup-title {
      font-size: 12px; font-weight: 500; color: var(--gray-11, #8b919a);
      margin-left: 8px; letter-spacing: 0.02em;
    }
    .mockup-source-list {
      display: flex; flex-direction: column; gap: 2px;
    }
    .mockup-source-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px var(--space-3, 12px);
      border-radius: var(--radius-3, 6px);
      background: transparent;
      opacity: 0;
      transform: translateY(6px);
      transition: background var(--duration-normal, 150ms) var(--ease-default, ease),
                  opacity 400ms ease, transform 400ms ease;
      cursor: default;
    }
    .mockup-source-row.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .mockup-source-row.active {
      background: var(--gray-a4, rgba(255, 255, 255, 0.06));
    }
    .mockup-source-row.focused {
      background: rgba(255, 255, 255, 0.10);
    }
    .mockup-source-logo {
      width: 24px; height: 24px;
      flex-shrink: 0; object-fit: contain; object-position: center;
      opacity: 0.4;
      transition: opacity var(--duration-normal, 150ms) ease;
    }
    .mockup-source-logo.wide {
      width: 90px; height: 22px;
    }
    .mockup-source-logo.extra-wide {
      width: 120px; height: 22px;
    }
    .mockup-source-logo.extra-wide-lg {
      width: 140px; height: 22px;
    }
    .mockup-source-row.active .mockup-source-logo {
      opacity: 1;
    }
    .mockup-source-name {
      font-size: 13px; font-weight: 500; color: var(--gray-11, #8b919a);
      transition: color var(--duration-normal, 150ms) ease;
    }
    .mockup-source-row.active .mockup-source-name {
      color: var(--gray-12, #ffffff);
    }
    .mockup-source-count {
      font-size: 11px; color: var(--gray-10, #6e747d);
      margin-left: auto; margin-right: 8px;
      font-family: var(--font-mono, 'Space Mono', monospace);
    }
    .mockup-source-check {
      width: 16px; height: 16px;
      border-radius: var(--radius-2, 4px);
      border: 1px solid var(--gray-a6, rgba(255, 255, 255, 0.16));
      display: flex; align-items: center; justify-content: center;
      transition: all var(--duration-normal, 150ms) ease;
      background: transparent; flex-shrink: 0;
    }
    .mockup-source-row.active .mockup-source-check {
      background: var(--gray-12, #ffffff);
      border-color: var(--gray-12, #ffffff);
    }
    .mockup-source-check svg {
      width: 10px; height: 10px; opacity: 0;
      transition: opacity var(--duration-normal, 150ms) ease;
    }
    .mockup-source-row.active .mockup-source-check svg { opacity: 1; }
    .mockup-source-row.active .mockup-source-check svg path { stroke: #000000; }
    .mockup-footer {
      margin-top: var(--space-4, 16px);
      padding-top: var(--space-3, 12px);
      border-top: 1px solid var(--gray-a6, rgba(255, 255, 255, 0.16));
      display: flex; align-items: center; justify-content: space-between;
    }
    .mockup-footer-text {
      font-size: 12px; color: var(--gray-11, #8b919a);
    }
    .mockup-footer-text strong {
      color: var(--gray-12, #ffffff); font-weight: 600;
    }
    .mockup-btn {
      padding: 0 12px; height: 28px;
      border-radius: var(--radius-full, 9999px);
      background: var(--gray-12, #ffffff);
      color: #000000;
      font-size: 13px; font-weight: 500;
      border: 1px solid rgba(255, 255, 255, 0.9);
      cursor: default; letter-spacing: -0.2px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .mockup-btn-logomark {
      width: 16px; height: 14px; color: #000000; flex-shrink: 0;
    }
    @media (max-width: 480px) {
      .integrations-mockup { margin-left: 0; margin-right: 0; }
    }
    .hover-preview-badge .badge-mobile { display: none; }
    .hover-preview-badge .badge-desktop { display: inline; }
    @media (max-width: 768px) {
      .hover-preview-badge .badge-mobile { display: inline; }
      .hover-preview-badge .badge-desktop { display: none; }
    }

    .caption-text-group {
      display: flex;
      gap: 6px;
      font-size: 18px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
      z-index: 2;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 90%;
    }
    .caption-text-group .word { color: #fff; display: inline-block; }

    /* 1. AVG Short-Form Karaoke */
    .caption-card:hover .caption-avg-karaoke .word { animation: capAVGK 2s ease infinite; }
    .caption-card:hover .caption-avg-karaoke .word:nth-child(2) { animation-delay: 0.5s; }
    .caption-card:hover .caption-avg-karaoke .word:nth-child(3) { animation-delay: 1.0s; }
    .caption-card:hover .caption-avg-karaoke .word:nth-child(4) { animation-delay: 1.5s; }
    .caption-avg-karaoke .word { color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.9); font-family: 'Georgia', serif; font-style: italic; }
    @keyframes capAVGK { 0%,20%{color:#fff} 25%,45%{color:#FFD700;text-shadow:2px 2px 4px rgba(0,0,0,0.9),0 0 10px rgba(255,215,0,0.5)} 50%,100%{color:#fff} }

    /* 2. AVG Long-Form Classic */
    .caption-avg-longform .word { color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,0.8); font-weight: 800; letter-spacing: 0.04em; font-size: 17px; text-transform: uppercase; }
    .caption-card:hover .caption-avg-longform .word { animation: capAVGLF 3s ease infinite; opacity: 0; }
    .caption-card:hover .caption-avg-longform .word:nth-child(2) { animation-delay: 0.05s; }
    .caption-card:hover .caption-avg-longform .word:nth-child(3) { animation-delay: 0.1s; }
    .caption-card:hover .caption-avg-longform .word:nth-child(4) { animation-delay: 0.15s; }
    @keyframes capAVGLF { 0%{opacity:0} 15%,75%{opacity:1} 90%,100%{opacity:0} }

    /* 3. pycaps Default */
    .caption-pycaps-default .word { color: #fff; font-weight: 500; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }
    .caption-card:hover .caption-pycaps-default .word { animation: capPyDef 2s ease infinite; }
    .caption-card:hover .caption-pycaps-default .word:nth-child(2) { animation-delay: 0.5s; }
    .caption-card:hover .caption-pycaps-default .word:nth-child(3) { animation-delay: 1.0s; }
    .caption-card:hover .caption-pycaps-default .word:nth-child(4) { animation-delay: 1.5s; }
    @keyframes capPyDef { 0%,20%{color:#fff} 25%,45%{color:#60A5FA;text-shadow:1px 1px 3px rgba(0,0,0,0.7),0 0 6px rgba(96,165,250,0.4)} 50%,100%{color:#fff} }

    /* 4. pycaps Explosive */
    .caption-pycaps-explosive .word { color: #FF4444; font-weight: 900; font-size: 20px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; }
    .caption-card:hover .caption-pycaps-explosive .word { animation: capPyExpl 2.5s cubic-bezier(0.34,1.56,0.64,1) infinite; transform: scale(0); }
    .caption-card:hover .caption-pycaps-explosive .word:nth-child(1) { animation-delay: 0s; }
    .caption-card:hover .caption-pycaps-explosive .word:nth-child(2) { animation-delay: 0.25s; }
    .caption-card:hover .caption-pycaps-explosive .word:nth-child(3) { animation-delay: 0.5s; }
    .caption-card:hover .caption-pycaps-explosive .word:nth-child(4) { animation-delay: 0.75s; }
    @keyframes capPyExpl { 0%{transform:scale(0) rotate(-5deg);opacity:0} 15%{transform:scale(1.3) rotate(2deg);opacity:1} 25%{transform:scale(0.95) rotate(-1deg)} 35%,65%{transform:scale(1) rotate(0);opacity:1} 85%,100%{transform:scale(0) rotate(5deg);opacity:0} }

    /* 5. pycaps Hype */
    .caption-pycaps-hype .word { font-family: 'Comic Sans MS', 'Chalkboard SE', cursive; color: #FF69B4; font-weight: 500; font-size: 19px; text-shadow: 2px 2px 0 #000; }
    .caption-card:hover .caption-pycaps-hype .word { animation: capPyHype 2.5s cubic-bezier(0.34,1.56,0.64,1) infinite; transform: scale(0) rotate(-10deg); }
    .caption-card:hover .caption-pycaps-hype .word:nth-child(1) { animation-delay: 0s; }
    .caption-card:hover .caption-pycaps-hype .word:nth-child(2) { animation-delay: 0.3s; }
    .caption-card:hover .caption-pycaps-hype .word:nth-child(3) { animation-delay: 0.6s; }
    .caption-card:hover .caption-pycaps-hype .word:nth-child(4) { animation-delay: 0.9s; }
    @keyframes capPyHype { 0%{transform:scale(0) rotate(-10deg);opacity:0} 20%{transform:scale(1.15) rotate(3deg);opacity:1} 30%,65%{transform:scale(1) rotate(0);opacity:1} 85%,100%{transform:scale(0) rotate(10deg);opacity:0} }

    /* 6. pycaps Line Focus */
    .caption-pycaps-linefocus { flex-direction: column; gap: 3px; align-items: center; }
    .caption-pycaps-linefocus .word { font-size: 16px; opacity: 0.3; transition: opacity 0.3s ease; }
    .caption-card:hover .caption-pycaps-linefocus .word { animation: capPyLF 3s ease infinite; }
    .caption-card:hover .caption-pycaps-linefocus .word:nth-child(2) { animation-delay: 1s; }
    .caption-card:hover .caption-pycaps-linefocus .word:nth-child(3) { animation-delay: 2s; }
    @keyframes capPyLF { 0%,10%{opacity:0.3;transform:scale(1)} 15%,30%{opacity:1;transform:scale(1.05)} 35%,100%{opacity:0.3;transform:scale(1)} }

    /* 7. pycaps Minimalist */
    .caption-pycaps-minimalist .word { font-size: 14px; font-weight: 400; text-transform: lowercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); text-shadow: none; }
    .caption-card:hover .caption-pycaps-minimalist .word { animation: capPyMin 2.5s ease infinite; opacity: 0; }
    .caption-card:hover .caption-pycaps-minimalist .word:nth-child(2) { animation-delay: 0.1s; }
    .caption-card:hover .caption-pycaps-minimalist .word:nth-child(3) { animation-delay: 0.2s; }
    .caption-card:hover .caption-pycaps-minimalist .word:nth-child(4) { animation-delay: 0.3s; }
    @keyframes capPyMin { 0%{opacity:0} 20%,70%{opacity:0.85} 90%,100%{opacity:0} }

    /* 8. pycaps Neo-Minimal */
    .caption-pycaps-neomin .word { font-size: 16px; font-weight: 300; letter-spacing: 0.06em; color: #ffffff; text-shadow: none; }
    .caption-card:hover .caption-pycaps-neomin .word { animation: capPyNeo 2.5s ease infinite; opacity: 0; transform: scale(0.95); }
    .caption-card:hover .caption-pycaps-neomin .word:nth-child(2) { animation-delay: 0.12s; }
    .caption-card:hover .caption-pycaps-neomin .word:nth-child(3) { animation-delay: 0.24s; }
    .caption-card:hover .caption-pycaps-neomin .word:nth-child(4) { animation-delay: 0.36s; }
    @keyframes capPyNeo { 0%{opacity:0;transform:scale(0.95)} 20%,70%{opacity:1;transform:scale(1)} 90%,100%{opacity:0;transform:scale(0.95)} }

    /* 9. pycaps Retro Gaming */
    .caption-pycaps-retro .word { font-family: 'Courier New', 'Lucida Console', monospace; font-size: 14px; color: #00FF88; text-shadow: 0 0 6px rgba(0,255,136,0.5); letter-spacing: 0.06em; }
    .caption-card:hover .caption-pycaps-retro .word { animation: capPyRetro 2.5s steps(20, end) infinite; white-space: nowrap; clip-path: inset(0 100% 0 0); }
    .caption-card:hover .caption-pycaps-retro .word:nth-child(1) { animation-delay: 0s; }
    .caption-card:hover .caption-pycaps-retro .word:nth-child(2) { animation-delay: 0.6s; }
    .caption-card:hover .caption-pycaps-retro .word:nth-child(3) { animation-delay: 1.2s; }
    @keyframes capPyRetro { 0%{clip-path:inset(0 100% 0 0);opacity:1} 30%,65%{clip-path:inset(0 0 0 0);opacity:1} 80%,100%{clip-path:inset(0 100% 0 0);opacity:0.5} }

    /* 10. pycaps Vibrant */
    .caption-pycaps-vibrant .word:nth-child(1) { color: #FF6B6B; }
    .caption-pycaps-vibrant .word:nth-child(2) { color: #4ECDC4; }
    .caption-pycaps-vibrant .word:nth-child(3) { color: #FFE66D; }
    .caption-pycaps-vibrant .word:nth-child(4) { color: #A78BFA; }
    .caption-pycaps-vibrant .word { font-weight: 900; font-size: 19px; text-shadow: 2px 2px 0 #000; }
    .caption-card:hover .caption-pycaps-vibrant .word { animation: capPyVib 2.5s cubic-bezier(0.34,1.56,0.64,1) infinite; transform: scale(0); }
    .caption-card:hover .caption-pycaps-vibrant .word:nth-child(1) { animation-delay: 0s; }
    .caption-card:hover .caption-pycaps-vibrant .word:nth-child(2) { animation-delay: 0.2s; }
    .caption-card:hover .caption-pycaps-vibrant .word:nth-child(3) { animation-delay: 0.4s; }
    .caption-card:hover .caption-pycaps-vibrant .word:nth-child(4) { animation-delay: 0.6s; }
    @keyframes capPyVib { 0%{transform:scale(0);opacity:0} 15%{transform:scale(1.2);opacity:1} 25%,70%{transform:scale(1);opacity:1} 85%,100%{transform:scale(0);opacity:0} }

    /* 11. pycaps Word Focus */
    .caption-pycaps-wordfocus .word { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.4); transition: all 0.3s ease; }
    .caption-card:hover .caption-pycaps-wordfocus .word { animation: capPyWF 2.5s ease infinite; }
    .caption-card:hover .caption-pycaps-wordfocus .word:nth-child(2) { animation-delay: 0.6s; }
    .caption-card:hover .caption-pycaps-wordfocus .word:nth-child(3) { animation-delay: 1.2s; }
    .caption-card:hover .caption-pycaps-wordfocus .word:nth-child(4) { animation-delay: 1.8s; }
    @keyframes capPyWF { 0%,15%{transform:scale(1);color:rgba(255,255,255,0.4)} 20%,35%{transform:scale(1.43);color:#FF9F43;text-shadow:0 0 8px rgba(255,159,67,0.4)} 40%,100%{transform:scale(1);color:rgba(255,255,255,0.4)} }

    /* 12. Bounce Pop */
    .caption-card:hover .caption-bounce .word { animation: capBounce 2.5s cubic-bezier(0.34,1.56,0.64,1) infinite; transform: translateY(40px); opacity: 0; }
    .caption-card:hover .caption-bounce .word:nth-child(2) { animation-delay: 0.2s; }
    .caption-card:hover .caption-bounce .word:nth-child(3) { animation-delay: 0.4s; }
    .caption-card:hover .caption-bounce .word:nth-child(4) { animation-delay: 0.6s; }
    @keyframes capBounce { 0%{transform:translateY(40px);opacity:0} 20%{transform:translateY(-8px);opacity:1} 30%{transform:translateY(3px)} 40%,65%{transform:translateY(0);opacity:1} 85%,100%{transform:translateY(-20px);opacity:0} }

    /* 13. Cinematic Slide */
    .caption-cinematic .word { font-size: 17px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
    .caption-card:hover .caption-cinematic .word { animation: capCine 3s ease infinite; opacity: 0; transform: translateY(15px); }
    .caption-card:hover .caption-cinematic .word:nth-child(2) { animation-delay: 0.08s; }
    .caption-card:hover .caption-cinematic .word:nth-child(3) { animation-delay: 0.16s; }
    .caption-card:hover .caption-cinematic .word:nth-child(4) { animation-delay: 0.24s; }
    @keyframes capCine { 0%{opacity:0;transform:translateY(15px)} 15%,75%{opacity:0.9;transform:translateY(0)} 90%,100%{opacity:0;transform:translateY(-8px)} }

    /* 14. Typewriter */
    .caption-typewriter .word { font-family: 'Courier New', monospace; font-size: 16px; color: #E0E0E0; text-shadow: none; }
    .caption-card:hover .caption-typewriter .word { animation: capTW 2.5s steps(20, end) infinite; white-space: nowrap; display: inline-block; clip-path: inset(0 100% 0 0); }
    .caption-card:hover .caption-typewriter .word:nth-child(1) { animation-delay: 0s; }
    .caption-card:hover .caption-typewriter .word:nth-child(2) { animation-delay: 0.6s; }
    .caption-card:hover .caption-typewriter .word:nth-child(3) { animation-delay: 1.2s; }
    @keyframes capTW { 0%{clip-path:inset(0 100% 0 0)} 30%,65%{clip-path:inset(0 0 0 0)} 80%,100%{clip-path:inset(0 100% 0 0)} }

    /* 15. AVG Word-by-Word */
    .caption-avg-wordbyword .word { color: #fcea2a; font-weight: 800; font-size: 20px; text-shadow: 2px 2px 0 rgba(0,0,0,0.9), -1px -1px 0 rgba(0,0,0,0.5); }
    .caption-card:hover .caption-avg-wordbyword .word { animation: capAVGWBW 2.5s ease infinite; }
    .caption-card:hover .caption-avg-wordbyword .word:nth-child(1) { animation-delay: 0s; }
    .caption-card:hover .caption-avg-wordbyword .word:nth-child(2) { animation-delay: 0.5s; }
    .caption-card:hover .caption-avg-wordbyword .word:nth-child(3) { animation-delay: 1.0s; }
    .caption-card:hover .caption-avg-wordbyword .word:nth-child(4) { animation-delay: 1.5s; }
    @keyframes capAVGWBW { 0%{transform:scale(0.8);opacity:0} 10%{transform:scale(1);opacity:1} 35%,42%{transform:scale(1);opacity:1} 50%{transform:scale(0.8);opacity:0} 100%{transform:scale(0.8);opacity:0} }

    /* 16. Highlight Box */
    .caption-highlight-box { gap: 6px; }
    .caption-highlight-box .word { color: #fff; font-weight: 800; font-size: 18px; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); background: transparent; padding: 4px 10px; border-radius: 6px; margin: 0; letter-spacing: 0.03em; display: inline-block; }
    .caption-card:hover .caption-highlight-box .word { animation: capHB 2.5s ease infinite; }
    .caption-card:hover .caption-highlight-box .word:nth-child(2) { animation-delay: 0.625s; }
    .caption-card:hover .caption-highlight-box .word:nth-child(3) { animation-delay: 1.25s; }
    .caption-card:hover .caption-highlight-box .word:nth-child(4) { animation-delay: 1.875s; }
    @keyframes capHB { 0%,20%{background:transparent;color:#fff;transform:scale(1)} 25%,45%{background:rgba(232,67,147,0.90);color:#fff;transform:scale(1.05);border-radius:6px} 50%,100%{background:transparent;color:#fff;transform:scale(1)} }

    .toolkit-upload-note {
      margin-top: 16px;
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .toolkit-upload-note i { font-size: 14px; color: var(--accent-primary); }

    @media (max-width: 1024px) {
      .toolkit-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 767px) {
      .toolkit-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .toolkit-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
       9c. SOUND EFFECTS LIBRARY
       ============================================================ */

    .sfx-section {
      background: var(--gray-1);
    }

    .sfx-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: var(--space-5);
    }

    .sfx-chip {
      padding: 6px 14px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: transparent;
      color: var(--text-muted);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: all var(--duration-slow) var(--ease-default);
      text-transform: capitalize;
    }

    .sfx-chip:hover {
      color: var(--text-primary);
      border-color: var(--gray-a8);
    }

    .sfx-chip.active {
      background: var(--gray-12);
      color: var(--gray-1);
      border-color: var(--gray-12);
    }

    .sfx-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .sfx-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: var(--radius-3);
      border: 1px solid var(--border-subtle);
      background: var(--surface-1);
      cursor: pointer;
      transition: border-color var(--duration-slow) var(--ease-default),
                  box-shadow var(--duration-slow) var(--ease-default);
      user-select: none;
      min-height: 52px;
    }

    .sfx-card:hover {
      border-color: var(--gray-a8);
      box-shadow: var(--shadow-2);
    }

    .sfx-card.playing {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-2);
    }

    .sfx-play-btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border-subtle);
      background: transparent;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all var(--duration-slow) var(--ease-default);
      cursor: pointer;
      padding: 0;
    }

    .sfx-card:hover .sfx-play-btn {
      border-color: var(--gray-a8);
      color: var(--text-primary);
    }

    .sfx-card.playing .sfx-play-btn {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: #000;
    }

    .sfx-card-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .sfx-card-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      letter-spacing: -0.2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sfx-card-cat {
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .sfx-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: var(--accent-primary);
      border-radius: 1px;
      width: 0%;
      transition: width 0.1s linear;
    }

    .sfx-card {
      position: relative;
      overflow: hidden;
    }

    .sfx-count-badge {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
      margin-left: 4px;
    }

    .sfx-upload-cta {
      margin-top: var(--space-6);
      padding: 20px 28px;
      border-radius: var(--radius-4);
      border: 1px dashed var(--border-subtle);
      background: rgba(255, 255, 255, 0.02);
      display: flex;
      align-items: center;
      gap: 16px;
      transition: border-color var(--duration-slow) var(--ease-default);
    }

    .sfx-upload-cta:hover {
      border-color: var(--gray-a8);
    }

    .sfx-upload-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--accent-primary);
    }

    .sfx-upload-text {
      flex: 1;
    }

    .sfx-upload-text strong {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .sfx-upload-text span {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .sfx-showing-count {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: var(--space-3);
    }

    @media (max-width: 1024px) {
      .sfx-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 767px) {
      .sfx-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .sfx-grid { grid-template-columns: 1fr; }
      .sfx-upload-cta { flex-direction: column; text-align: center; }
    }

    /* ============================================================
       10. THE NUMBERS - STAT COUNTER CARDS
       ============================================================ */

    @keyframes countUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-5);
      overflow: hidden;
      max-width: 960px;
      margin: var(--space-7) auto 0;
    }

    .stat-card {
      padding: 32px 24px;
      text-align: center;
      border-right: 1px solid var(--border-subtle);
      position: relative;
      background: var(--surface-1);
    }

    .stat-card:last-child {
      border-right: none;
    }

    .stat-number {
      font-size: 42px;
      font-weight: 400;
      letter-spacing: -1.8px;
      line-height: 1;
      color: var(--gray-12);
      margin-bottom: 6px;
      font-family: var(--font-mono);
    }

    .stat-label {
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-muted);
    }

    .stat-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 8px;
      font-family: var(--font-mono);
      letter-spacing: -0.1px;
    }

    /* ============================================================
       11. PRICING SECTION
       ============================================================ */
    .pricing-section {
      text-align: center;
    }

    .pricing-heading {
      font-size: 42px;
      font-weight: 400;
      letter-spacing: -1.8px;
      margin-bottom: var(--space-6);
    }

    .pricing-desc {
      color: var(--gray-11);
      font-size: 15px;
      margin-bottom: var(--space-2);
      letter-spacing: -0.3px;
    }

    .presale-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-7);
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    .presale-cta-title {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.4px;
      color: var(--gray-12);
    }

    .presale-cta-detail {
      font-size: 14px;
      color: var(--gray-11);
      letter-spacing: -0.2px;
      line-height: 1.6;
    }

    .presale-cta-detail strong {
      color: var(--gray-12);
    }

    .presale-cta-price {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
    }

    .presale-cta-price .presale-amount {
      font-size: 36px;
      font-weight: 400;
      letter-spacing: -1.5px;
      color: var(--gray-12);
    }

    .presale-cta-price .presale-compare {
      font-size: 14px;
      color: var(--text-muted);
      text-decoration: line-through;
      letter-spacing: -0.2px;
    }

    .presale-btn {
      position: relative;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 44px;
      padding: 0 28px;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.2px;
      color: var(--text-primary);
      border: 1px solid transparent;
      outline: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-full);
      white-space: nowrap;
      box-shadow: none;
      text-decoration: none;
      background:
        linear-gradient(#0a0a0a, #0a0a0a),
        linear-gradient(#0a0a0a 50%, rgba(10, 10, 10, 0.6) 80%, rgba(10, 10, 10, 0)),
        linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      background-clip: padding-box, border-box, border-box;
      background-origin: border-box;
      animation: rainbow 2s linear infinite;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .presale-btn::before {
      content: '';
      position: absolute;
      bottom: -20%;
      left: 50%;
      z-index: -1;
      height: 20%;
      width: 60%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
      background-size: 200%;
      animation: rainbow 2s linear infinite;
      filter: blur(12px);
      opacity: 0.6;
    }

    .presale-btn:hover {
      transform: translateY(-1px);
    }

    .presale-btn:active {
      transform: scale(0.97);
    }

    .pricing-toggle {
      display: inline-flex;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: var(--gray-3);
      padding: var(--space-1);
      margin-bottom: var(--space-7);
      position: relative;
    }

    .pricing-toggle button {
      position: relative;
      padding: 6px var(--space-5);
      border: none;
      background: none;
      color: var(--gray-11);
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: var(--radius-full);
      transition: color var(--duration-slow) var(--ease-default);
      letter-spacing: -0.2px;
      z-index: 2;
    }

    .pricing-toggle button.active {
      color: var(--gray-12);
    }

    .pricing-toggle .toggle-pill {
      position: absolute;
      height: calc(100% - 8px);
      border-radius: var(--radius-full);
      background: var(--gray-a5);
      transition: left var(--duration-layout) var(--ease-default),
                  width var(--duration-layout) var(--ease-default);
      z-index: 1;
      top: var(--space-1);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
      max-width: 1100px;
      margin: 0 auto;
    }

    .pricing-card {
      position: relative;
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-4);
      border: 1px solid var(--border-subtle);
      text-align: left;
      overflow: visible;
      transition: border-color var(--duration-slow) var(--ease-default);
    }

    .pricing-card:hover {
      border-color: var(--border-strong);
    }

    .pricing-card-header {
      padding: var(--space-7) var(--space-5) var(--space-5) var(--space-5);
      border-bottom: 1px dashed var(--border-subtle);
      background: var(--gray-2);
      border-radius: var(--radius-4) var(--radius-4) 0 0;
      position: relative;
    }

    .pricing-card-name {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.3px;
      margin-bottom: var(--space-1);
    }

    .pricing-card-info {
      font-size: 13px;
      color: var(--gray-11);
      letter-spacing: -0.2px;
      margin-bottom: var(--space-3);
    }

    .pricing-card-price {
      display: flex;
      align-items: flex-end;
      gap: var(--space-1);
    }

    .pricing-card-price .amount {
      font-size: 48px;
      font-weight: 400;
      letter-spacing: -1.8px;
      line-height: 1;
    }

    .pricing-card-price .period {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 6px;
      letter-spacing: -0.2px;
    }

    .pricing-popular-badge {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: 3px var(--space-3);
      border-radius: var(--radius-full);
      background: var(--surface-2);
      border: 1px solid var(--border-subtle);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .pricing-features {
      padding: var(--space-5);
      flex: 1;
    }

    .pricing-feature {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: 14px;
      font-size: 13px;
      color: var(--gray-11);
      letter-spacing: -0.2px;
    }

    .pricing-feature .check-icon {
      width: var(--space-4);
      height: var(--space-4);
      color: var(--gray-12);
      flex-shrink: 0;
    }

    .pricing-discount {
      position: absolute;
      top: var(--space-3);
      left: var(--space-3);
      display: none;
      align-items: center;
      padding: 3px var(--space-3);
      border-radius: var(--radius-full);
      background: var(--green-4);
      border: 1px solid var(--green-6);
      color: var(--green-11);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .pricing-discount.visible {
      display: inline-flex;
    }

    .pricing-api-badge {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
      display: inline-flex;
      align-items: center;
      padding: 3px var(--space-3);
      border-radius: var(--radius-full);
      background: var(--blue-4);
      border: 1px solid var(--blue-6);
      color: var(--blue-11);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0;
    }

    /* ============================================================
       12. FAQ SECTION
       ============================================================ */

    .faq-section {
      text-align: left;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: var(--space-8);
      margin-top: var(--space-6);
    }

    .faq-categories {
      position: sticky;
      top: var(--space-6);
      align-self: start;
      display: flex;
      flex-direction: column;
      gap: 2px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-4);
      padding: var(--space-2);
    }

    .faq-category-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: var(--radius-3);
      border: none;
      background: transparent;
      color: var(--gray-11);
      font-size: 13px;
      font-weight: 500;
      font-family: var(--font-sans);
      letter-spacing: -0.2px;
      cursor: pointer;
      transition: color var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default);
      text-align: left;
      white-space: nowrap;
    }

    .faq-category-btn i {
      font-size: 16px;
      opacity: 0.5;
      transition: opacity var(--duration-normal) var(--ease-default);
    }

    .faq-category-btn:hover {
      background: var(--surface-hover);
      color: var(--gray-12);
    }

    .faq-category-btn:hover i {
      opacity: 0.8;
    }

    .faq-category-btn.active {
      background: var(--surface-active);
      color: var(--gray-12);
    }

    .faq-category-btn.active i {
      opacity: 1;
      color: var(--gray-12);
    }

    .faq-category-count {
      margin-left: auto;
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-mono);
      color: var(--text-muted);
      background: transparent;
      padding: 2px 7px;
      border-radius: var(--radius-3);
      min-width: 22px;
      text-align: center;
    }

    .faq-category-btn.active .faq-category-count {
      background: var(--gray-a3);
      color: var(--gray-12);
    }

    .faq-search-wrap {
      position: relative;
      margin-bottom: var(--space-5);
    }

    .faq-search {
      width: 100%;
      padding: 11px 14px 11px 38px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: var(--surface-1);
      color: var(--gray-12);
      font-size: 13px;
      font-family: var(--font-sans);
      letter-spacing: -0.2px;
      outline: none;
      transition: border-color var(--duration-normal) var(--ease-default),
                  box-shadow var(--duration-normal) var(--ease-default);
    }

    .faq-search::placeholder {
      color: var(--text-muted);
    }

    .faq-search:focus {
      border-color: var(--accent-9);
      box-shadow: none;
    }

    .faq-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
      color: var(--text-muted);
      pointer-events: none;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .faq-item {
      border: none;
      border-bottom: 1px solid var(--border-subtle);
      border-radius: 0;
      background: transparent;
      overflow: hidden;
    }

    .faq-item:hover {
      border-color: var(--border-subtle);
    }

    .faq-item.open {
      border-color: var(--border-subtle);
      background: transparent;
    }

    .faq-item[data-category].hidden {
      display: none;
    }

    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) 0;
      cursor: pointer;
      user-select: none;
      gap: var(--space-4);
    }

    .faq-question:hover {
      background: transparent;
    }

    .faq-question-left {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-width: 0;
    }

    .faq-question-icon {
      width: 28px;
      height: 28px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .faq-qi-general  { background: transparent; color: rgba(255,255,255,0.5); }
    .faq-qi-render   { background: transparent; color: rgba(255,255,255,0.5); }
    .faq-qi-assets   { background: transparent; color: rgba(255,255,255,0.5); }
    .faq-qi-api      { background: transparent; color: rgba(255,255,255,0.5); }
    .faq-qi-billing  { background: transparent; color: rgba(255,255,255,0.5); }
    .faq-qi-presale  { background: transparent; color: rgba(255,255,255,0.5); }

    .faq-question-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: -0.2px;
      line-height: 1.4;
    }

    .faq-chevron {
      width: 28px;
      height: 28px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: transform var(--duration-normal) var(--ease-default);
    }

    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
      color: var(--gray-12);
      background: transparent;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--duration-slow) var(--ease-default);
      opacity: 0;
    }

    .faq-item.open .faq-answer {
      opacity: 1;
    }

    .faq-answer-inner {
      padding: 0 0 var(--space-5) var(--space-7);
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--gray-11);
      letter-spacing: -0.15px;
    }

    .faq-answer-inner p {
      margin-bottom: 10px;
    }

    .faq-answer-inner p:last-child {
      margin-bottom: 0;
    }

    .faq-answer-inner code {
      font-family: var(--font-mono);
      font-size: 12px;
      background: var(--gray-a3);
      border: 1px solid var(--gray-a4);
      padding: 2px 6px;
      border-radius: var(--radius-full);
      color: var(--gray-12);
    }

    .faq-answer-inner a {
      color: var(--accent-9);
      text-decoration: none;
      border-bottom: 1px solid var(--gray-a6);
      transition: border-color var(--duration-normal) var(--ease-default);
    }

    .faq-answer-inner a:hover {
      border-color: var(--accent-9);
    }

    .faq-answer-inner ul {
      list-style: none;
      padding: 0;
      margin: var(--space-2) 0;
    }

    .faq-answer-inner ul li {
      position: relative;
      padding-left: var(--space-4);
      margin-bottom: var(--space-1);
    }

    .faq-answer-inner ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 9px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-muted);
    }

    .faq-tag {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-size: 10px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px var(--space-2);
      border-radius: var(--radius-full);
      margin-left: var(--space-2);
      vertical-align: middle;
    }

    .faq-tag-new {
      background: rgba(45,164,78,0.15);
      color: var(--green-11);
    }

    .faq-tag-popular {
      background: rgba(59,130,246,0.15);
      color: var(--blue-11);
    }

    .faq-contact {
      margin-top: var(--space-7);
      padding: var(--space-5) 28px;
      border-radius: var(--radius-5);
      border: 1px solid var(--border-subtle);
      background: var(--surface-1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-5);
    }

    .faq-contact-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .faq-contact-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-12);
      letter-spacing: -0.2px;
    }

    .faq-contact-desc {
      font-size: 13px;
      color: var(--text-muted);
      letter-spacing: -0.15px;
    }

    .faq-contact-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: var(--space-2) var(--space-5);
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: var(--surface-hover);
      color: var(--gray-12);
      font-size: 13px;
      font-weight: 500;
      font-family: var(--font-sans);
      letter-spacing: -0.2px;
      cursor: pointer;
      transition: background var(--duration-normal) var(--ease-default),
                  border-color var(--duration-normal) var(--ease-default);
      white-space: nowrap;
      text-decoration: none;
    }

    .faq-contact-btn:hover {
      background: var(--surface-active);
      border-color: var(--border-strong);
    }

    .faq-contact-btn i {
      font-size: 14px;
    }

    .faq-no-results {
      display: none;
      text-align: center;
      padding: var(--space-7) var(--space-5);
      color: var(--text-muted);
      font-size: 13px;
      letter-spacing: -0.15px;
    }

    .faq-no-results.visible {
      display: block;
    }

    .faq-no-results i {
      font-size: 28px;
      display: block;
      margin-bottom: var(--space-2);
      opacity: 0.4;
    }

    /* ============================================================
       13. LOGO WATERMARK
       ============================================================ */

    .watermark-section {
      position: relative;
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .watermark-foreground {
      position: relative;
      z-index: 2;
      max-width: 600px;
    }

    .watermark-foreground h3 {
      font-size: 38px;
      font-weight: 400;
      letter-spacing: -1.6px;
      line-height: 1.2;
      color: var(--gray-12);
      margin-bottom: 10px;
    }

    .watermark-foreground p {
      font-size: 16px;
      color: var(--gray-11);
      letter-spacing: -0.3px;
      margin-bottom: var(--space-5);
    }

    .watermark-foreground .waitlist-form {
      justify-content: center;
    }

    .watermark-bg {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) translateY(32%);
      width: 90%;
      max-width: 800px;
      height: auto;
      opacity: 0.05;
      filter: brightness(1.2);
      pointer-events: none;
      z-index: 1;
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */

    @media (max-width: 1023px) {
      .wl-section-heading {
        font-size: 38px;
      }

      .daw-feature-cards {
        grid-template-columns: 1fr;
      }
      .daw-feature-card {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: var(--space-5);
      }
      .daw-feature-card:last-child {
        border-bottom: none;
      }

      .rules-engine-layout {
        gap: 28px;
      }

      .asset-library-layout {
        gap: 28px;
      }

      .api-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }

      .stat-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .stat-card:nth-child(2) { border-right: none; }
      .stat-card:nth-child(1), .stat-card:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }
    }

    @media (max-width: 767px) {
      .wl-section {
        padding: 64px var(--space-4);
      }

      .wl-section-heading {
        font-size: 32px;
        letter-spacing: -1.2px;
      }

      .hero-section {
        display: none;
      }

      /* Live Render Mockup - Mobile */
      .live-render {
        flex-direction: column;
      }
      .lr-terminal {
        flex: none;
        height: 45%;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
      }
      .lr-term-wrap { flex: 1; }
      .lr-rules { display: none !important; }
      .lr-right {
        flex: none;
        height: 55%;
      }
      .lr-term-lines { font-size: 8px; }
      .lr-term-header { padding: var(--space-1) var(--space-2); }
      .lr-term-body { padding: 6px var(--space-2); }
      .lr-term-title { font-size: 9px; }
      .lr-spinner { width: 20px; height: 20px; }
      .lr-preview-text { font-size: 9px; }
      .lr-preview-eta { font-size: 8px; }
      .lr-preview { flex: 5; }
      .lr-agent { flex: 5; }
      .lr-agent-header { padding: var(--space-1) var(--space-2); }
      .lr-agent-body { padding: 6px var(--space-2); gap: var(--space-1); }
      .lr-msg-text { font-size: 8px; }
      .lr-msg-sender { font-size: 7px; }

      .hero-shader-wrap { padding-top: 100px; }
      .waitlist-scroll-container { padding: var(--space-2) var(--space-6); min-height: 100vh; }
      .waitlist-scroll-inner { padding: var(--space-5) 0; padding-top: 10vh; }
      .waitlist-scroll-header { padding: 0 var(--space-4); }
      .waitlist-scroll-header h1 { font-size: 40px !important; letter-spacing: -1.6px !important; }
      .waitlist-scroll-header p { font-size: 18px !important; }
      .waitlist-form { flex-direction: column; width: 82%; margin-left: auto; margin-right: auto; gap: var(--space-3); }
      .waitlist-input { width: 100% !important; }
      .waitlist-btn { width: 100%; justify-content: center; }
      .waitlist-scroll-card { height: 580px !important; }

      /* Hero bg: section is extremely tall (scroll container), so cap the dot-bg container to viewport height */
      .hero-shader-wrap > .dot-bg { height: 100vh; bottom: auto; }

      .waitlist-scroll-card-content { border-radius: 0; }

      .ix-layout {
        grid-template-columns: 1fr;
        gap: var(--space-7);
      }

      .rules-engine-layout {
        grid-template-columns: 1fr;
      }

      .asset-library-layout {
        grid-template-columns: 1fr;
      }
      .asset-library-text { order: 1; }
      .al-mockup { order: 2; }
      .al-grid { grid-template-columns: repeat(2, 1fr); }

      .api-layout { grid-template-columns: 1fr; }
      .api-endpoints .ep-desc { display: none; }

      .ix-copy .section-heading,
      .ix-copy .section-desc {
        max-width: 100%;
      }

      .ix-mockup-body {
        min-height: 280px;
      }

      .hiw-timeline { padding-left: 0; }
      .hiw-timeline::before, .hiw-timeline::after { left: 20px; }
      .hiw-step { grid-template-columns: 1fr; gap: var(--space-4); padding-left: 52px; }
      .hiw-step::before { left: 20px; transform: none; }
      .hiw-step-text { text-align: left; padding-right: 0; padding-left: 0; }
      .hiw-step:nth-child(even) .hiw-step-text { order: 1; padding-left: 0; }
      .hiw-step:nth-child(even) .hiw-step-card { order: 2; padding-left: 0; padding-right: 0; }
      .hiw-step-card { padding-left: 0; }

      .daw-sidebar { display: none; }
      .daw-preview { height: 35%; max-height: 180px; }
      .daw-preview-timecode { font-size: 10px; }
      .daw-preview-scene { font-size: 8px; }
      .daw-toolbar { padding: 3px 6px; height: 30px; }
      .daw-tbtn { width: 22px; height: 22px; font-size: 13px; }
      .daw-timecode { font-size: 9px; min-width: auto; padding: 2px 6px; letter-spacing: 0; }
      .daw-brand-label { display: none !important; }
      .daw-ruler { height: 20px; margin-left: 60px; min-width: 860px; }
      .daw-rmajor span { font-size: 7px; }
      .daw-body { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
      .daw-track { min-width: 0; }
      .daw-lane { min-width: 860px; }
      .daw-thead { width: 60px; min-width: 60px; padding: 0 var(--space-1); gap: 2px; }
      .daw-ticon { font-size: 9px; }
      .daw-tname { font-size: 8px; }
      .daw-tmeta { font-size: 6px; }
      .daw-tctrls { display: none; }
      .daw-cbtn { width: 14px; height: 14px; font-size: 6px; }
      .daw-clip { font-size: 8px; padding: 0 4px; }
      .daw-scene { padding: 2px 4px; }
      .daw-snum { font-size: 6px; }
      .daw-sbadge { font-size: 6px; }
      .daw-sasset { font-size: 6px; }
      .daw-status { font-size: 8px; gap: var(--space-2); padding: 2px var(--space-3); }
      .daw-rerender { display: none; }
      .daw-context-menu { width: 140px; font-size: 9px; }
      .daw-ctx-item { padding: 4px 8px; }
      .daw-ctx-icon i { font-size: 10px; }
      .daw-ctx-shortcut { font-size: 7px; }
      .daw-playhead-line { display: none; }
      .daw-container { height: 520px !important; }
      .daw-section .wl-section-desc { font-size: 15px; }

      .daw-feature-cards {
        grid-template-columns: 1fr;
      }

      .stat-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .stat-card:nth-child(2) { border-right: none; }
      .stat-card:nth-child(1), .stat-card:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }

      /* Pricing - 2 col on tablet, 1 col on mobile */
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing-heading { font-size: 32px; }
      .pricing-card-price .amount { font-size: 36px; }
      .presale-cta-price .presale-amount { font-size: 30px; }

      .stack-card {
        width: 300px;
        height: 200px;
      }

      .card-stack-stage {
        height: 280px;
      }

      /* FAQ - collapse grid to single column, horizontal category tabs */
      .faq-grid { grid-template-columns: 1fr; }
      .faq-categories { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
      .faq-category-btn { padding: var(--space-2) var(--space-3); font-size: 12px; }
      .faq-answer-inner { padding-left: var(--space-5); }
      .faq-contact { flex-direction: column; text-align: center; }
      .faq-contact-btn { width: 100%; justify-content: center; min-height: 44px; }

      .watermark-foreground h3 {
        font-size: 28px;
        letter-spacing: -1.2px;
      }

      /* Logo Watermark - stack waitlist form vertically on mobile */
      .watermark-foreground .waitlist-form {
        flex-direction: column;
        gap: var(--space-3);
      }
      .watermark-foreground .waitlist-input {
        width: 100%;
      }
      .watermark-foreground .waitlist-btn {
        width: 100%;
        justify-content: center;
        padding: 14px var(--space-5);
        min-height: 44px;
      }
    }

    @media (max-width: 480px) {
      .pricing-grid { grid-template-columns: 1fr; }
      .pricing-heading { font-size: 28px; }

    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .ticker-track {
        animation: none;
      }

      .waitlist-btn,
      .waitlist-btn::before,
      .daw-rerender-btn,
      .daw-rerender-btn::before,
      .rules-mockup-save,
      .rules-mockup-save::before,
      .presale-btn,
      .presale-btn::before,
      .cta-primary::before {
        animation: none;
      }

      .term-bar-fill,
      .preview-bar-fill {
        animation: none;
        width: 68%;
      }

      .ticker-dot {
        animation: none;
      }



      .waitlist-success {
        animation: none;
      }

      .stack-card {
        transition: none;
      }
    }
    /* ── Re-Renders Section ── */
    .rerender-section {
      padding: 120px 0 100px;
      background: var(--bg-primary, #0a0a0a);
      position: relative;
    }
    .rerender-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .rerender-header {
      text-align: center;
      margin-bottom: 56px;
    }
    .rerender-header .wl-section-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 14px;
    }
    .rerender-header h2 {
      font-size: 44px;
      font-weight: 400;
      letter-spacing: -2px;
      line-height: 1.1;
      color: #fff;
      margin: 0 0 16px;
    }
    .rerender-header p {
      font-size: 17px;
      line-height: 1.65;
      color: rgba(255,255,255,0.55);
      max-width: 640px;
      margin: 0 auto;
      letter-spacing: -0.2px;
    }

    /* Re-render flow diagram */
    .rerender-flow {
      max-width: 900px;
      margin: 0 auto;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      overflow: hidden;
    }
    .rerender-flow-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }
    .rerender-flow-header i {
      font-size: 14px;
    }
    .rerender-flow-body {
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    /* Pipeline row */
    .rerender-pipeline {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .rerender-pipeline-label {
      flex-shrink: 0;
      width: 100px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      line-height: 1.3;
    }
    .rerender-pipeline-label.label-original {
      color: rgba(255,255,255,0.35);
    }
    .rerender-pipeline-label.label-rerender {
      color: rgba(130,230,180,0.7);
    }
    .rerender-pipeline-stages {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
    }
    .rerender-stage {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: -0.1px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .rerender-stage i {
      font-size: 13px;
      flex-shrink: 0;
    }
    .rerender-stage-connector {
      width: 16px;
      height: 1px;
      background: rgba(255,255,255,0.08);
      flex-shrink: 0;
    }

    /* Original pipeline: muted */
    .rerender-stage-original {
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.06);
    }

    /* Re-render: skipped stages */
    .rerender-stage-skipped {
      background: transparent;
      color: rgba(255,255,255,0.15);
      border: 1px dashed rgba(255,255,255,0.08);
      text-decoration: line-through;
      text-decoration-color: rgba(255,255,255,0.15);
    }
    /* Re-render: active stages */
    .rerender-stage-active {
      background: rgba(130,230,180,0.08);
      color: rgba(130,230,180,0.75);
      border: 1px solid rgba(130,230,180,0.15);
    }

    /* Divider between the two rows */
    .rerender-flow-divider {
      height: 1px;
      background: rgba(255,255,255,0.05);
    }

    /* Bottom stat bar */
    .rerender-stat-bar {
      display: flex;
      justify-content: center;
      gap: 48px;
      padding: 0 8px;
    }
    .rerender-stat {
      text-align: center;
    }
    .rerender-stat-value {
      display: block;
      font-size: 22px;
      font-weight: 400;
      letter-spacing: -1px;
      color: rgba(130,230,180,0.85);
      margin-bottom: 4px;
    }
    .rerender-stat-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.3px;
      color: rgba(255,255,255,0.3);
    }

    @media (max-width: 768px) {
      .rerender-section { padding: 80px 0 64px; }
      .rerender-header h2 { font-size: 32px; letter-spacing: -1.2px; }
      .rerender-header p { font-size: 15px; }
      .rerender-flow-body { padding: 24px 16px; gap: 20px; }
      .rerender-pipeline { flex-direction: column; align-items: flex-start; gap: 10px; }
      .rerender-pipeline-label { width: auto; }
      .rerender-pipeline-stages { flex-wrap: wrap; gap: 6px; }
      .rerender-stage-connector { display: none; }
      .rerender-stat-bar { gap: 24px; }
    }
    /* ── Test Renders Section ── */
    .test-render-section {
      padding: 120px 0 100px;
      background: var(--bg-primary, #0a0a0a);
      position: relative;
      overflow: hidden;
    }
    .test-render-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .test-render-header {
      text-align: center;
      margin-bottom: 56px;
    }
    .test-render-header .wl-section-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 14px;
    }
    .test-render-header h2 {
      font-size: 44px;
      font-weight: 400;
      letter-spacing: -2px;
      line-height: 1.1;
      color: #fff;
      margin: 0 0 16px;
    }
    .test-render-header p {
      font-size: 17px;
      line-height: 1.65;
      color: rgba(255,255,255,0.55);
      max-width: 640px;
      margin: 0 auto;
      letter-spacing: -0.2px;
    }

    /* Mockup container */
    .test-render-mockup {
      position: relative;
      max-width: 900px;
      margin: 0 auto 56px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
      background: #000;
      aspect-ratio: 16/9;
    }
    .test-render-mockup video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Repeating diagonal watermark overlay */
    .test-render-watermark-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 2;
    }
    .test-render-watermark-grid {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 80px 100px;
      transform: rotate(-30deg);
      opacity: 0.25;
    }
    .test-render-watermark-grid img {
      width: 90px;
      height: auto;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-drag: none;
    }
    /* 720p / TEST badge bar */
    .test-render-badge-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.8px;
      color: rgba(255,255,255,0.6);
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    }
    .test-render-badge-bar .tr-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      border-radius: 4px;
      background: rgba(255,255,255,0.08);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: rgba(255,255,255,0.5);
    }
    .test-render-badge-bar .tr-badge-test {
      background: rgba(255,180,0,0.15);
      color: rgba(255,200,60,0.85);
    }

    /* Benefit cards */
    .test-render-benefits {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }
    .test-render-benefit {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 10px;
      padding: 28px 24px;
    }
    .test-render-benefit-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      font-size: 17px;
      color: rgba(255,255,255,0.45);
    }
    .test-render-benefit h4 {
      font-size: 15px;
      font-weight: 500;
      color: rgba(255,255,255,0.9);
      margin: 0 0 8px;
      letter-spacing: -0.3px;
    }
    .test-render-benefit p {
      font-size: 13px;
      line-height: 1.6;
      color: rgba(255,255,255,0.4);
      margin: 0;
    }

    @media (max-width: 768px) {
      .test-render-section { padding: 80px 0 64px; }
      .test-render-header h2 { font-size: 32px; letter-spacing: -1.2px; }
      .test-render-header p { font-size: 15px; }
      .test-render-benefits { grid-template-columns: 1fr; gap: 14px; }
      .test-render-watermark-grid { gap: 50px 60px; }
      .test-render-watermark-grid img { width: 60px; }
    }