/* ========================================
   APE DESIGN SYSTEM
   Distinctive Dark Design System with Atmospheric Depth
   CDN-Ready: Single consolidated file
   ======================================== */

/* 
   DESIGN SYSTEM OVERVIEW
   ======================
   This is a comprehensive dark-themed design system optimized for:
   - Modern SaaS applications
   - Developer tools and documentation
   - Enterprise software interfaces
   - Crypto/Web3 applications
   
   KEY PRINCIPLES:
   - Mobile-first responsive design (breakpoint: 768px)
   - Glassmorphism aesthetic with backdrop blur
   - Semantic HTML with utility classes
   - CSS Custom Properties for theming
   - Touch-optimized (minimum 44x44px targets)
   
   Alpine.js: [x-cloak] hides elements until Alpine initializes (e.g. dropdowns).
   
   USAGE PATTERNS:
   - Components: Use semantic HTML elements (button, article, nav, etc.)
   - Utilities: Add utility classes for spacing, layout, typography
   - Responsive: Mobile styles are default, desktop overrides at 768px+
   
   QUICK REFERENCE - KEY COMPONENTS:
   =================================
   
   1. BUTTONS:
      <button>Click</button>                    // Full width mobile, auto desktop
      <button class="outline">Outline</button>  // Transparent variant
      <button class="sm">Small</button>         // Small size
      <button class="lg">Large</button>         // Large size
   
   2. CARDS:
      <article>
        <h3>Title</h3>
        <p>Content</p>
      </article>                                // Auto glass card styling
   
   3. GRID LAYOUTS:
      <div class="grid">
        <article>Card 1</article>
        <article>Card 2</article>
      </div>                                    // Responsive auto-fit grid
   
   4. SECTIONS:
      <section>...</section>                    // Standard section
      <section class="secondary">...</section>   // Alternate background
      <section class="hero">...</section>       // Hero section
   
   5. NAVIGATION:
      <nav>
        <a href="#" class="brand">Logo</a>
        <div class="links">
          <a href="#">Link</a>
        </div>
      </nav>                                    // Auto mobile menu at <768px
   
   6. TYPOGRAPHY:
      <h1>Heading 1</h1>                        // Auto-styled with glow
      <h2>Heading 2</h2>                        // Section headings
      <p>Body text</p>                          // Auto-styled paragraphs
      <code>code</code>                         // Inline code
      <pre><code>Block code</code></pre>      // Code blocks
   
   7. UTILITIES (Common):
      .flex .center .gap-lg                    // Flexbox layout
      .p-xl .mt-lg .mb-2xl                     // Spacing
      .text-center .accent .muted               // Text styling
      .w-full .max-w-lg                        // Width
      .rounded .border                          // Borders
   
   8. FORM INPUTS:
      <input type="text" placeholder="...">    // Auto-styled inputs
      <textarea>...</textarea>                  // Auto-styled textarea
   
   10. CODE COMPONENTS:
       <div class="code-snippet">
         <div class="code-snippet-header">Title</div>
         <div class="code-snippet-content">Code here</div>
       </div>
   
   RESPONSIVE BREAKPOINTS:
   =======================
   - Mobile: < 768px (default, full-width buttons, stacked layouts)
   - Desktop: >= 768px (auto-width buttons, horizontal layouts)
   - Small Mobile: < 480px (additional size reductions)
   
   COMPONENT STRUCTURE PATTERNS:
   =============================
   AI assistants should recognize these patterns when generating HTML:
   
   1. SEMANTIC HTML FIRST:
      - Use semantic elements: <button>, <article>, <nav>, <section>
      - Components auto-style based on element type
      - Add utility classes for variations
   
   2. MOBILE-FIRST APPROACH:
      - Default styles are for mobile (< 768px)
      - Desktop styles override at 768px+
      - Buttons: full-width mobile → auto-width desktop
      - Grids: single column mobile → multi-column desktop
   
   3. UTILITY CLASS COMBINATIONS:
      - Spacing: Combine .p-*, .m-*, .gap-* for layout
      - Flexbox: Use .flex with .center, .between, .gap-*
      - Typography: Combine .text-* with .accent, .muted
      - Width: Use .w-full for mobile, .w-auto for desktop
   
   4. COMPONENT VARIATIONS:
      - Buttons: Add .outline, .sm, .lg, .auto, .full
      - Cards: Use <article> with optional <small> and <div class="btn-group"> for buttons
      - Sections: Add .secondary or .hero classes
      - Grids: Add .compact for smaller cards
   
   6. ACCESSIBILITY:
      - Touch targets minimum 44x44px
      - Use semantic HTML for screen readers
      - Maintain color contrast ratios
      - Include ARIA labels where needed
   
   TABLE OF CONTENTS
   =================
   1. ROOT VARIABLES - CSS Custom Properties (lines 38-138)
   3. BASE STYLES - Reset, body, typography (lines 186-262)
   4. LAYOUT - Header, main, footer, containers (lines 268-285)
   5. NAVIGATION - Nav, links, brand (lines 291-346)
   6. MOBILE MENU - Mobile navigation system (lines 352-480)
   7. UTILITY CLASSES - Base utilities (lines 487-574)
   8. TYPOGRAPHY - Headings, paragraphs, code (lines 580-738)
   9. GLASS CARDS - Article styling (lines 744-817)
   10. BUTTONS - Button components (mobile-first) (lines 823-1016)
   11. GRID LAYOUTS - Grid utilities (lines 1022-1051)
   12. SECTIONS - Hero, secondary sections (lines 1057-1110)
   13. FOOTER - Footer styling (lines 1189-1243)
   14. UTILITY CLASSES - Comprehensive utilities (lines 1249-1407)
   15. FORM INPUTS - Input fields, textareas (lines 1409-1455)
   16. SIDEBAR NAVIGATION - Sidebar nav styling (lines 1457-1478)
   17. WIREFRAME UTILITIES - Wireframe-specific classes (lines 1480-1551)
   18. RESPONSIVE - Mobile optimizations (lines 1567-1923)
   20. WALLET COMPONENTS - Wallet-specific styling (lines 2059-2195)
   21. CODE SNIPPET COMPONENT - Code display component (lines 2201-2544)
   22. CODE VIEWER COMPONENT - Full-featured code viewer (lines 2550-2699)
   23. MODAL COMPONENTS - Modal overlays and dialogs (lines 2702-2768)
   24. UI COMPONENTS - Tooltips, accordions, tabs (lines 2771-2912)
   25. ANIMATIONS - Animation utilities (lines 2915-2943)
*/

/* Import Google Font - Only JetBrains Mono is used */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* ========================================
   ROOT VARIABLES - Fully Customizable
   ======================================== */
/* 
   VARIABLE USAGE GUIDE:
   - All variables use CSS custom properties (--variable-name)
   - Variables are organized by category: Colors, Glass, Borders, etc.
   - Use var(--variable-name) to reference in CSS
   - Mobile breakpoint: 768px (mobile-first approach)
*/

[x-cloak] {
  display: none !important;
}

:root {
  /* 
     COLOR SYSTEM
     ============
     Background hierarchy: --bg (darkest) → --bg-2 → --bg-3 (lightest)
     Text hierarchy: --text (primary) → --text-2 → --text-muted → --text-dim
     Usage: Use --bg for main background, --bg-2/--bg-3 for elevated surfaces
  */
  --bg: #000000;
  /* Primary background - darkest */
  /* Secondary background - near black - for surface depth */
  --bg-2: #080808;
  /* Tertiary background - dark gray - for elevated surfaces */
  --bg-3: #111111;
  --text: #ffffff;
  /* Primary text - white */
  --text-2: #f5f5f5;
  /* Secondary text - almost white */
  --text-muted: #a3a3a3;
  /* Muted text - medium gray */
  --text-dim: #737373;
  /* Dim text - dark gray */

  /* 
     ACCENT COLORS (WHITE DARK THEME)
     =============
     Primary accent: Pure white for high contrast
     Secondary: Light gray for secondary actions
     Tertiary: Stronger white/neutral
     Glow: White-based glows
  */
  --accent: #ffffff;
  /* Primary accent - pure white */
  --accent-2: #f5f5f5;
  /* Secondary accent - almost white */
  --accent-3: #e5e5e5;
  /* Tertiary accent - light gray */
  --accent-glow: rgba(255, 255, 255, 0.15);
  /* Subtle white glow */
  --accent-green: #4ade80;
  /* Technical Web3 Green */
  --accent-green-glow: rgba(74, 222, 128, 0.15);
  /* Green accent glow */

  /* 
     GLASSMORPHISM SYSTEM
     ====================
     Glass backgrounds: --glass (default) → --glass-hover (interactive)
     Borders: --glass-border (standard) → --glass-accent (highlighted)
     Blur levels: --blur (standard) → --blur-lg (medium) → --blur-strong (heavy)
     Usage: Apply to cards, modals, overlays for glassmorphism effect
  */
  --glass: rgba(255, 255, 255, 0.03);
  /* Default glass background */
  --glass-hover: rgba(255, 255, 255, 0.05);
  /* Hover state glass */
  --glass-border: rgba(255, 255, 255, 0.12);
  /* Standard glass border */
  --glass-accent: rgba(255, 255, 255, 0.2);
  /* Accent glass border */
  --blur: blur(16px);
  /* Standard backdrop blur */
  --blur-lg: blur(40px);
  /* Large backdrop blur */
  --blur-strong: blur(60px);
  /* Strong backdrop blur */

  /* 
     BORDERS & RADIUS
     ================
     Border: Use with color variables (e.g., border: var(--border) var(--glass-border))
     Radius: --radius-sm (small) → --radius (default) → --radius-lg (large)
  */
  --border: 1px solid;
  /* Border width and style - combine with color */
  --radius: 12px;
  /* Default border radius - cards, buttons */
  --radius-sm: 8px;
  /* Small radius - badges, small elements */
  --radius-lg: 16px;
  /* Large radius - modals, large cards */

  /* 
     SHADOWS & GLOWS
     ===============
     Shadows: --shadow (subtle) → --shadow-md (medium) → --shadow-lg (large)
     Glows: --glow-subtle (minimal) → --glow (standard) → --glow-lg (strong)
     Usage: Apply to elevated elements, buttons, cards
  */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  /* Subtle shadow */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
  /* Medium shadow */
  --shadow-lg: 12px 12px 48px rgba(0, 0, 0, 0.8);
  /* Large shadow */
  --glow: 0 0 15px var(--accent-glow);
  /* Standard glow */
  --glow-lg: 0 0 30px var(--accent-glow);
  /* Large glow */
  --glow-subtle: 0 0 8px var(--accent-glow);
  /* Subtle glow */
  --glow-inner: inset 0 0 15px rgba(255, 255, 255, 0.05);
  /* Inner glow */

  /* 
     TYPOGRAPHY SYSTEM (EXPERT UI)
     =============================
     Using Geist/Inter influenced system stack for premium feel
  */
  --font-body: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --size-xs: 0.75rem;
  /* 12px - captions, labels */
  --size-sm: 0.875rem;
  /* 14px - small text, metadata */
  --size: 1rem;
  /* 16px - base body text */
  --size-lg: 1.125rem;
  /* 18px - emphasized body */
  --size-xl: 1.25rem;
  /* 20px - large body, h4 */
  --size-2xl: 1.5rem;
  /* 24px - h3 */
  --size-3xl: 1.875rem;
  /* 30px - h2 */
  --size-4xl: 2.25rem;
  /* 36px - large h2 */
  --size-5xl: 3rem;
  /* 48px - h1 */
  --size-6xl: 3.75rem;
  /* 60px - hero h1 */
  --weight-light: 300;
  /* Light weight - subtle text */
  --weight: 400;
  /* Normal weight - body text */
  --weight-md: 500;
  /* Medium weight - emphasized text */
  --weight-semibold: 600;
  /* Semibold - subheadings */
  --weight-bold: 700;
  /* Bold - headings, emphasis */
  --line: 1.75;
  /* Body line height - improved readability */
  --line-relaxed: 1.9;
  /* Relaxed - long-form content */
  --line-tight: 1.3;
  /* Tight - headings */
  --line-compact: 1.5;
  /* Compact - UI elements, buttons */
  --letter-tight: -0.025em;
  /* Tight letter spacing - headings */
  --letter-normal: 0;
  /* Normal letter spacing - body */
  --letter-wide: 0.025em;
  /* Wide - uppercase text */
  --letter-wider: 0.05em;
  /* Wider - labels, badges */

  /* 
     SPACING SYSTEM (8px base scale)
     ===============================
     Scale: --space-xs (4px) → --space (16px base) → --space-6xl (128px)
     Usage: Use for padding, margin, gap properties
     Pattern: xs, sm, md, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
  */
  --space-xs: 0.25rem;
  /* 4px - tight spacing */
  --space-sm: 0.5rem;
  /* 8px - small spacing */
  --space-md: 0.75rem;
  /* 12px - medium spacing */
  --space: 1rem;
  /* 16px - base spacing unit */
  --space-lg: 1.5rem;
  /* 24px - large spacing */
  --space-xl: 2rem;
  /* 32px - extra large */
  --space-2xl: 2.5rem;
  /* 40px - 2x large */
  --space-3xl: 3rem;
  /* 48px - 3x large */
  --space-4xl: 4rem;
  /* 64px - 4x large */
  --space-5xl: 6rem;
  /* 96px - 5x large */
  --space-6xl: 8rem;
  /* 128px - 6x large */

  /* 
     LAYOUT CONSTANTS
     ================
     Width: Maximum content width for containers
     Padding: Standard padding for sections
     Section padding: Vertical padding for sections
  */
  --width: 1200px;
  /* Maximum content width */
  --padding: var(--space-xl);
  /* Standard section padding (32px) */
  --section-pad: var(--space-8xl) 0;
  /* increased vertical spacing between sections */
  /* Expanded vertical section padding (8rem) */

  /* 
     TRANSITIONS (PREMIUM SNAPPINESS)
     ===========
  */
  --fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* 
     CRT EFFECT
     ==========
     Scanline pattern for retro/tech aesthetic
     Usage: Applied to body::before for subtle scanline overlay
  */
  --scanline: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.15) 1px,
      transparent 1px,
      transparent 2px);
}

