body {
          font-family: 'Roboto', sans-serif;
      }

      .hero-quickstart {
          background: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
          color: white;
          padding: 4rem 2rem;
          text-align: center;
      }

      .hero-logo {
          font-size: 3.5rem;
          font-weight: 800;
          letter-spacing: -0.05em;
          margin-bottom: 1rem;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .hero-tagline {
          font-size: 2rem;
          font-weight: 300;
          margin-bottom: 0.5rem;
      }

      .hero-subtitle {
          font-size: 1.1rem;
          opacity: 0.9;
          margin-bottom: 2.5rem;
      }

      .step-number {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          background: var(--dm-primary);
          color: white;
          font-weight: 700;
          font-size: 1.25rem;
          margin-right: 1rem;
      }

      .command-block {
          background: var(--dm-gray-900);
          color: var(--dm-gray-100);
          padding: 1.5rem;
          border-radius: var(--dm-radius-md);
          font-family: 'Roboto Mono', monospace;
          font-size: 1.1rem;
          margin: 1rem 0;
          position: relative;
          overflow-x: auto;
      }

      .command-prompt {
          color: var(--dm-success);
          margin-right: 0.5rem;
      }

      .step-card {
          background: var(--dm-surface);
          border: 1px solid var(--dm-border);
          border-radius: var(--dm-radius-lg);
          padding: 2rem;
          margin-bottom: 2rem;
          transition: transform 0.2s, box-shadow 0.2s;
      }

      .step-card:hover {
          transform: translateY(-4px);
          box-shadow: var(--dm-shadow-lg);
      }

      .result-preview {
          background: var(--dm-surface-raised);
          border: 2px dashed var(--dm-border);
          border-radius: var(--dm-radius-md);
          padding: 1.5rem;
          margin-top: 1rem;
      }

      .file-list {
          font-family: 'Roboto Mono', monospace;
          font-size: 0.9rem;
          line-height: 1.8;
      }

      .file-icon {
          color: var(--dm-primary);
          margin-right: 0.5rem;
      }

      .badge-time {
          display: inline-block;
          background: var(--dm-success);
          color: white;
          padding: 0.25rem 0.75rem;
          border-radius: 20px;
          font-size: 0.85rem;
          font-weight: 600;
          margin-left: 0.5rem;
      }

      .cdn-section {
          background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-surface-raised) 100%);
          border: 1px solid var(--dm-border);
          border-radius: var(--dm-radius-lg);
          padding: 2rem;
      }

      pre code {
          font-family: 'Roboto Mono', monospace;
      }

      /* Page header styles */
      .page-header {
          background: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
          color: white;
          padding: 4rem 2rem;
          text-align: center;
      }

      .page-header h1 {
          font-size: 2.5rem;
          margin: 0 0 1rem;
      }

      .page-header p {
          font-size: 1.1rem;
          opacity: 0.9;
          max-width: 600px;
          margin: 0 auto;
      }

      /* ===== HERO LOGO ANIMATION ===== */
      .hero-logo svg {
          color: var(--dm-white-t85);
          animation: glow 3s ease-in-out infinite alternate;
          filter: drop-shadow(0 0 20px var(--dm-white-t30));
      }

      @keyframes glow {
          from {
              filter: drop-shadow(0 0 20px var(--dm-white-t30));
          }
          to {
              filter: drop-shadow(0 0 40px var(--dm-white-t50));
          }
      }

      /* ===== CTA BUTTONS ===== */
      .cta {
          display: inline-flex;
          align-items: center;
          gap: 0.75rem;
          background: var(--dm-white-t95);
          color: var(--dm-primary-dark);
          font-size: 1.1rem;
          font-weight: 600;
          padding: 0.875rem 2rem;
          border-radius: 50px;
          text-decoration: none;
          transition: all 0.3s ease;
          box-shadow: 0 4px 20px var(--dm-black-t20);
      }

      .cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 30px var(--dm-black-t30);
          color: var(--dm-primary-dark);
          text-decoration: none;
      }

      .cta-secondary {
          background: var(--dm-white-t15);
          color: var(--dm-white);
          border: 2px solid var(--dm-white-t40);
      }

      .cta-secondary:hover {
          color: var(--dm-white);
      }

      .cta-arrow {
          transition: transform 0.3s ease;
      }

      .cta:hover .cta-arrow {
          transform: translateX(4px);
      }

      /* ===== ENHANCED STEP CARDS ===== */
      .step-number {
          width: 3rem;
          height: 3rem;
          font-size: 1.5rem;
          background: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
          box-shadow: 0 4px 15px var(--dm-primary-t30);
      }

      /* ===== DEMO CONTAINER ===== */
      .demo-container {
          border: 2px solid var(--dm-border);
          border-radius: var(--dm-radius-lg);
          overflow: hidden;
          background: var(--dm-surface);
          box-shadow: var(--dm-shadow-xl);
          margin: 2rem 0;
      }

      /* ===== RESPONSIVE ===== */
      @media (max-width: 768px) {
          .cta {
              width: 100%;
              justify-content: center;
          }
      }