/* Demo Styles */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      background: #f8f9fa;
    }

    .aiab-demo-header {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      color: white;
      padding: 3rem 0;
      margin-bottom: 3rem;
    }

    .aiab-demo-header h1 {
      margin: 0;
      font-size: 2.5rem;
      font-weight: 300;
    }

    .aiab-demo-header p {
      margin: 1rem 0 0 0;
      font-size: 1.25rem;
      opacity: 0.9;
    }

    .aiab-demo-section {
      background: white;
      border-radius: 8px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .aiab-demo-section h2 {
      margin-top: 0;
      color: #2c3e50;
      border-bottom: 2px solid #f0f0f0;
      padding-bottom: 0.5rem;
    }

    .aiab-demo-section h3 {
      color: #495057;
      margin-top: 2rem;
    }

    .code-example {
      background: #f4f4f4;
      padding: 1rem;
      border-radius: 4px;
      overflow-x: auto;
      border-left: 4px solid var(--color-primary);
      margin: 1rem 0;
    }

    .demo-box {
      border: 2px solid #dee2e6;
      border-radius: 8px;
      padding: 2rem;
      margin: 1.5rem 0;
      background: #fff;
    }

    .demo-note {
      background: #e3f2fd;
      border-left: 4px solid #2196f3;
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 4px;
    }

    /* Navigation Demo Specific */
    .nav-demo-container {
      background: #f8f9fa;
      border-radius: 8px;
      margin: 1.5rem 0;
      overflow: hidden;
    }

    .nav-demo-header {
      background: #495057;
      color: white;
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
      font-weight: 600;
    }

    /* Vertical Nav Demo */
    .vertical-nav-demo {
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: 2rem;
      min-height: 400px;
    }

    .vertical-nav-demo .aiab-sidebar {
      background: white;
      border-right: 1px solid #dee2e6;
      padding: 1rem;
    }

    .vertical-nav-demo .content {
      padding: 1rem;
    }

    /* Mobile Preview */
    .mobile-preview {
      max-width: 375px;
      margin: 0 auto;
      border: 2px solid #2c3e50;
      border-radius: 20px;
      overflow: hidden;
      background: white;
    }

    .mobile-header {
      background: #2c3e50;
      color: white;
      padding: 0.5rem;
      text-align: center;
      font-size: 0.75rem;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
      flex-wrap: wrap;
    }

    .controls button {
      padding: 0.5rem 1rem;
      background: var(--color-primary);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .controls button:hover {
      background: var(--color-primary-dark);
    }

    .controls button.aiab-active {
      background: var(--color-primary-dark);
    }

    /* Custom Navigation Styles for Demo */
    .nav-style-1 {
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    }

    .nav-style-2 {
      background: white;
      border-bottom: 3px solid var(--color-primary);
    }

    .nav-style-3 {
      background: #2c3e50;
    }

    .nav-transparent-demo {
      background-image: url('https://placehold.co/1200x400/667eea/ffffff?text=Hero+Section');
      background-size: cover;
      background-position: center;
      height: 400px;
      position: relative;
    }

    /* Tab Navigation Demo */
    .tab-nav-demo .tab-content {
      padding: 2rem;
      background: white;
      border: 1px solid #dee2e6;
      border-top: none;
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.aiab-active {
      display: block;
    }

    /* Mega Menu Demo */
    .mega-menu-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      padding: 2rem;
      display: none;
      z-index: 1000;
    }

    .mega-menu-dropdown.open {
      display: block;
    }

    .mega-menu-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }

    .mega-menu-section h4 {
      color: var(--color-primary);
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .mega-menu-section ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mega-menu-section li {
      margin-bottom: 0.5rem;
    }

    .mega-menu-section a {
      color: #495057;
      text-decoration: none;
      transition: color 0.2s;
    }

    .mega-menu-section a:hover {
      color: var(--color-primary);
    }