/* ========================================
   BASE STYLES
   ======================================== */

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--line);
  letter-spacing: var(--letter-normal);
  margin: 0;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-image: none;
}

/* Subtle grid overlay, masked to fade towards edges */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--accent-glow) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--accent-glow) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: radial-gradient(60% 60% at 50% 35%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 1) 100%);
  opacity: 0.1;
  contain: layout style paint;
  z-index: 1;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--scanline);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* Page Load Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main>section {
  animation: fadeInUp 0.3s ease-out backwards;
}

main>section:nth-child(1) {
  animation-delay: 0.05s;
}

main>section:nth-child(2) {
  animation-delay: 0.1s;
}

main>section:nth-child(3) {
  animation-delay: 0.15s;
}

main>section:nth-child(4) {
  animation-delay: 0.2s;
}

main>section:nth-child(5) {
  animation-delay: 0.25s;
}

main>section:nth-child(6) {
  animation-delay: 0.3s;
}

/* ========================================
   LAYOUT
   ======================================== */

header,
main,
footer {
  padding: var(--padding);
  max-width: var(--width);
  margin: 0 auto;
}

header {
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* ========================================
   NAVIGATION
   ======================================== */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--size-sm);
  transition: color 0.12s ease;
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.12s ease;
  box-shadow: var(--glow);
}

nav a:hover {
  color: var(--accent);
}

nav a:hover::after {
  width: 100%;
}

nav .brand {
  color: var(--text);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

nav .brand-logo {
  height: 1.5rem;
  filter: brightness(0) invert(1);
}

nav .links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

/* Nav mega menu - "Components" jump-to all sections and subsections */
.nav-mega {
  position: relative;
  display: inline-block;
}

.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease;
  position: relative;
}

.nav-mega-trigger:hover,
.nav-mega-trigger:focus {
  color: var(--accent);
  outline: none;
}

.nav-mega-trigger::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.12s ease;
  box-shadow: var(--glow);
}

.nav-mega-trigger:hover::after,
.nav-mega-trigger:focus::after {
  width: 100%;
}

.nav-mega-chevron {
  font-size: 0.7em;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.nav-mega-trigger[aria-expanded="true"] .nav-mega-chevron {
  transform: rotate(180deg);
}

/* Dark tinted overlay when mega menu is open - responsive, improves contrast */
.nav-mega-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  cursor: pointer;
  touch-action: none;
}

.nav-mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  min-width: 42rem;
  max-width: 56rem;
  padding: var(--space-lg);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-xl);
}

.nav-mega-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.nav-mega-heading {
  display: block;
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--glass-border);
}

.nav-mega-heading-spaced {
  margin-top: var(--space-md);
}

.nav-mega-panel a {
  display: block;
  padding: var(--space-xs) 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--size-sm);
  transition: color 0.12s ease;
  white-space: nowrap;
}

.nav-mega-panel a::after {
  display: none;
}

.nav-mega-panel a:hover,
.nav-mega-panel a:focus {
  color: var(--accent);
}

@media (max-width: 960px) {
  .nav-mega-panel {
    min-width: 0;
    width: calc(100vw - var(--space-lg) * 2);
    max-width: 28rem;
    left: 50%;
    right: auto;
    padding: var(--space-md);
  }

  .nav-mega-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
  }
}

@media (max-width: 480px) {
  .nav-mega-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    margin: 0;
    padding: var(--space-lg) var(--space-md);
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-mega-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .nav-mega-panel a {
    padding: var(--space-sm) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-mega-heading {
    padding-top: var(--space-xs);
    margin-top: var(--space-xs);
  }

  .nav-mega-heading:first-child {
    padding-top: 0;
    margin-top: 0;
  }
}

/* Mobile: mega menu as expandable stacked columns */
.nav-mega-mobile .nav-mega {
  width: 100%;
}

.mobile-menu-content .nav-mega-trigger {
  width: 100%;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  min-height: 44px;
  align-items: center;
  text-align: left;
  color: var(--text-muted);
}

.mobile-menu-content .nav-mega-panel {
  position: static;
  margin-top: 0;
  margin-left: var(--space-md);
  margin-bottom: var(--space-sm);
  min-width: 0;
  max-width: none;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
  background: #0a0a0a;
  border: none;
  border-left: 2px solid var(--glass-accent);
  border-radius: var(--radius);
  transform: none;
  max-height: none;
}

.mobile-menu-content .nav-mega-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.mobile-menu-content .nav-mega-column {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: var(--space-sm);
}

.mobile-menu-content .nav-mega-column:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.mobile-menu-content .nav-mega-heading {
  margin-bottom: var(--space-xs);
}

.mobile-menu-content .nav-mega-panel a {
  padding: var(--space-sm) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Nav dropdown - single-column submenu (e.g. UI Components) */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease;
  position: relative;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus {
  color: var(--accent);
  outline: none;
}

.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.12s ease;
  box-shadow: var(--glow);
}

.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger:focus::after {
  width: 100%;
}

.nav-dropdown-chevron {
  font-size: 0.7em;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 12rem;
  padding: var(--space-sm);
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-dropdown-panel a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--size-sm);
  border-radius: var(--radius-sm, 4px);
  transition: color 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}

.nav-dropdown-panel a::after {
  display: none;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus {
  color: var(--accent);
  background: var(--glass-hover);
}

.mobile-menu-content .nav-dropdown {
  width: 100%;
}

.mobile-menu-content .nav-dropdown-trigger {
  width: 100%;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  text-align: left;
  color: var(--text-muted);
}

.mobile-menu-content .nav-dropdown-panel {
  position: static;
  margin-top: 0;
  margin-left: var(--space-md);
  margin-bottom: var(--space-sm);
  min-width: 0;
  border-left: 2px solid var(--glass-accent);
  padding-left: var(--space-sm);
}

.mobile-menu-content .nav-dropdown-panel a {
  padding: var(--space-xs) 0;
}

/* ========================================
   MOBILE MENU - Global Styles
   ======================================== */

/* Mobile menu overlay/backdrop - Always available */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: var(--blur-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Mobile menu panel - Always available */
.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-left: var(--border) var(--glass-border);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.7),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top right, var(--accent-glow) 0%, transparent 60%);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.mobile-menu-panel.active {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu-panel>* {
  position: relative;
  z-index: 1;
}

/* Mobile menu header */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
  border-bottom: var(--border) var(--glass-border);
  background: var(--bg-2);
  backdrop-filter: var(--blur-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  flex-shrink: 0;
  position: relative;
  min-height: 80px;
}

.mobile-menu-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--glass-accent) 0%, rgba(255, 255, 255, 0.01) 100%);
  pointer-events: none;
  z-index: 0;
}

.mobile-menu-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-accent), transparent);
  opacity: 0.5;
  z-index: 1;
}

.mobile-menu-header>* {
  position: relative;
  z-index: 2;
}

.mobile-menu-header .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mobile-menu-header .brand:hover {
  transform: scale(1.05);
}

.mobile-menu-header .brand::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--radius);
  z-index: -1;
}

.mobile-menu-header .brand:hover::before {
  opacity: 0.3;
}

.mobile-menu-header .brand img {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0) saturate(0) invert(1);
  -webkit-filter: brightness(0) saturate(0) invert(1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.1));
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: var(--border) rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--size-2xl);
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: var(--space-xl);
  right: var(--space-lg);
  z-index: 10;
}

.mobile-menu-close::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius);
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}

.mobile-menu-close:hover::before,
.mobile-menu-close:focus::before {
  opacity: 0.4;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus {
  background: var(--glass-accent);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Mobile menu content */
.mobile-menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  min-height: 0;
  overflow-y: auto;
  position: relative;
}

.mobile-menu-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  opacity: 0.3;
}

.mobile-menu-content .links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  align-items: stretch;
  margin-top: var(--space-md);
}

.mobile-menu-content .links a {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: var(--size);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  min-height: 48px;
}

.mobile-menu-content .links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: 0 0 12px var(--accent-glow);
}

.mobile-menu-content .links a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, var(--glass-accent) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.mobile-menu-content .links a:hover::before,
.mobile-menu-content .links a:focus::before {
  transform: scaleY(1);
}

.mobile-menu-content .links a:hover::after,
.mobile-menu-content .links a:focus::after {
  opacity: 0.6;
}

.mobile-menu-content .links a:hover,
.mobile-menu-content .links a:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--accent);
  outline: none;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px var(--accent-glow);
}

.mobile-menu-content .links a.accent {
  color: var(--accent);
  font-weight: var(--weight-semibold);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-menu-content .links a.accent::before {
  transform: scaleY(1);
  opacity: 1;
}

.mobile-menu-content .links a.accent:hover,
.mobile-menu-content .links a.accent:focus {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 24px var(--accent-glow);
}


/* ========================================
   UTILITY CLASSES
   CDN-Ready: All utilities consolidated in one file
   ======================================== */
/* 
   UTILITY CLASS SYSTEM:
   =====================
   Naming Pattern: {property}-{value} (e.g., .p-lg, .mt-xl, .text-center)
   Responsive: Mobile-first, desktop overrides at 768px+
   Usage: Combine multiple utilities for rapid styling
   
   CATEGORIES:
   - Spacing: .p-*, .m-*, .mt-*, .mb-*, .gap-*
   - Display: .flex, .grid, .block, .hidden
   - Flexbox: .flex-col, .center, .between, .justify-center
   - Typography: .text-center, .accent, .muted, .text-*, .bold
   - Width: .w-full, .w-auto, .max-w-*
   - Borders: .border, .border-accent, .rounded-*
   - Background: .bg-secondary, .bg-card
   - Position: .sticky, .relative, .absolute, .fixed
   - Overflow: .overflow-hidden, .overflow-auto
   - Cursor: .cursor-pointer, .cursor-not-allowed
   
   EXAMPLES:
   <div class="flex center gap-lg p-xl">        // Flex container, centered, large gap, xl padding
   <p class="text-center muted text-lg">       // Centered, muted color, large text
   <button class="w-full mt-lg rounded">       // Full width, top margin, rounded
*/


/* Hide mobile menu on desktop */
@media (min-width: 768px) {

  .mobile-menu-overlay,
  .mobile-menu-panel {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  line-height: var(--line-tight);
  margin-top: 0;
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-tight);
  font-family: var(--font-heading);
  /* Subtle text glow for headings (matching original marketing site) */
  text-shadow: 0 0 4px var(--accent-glow), 0 0 8px var(--accent-glow);
}

h1 {
  font-size: var(--size-5xl);
  line-height: 1.1;
  margin-bottom: var(--space-xl);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  text-shadow: 0 0 4px var(--accent-glow), 0 0 8px var(--accent-glow);
}

h2 {
  font-size: var(--size-4xl);
  line-height: 1.15;
  margin-bottom: var(--space-lg);
  margin-top: var(--space-4xl);
  letter-spacing: -0.015em;
  font-weight: 700;
}

h2:first-child {
  margin-top: 0;
}

/* Headers inside containers need more spacing */
.container>h2,
.container>section>h2 {
  margin-top: var(--space-5xl);
}

.container>h2:first-child,
.container>section>h2:first-child {
  margin-top: var(--space-4xl);
}

h3 {
  font-size: var(--size-2xl);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
  margin-top: var(--space-xl);
  font-weight: var(--weight-semibold);
}

h4 {
  font-size: var(--size-xl);
  line-height: 1.3;
  margin-bottom: var(--space);
  margin-top: var(--space-lg);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--size-lg);
  line-height: 1.4;
  margin-bottom: var(--space);
  margin-top: var(--space-lg);
  font-weight: var(--weight-md);
}

h6 {
  font-size: var(--size);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  margin-top: var(--space);
  font-weight: var(--weight-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-wider);
  font-size: var(--size-sm);
}

p {
  color: var(--text-2);
  margin-bottom: var(--space-lg);
  line-height: var(--line);
  max-width: 65ch;
  /* Optimal reading width */
}

p:last-child {
  margin-bottom: 0;
}

p a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all 0.12s ease;
}

p a:hover {
  text-decoration: none;
  text-shadow: 0 0 4px var(--accent-glow);
}

code {
  font-family: var(--font);
  background: var(--glass);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  font-size: 0.875em;
  color: var(--accent);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

pre {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  overflow-x: auto;
  margin: var(--space-xl) 0;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
  position: relative;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  display: block;
}

pre:hover {
  border-color: var(--glass-accent);
  box-shadow: var(--shadow-md), var(--glow-subtle);
}

section h2 {
  text-align: center;
}

section h2+p {
  text-align: center;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-2xl);
  color: var(--text-muted);
  font-size: var(--size-lg);
  line-height: var(--line-relaxed);
}

/* ========================================
   GLASS CARDS (Articles)
   ======================================== */
/* 
   GLASS CARD COMPONENT:
   =====================
   Element: Use <article> tag for automatic glass card styling
   Features: Glassmorphism background, hover effects, animations
   Usage: Content cards, feature boxes, information panels
   
   STRUCTURE:
   <article>
     <small>Metadata</small>        // Optional: Date, category, etc.
     <h3>Title</h3>
     <p>Content...</p>
     <div class="btn-group">       // For buttons: Use btn-group instead of footer
       <button>Action</button>
     </div>
   </article>
   
   STYLING:
   - Automatic glass background and border
   - Hover: Border accent color, background brightens
   - Animation: Fade-in on load with stagger delay
   - Buttons: Use .btn-group for vertical button groups with spacing
   
   EXAMPLES:
   <article>
     <h3>Card Title</h3>
     <p>Card content goes here.</p>
   </article>
*/

article {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  padding: var(--space-xl);
  border-radius: var(--radius);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md), var(--glow-inner);
  position: relative;
  overflow: hidden;
  gap: var(--space);
  animation: cardFadeIn 0.3s ease-out backwards;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

article::before {
  display: none;
}

article::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      var(--accent-glow) 0%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

article:hover {
  border-color: var(--glass-accent);
  background: var(--glass-hover);
}

article:hover::after {
  opacity: 0;
}

article small {
  display: block;
  margin-top: 0;
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--size-sm);
  line-height: var(--line-compact);
  letter-spacing: var(--letter-normal);
}

/* Article footer - Legacy support (deprecated: use .btn-group for buttons) */
article footer {
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}

/* ========================================
   BUTTONS - MOBILE FIRST
   ======================================== */
/* 
   BUTTON COMPONENT GUIDE:
   ======================
   Base: Use <button> or [role="button"] elements
   Mobile-first: Buttons are full-width by default (mobile)
   Desktop: Auto-width at 768px+ breakpoint
   Touch targets: Minimum 44x44px for accessibility
   
   VARIANTS:
   - Default: Standard glass button with accent border
   - .outline: Transparent background, border only
   - .auto: Auto width (desktop default)
   - .full: Full width (mobile default)
   - .sm: Small size (36px height)
   - .lg: Large size (52px height)
   - .block: Full width display
   - .inline: Inline-flex display
   
   USAGE EXAMPLES:
   <button>Click me</button>                    // Full width on mobile, auto on desktop
   <button class="outline">Outline</button>     // Transparent with border
   <button class="sm">Small</button>            // Small size variant
   <button class="lg">Large</button>            // Large size variant
   
   BUTTON GROUPS:
   - .btn-group: Container for multiple buttons
   - Mobile: Stacks vertically
   - Desktop (768px+): Horizontal layout
   - .btn-group.equal: Equal width buttons
*/

/* Mobile-first: Full width, stacked, optimized for touch */
button,
[role="button"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  /* Touch target minimum */
  padding: 0.875rem 1.5rem;
  background: var(--glass);
  border: var(--border) var(--glass-accent);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: var(--weight-md);
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.08s ease;
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--line-compact);
  letter-spacing: var(--letter-normal);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  /* Remove mobile tap highlight */
  touch-action: manipulation;
  /* Optimize touch response */
}

/* Button fill animation - expand from center outward */
@keyframes buttonFill {
  from {
    clip-path: circle(0% at 50% 50%);
  }

  to {
    clip-path: circle(100% at 50% 50%);
  }
}

/* Button shimmer animation - subtle sweep */
@keyframes buttonShimmer {
  0% {
    transform: translateX(-100%) translateY(-50%);
  }

  100% {
    transform: translateX(200%) translateY(-50%);
  }
}

button::before,
[role="button"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.15),
      rgba(96, 165, 250, 0.1));
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Shimmer effect overlay */
button::after,
[role="button"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent);
  transform: translateX(-100%) translateY(-50%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius);
}

/* Primary button (default): keep text readable, use accent via border/glow/fill */
button:hover,
[role="button"]:hover {
  background: var(--glass-hover);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--shadow), var(--glow-subtle);
}

button:hover::before,
[role="button"]:hover::before {
  clip-path: circle(100% at 50% 50%);
}

button:hover::after,
[role="button"]:hover::after {
  transform: translateX(200%) translateY(-50%);
}

/* Ensure text stays above animations */
button>*,
[role="button"]>* {
  position: relative;
  z-index: 2;
}

button:active,
[role="button"]:active {
  opacity: 0.8;
  transform: translateY(0);
}

/* Primary Green Button */
button.primary,
[role="button"].primary {
  background: var(--accent-green-glow);
  border-color: var(--accent-green);
  color: var(--accent-green);
  font-weight: var(--weight-bold);
}

button.primary:hover,
[role="button"].primary:hover {
  background: var(--accent-green);
  color: #000000;
  box-shadow: 0 0 30px var(--accent-green-glow);
}

/* Outline button: more subtle by default, accent-forward on hover */
button.outline,
[role="button"].outline {
  background: transparent;
  border-color: var(--glass-border);
  color: var(--text-2);
  box-shadow: var(--shadow);
}

/* Outline buttons get a more subtle fill */
button.outline::before,
[role="button"].outline::before {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.08),
      rgba(96, 165, 250, 0.05));
}

/* Outline buttons: no shimmer sweep (keeps them visually distinct from primary) */
button.outline::after,
[role="button"].outline::after {
  display: none;
}

button.outline:hover,
[role="button"].outline:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow), var(--glow-subtle);
}

/* Focus-visible: consistent, accessible ring */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--glass-accent);
  outline-offset: 2px;
}

button.outline:focus-visible,
[role="button"].outline:focus-visible {
  outline-color: var(--accent);
}

/* Disabled button (greyed out)
   - Works for real buttons: <button disabled>
   - Works for link-buttons: <a role="button" aria-disabled="true" class="disabled"> */
button:disabled,
button[aria-disabled="true"],
[role="button"].disabled,
[role="button"][aria-disabled="true"],
a[role="button"].disabled,
a[role="button"][aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.75;
}

/* Remove animations for disabled buttons */
button:disabled::before,
button:disabled::after,
button[aria-disabled="true"]::before,
button[aria-disabled="true"]::after,
[role="button"].disabled::before,
[role="button"].disabled::after,
[role="button"][aria-disabled="true"]::before,
[role="button"][aria-disabled="true"]::after {
  display: none;
}

/* Ensure disabled link-buttons don't click */
a[role="button"].disabled,
a[role="button"][aria-disabled="true"] {
  pointer-events: none;
}

button:disabled:hover,
button:disabled:active,
button:disabled:focus,
[role="button"].disabled:hover,
[role="button"].disabled:active,
[role="button"].disabled:focus,
[role="button"][aria-disabled="true"]:hover,
[role="button"][aria-disabled="true"]:active,
[role="button"][aria-disabled="true"]:focus {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  transform: none;
  box-shadow: none;
}

/* ========================================
   HOVER DURATION EFFECTS - Progressive Interactions
   ======================================== */
/* 
   CREATIVE HOVER DURATION EFFECTS:
   =================================
   Buttons now respond differently based on how long you hover:
   
   - 300ms (hover-short): Initial glow intensifies
   - 800ms (hover-medium): Button scales up, stronger glow, progress indicator appears
   - 1500ms (hover-long): Maximum glow, text transformation, particle effects
   - 2500ms (hover-epic): Special effects, rotation, enhanced animations
   
   All effects are smooth, progressive, and reset when mouse leaves.
*/

/* Progress indicator - dynamically added via JavaScript */
button,
[role="button"] {
  position: relative;
  overflow: hidden;
}

/* Progress bar element (added dynamically) */
.hover-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 0 0 var(--radius) var(--radius);
  transition: width 0.1s linear, height 0.2s ease, opacity 0.2s ease, box-shadow 0.3s ease;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

/* Short hover (300ms) - Enhanced glow */
button.hover-short,
[role="button"].hover-short {
  box-shadow: var(--shadow-md), var(--glow-subtle), 0 0 20px var(--accent-glow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Medium hover (800ms) - Scale up, stronger glow, progress visible */
button.hover-medium,
[role="button"].hover-medium {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg), var(--glow), 0 0 30px var(--accent-glow);
  border-width: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Long hover (1.5s) - Maximum effects, text reveal, particles */
button.hover-long,
[role="button"].hover-long {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg), var(--glow-lg), 0 0 40px var(--accent-glow), 0 0 60px rgba(0, 255, 255, 0.2);
  border-width: 2px;
  background: var(--glass-hover);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Particle effect overlay for long hover */
button.hover-long::before,
[role="button"].hover-long::before {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.25),
      rgba(96, 165, 250, 0.2),
      rgba(0, 255, 255, 0.15));
  animation: particlePulse 1.5s ease-in-out infinite;
}

@keyframes particlePulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* Epic hover (2.5s) - Special effects, enhanced animations */
button.hover-epic,
[role="button"].hover-epic {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg), var(--glow-lg),
    0 0 50px var(--accent-glow),
    0 0 80px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  border-width: 3px;
  background: linear-gradient(135deg,
      var(--glass-hover),
      rgba(59, 130, 246, 0.1));
  animation: epicGlow 2s ease-in-out infinite;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes epicGlow {

  0%,
  100% {
    box-shadow: var(--shadow-lg), var(--glow-lg),
      0 0 50px var(--accent-glow),
      0 0 80px rgba(0, 255, 255, 0.3),
      inset 0 0 20px rgba(0, 255, 255, 0.1);
  }

  50% {
    box-shadow: var(--shadow-lg), var(--glow-lg),
      0 0 60px var(--accent-glow),
      0 0 100px rgba(0, 255, 255, 0.4),
      inset 0 0 30px rgba(0, 255, 255, 0.15);
  }
}

/* Progress bar pulse animation for epic hover */
button.hover-epic .hover-progress-bar,
[role="button"].hover-epic .hover-progress-bar {
  animation: progressPulse 1s ease-in-out infinite;
}

@keyframes progressPulse {

  0%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }

  50% {
    opacity: 0.8;
    transform: scaleX(1.02);
  }
}

/* Text transformation for long/epic hovers */
button.hover-long>*,
button.hover-epic>*,
[role="button"].hover-long>*,
[role="button"].hover-epic>* {
  text-shadow: 0 0 8px var(--accent-glow), 0 0 12px var(--accent-glow);
  transition: text-shadow 0.3s ease;
}

/* Ripple effect on epic hover */
button.hover-epic,
[role="button"].hover-epic {
  position: relative;
  overflow: visible;
}

button.hover-epic::before,
[role="button"].hover-epic::before {
  animation: epicRipple 2s ease-out infinite;
}

@keyframes epicRipple {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0.8;
  }

  50% {
    clip-path: circle(100% at 50% 50%);
    opacity: 0.4;
  }

  100% {
    clip-path: circle(150% at 50% 50%);
    opacity: 0;
  }
}

/* Outline button specific adjustments */
button.outline.hover-medium,
[role="button"].outline.hover-medium {
  background: rgba(255, 255, 255, 0.05);
  border-width: 2px;
}

button.outline.hover-long,
[role="button"].outline.hover-long {
  background: rgba(255, 255, 255, 0.08);
  border-width: 2px;
}

button.outline.hover-epic,
[role="button"].outline.hover-epic {
  background: rgba(255, 255, 255, 0.1);
  border-width: 3px;
}

/* Ensure smooth transitions when removing hover classes */
button,
[role="button"] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.2s ease,
    background 0.3s ease;
}

/* Button variants */
button.auto,
[role="button"].auto {
  width: auto;
}

button.full,
[role="button"].full {
  width: 100%;
}

/* Button groups - Mobile first: Stack vertically */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-xl);
}

.btn-group button,
.btn-group [role="button"] {
  width: 100%;
  margin-bottom: var(--space-md);
}

.btn-group button:last-child,
.btn-group [role="button"]:last-child {
  margin-bottom: 0;
}

/* Desktop: Horizontal button groups (768px+) */
@media (min-width: 768px) {

  /* Buttons: Auto width on desktop */
  button,
  [role="button"] {
    width: auto;
    min-width: 120px;
    /* Minimum width for desktop buttons */
    padding: 0.875rem 1.75rem;
  }

  /* Width utilities must still work on desktop */
  button.full,
  [role="button"].full,
  button.block,
  [role="button"].block {
    width: 100%;
    min-width: 0;
  }

  /* Button groups: Horizontal on desktop */
  .btn-group {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    gap: var(--space-lg) !important;
  }

  .btn-group button,
  .btn-group [role="button"],
  .btn-group a[role="button"] {
    width: auto;
    flex: 0 1 auto;
    margin-bottom: 0 !important;
    margin-right: var(--space-lg) !important;
  }

  /* Full-width actions inside groups should take a full row */
  .btn-group button.full,
  .btn-group [role="button"].full,
  .btn-group a[role="button"].full,
  .btn-group button.block,
  .btn-group [role="button"].block,
  .btn-group a[role="button"].block {
    width: 100%;
    flex: 1 1 100%;
    margin-right: 0 !important;
  }

  .btn-group button:last-child,
  .btn-group [role="button"]:last-child,
  .btn-group a[role="button"]:last-child {
    margin-right: 0 !important;
  }

  /* Extra spacing for button groups inside grid articles on desktop */
  .grid article .btn-group,
  article .btn-group {
    gap: var(--space-lg) !important;
  }

  .grid article .btn-group button,
  .grid article .btn-group [role="button"],
  .grid article .btn-group a[role="button"],
  article .btn-group button,
  article .btn-group [role="button"],
  article .btn-group a[role="button"] {
    margin-right: var(--space-lg) !important;
  }

  .grid article .btn-group button:last-child,
  .grid article .btn-group [role="button"]:last-child,
  .grid article .btn-group a[role="button"]:last-child,
  article .btn-group button:last-child,
  article .btn-group [role="button"]:last-child,
  article .btn-group a[role="button"]:last-child {
    margin-right: 0 !important;
  }

  /* Equal width buttons in group (optional utility) */
  .btn-group.equal button,
  .btn-group.equal [role="button"] {
    flex: 1 1 0%;
    min-width: 0;
  }

  /* Hide mobile menu toggle on desktop */
  .mobile-menu-toggle {
    display: none !important;
  }

  /* Ensure nav links are visible on desktop */
  nav .links {
    display: flex !important;
  }
}

section>footer {
  margin-top: var(--space-2xl);
  text-align: center;
}

/* Button size variants - Mobile first */
button.sm,
[role="button"].sm {
  padding: 0.625rem 1rem;
  font-size: var(--size-sm);
  min-height: 36px;
}

/* Medium button (explicit) - matches default button sizing */
button.md,
[role="button"].md {
  padding: 0.875rem 1.5rem;
  font-size: var(--size);
  min-height: 44px;
}

button.lg,
[role="button"].lg {
  padding: 1rem 2rem;
  font-size: var(--size-lg);
  min-height: 52px;
}

/* Button width utilities */
button.block,
[role="button"].block {
  width: 100%;
  display: flex;
}

button.inline,
[role="button"].inline {
  width: auto;
  display: inline-flex;
}

/* Desktop: Adjust button sizes */
@media (min-width: 768px) {

  button.sm,
  [role="button"].sm {
    padding: 0.5rem 0.875rem;
    min-height: 36px;
  }

  button.md,
  [role="button"].md {
    padding: 0.875rem 1.75rem;
    min-height: 44px;
  }

  button.lg,
  [role="button"].lg {
    padding: 1rem 2.25rem;
    min-height: 52px;
  }
}

/* ========================================
   GRID LAYOUTS
   ======================================== */
/* 
   GRID SYSTEM:
   =============
   Class: .grid - Responsive auto-fit grid
   Mobile: Single column (1fr)
   Desktop: Auto-fit columns (min 300px each)
   Gap: Standard spacing between items
   
   VARIANTS:
   - .grid: Default grid (min 300px columns)
   - .grid.compact: Compact grid (min 150px columns)
   
   USAGE:
   <div class="grid">
     <article>Card 1</article>
     <article>Card 2</article>
     <article>Card 3</article>
   </div>
   
   FEATURES:
   - Automatic responsive columns
   - Staggered fade-in animations
   - Consistent spacing
*/

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

.grid>* {
  animation: fadeInUp 0.25s ease-out backwards;
}

.grid>*:nth-child(1) {
  animation-delay: 0.03s;
}

.grid>*:nth-child(2) {
  animation-delay: 0.06s;
}

.grid>*:nth-child(3) {
  animation-delay: 0.09s;
}

.grid>*:nth-child(4) {
  animation-delay: 0.12s;
}

.grid>*:nth-child(5) {
  animation-delay: 0.15s;
}

.grid>*:nth-child(6) {
  animation-delay: 0.18s;
}

.grid>*:nth-child(7) {
  animation-delay: 0.21s;
}

.grid>*:nth-child(8) {
  animation-delay: 0.24s;
}

.grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space);
}

.grid.compact article {
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* ========================================
   SECTIONS
   ======================================== */
/* 
   SECTION COMPONENTS:
   ===================
   Default: <section> - Standard section with auto padding
   Variant: .secondary - Alternate background with glass effect
   Hero: .hero - Full-width hero section with special styling
   
   SECTION VARIANTS:
   - <section>: Standard section (default padding, centered content)
   - <section class="secondary">: Alternate background with glass overlay
   - <section class="hero">: Hero section with gradient background
   
   USAGE:
   <section>
     <h2>Section Title</h2>
     <p>Section content...</p>
   </section>
   
   <section class="secondary">
     <h2>Alternate Section</h2>
     <p>Content with glass background...</p>
   </section>
   
   <section class="hero">
     <h1>Hero Title</h1>
     <p class="hero-text">Hero description...</p>
   </section>
*/

/* Secondary section gradient animation - subtle movement */
@keyframes secondaryGradientMove {

  0%,
  100% {
    background-position: center center, 50% 50%;
  }

  50% {
    background-position: center center, 52% 48%;
  }
}

section.secondary {
  background:
    radial-gradient(ellipse at center, var(--glass-hover) 0%, var(--glass) 100%),
    radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 30%);
  background-size: 100% 100%, 120% 120%;
  background-position: center center, 50% 50%;
  animation: secondaryGradientMove 30s ease-in-out infinite;
  margin: 0 calc(var(--padding) * -1);
  padding: var(--padding);
  position: relative;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

section.secondary .grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--accent-glow) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--accent-glow) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: radial-gradient(60% 60% at 50% 35%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 1) 100%);
  opacity: 0.06;
  contain: layout style paint;
  z-index: 0;
}

section.secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

section.secondary::after {
  display: none;
}

section.secondary .container {
  max-width: var(--width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ========================================
   HERO SECTION
   ======================================== */

/* Hero gradient animation - subtle movement */
@keyframes heroGradientMove {

  0%,
  100% {
    background-position: 20% 30%, 80% 70%, center center;
  }

  33% {
    background-position: 22% 32%, 78% 68%, center center;
  }

  66% {
    background-position: 18% 28%, 82% 72%, center center;
  }
}

.hero {
  padding: var(--space-5xl) 0;
  text-align: center;
  background:
    radial-gradient(circle at 20% 30%, var(--accent-green-glow) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, var(--accent-green-glow) 0%, transparent 25%),
    radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg) 100%);
  background-size: 150% 150%, 150% 150%, 100% 100%;
  background-position: 20% 30%, 80% 70%, center center;
  animation: heroGradientMove 25s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.hero .grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--accent-green-glow) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--accent-green-glow) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: radial-gradient(60% 60% at 50% 35%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 1) 100%);
  opacity: 0.12;
  contain: layout style paint;
  z-index: 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--scanline);
  opacity: 0.15;
  pointer-events: none;
  animation: scanlineMove 8s linear infinite;
}

.hero::after {
  display: none;
}

.hero h1 {
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

.hero h2 {
  margin-top: 0;
}

.hero-logo {
  height: 8rem;
  margin-bottom: var(--space-xl);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px var(--accent-glow));
}

.hero-text {
  font-size: var(--size-xl);
  line-height: var(--line-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-2xl);
  position: relative;
  z-index: 1;
  color: var(--text-2);
}

/* ========================================
   TABLE OF CONTENTS / SECTION NAVIGATION
   ======================================== */
/* 
   TABLE OF CONTENTS COMPONENT
   ===========================
   A reusable table of contents that doubles as a global submenu header.
   Use it on sections to provide quick navigation to other sections.
   
   Usage:
   <nav class="table-of-contents">
     <a href="#features" role="button" class="table-of-contents-button">Core Features</a>
     <a href="#components" role="button" class="table-of-contents-button">Components</a>
     <a href="#ui" role="button" class="table-of-contents-button">UI Components</a>
   </nav>
   
   The component automatically:
   - Stacks vertically on mobile
   - Displays horizontally on desktop
   - Uses glass morphism styling
   - Provides smooth scroll navigation
*/

.table-of-contents {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

.table-of-contents:hover {
  border-color: var(--glass-accent);
  box-shadow: var(--shadow-md), var(--glow-subtle);
}

.table-of-contents-button {
  /* Inherit all default button styles - matches button/[role="button"] exactly */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: 0.875rem 1.5rem;
  background: var(--glass);
  border: var(--border) var(--glass-accent);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: var(--weight-md);
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.08s ease;
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--line-compact);
  letter-spacing: var(--letter-normal);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Button fill animation - matches default button behavior */
.table-of-contents-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.15),
      rgba(96, 165, 250, 0.1));
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Shimmer effect overlay - matches default button behavior */
.table-of-contents-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent);
  transform: translateX(-100%) translateY(-50%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius);
}

/* Hover state - matches default button hover */
.table-of-contents-button:hover {
  background: var(--glass-hover);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--shadow), var(--glow-subtle);
}

.table-of-contents-button:hover::before {
  clip-path: circle(100% at 50% 50%);
}

.table-of-contents-button:hover::after {
  transform: translateX(200%) translateY(-50%);
}

/* Ensure text stays above animations */
.table-of-contents-button>* {
  position: relative;
  z-index: 2;
}

/* Active state - matches default button active */
.table-of-contents-button:active {
  opacity: 0.8;
  transform: translateY(0);
}

/* Focus-visible - matches default button focus */
.table-of-contents-button:focus-visible {
  outline: 2px solid var(--glass-accent);
  outline-offset: 2px;
}

/* Desktop: horizontal layout - matches default button group behavior exactly */
@media (min-width: 768px) {
  .table-of-contents {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: var(--space-lg);
    /* Matches btn-group desktop gap */
  }

  .table-of-contents-button {
    width: auto;
    /* Matches default button desktop behavior */
    flex: 0 1 auto;
    min-width: 120px;
    /* Matches default button desktop min-width */
  }
}

/* ========================================
   FOOTER
   ======================================== */

body>footer {
  padding: var(--padding);
  max-width: var(--width);
  margin: 0 auto;
  border-top: var(--border) var(--glass-border);
}

body>footer .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin: 0;
}

body>footer h3 {
  font-size: var(--size-xl);
  margin-bottom: var(--space-lg);
  margin-top: 0;
}

body>footer p {
  font-size: var(--size-sm);
  max-width: 300px;
}

body>footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body>footer li {
  margin-bottom: var(--space-sm);
  font-size: var(--size-sm);
  line-height: var(--line-compact);
  color: var(--text-muted);
}

body>footer a {
  color: var(--text-muted);
  transition: color 0.12s ease;
}

body>footer a:hover {
  color: var(--accent);
}

.legal {
  border-top: var(--border) var(--glass-border);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  font-size: var(--size-xs);
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font);
}

.legal p {
  text-align: center;
  max-width: none;
  margin: 0 auto;
}

/* Image Utilities */
.img-white {
  filter: brightness(0) saturate(0) invert(1);
  -webkit-filter: brightness(0) saturate(0) invert(1);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing - Padding */
.p-0 {
  padding: 0;
}

.p-xs {
  padding: var(--space-xs);
}

.p-sm {
  padding: var(--space-sm);
}

.p-md {
  padding: var(--space-md);
}

.p-lg {
  padding: var(--space-lg);
}

.p-xl {
  padding: var(--space-xl);
}

.p-2xl {
  padding: var(--space-2xl);
}

.p-3xl {
  padding: var(--space-3xl);
}

.p-4xl {
  padding: var(--space-4xl);
}

/* Spacing - Margin */
.m-0 {
  margin: 0;
}

.m-xs {
  margin: var(--space-xs);
}

.m-sm {
  margin: var(--space-sm);
}

.m-md {
  margin: var(--space-md);
}

.m-lg {
  margin: var(--space-lg);
}

.m-xl {
  margin: var(--space-xl);
}

.m-2xl {
  margin: var(--space-2xl);
}

.m-3xl {
  margin: var(--space-3xl);
}

.m-4xl {
  margin: var(--space-4xl);
}

.m-auto {
  margin: 0 auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

/* Spacing - Gap */
.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

.gap-2xl {
  gap: var(--space-2xl);
}

/* Display */
.flex {
  display: flex;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.hidden {
  display: none;
}

/* Flexbox Utilities - Short semantic names */
.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.center,
.items-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .center is shorter, .items-center for clarity */
.start,
.items-start {
  align-items: flex-start;
}

.end,
.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.between,
.justify-between {
  justify-content: space-between;
}

/* .between is shorter */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

/* Text Utilities - Short semantic names */
.text-center {
  text-align: center;
}

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

.text-right {
  text-align: right;
}

.accent,
.text-accent {
  color: var(--accent);
}

/* .accent is shorter */
.muted,
.text-muted {
  color: var(--text-muted);
}

/* .muted is shorter */
.text {
  color: var(--text);
}

.text-xs {
  font-size: var(--size-xs);
}

.text-sm {
  font-size: var(--size-sm);
}

.text-md {
  font-size: var(--size);
}

.text-lg {
  font-size: var(--size-lg);
}

.text-xl {
  font-size: var(--size-xl);
}

.text-2xl {
  font-size: var(--size-2xl);
}

.text-3xl {
  font-size: var(--size-3xl);
}

.text-4xl {
  font-size: var(--size-4xl);
}

.text-5xl {
  font-size: var(--size-5xl);
}

.bold {
  font-weight: var(--weight-bold);
}

.semibold {
  font-weight: var(--weight-semibold);
}

.medium {
  font-weight: var(--weight-md);
}

.normal {
  font-weight: var(--weight);
}

.light {
  font-weight: var(--weight-light);
}

.leading-tight {
  line-height: var(--line-tight);
}

.leading-normal {
  line-height: var(--line);
}

.leading-relaxed {
  line-height: var(--line-relaxed);
}

.leading-compact {
  line-height: var(--line-compact);
}

/* Width Utilities */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 32rem;
}

.max-w-lg {
  max-width: 48rem;
}

.max-w-xl {
  max-width: 64rem;
}

.max-w-full {
  max-width: 100%;
}

/* Container */
.container {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

/* Border Utilities */
.border {
  border: 1px solid var(--glass-border);
}

.border-accent {
  border: 2px solid var(--glass-accent);
  box-shadow: 0 0 0 1px var(--glass-accent);
}

.border-t {
  border-top: 1px solid var(--glass-border);
}

.border-b {
  border-bottom: 1px solid var(--glass-border);
}

.rounded {
  border-radius: var(--radius);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

/* Background Utilities */
.bg-secondary {
  background: var(--glass);
}

.bg-card {
  background: var(--glass-hover);
}

/* Position Utilities */
.sticky {
  position: sticky;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.z-100 {
  z-index: 100;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Min Width Utilities */
.min-w-sm {
  min-width: 12rem;
}

.min-w-md {
  min-width: 16rem;
}

.min-w-lg {
  min-width: 20rem;
}

.min-w-xl {
  min-width: 24rem;
}

/* Min Height Utilities */
.min-h-sm {
  min-height: 12rem;
}

.min-h-md {
  min-height: 16rem;
}

.min-h-lg {
  min-height: 20rem;
}

.min-h-xl {
  min-height: 24rem;
}

.min-h-2xl {
  min-height: 32rem;
}

/* Aspect Ratio */
.aspect-square {
  aspect-ratio: 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

/* Placeholder Content */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.875rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--line-compact);
  width: 100%;
  transition: all 0.12s ease;
}

textarea {
  line-height: var(--line);
  min-height: 8rem;
  resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-hover);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--accent);
}

/* Sidebar Navigation */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-sm) var(--space);
  border-radius: var(--radius-sm);
  transition: all 0.12s ease;
  font-size: var(--size-sm);
  line-height: var(--line-compact);
  letter-spacing: var(--letter-normal);
}

.sidebar-nav a:hover {
  background: var(--glass-hover);
  color: var(--accent);
}

/* Wireframe Utilities */
.wireframe-section {
  margin: var(--space-5xl) 0;
  padding: var(--space-3xl) 0;
  border-top: var(--border) var(--glass-border);
  scroll-margin-top: 100px;
}

.wireframe-section:first-of-type {
  border-top: none;
}

.wireframe-label {
  position: sticky;
  top: 80px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: var(--blur);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  margin-bottom: var(--space-2xl);
  display: inline-block;
  border: var(--border) var(--glass-border);
  z-index: 10;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  line-height: var(--line-compact);
}

/* Wireframe Navigation Sidebar */
.wireframe-nav {
  position: sticky;
  top: calc(var(--space-xl) + 60px);
  align-self: start;
  z-index: 5;
}

.wireframe-nav article {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wireframe-nav .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.wireframe-nav .sidebar-nav a {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: all 0.12s ease;
  font-size: var(--size-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.wireframe-nav .sidebar-nav a:hover {
  background: var(--glass-hover);
  color: var(--accent);
}

/* Layout for wireframes page with sidebar */
main {
  display: block;
}

.wireframes-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-2xl);
  align-items: start;
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

/* List Utilities */
ul {
  list-style: none;
  padding: 0;
}

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

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */
/* 
   RESPONSIVE DESIGN SYSTEM:
   =========================
   Approach: Mobile-first (default styles are for mobile)
   Breakpoint: 768px (desktop starts here)
   Strategy: Mobile styles are default, desktop overrides at 768px+
   
   KEY PATTERNS:
   - Buttons: Full width on mobile → Auto width on desktop
   - Grid: Single column on mobile → Multi-column on desktop
   - Navigation: Hamburger menu on mobile → Horizontal nav on desktop
   - Typography: Smaller sizes on mobile → Larger on desktop
   - Spacing: Reduced padding/margins on mobile → Full spacing on desktop
   
   BREAKPOINTS:
   - Mobile: < 768px (default styles)
   - Desktop: >= 768px (media query overrides)
   - Small mobile: < 480px (additional optimizations)
   
   TOUCH OPTIMIZATIONS:
   - Minimum touch target: 44x44px
   - Larger padding on mobile inputs (prevents iOS zoom)
   - Stacked layouts for better thumb reach
*/

/* Touch targets - minimum 44x44px */
button,
[role="button"],
a[role="button"],
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile-first responsive breakpoints */
@media (max-width: 768px) {
  :root {
    --size-5xl: 2.5rem;
    --size-4xl: 2rem;
    --size-3xl: 1.75rem;
    --padding: var(--space-lg);
    --space-4xl: 3rem;
    --space-5xl: 4rem;
  }

  /* Typography scaling */
  h1 {
    font-size: var(--size-4xl);
    margin-bottom: var(--space-lg);
    line-height: 1.1;
  }

  h2 {
    font-size: var(--size-3xl);
    margin-bottom: var(--space-lg);
    margin-top: var(--space-xl);
    line-height: 1.15;
  }

  /* Reduce container h2 top margins on mobile */
  .container>h2,
  .container>section>h2 {
    margin-top: var(--space-2xl);
  }

  .container>h2:first-child,
  .container>section>h2:first-child {
    margin-top: var(--space-xl);
  }

  h3 {
    font-size: var(--size-2xl);
    margin-bottom: var(--space);
  }

  h4 {
    font-size: var(--size-xl);
  }

  /* Hero section */
  .hero {
    padding: var(--space-3xl) 0 var(--space-lg);
  }

  /* Reduce gap between hero and first section */
  .hero+section {
    margin-top: 0;
  }

  .hero+section .container {
    padding-top: var(--space);
  }

  /* Reduce first h2 margin after hero even more */
  .hero+section .container>h2:first-child {
    margin-top: var(--space-lg);
  }

  .hero-text {
    font-size: var(--size-lg);
    padding: 0 var(--space);
  }

  /* Navigation - mobile menu */
  nav {
    flex-wrap: wrap;
    gap: var(--space);
    position: relative;
  }

  /* Hide nav links on mobile, show hamburger */
  nav .links {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  /* Body scroll lock when menu is open */
  body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  nav .brand {
    font-size: var(--size-sm);
  }

  /* Mobile menu toggle button - Mobile first: visible by default */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--glass);
    border: var(--border) var(--glass-border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font-size: var(--size-lg);
    transition: all 0.12s ease;
    margin-left: auto;
    position: relative;
    z-index: 101;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus {
    background: var(--glass-hover);
    border-color: var(--glass-accent);
    outline: none;
  }

  .mobile-menu-toggle[aria-expanded="true"] {
    background: var(--glass-hover);
    border-color: var(--accent);
  }

  /* Header adjustments */
  header {
    padding: var(--space) var(--space-lg);
  }

  /* Container padding */
  .container {
    padding: 0 var(--space-lg);
  }

  /* Grid layouts */
  .grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
  }

  .grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space);
  }

  /* Articles */
  article {
    padding: var(--space-lg);
  }

  /* Buttons - Already mobile-first, no changes needed */
  /* Mobile styles are the default, desktop overrides at 768px+ */

  /* Footer */
  body>footer {
    padding: var(--space-xl) var(--space-lg);
  }

  body>footer .grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Sections */
  section.secondary {
    margin: 0 calc(var(--space-lg) * -1);
    padding: var(--space-xl) var(--space-lg);
  }

  /* Wireframe sections */
  .wireframe-section {
    margin: var(--space-3xl) 0;
    padding: var(--space-2xl) 0;
    scroll-margin-top: 20px;
  }

  .wireframe-label {
    position: static;
    display: block;
    margin-bottom: var(--space-lg);
  }

  /* Wireframe navigation - hide on mobile or make collapsible */
  .wireframe-nav {
    position: static;
    margin-bottom: var(--space-xl);
  }

  .wireframe-nav article {
    max-height: none;
  }

  /* Stack layout on mobile */
  .wireframes-main {
    grid-template-columns: 1fr;
  }


  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px;
    /* Prevents zoom on iOS */
    padding: 1rem;
  }

  /* Code blocks */
  pre {
    padding: var(--space-lg);
    font-size: var(--size-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Sidebar navigation */
  .sidebar-nav {
    gap: var(--space-sm);
  }

  .sidebar-nav a {
    padding: var(--space) var(--space-lg);
    min-height: 44px;
  }

  /* Wallet components */
  .wallet-card {
    padding: var(--space-lg);
  }

  .wallet-actions {
    flex-direction: column;
    gap: var(--space);
  }

  .wallet-actions button {
    width: 100%;
  }

  .transaction-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space);
  }

  .transaction-amount {
    width: 100%;
    text-align: left;
    align-items: flex-start;
    padding-left: 0;
    padding-top: var(--space);
    border-top: 1px solid var(--glass-border);
  }

  /* Utility adjustments */
  .flex {
    flex-wrap: wrap;
  }

  .flex-col-mobile {
    flex-direction: column;
  }
}

/* Code snippets - small mobile devices */
@media (max-width: 480px) {
  .code-snippet-content {
    padding: var(--space-sm);
    font-size: 11px;
    line-height: 1.35;
  }

  .code-snippet-header {
    padding: var(--space-xs);
  }

  .code-snippet-title {
    font-size: 10px;
  }

  .code-snippet-copy-btn,
  .code-snippet-download-btn,
  .code-snippet-select-btn {
    padding: 4px var(--space-xs);
    font-size: 10px;
    min-height: 28px;
  }

  .code-snippet-actions {
    gap: 4px;
    flex-wrap: wrap;
  }

  .code-viewer-content {
    padding: var(--space-sm);
    font-size: 11px;
    line-height: 1.35;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  :root {
    --size-5xl: 2rem;
    --size-4xl: 1.75rem;
    --size-3xl: 1.5rem;
    --padding: var(--space);
  }

  h1 {
    font-size: var(--size-3xl);
  }

  h2 {
    font-size: var(--size-2xl);
  }

  .hero {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .hero-text {
    font-size: var(--size);
  }

  article {
    padding: var(--space);
  }

  /* Extra small screens: Slightly larger padding for better touch targets */
  button,
  [role="button"] {
    padding: 1rem 1.25rem;
    min-height: 48px;
    /* Larger touch target on very small screens */
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: var(--space-2xl) 0;
  }

  header {
    padding: var(--space-sm) var(--space-lg);
  }
}


/* ========================================
   WALLET COMPONENTS
   Semantic wallet interface classes
   ======================================== */

.wallet-card {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  padding: var(--space-xl);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
}

.wallet-balance {
  margin-bottom: var(--space-xl);
}

.wallet-icon {
  background: var(--glass-hover);
  border-radius: 50%;
  width: 100%;
  max-width: 12rem;
  margin: 0 auto var(--space-md);
  padding: var(--space-2xl);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet-usd-value {
  margin-top: var(--space-sm);
}

.wallet-address {
  margin-top: var(--space-lg);
}

.wallet-address code {
  display: block;
  margin-top: var(--space-sm);
}

.wallet-actions {
  margin-top: var(--space-xl);
}

.wallet-overview {
  display: flex;
  flex-direction: column;
}

.wallet-stats {
  margin-top: var(--space-lg);
}

.stat-card {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  padding: var(--space-lg);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.wallet-activity {
  margin-top: var(--space-xl);
}

.transaction-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.transaction-item {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  padding: var(--space-lg);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: all 0.12s ease;
}

.transaction-item:hover {
  background: var(--glass-hover);
  border-color: var(--glass-accent);
}

.transaction-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-right: var(--space-lg);
}

.transaction-type {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-wide);
  line-height: var(--line-compact);
}

.transaction-address {
  font-size: var(--size-xs);
  font-family: var(--font);
  letter-spacing: var(--letter-normal);
  line-height: var(--line-compact);
  word-break: break-all;
}

.transaction-amount {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-left: var(--space-lg);
  min-width: 120px;
  align-items: flex-end;
}

.transaction-amount .accent {
  font-size: var(--size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-normal);
  line-height: var(--line-tight);
}

.transaction-time {
  font-size: var(--size-xs);
  letter-spacing: var(--letter-normal);
  line-height: var(--line-compact);
}

/* ========================================
   CODE SNIPPET COMPONENT (Modern SaaS Style)
   ======================================== */

.code-snippet {
  position: relative;
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all 0.12s ease;
  margin: var(--space-lg) 0;
}

.code-snippet:hover {
  border-color: var(--glass-accent);
  box-shadow: var(--shadow-md), var(--glow-subtle);
}

.code-snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-radius: var(--radius) var(--radius) 0 0;
}

.code-snippet-title {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  font-family: var(--font);
}

.code-snippet-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.code-snippet-copy-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
  padding-left: calc(var(--space-md) + 1rem);
}

/* Copy icon - two overlapping rectangles */
.code-snippet-copy-btn::before {
  content: '';
  position: absolute;
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: transparent;
  opacity: 0.8;
}

/* Second rectangle for copy effect */
.code-snippet-copy-btn::after {
  content: '';
  position: absolute;
  left: calc(var(--space-xs) + 0.25rem);
  top: calc(50% + 0.25rem);
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: var(--glass);
  opacity: 0.6;
  z-index: -1;
}

.code-snippet-copy-btn:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

.code-snippet-copy-btn.copied {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glass-accent);
}

/* Checkmark icon when copied */
.code-snippet-copy-btn.copied::before {
  content: '✓';
  border: none;
  background: transparent;
  width: auto;
  height: auto;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 1;
  transform: translateY(-50%);
}

.code-snippet-copy-btn.copied::after {
  display: none;
}

/* Tiny copy button - positioned in header, right side */
.code-snippet-copy-btn-tiny {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.6;
}

.code-snippet-header:hover .code-snippet-copy-btn-tiny {
  opacity: 1;
}

.code-snippet-copy-btn-tiny:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-accent);
  color: var(--accent);
}

.code-snippet-copy-btn-tiny.copied {
  background: var(--glass-accent);
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

.code-snippet-download-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.code-snippet-download-btn:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

.code-snippet-select-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.code-snippet-select-btn:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

.code-snippet-content {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.code-snippet-content:active {
  cursor: text;
}

.code-snippet-collapsed {
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

.code-snippet-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.code-snippet-expand-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  margin-top: var(--space-sm);
  width: 100%;
}

.code-snippet-expand-btn:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

/* Fullscreen code modal */
.code-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.code-fullscreen-modal.active {
  opacity: 1;
}

.code-fullscreen-content {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.code-fullscreen-modal.active .code-fullscreen-content {
  transform: scale(1);
}

.code-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--font);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.code-fullscreen-close {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  font-size: var(--size-lg);
  line-height: 1;
}

.code-fullscreen-close:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

.code-fullscreen-body {
  flex: 1;
  overflow: auto;
  padding: var(--space-xl);
  margin: 0;
  font-family: var(--font);
  font-size: var(--size);
  line-height: 1.5;
  color: var(--text-2);
  background: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.code-fullscreen-actions {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--glass-border);
  justify-content: flex-end;
}

.code-fullscreen-actions button {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font);
}

.code-fullscreen-actions button:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

.code-snippet-body {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.code-snippet-content {
  padding: var(--space-lg);
  margin: 0;
  font-family: var(--font);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  letter-spacing: 0.01em;
  tab-size: 2;
  -moz-tab-size: 2;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.code-snippet-content,
.code-snippet-content pre {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.code-snippet-content code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-variant-ligatures: none;
  border-radius: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   CODE VIEWER COMPONENT (Full Featured)
   ======================================== */

.code-viewer {
  position: relative;
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all 0.12s ease;
}

.code-viewer:hover {
  border-color: var(--glass-accent);
  box-shadow: var(--shadow-md), var(--glow-subtle);
}

.code-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.code-viewer-title {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.code-viewer-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.code-viewer-copy-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: var(--space-xs) var(--space-md);
  padding-left: calc(var(--space-md) + 1rem);
  border-radius: var(--radius-sm);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Copy icon for code viewer */
.code-viewer-copy-btn::before {
  content: '';
  position: absolute;
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: transparent;
  opacity: 0.8;
}

.code-viewer-copy-btn::after {
  content: '';
  position: absolute;
  left: calc(var(--space-xs) + 0.25rem);
  top: calc(50% + 0.25rem);
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: var(--glass);
  opacity: 0.6;
  z-index: -1;
}

.code-viewer-copy-btn:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

.code-viewer-copy-btn.copied {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glass-accent);
}

/* Checkmark icon when copied */
.code-viewer-copy-btn.copied::before {
  content: '✓';
  border: none;
  background: transparent;
  width: auto;
  height: auto;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 1;
  transform: translateY(-50%);
}

.code-viewer-copy-btn.copied::after {
  display: none;
}

.code-viewer-body {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.code-viewer-content {
  padding: var(--space-lg);
  margin: 0;
  font-family: var(--font);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--text-2);
  background: transparent;
  border: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  letter-spacing: 0.01em;
  tab-size: 2;
  -moz-tab-size: 2;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.code-viewer-content code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.code-viewer-line-numbers {
  position: absolute;
  left: 0;
  top: 0;
  padding: var(--space-xl) var(--space-md);
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-dim);
  user-select: none;
  pointer-events: none;
  text-align: right;
  line-height: var(--line);
  border-right: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.code-viewer-content.with-line-numbers {
  padding-left: calc(var(--space-xl) + 3rem);
}

/* Python syntax highlighting (basic) */
.code-viewer-content .python-keyword {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.code-viewer-content .python-string {
  color: var(--accent-2);
}

.code-viewer-content .python-comment {
  color: var(--text-dim);
  font-style: italic;
}

.code-viewer-content .python-function {
  color: var(--accent-3);
  font-weight: var(--weight-semibold);
}

.code-viewer-content .python-number {
  color: var(--accent-2);
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.open {
  opacity: 1;
}

.modal-content {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 9999;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.modal-overlay.open .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  font-size: var(--size-lg);
  line-height: 1;
}

.modal-close:hover {
  border-color: var(--glass-accent);
  color: var(--accent);
  background: var(--glass-hover);
}

/* Tooltip styles */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--size-xs);
  color: var(--text-2);
  white-space: nowrap;
  z-index: 1000;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.12s ease;
}

.tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.tooltip.top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  margin-bottom: var(--space-xs);
}

.tooltip.top.show {
  transform: translateX(-50%) translateY(0);
}

.tooltip.bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  margin-top: var(--space-xs);
}

.tooltip.bottom.show {
  transform: translateX(-50%) translateY(0);
}

.tooltip.left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-5px);
  margin-right: var(--space-xs);
}

.tooltip.left.show {
  transform: translateY(-50%) translateX(0);
}

.tooltip.right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(5px);
  margin-left: var(--space-xs);
}

.tooltip.right.show {
  transform: translateY(-50%) translateX(0);
}

/* Accordion styles */
.accordion-item {
  border-bottom: 1px solid var(--glass-border);
}

.accordion-header {
  padding: var(--space-lg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.12s ease;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.accordion-header:hover {
  background: var(--glass-hover);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 var(--space-lg);
}

.accordion-content.open {
  max-height: 2000px;
  padding: var(--space-lg);
}

/* Tab styles */
.tabs-header {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--space-lg);
}

.tab-button {
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font-body);
  font-size: var(--size);
}

.tab-button:hover {
  color: var(--text-2);
}

.tab-button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ========================================
   CHARTS & GRAPHS
   Semantic, CDN-ready chart containers + legends
   ======================================== */
/*
  CHART SYSTEM:
  ============
  Goal: Make charts look native to the glass UI without forcing a charting library.

  Recommended semantic pattern:
  - Wrap charts in <figure class="chart"> with <figcaption> for accessibility
  - Use <canvas> (Chart.js, etc.) OR <svg> for custom charts
  - Use .chart-legend + .chart-legend-item for series labels

  Example:
    <article>
      <h3>Revenue</h3>
      <figure class="chart">
        <figcaption class="chart-caption">Last 30 days</figcaption>
        <div class="chart-surface">
          <canvas class="chart-canvas"></canvas>
        </div>
        <div class="chart-legend">...</div>
      </figure>
    </article>
*/

.chart {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.chart-caption {
  color: var(--text-muted);
  font-size: var(--size-sm);
  line-height: var(--line-compact);
  margin: 0;
}

/* Surface that visually matches glass cards */
.chart-surface {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space);
  overflow: hidden;
  position: relative;
}

.chart-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--accent-glow) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 45%);
  opacity: 0.25;
  pointer-events: none;
}

.chart-surface>* {
  position: relative;
  z-index: 1;
}

/* Normalize canvas/svg sizing */
.chart-canvas,
.chart svg {
  display: block;
  width: 100%;
  height: 240px;
}

@media (max-width: 768px) {

  .chart-canvas,
  .chart svg {
    height: 200px;
  }
}

/* Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--size-sm);
  line-height: var(--line-compact);
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}

.chart-legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

/* Metric row often paired with charts */
.chart-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space);
}

@media (min-width: 768px) {
  .chart-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.chart-metric {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: var(--space);
}

.chart-metric-label {
  font-size: var(--size-xs);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-xs);
}

.chart-metric-value {
  margin: 0;
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.chart-metric-delta {
  margin-top: var(--space-xs);
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.chart-metric-delta.up {
  color: var(--accent-2);
}

.chart-metric-delta.down {
  color: var(--accent-3);
}

/* CSS-only bar chart (for simple dashboards, no JS) */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  height: 160px;
}

.bar {
  flex: 1 1 0%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform-origin: bottom;
  transform: scaleY(var(--bar, 0.25));
  transition: transform var(--speed);
  opacity: 0.9;
}

.bar:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

.bar-label {
  margin-top: var(--space-xs);
  font-size: var(--size-xs);
  color: var(--text-muted);
  text-align: center;
}

/* Simple sparkline (SVG) helper */
.sparkline {
  height: 64px;
}

.sparkline svg {
  height: 64px;
}

.sparkline path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.sparkline .sparkline-area {
  fill: var(--glass-accent);
  opacity: 0.4;
}

/* Charts: CSS-only "dynamic" demos (dataset toggles + animations)
   ---------------------------------------------------------------
   Why: Provide interactive-looking chart examples without JS.
   How: Use radio inputs (visually hidden) + labels styled as buttons.
   Then switch chart CSS variables and dataset visibility via :checked ~ selectors.

   Accessibility:
   - Use <figure>/<figcaption> for charts
   - Use a labeled control group (role="group" + aria-label) for dataset toggles
*/

.chart-dataset-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.chart-dataset-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin: var(--space-sm) 0 var(--space);
}

/* Labels use the existing [role="button"] base button styling */
.chart-dataset-controls label[role="button"] {
  user-select: none;
}

/* Optional scope helper for demo pages: keep dataset toggles from affecting other charts */
.chart-demo-scope {
  display: block;
}

/* Demo wiring (CSS-only) – dataset toggle behavior inside a scoped container */
.chart-demo-scope #chartRevenueWeek:checked~.chart-dataset-controls label[for="chartRevenueWeek"],
.chart-demo-scope #chartRevenueMonth:checked~.chart-dataset-controls label[for="chartRevenueMonth"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glass-accent);
}

/* Default (Week) values */
.chart-demo-scope figure.chart-demo-bars {
  --bar-1: 0.25;
  --bar-2: 0.55;
  --bar-3: 0.8;
  --bar-4: 0.45;
  --bar-5: 0.65;
  --bar-6: 0.4;
  --bar-7: 0.9;
}

.chart-demo-scope figure.chart-demo-bars .bar {
  --bar-label: var(--bar-label-week, "");
}

/* Month dataset (CSS-only) */
.chart-demo-scope #chartRevenueMonth:checked~figure.chart-demo-bars {
  --bar-1: 0.4;
  --bar-2: 0.6;
  --bar-3: 0.72;
  --bar-4: 0.52;
  --bar-5: 0.7;
  --bar-6: 0.62;
  --bar-7: 0.78;
}

.chart-demo-scope #chartRevenueMonth:checked~figure.chart-demo-bars .bar {
  --bar-label: var(--bar-label-month, "");
}

/* Toggle which SVG dataset is visible */
.chart-demo-scope #chartRevenueMonth:checked~figure .dataset-week {
  opacity: 0;
  pointer-events: none;
}

.chart-demo-scope #chartRevenueMonth:checked~figure .dataset-month {
  opacity: 1;
}

.chart-demo-scope #chartRevenueWeek:checked~figure .dataset-week {
  opacity: 1;
}

.chart-demo-scope #chartRevenueWeek:checked~figure .dataset-month {
  opacity: 0;
  pointer-events: none;
}

/* Reset “hidden” helper when toggled on */
.chart-demo-scope #chartRevenueMonth:checked~figure .dataset-month.hidden,
.chart-demo-scope #chartRevenueWeek:checked~figure .dataset-week.hidden {
  opacity: 1;
}

/* Checked state: make the selected dataset obvious */
.chart-dataset-input:checked~.chart-dataset-controls label[for] {
  opacity: 1;
}

/* Visible focus ring for keyboard users */
.chart-dataset-input:focus-visible~.chart-dataset-controls label[for] {
  outline: 2px solid var(--glass-accent);
  outline-offset: 2px;
}

/* Bar helpers */
.bar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Optional bar value label (CSS-only; use --bar-label-week/--bar-label-month on each .bar) */
.bar::after {
  content: var(--bar-label, "");
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--size-xs);
  color: var(--text-dim);
  opacity: 0;
  transition: opacity var(--speed), color var(--speed);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

.bar:hover::after {
  opacity: 1;
  color: var(--text-2);
}

/* Staggered bar growth animation (for demo charts) */
@keyframes barGrow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(var(--bar, 0.25));
  }
}

.chart-demo .bar::before {
  animation: barGrow 0.6s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* SVG line animation helpers */
.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 10px var(--accent-glow));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDraw 1.1s ease forwards;
}

@keyframes lineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.chart-line.alt {
  stroke: var(--accent-2);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.06));
  opacity: 0.9;
}

.chart-area {
  fill: var(--glass-accent);
  opacity: 0.35;
}

.chart-dataset {
  transition: opacity var(--speed);
}

.chart-dataset.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   WEB3 COMPONENTS
   Ethereum/blockchain-specific UI patterns
   ======================================== */

/* --- Connect Wallet Button --- */
.connect-wallet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--glass);
  border: var(--border) var(--glass-accent);
  color: var(--text);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--speed);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.connect-wallet:hover {
  background: var(--glass-hover);
  box-shadow: var(--glow);
}

.connect-wallet[data-state="connecting"] {
  opacity: 0.7;
  cursor: wait;
}

.connect-wallet[data-state="connected"] {
  border-color: var(--glass-border);
}

.connect-wallet .wallet-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
}

.connect-wallet[data-state="connected"] .wallet-indicator {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* --- Network Badge --- */
.network-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--glass);
  border: var(--border) var(--glass-border);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--size-xs);
  color: var(--text-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.network-badge .network-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.network-badge[data-network="mainnet"] .network-dot {
  background: #22c55e;
}

.network-badge[data-network="sepolia"] .network-dot {
  background: #a855f7;
}

.network-badge[data-network="goerli"] .network-dot {
  background: #3b82f6;
}

.network-badge[data-network="polygon"] .network-dot {
  background: #8b5cf6;
}

.network-badge[data-network="arbitrum"] .network-dot {
  background: #2563eb;
}

.network-badge[data-network="optimism"] .network-dot {
  background: #ef4444;
}

.network-badge[data-network="base"] .network-dot {
  background: #3b82f6;
}

/* --- Address Display --- */
.address {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-2);
}

.address-hash {
  background: var(--glass);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border) var(--glass-border);
}

.address-copy {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color var(--speed);
  font-size: var(--size-sm);
}

.address-copy:hover {
  color: var(--accent);
}

/* --- Token Display --- */
.token {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  transition: all var(--speed);
}

.token:hover {
  background: var(--glass-hover);
  border-color: var(--glass-accent);
}

.token-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--glass-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-lg);
  flex-shrink: 0;
}

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

.token-name {
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-size: var(--size);
}

.token-symbol {
  font-size: var(--size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.token-balance {
  text-align: right;
}

.token-amount {
  font-family: var(--font);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.token-value {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

/* --- Token List --- */
.token-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* --- Gas Estimate --- */
.gas-estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
}

.gas-estimate-label {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.gas-estimate-value {
  font-family: var(--font);
  color: var(--text-2);
}

.gas-estimate[data-priority="low"] {
  border-left: 3px solid #22c55e;
}

.gas-estimate[data-priority="medium"] {
  border-left: 3px solid #eab308;
}

.gas-estimate[data-priority="high"] {
  border-left: 3px solid #ef4444;
}

/* --- Price Display --- */
.price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.price-value {
  font-family: var(--font);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.price-change {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.price-change.up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.price-change.down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* --- Transaction Status --- */
.tx-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.tx-status[data-status="pending"] {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.tx-status[data-status="confirmed"] {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.tx-status[data-status="failed"] {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.tx-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tx-status[data-status="pending"] .status-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* --- NFT Card --- */
.nft-card {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--speed);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.nft-card:hover {
  border-color: var(--glass-accent);
  box-shadow: var(--shadow-lg), var(--glow);
  transform: translateY(-2px);
}

.nft-image {
  aspect-ratio: 1;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--text-muted);
}

.nft-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nft-details {
  padding: var(--space-md);
}

.nft-collection {
  font-size: var(--size-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  margin-bottom: var(--space-xs);
}

.nft-name {
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.nft-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: var(--border) var(--glass-border);
}

.nft-price-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.nft-price-value {
  font-family: var(--font);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* --- Staking Card --- */
.staking-card {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.staking-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.staking-title {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.staking-apy {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
}

.staking-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.staking-stat {
  text-align: center;
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.staking-stat-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.staking-stat-value {
  font-family: var(--font);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* --- Contract Interaction --- */
.contract-form {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.contract-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border) var(--glass-border);
}

.contract-name {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.contract-address {
  font-family: var(--font);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.contract-function {
  margin-bottom: var(--space-lg);
}

.contract-function-name {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.contract-input {
  margin-bottom: var(--space-md);
}

.contract-input label {
  display: block;
  font-size: var(--size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

/* --- Blockchain Data Display --- */
.block-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.block-stat {
  background: var(--glass);
  border: var(--border) var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  text-align: center;
}

.block-stat-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  margin-bottom: var(--space-xs);
}

.block-stat-value {
  font-family: var(--font);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* --- Hash Display --- */
.hash {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-2);
  background: var(--glass);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border) var(--glass-border);
  word-break: break-all;
}

.hash-truncated::before {
  content: attr(data-hash);
}

/* --- Signature Display --- */
.signature {
  font-family: var(--font);
  font-size: var(--size-xs);
  color: var(--text-muted);
  background: var(--glass);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border) var(--glass-border);
  word-break: break-all;
  line-height: var(--line-relaxed);
}

/* ========================================
   DOCS LAYOUT WITH SIDEBAR
   ======================================== */

.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: calc(var(--width) + 280px);
  margin: 0 auto;
  padding: 0 var(--padding);
}

.docs-sidebar {
  display: none;
  position: sticky;
  top: calc(var(--space-xl) + 70px);
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--space);
}

.docs-sidebar::-webkit-scrollbar {
  width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 2px;
}

.docs-sidebar-section {
  margin-bottom: var(--space-lg);
}

.docs-sidebar-heading {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  padding: var(--space-sm) var(--space-sm);
  margin-bottom: var(--space-xs);
}

.docs-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-sidebar-links a {
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  transition: all var(--speed);
  border-left: 2px solid transparent;
}

.docs-sidebar-links a:hover {
  color: var(--text);
  background: var(--glass-hover);
}

.docs-sidebar-links a.active {
  color: var(--accent);
  background: var(--glass-accent);
  border-left-color: var(--accent);
}

.docs-sidebar-links a.sub {
  padding-left: var(--space-lg);
  font-size: var(--size-xs);
}

.docs-content {
  min-width: 0;
}

/* Sidebar toggle for mobile */
.sidebar-toggle {
  display: flex;
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 100;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  font-size: var(--size-lg);
  box-shadow: var(--shadow-lg), var(--glow);
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: var(--accent-2);
  transform: scale(1.05);
}

/* Mobile sidebar overlay */
.docs-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--speed);
}

.docs-sidebar-overlay.open {
  display: block;
  opacity: 1;
}

/* Mobile sidebar panel */
.docs-sidebar-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-2);
  border-right: var(--border) var(--glass-border);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform var(--speed);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-xl) var(--space);
}

.docs-sidebar-mobile.open {
  display: block;
  transform: translateX(0);
}

.docs-sidebar-mobile .docs-sidebar-close {
  position: absolute;
  top: var(--space);
  right: var(--space);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--size-xl);
  cursor: pointer;
  padding: var(--space-sm);
  min-height: 44px;
  min-width: 44px;
}

.docs-sidebar-mobile .docs-sidebar-close:hover {
  color: var(--text);
}

/* Desktop: Show sidebar in grid */
@media (min-width: 1024px) {
  .docs-layout {
    grid-template-columns: 240px 1fr;
  }

  .docs-sidebar {
    display: block;
  }

  .sidebar-toggle {
    display: none;
  }
}

/* Large screens: wider sidebar */
@media (min-width: 1280px) {
  .docs-layout {
    grid-template-columns: 280px 1fr;
  }
}