/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                      GRaiT GAMES — MASTER STYLESHEET                         ║
║                   Synthwave / Retro-Futuristic Gaming Brand                  ║
║                                                                              ║
║  Created: 2026                                                               ║
║  Compliance: WCAG 2.1 AA                                                     ║
║  Brand Guide: /home/ubuntu/grait-games-brand-summary.md                     ║
║                                                                              ║
║  DESIGN PRINCIPLES:                                                          ║
║  • Orange & Green are PRIMARY brand colors (must dominate)                   ║
║  • Magenta, Purple, Cyan are SUPPORTING colors                               ║
║  • Dark backgrounds with neon glow accents                                   ║
║  • High contrast for accessibility                                           ║
║  • Glow effects are decorative only (not for readability)                    ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/

/* ============================================================================
   1. GOOGLE FONTS IMPORT
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap');


/* ============================================================================
   2. CSS CUSTOM PROPERTIES (CSS Variables)
   ============================================================================ */
:root {
  /* === CORE BRAND COLORS === */
  /* Orange and Green are PRIMARY — must remain dominant */
  --color-orange:           #FF6B2B;  /* Primary orange (GR, T in logo) */
  --color-green:            #39FF14;  /* Primary green (ai, GAMES in logo) */
  --color-magenta:          #FF00D4;  /* Neon magenta (supporting) */
  --color-orange-2:         #FF8C42;  /* Secondary orange (hover states) */
  --color-green-2:          #00FF88;  /* Secondary green (accents) */
  --color-cyan:             #00FFFF;  /* Tertiary cyan accent */
  --color-cyan-2:           #00EAFF;  /* Navigation/footer links */

  /* === PINK / SYNTHWAVE SPECTRUM === */
  --color-hot-pink:         #FF2BC2;  /* Secondary pink accents */
  --color-deep-magenta:     #D100B8;  /* Shadows and depth (decorative) */
  --color-synthwave-purple: #8A00FF;  /* Decorative purple (NOT for body text) */

  /* === FUNCTIONAL COLORS === */
  --color-alert-red:        #FF3355;  /* Errors, warnings, destructive actions */
  --color-trophy-gold:      #FFD447;  /* Rewards, achievements, badges */

  /* === BACKGROUND COLORS === */
  --bg-primary:             #07070F;  /* Main page background (Space Black) */
  --bg-secondary:           #0D0D1A;  /* Secondary background (Deep Space) */
  --bg-footer:              #0A0A0F;  /* Footer background */
  --bg-panel:               #1A1A2E;  /* Cards, panels, inset sections */

  /* === TEXT COLORS (WCAG AA Accessible) === */
  --text-primary:           #E0E0E0;  /* Main body text */
  --text-footer:            #E8E8F0;  /* Footer text */
  --text-description:       #B8DDB8;  /* Descriptive paragraphs */
  --text-muted:             #8A8AAD;  /* Secondary text, metadata */
  --text-link:              #00EAFF;  /* Links (cyan-2) */
  --text-orange:            #FF6B2B;  /* Orange accent text */
  --text-green:             #39FF14;  /* Green accent text */
  --text-magenta:           #FF00D4;  /* Magenta accent text (limited use) */
  --text-purple:            #B266FF;  /* Accessible purple text (optional) */

  /* === BORDERS === */
  /* Decorative borders (low contrast — for visual separation only) */
  --border-decorative:      #1E1E30;  /* Subtle decorative dividers */
  
  /* Accessible borders (high contrast — for component boundaries) */
  --border-accessible:      #666690;  /* Default accessible border */
  --border-accessible-strong: #7878A8;  /* Stronger contrast border */
  
  /* Accent borders (decorative, semi-transparent) */
  --border-orange:          #FF6B2B55;  /* Orange accent border */
  --border-green:           #39FF1455;  /* Green accent border */
  --border-pink:            #FF00D455;  /* Pink accent border */
  --border-cyan:            #00FFFF55;  /* Cyan accent border */

  /* === NEON GLOW EFFECTS (box-shadow / text-shadow values) === */
  /* ⚠️ Glow is DECORATIVE ONLY — never rely on it for readability */
  --glow-orange:            0 0 8px #FF6B2B, 0 0 24px #FF6B2BAA, 0 0 50px #FF6B2B55;
  --glow-green:             0 0 8px #39FF14, 0 0 24px #39FF14AA, 0 0 50px #39FF1455;
  --glow-cyan:              0 0 8px #00FFFF, 0 0 24px #00FFFFAA;
  --glow-pink:              0 0 8px #FF00D4, 0 0 24px #FF00D4AA, 0 0 50px #FF00D455;
  --glow-purple:            0 0 8px #8A00FF, 0 0 24px #8A00FFAA, 0 0 50px #8A00FF55;

  /* === GRADIENTS === */
  --gradient-orange:        linear-gradient(180deg, #FF8C42 0%, #FF6B2B 100%);
  --gradient-green:         linear-gradient(180deg, #00FF88 0%, #39FF14 100%);
  --gradient-synthwave:     linear-gradient(90deg, #FF00D4 0%, #8A00FF 50%, #00FFFF 100%);

  /* === TYPOGRAPHY === */
  --font-logo:              'Press Start 2P', cursive;      /* Pixel/retro logo font */
  --font-headline:          'Orbitron', sans-serif;         /* H1-H2 headlines */
  --font-body:              'Rajdhani', sans-serif;         /* Body text, navigation */
  --font-mono:              'Share Tech Mono', monospace;   /* Stats, code, technical UI */

  /* === SPACING SCALE === */
  /* Consistent spacing system (based on 8px grid) */
  --space-xs:   0.25rem;  /* 4px */
  --space-sm:   0.5rem;   /* 8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  6rem;     /* 96px */

  /* === RESPONSIVE BREAKPOINTS === */
  /* Use these in media queries */
  --breakpoint-sm:  640px;   /* Small devices */
  --breakpoint-md:  768px;   /* Tablets */
  --breakpoint-lg:  1024px;  /* Desktop */
  --breakpoint-xl:  1280px;  /* Large desktop */
  --breakpoint-2xl: 1536px;  /* Extra large screens */

  /* === EFFECTS & TRANSITIONS === */
  --transition-fast:    0.15s ease;
  --transition-normal:  0.3s ease;
  --transition-slow:    0.5s ease;
  --border-radius:      4px;
  --border-radius-lg:   8px;
  --border-radius-xl:   12px;
}


/* ============================================================================
   3. CSS RESET & NORMALIZATION
   ============================================================================ */
/* Modern CSS reset for consistent cross-browser rendering */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Prevent font size adjustments after orientation changes on iOS */
  -webkit-text-size-adjust: 100%;
  /* Set default font size for rem units */
  font-size: 16px;
  /* Enable smooth scrolling for anchor links */
  scroll-behavior: smooth;
}

body {
  /* Remove default margins */
  margin: 0;
  padding: 0;
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove default list styling */
ol, ul {
  list-style: none;
}

/* Make images responsive by default */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Remove default button styles */
button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Improve table rendering */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ============================================================================
   4. GLOBAL BASE STYLES
   ============================================================================ */
html, body {
  width: 100%;
  min-height: 100vh;
}

body {
  /* Brand background and text colors */
  background-color: var(--bg-primary);
  color: var(--text-primary);
  
  /* Default body typography */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  
  /* Ensure body takes full viewport height */
  display: flex;
  flex-direction: column;
}

/* Main content area */
main {
  flex: 1;
  width: 100%;
}


/* ============================================================================
   5. TYPOGRAPHY SYSTEM
   ============================================================================ */

/* --- HEADINGS --- */
/* H1-H2: Orbitron (futuristic headlines) */
h1, h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);  /* Responsive: 32px → 56px */
  margin-bottom: var(--space-xl);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);  /* Responsive: 28px → 40px */
}

/* H3-H6: Rajdhani (body font, bold) */
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);  /* Responsive: 24px → 32px */
}

h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);  /* Responsive: 20px → 24px */
}

h5 {
  font-size: 1.125rem;  /* 18px */
}

h6 {
  font-size: 1rem;  /* 16px */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- PARAGRAPHS & TEXT ELEMENTS --- */
p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

/* Description text variant (greenish tint) */
p.description,
.text-description {
  color: var(--text-description);
}

/* Muted text variant */
.text-muted {
  color: var(--text-muted);
  font-size: 0.875rem;  /* 14px */
}

/* Small text */
small {
  font-size: 0.875rem;  /* 14px */
  color: var(--text-muted);
}

/* Strong/bold text */
strong, b {
  font-weight: 700;
}

/* Emphasized text */
em, i {
  font-style: italic;
}

/* --- LINKS --- */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast), 
              text-shadow var(--transition-fast);
}

a:hover {
  color: var(--color-cyan);
  text-shadow: var(--glow-cyan);
}

a:focus {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Active/visited link states */
a:active {
  color: var(--color-green);
}

/* --- LOGO TEXT --- */
.logo-text {
  font-family: var(--font-logo);
  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* --- MONOSPACE TEXT (Stats, Code, IDs) --- */
.mono,
code,
pre,
.stats-text {
  font-family: var(--font-mono);
  font-size: 0.9375rem;  /* 15px */
  letter-spacing: 0.02em;
}

code {
  background-color: var(--bg-panel);
  padding: 0.125rem 0.375rem;
  border-radius: var(--border-radius);
  color: var(--color-green);
}

pre {
  background-color: var(--bg-panel);
  padding: var(--space-md);
  border-radius: var(--border-radius-lg);
  overflow-x: auto;
  border: 1px solid var(--border-accessible);
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* --- TEXT ALIGNMENT UTILITIES --- */
.text-left {
  text-align: left;
}

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

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

/* --- ACCENT TEXT COLOR UTILITIES --- */
.text-orange {
  color: var(--text-orange);
}

.text-green {
  color: var(--text-green);
}

.text-magenta {
  color: var(--text-magenta);
}

.text-cyan {
  color: var(--text-link);
}

.text-purple {
  color: var(--text-purple);
}

/* --- AI HIGHLIGHT (the "ai" in GRaiT) --- */
/* Logo requirement: "ai" uses the primary Neon Green (#39FF14), matching
   "GAMES". Plain colored text — no underline, no glow. High contrast for
   WCAG 2.1 AA. */
.highlight-ai {
  color: var(--color-green);
  text-decoration: none;
}


/* ============================================================================
   6. NEON GLOW EFFECTS — UTILITY CLASSES
   ============================================================================ */
/* ⚠️ IMPORTANT: Glow effects are DECORATIVE ONLY
   Never rely on glow to make text readable. Always ensure sufficient
   color contrast between text and background. */

/* Orange glow (PRIMARY brand color) */
.glow-orange {
  text-shadow: var(--glow-orange);
}

.glow-orange-box {
  box-shadow: var(--glow-orange);
}

/* Green glow (PRIMARY brand color) */
.glow-green {
  text-shadow: var(--glow-green);
}

.glow-green-box {
  box-shadow: var(--glow-green);
}

/* Cyan glow */
.glow-cyan {
  text-shadow: var(--glow-cyan);
}

.glow-cyan-box {
  box-shadow: var(--glow-cyan);
}

/* Pink/Magenta glow (supporting color) */
.glow-pink {
  text-shadow: var(--glow-pink);
}

.glow-pink-box {
  box-shadow: var(--glow-pink);
}

/* Purple glow (decorative only) */
.glow-purple {
  text-shadow: var(--glow-purple);
}

.glow-purple-box {
  box-shadow: var(--glow-purple);
}

/* Multi-color glow combination (synthwave effect) */
.glow-synthwave {
  text-shadow: 
    0 0 8px var(--color-magenta),
    0 0 16px var(--color-synthwave-purple),
    0 0 24px var(--color-cyan);
}


/* ============================================================================
   7. BUTTON STYLES
   ============================================================================ */

/* --- BASE BUTTON STYLES --- */
.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  
  /* Sizing */
  padding: var(--space-md) var(--space-xl);
  min-height: 48px;  /* Accessibility: minimum touch target size */
  
  /* Typography */
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  /* Appearance */
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  background: transparent;
  cursor: pointer;
  
  /* Transitions */
  transition: all var(--transition-normal);
  
  /* Prevent text selection */
  user-select: none;
}

.btn:focus {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- PRIMARY BUTTON (Orange — PRIMARY brand color) --- */
.btn-primary {
  background: var(--gradient-orange);
  color: #000000;  /* Dark text on bright background for contrast */
  border-color: var(--color-orange);
}

.btn-primary:hover {
  background: var(--color-orange-2);
  box-shadow: var(--glow-orange);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* --- SECONDARY BUTTON (Green — PRIMARY brand color) --- */
.btn-secondary {
  background: var(--gradient-green);
  color: #000000;  /* Dark text on bright background for contrast */
  border-color: var(--color-green);
}

.btn-secondary:hover {
  background: var(--color-green-2);
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* --- OUTLINE BUTTON (Transparent with colored border) --- */
.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-accessible);
}

.btn-outline:hover {
  background-color: rgba(255, 107, 43, 0.1);  /* Subtle orange tint */
  border-color: var(--color-orange);
  color: var(--color-orange);
  box-shadow: var(--glow-orange);
}

/* Orange outline variant */
.btn-outline-orange {
  background: transparent;
  color: var(--color-orange);
  border-color: var(--color-orange);
}

.btn-outline-orange:hover {
  background-color: var(--color-orange);
  color: #000000;
  box-shadow: var(--glow-orange);
}

/* Green outline variant */
.btn-outline-green {
  background: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}

.btn-outline-green:hover {
  background-color: var(--color-green);
  color: #000000;
  box-shadow: var(--glow-green);
}

/* Cyan outline variant */
.btn-outline-cyan {
  background: transparent;
  color: var(--color-cyan-2);
  border-color: var(--color-cyan-2);
}

.btn-outline-cyan:hover {
  background-color: var(--color-cyan);
  color: #000000;
  box-shadow: var(--glow-cyan);
}

/* --- GHOST BUTTON (Text only, no border) --- */
.btn-ghost {
  background: transparent;
  color: var(--text-link);
  border: none;
  padding: var(--space-sm) var(--space-md);
}

.btn-ghost:hover {
  color: var(--color-cyan);
  text-shadow: var(--glow-cyan);
  background-color: rgba(0, 234, 255, 0.05);
}

/* --- BUTTON SIZE VARIANTS --- */
.btn-sm {
  padding: var(--space-sm) var(--space-md);
  min-height: 36px;
  font-size: 0.875rem;
}

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  min-height: 56px;
  font-size: 1.125rem;
}

/* --- FULL-WIDTH BUTTON --- */
.btn-block {
  display: flex;
  width: 100%;
}


/* ============================================================================
   8. CARD & CONTAINER COMPONENTS
   ============================================================================ */

/* --- BASE CARD --- */
.card {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-accessible);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-normal);
}

.card:hover {
  border-color: var(--border-accessible-strong);
  transform: translateY(-4px);
}

/* Card with accent border glow */
.card-glow {
  border: 2px solid transparent;
  background-image: 
    linear-gradient(var(--bg-panel), var(--bg-panel)),
    var(--gradient-synthwave);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.card-glow:hover {
  box-shadow: var(--glow-pink);
}

/* --- CALLOUT / WARNING BOX --- */
/* Highlighted inset note (e.g. legal warnings). Orange left accent on a
   subtle dark panel. High contrast for WCAG 2.1 AA. */
.callout-warning {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-orange);
  border-left: 3px solid var(--color-orange);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.callout-warning::before {
  content: '⚠ ';
  color: var(--color-orange);
  font-weight: 700;
}

/* --- CARD HEADER --- */
.card-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-decorative);
}

.card-header h2,
.card-header h3 {
  margin-bottom: 0;
}

/* --- CARD BODY --- */
.card-body {
  padding: var(--space-md) 0;
}

/* --- CARD FOOTER --- */
.card-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-decorative);
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

/* --- CONTAINER (Max-width wrapper) --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Container width modifiers — self-centering so they work standalone
   (i.e. without also needing the base .container class). */
.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-narrow {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- SECTION SPACING --- */
.section {
  padding: var(--space-3xl) 0;
}

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

.section-lg {
  padding: var(--space-4xl) 0;
}


/* ============================================================================
   9. LAYOUT UTILITIES
   ============================================================================ */

/* --- FLEXBOX UTILITIES --- */
.flex {
  display: flex;
}

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

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

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

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

/* Justify content */
.justify-start {
  justify-content: flex-start;
}

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

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

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

.justify-around {
  justify-content: space-around;
}

/* Align items */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

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

.items-stretch {
  align-items: stretch;
}

/* Gap utilities */
.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);
}

/* --- CSS GRID UTILITIES --- */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit responsive grid */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Auto-fill responsive grid */
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* ============================================================================
   10. SPACING UTILITIES
   ============================================================================ */

/* --- MARGIN UTILITIES --- */
.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); }

/* Margin top */
.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); }

/* Margin bottom */
.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); }

/* Margin left */
.ml-0 { margin-left: 0; }
.ml-auto { margin-left: auto; }

/* Margin right */
.mr-0 { margin-right: 0; }
.mr-auto { margin-right: auto; }

/* Margin horizontal (left + right) */
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- PADDING UTILITIES --- */
.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); }

/* Padding top */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }

/* Padding bottom */
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }


/* ============================================================================
   11. RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Small devices (640px and up) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sm\:flex-row {
    flex-direction: row;
  }
  
  .sm\:text-left {
    text-align: left;
  }
}

/* Medium devices (768px and up) - Tablets */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
  
  .md\:text-left {
    text-align: left;
  }
}

/* Large devices (1024px and up) - Desktop */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .lg\:flex-row {
    flex-direction: row;
  }
}

/* Extra large devices (1280px and up) */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================================
   12. ACCESSIBILITY FEATURES
   ============================================================================ */

/* --- SKIP TO CONTENT LINK --- */
/* Hidden by default, visible when focused (for keyboard navigation) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background-color: var(--color-orange);
  color: #000000;
  padding: var(--space-md) var(--space-lg);
  font-weight: 700;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 var(--border-radius) 0;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-green);
  outline-offset: 2px;
}

/* --- SCREEN READER ONLY --- */
/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Make screen reader only element focusable */
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --- FOCUS VISIBLE (Modern focus states) --- */
/* Only show focus outline when using keyboard navigation */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
  border-radius: var(--border-radius);
}

/* High contrast focus states for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 2px;
  box-shadow: var(--glow-cyan);
}

/* --- REDUCED MOTION --- */
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   13. NAVIGATION STYLES
   ============================================================================ */

/* --- MAIN NAVIGATION BAR --- */
.navbar {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-accessible);
  padding: var(--space-md) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- NAVIGATION LOGO --- */
.navbar-logo {
  font-family: var(--font-logo);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--color-orange);
  text-shadow: var(--glow-orange);
  transition: all var(--transition-fast);
}

.navbar-logo:hover {
  color: var(--color-orange-2);
  text-shadow: var(--glow-orange);
  transform: scale(1.05);
}

/* --- NAVIGATION MENU --- */
.nav-menu {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  list-style: none;
}

.nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-link);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-cyan);
  background-color: rgba(0, 234, 255, 0.1);
  text-shadow: var(--glow-cyan);
}

.nav-link.active {
  color: var(--color-green);
  background-color: rgba(57, 255, 20, 0.1);
  border-bottom: 2px solid var(--color-green);
}

/* --- MOBILE MENU TOGGLE --- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--border-accessible);
  color: var(--text-primary);
  padding: var(--space-sm);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-accessible);
    padding: var(--space-md);
    gap: var(--space-sm);
  }
  
  .nav-menu.active {
    display: flex;
  }
  
  .nav-link {
    width: 100%;
    text-align: center;
  }
}


/* ============================================================================
   14. FOOTER STYLES
   ============================================================================ */

.footer {
  background-color: var(--bg-footer);
  border-top: 1px solid var(--border-accessible);
  padding: var(--space-2xl) 0 var(--space-lg);
  margin-top: auto;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- FOOTER GRID LAYOUT --- */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

/* --- FOOTER SECTION --- */
.footer-section h3 {
  color: var(--color-orange);
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: var(--space-sm);
}

.footer-link {
  color: var(--text-footer);
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-cyan-2);
  text-shadow: var(--glow-cyan);
  padding-left: var(--space-xs);
}

/* --- FOOTER BOTTOM (Copyright, etc.) --- */
.footer-bottom {
  border-top: 1px solid var(--border-decorative);
  padding-top: var(--space-lg);
  text-align: center;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
}

/* --- SOCIAL LINKS --- */
.social-links {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-md);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-accessible);
  color: var(--text-primary);
  transition: all var(--transition-normal);
}

.social-link:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  box-shadow: var(--glow-cyan);
  transform: translateY(-3px) rotate(5deg);
}


/* ============================================================================
   15. FORM ELEMENTS
   ============================================================================ */

/* --- FORM GROUPS --- */
.form-group {
  margin-bottom: var(--space-lg);
}

/* --- LABELS --- */
label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

label.required::after {
  content: " *";
  color: var(--color-alert-red);
}

/* --- INPUT FIELDS --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  /* Layout */
  width: 100%;
  padding: var(--space-md);
  
  /* Appearance */
  background-color: var(--bg-panel);
  border: 2px solid var(--border-accessible);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  
  /* Typography */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  
  /* Transitions */
  transition: all var(--transition-fast);
}

/* Input focus state */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.2), var(--glow-cyan);
}

/* Input hover state */
input:hover,
textarea:hover,
select:hover {
  border-color: var(--border-accessible-strong);
}

/* --- TEXTAREA --- */
textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}

/* --- SELECT DROPDOWN --- */
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300EAFF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-2xl);
}

/* --- CHECKBOXES & RADIO BUTTONS --- */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: var(--space-sm);
  cursor: pointer;
  accent-color: var(--color-cyan);
}

/* Checkbox/radio label alignment */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.form-check label {
  margin-bottom: 0;
  cursor: pointer;
  font-weight: 400;
}

/* --- INPUT VALIDATION STATES --- */
/* Error state */
input.error,
textarea.error,
select.error {
  border-color: var(--color-alert-red);
}

input.error:focus,
textarea.error:focus,
select.error:focus {
  box-shadow: 0 0 0 3px rgba(255, 51, 85, 0.2);
}

.error-message {
  color: var(--color-alert-red);
  font-size: 0.875rem;
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Success state */
input.success,
textarea.success,
select.success {
  border-color: var(--color-green);
}

input.success:focus,
textarea.success:focus,
select.success:focus {
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.2), var(--glow-green);
}

.success-message {
  color: var(--color-green);
  font-size: 0.875rem;
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* --- HELPER TEXT --- */
.form-help {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: var(--space-xs);
}

/* --- DISABLED INPUTS --- */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-secondary);
}

/* --- PLACEHOLDER STYLING --- */
::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}


/* ============================================================================
   16. UTILITY CLASSES
   ============================================================================ */

/* --- DISPLAY UTILITIES --- */
.hidden {
  display: none !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

/* --- VISIBILITY UTILITIES --- */
.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

/* --- OVERFLOW UTILITIES --- */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

/* --- POSITION UTILITIES --- */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* --- Z-INDEX UTILITIES --- */
.z-0 {
  z-index: 0;
}

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

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

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

/* --- WIDTH UTILITIES --- */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-50 {
  width: 50%;
}

/* --- HEIGHT UTILITIES --- */
.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-auto {
  height: auto;
}

/* --- BACKGROUND UTILITIES --- */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-panel {
  background-color: var(--bg-panel);
}

.bg-transparent {
  background-color: transparent;
}

/* Gradient backgrounds */
.bg-gradient-orange {
  background: var(--gradient-orange);
}

.bg-gradient-green {
  background: var(--gradient-green);
}

.bg-gradient-synthwave {
  background: var(--gradient-synthwave);
}

/* --- BORDER UTILITIES --- */
.border {
  border: 1px solid var(--border-accessible);
}

.border-2 {
  border: 2px solid var(--border-accessible);
}

.border-0 {
  border: none;
}

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

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

.border-l {
  border-left: 1px solid var(--border-accessible);
}

.border-r {
  border-right: 1px solid var(--border-accessible);
}

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

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

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

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0;
}

/* --- SHADOW UTILITIES --- */
.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
}

/* --- OPACITY UTILITIES --- */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}


/* ============================================================================
   17. ANIMATION & TRANSITION UTILITIES
   ============================================================================ */

/* --- TRANSITION UTILITIES --- */
.transition {
  transition: all var(--transition-normal);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

.transition-none {
  transition: none;
}

/* --- HOVER EFFECTS --- */
.hover-lift:hover {
  transform: translateY(-4px);
  transition: transform var(--transition-fast);
}

.hover-grow:hover {
  transform: scale(1.05);
  transition: transform var(--transition-fast);
}

/* --- LOADING SPINNER --- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--border-accessible);
  border-top-color: var(--color-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* --- PULSE ANIMATION --- */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --- NEON FLICKER ANIMATION --- */
@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  41% {
    opacity: 0.8;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.9;
  }
  45% {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}

.flicker {
  animation: flicker 4s infinite;
}


/* ============================================================================
   18. ABOUT PAGE — HERO, STORY, FEATURE GRID, TIMELINE, TECH STACK, CTA
   ----------------------------------------------------------------------------
   Used by about.html. All colours, spacing and fonts come from the CSS
   variables defined in Section 2, so this section only adds *layout* and a
   few decorative synthwave accents (gradient overlays, accent borders).

   Building blocks:
     • .about-hero        — full-width intro band with a synthwave gradient wash
     • .about-section      — vertical rhythm wrapper for each content block
     • .section-alt        — alternating darker background (Deep Space)
     • .section-eyebrow    — small mono label above a section heading
     • .feature-grid       — responsive grid of .feature-card items (The Vision)
     • .feature-card        — icon + heading + copy card with hover lift
     • .feature-icon        — emoji/CSS-shape icon badge
     • .timeline            — vertical "Our Story" journey with accent dots
     • .tech-grid           — compact grid of .tech-item chips (Tech Stack)
     • .about-cta           — closing call-to-action band (newsletter + social)
   ============================================================================ */

/* --- HERO -------------------------------------------------------------------
   A bold introduction band. The gradient overlay is purely decorative; the
   text sits on the solid Space Black base so contrast stays WCAG AA. */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: center;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-decorative);
}

/* Soft synthwave glow washing up from the bottom of the hero */
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 107, 43, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% -20%, rgba(57, 255, 20, 0.12) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Faint pixel-grid texture overlay for retro flavour */
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Keep hero content above the decorative layers */
.about-hero > * {
  position: relative;
  z-index: 1;
}

.about-hero h1 {
  margin-bottom: var(--space-md);
}

/* Mission statement — larger lead paragraph under the hero title */
.about-mission {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  line-height: 1.7;
  color: var(--text-description);
}

/* --- GENERIC ABOUT SECTION + ALTERNATING BACKGROUNDS ---------------------- */
.about-section {
  padding: var(--space-3xl) 0;
}

/* Alternating darker band (Deep Space) with subtle top/bottom dividers */
.section-alt {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-decorative);
  border-bottom: 1px solid var(--border-decorative);
}

/* Small monospace eyebrow label above section headings */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}

/* Shared lead paragraph styling inside about sections */
.about-lead {
  color: var(--text-description);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 760px;
}

/* Center the lead when used under a centered section header */
.about-lead.is-centered {
  margin-left: auto;
  margin-right: auto;
}

/* --- FEATURE GRID (The Vision) --------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.feature-card {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-decorative);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  transition: transform var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--color-green);
  box-shadow: 0 8px 28px rgba(57, 255, 20, 0.15);
}

/* Icon badge (emoji or CSS shape sits inside) */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
  line-height: 1;
  border-radius: var(--border-radius-lg);
  background-color: rgba(255, 107, 43, 0.1);
  border: 1px solid var(--border-orange);
  margin-bottom: var(--space-md);
}

/* Green icon-badge variant (alternate accent) */
.feature-icon.is-green {
  background-color: rgba(57, 255, 20, 0.1);
  border-color: var(--border-green);
}

.feature-card h3 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.feature-card p {
  color: var(--text-description);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- TIMELINE (Our Story journey) ------------------------------------------
   A simple vertical line with accent dots marking each milestone. */
.timeline {
  position: relative;
  margin-top: var(--space-2xl);
  padding-left: var(--space-xl);
}

/* The vertical connecting line */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--color-orange) 0%,
    var(--color-green) 100%);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-xl);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* Accent dot on the line */
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-xl) + 1px);
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  border: 3px solid var(--color-green);
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.timeline-item h3 {
  margin-bottom: var(--space-xs);
  color: var(--color-orange);
}

.timeline-item p {
  color: var(--text-description);
  line-height: 1.7;
  margin: 0;
}

/* --- TECH STACK GRID -------------------------------------------------------- */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.tech-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--bg-panel);
  border: 1px solid var(--border-decorative);
  border-left: 3px solid var(--color-cyan);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  transition: border-color var(--transition-fast),
              transform var(--transition-fast);
}

.tech-item:hover {
  transform: translateX(4px);
  border-left-color: var(--color-green);
}

.tech-item .tech-emoji {
  font-size: 1.4rem;
  line-height: 1.4;
}

.tech-item h4 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-cyan-2);
}

.tech-item p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- CLOSING CALL-TO-ACTION ------------------------------------------------- */
.about-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-4xl) 0;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-decorative);
}

.about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255, 107, 43, 0.14) 0%, transparent 60%);
  pointer-events: none;
}

.about-cta > * {
  position: relative;
  z-index: 1;
}

.about-cta p {
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  color: var(--text-description);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Button group under the CTA — wraps neatly on small screens */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* --- ABOUT PAGE RESPONSIVE TWEAKS ------------------------------------------ */
@media (max-width: 640px) {
  .about-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }
  .feature-card {
    padding: var(--space-lg);
  }
  .cta-actions .btn {
    width: 100%;
  }
}


/* ============================================================================
   19. GAME CATALOG — SIDEBAR LAYOUT, CATEGORY FILTER & GAME CARDS
   ----------------------------------------------------------------------------
   Used by games.html (the Game Catalog page). Provides:
     • .catalog-layout      — two-column grid (sidebar + content) on desktop
     • .catalog-sidebar     — category navigation panel
     • .category-btn        — individual filter buttons (with .active state)
     • .game-grid           — responsive card grid (3 / 2 / 1 columns)
     • .game-card           — single game thumbnail card
   Everything reuses the brand variables defined in Section 2.
   ============================================================================ */

/* --- TWO-COLUMN PAGE LAYOUT (sidebar + catalog content) --- */
.catalog-layout {
  display: grid;
  /* Desktop default: fixed-width sidebar on the left, content fills the rest */
  grid-template-columns: 260px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* --- SIDEBAR PANEL --- */
.catalog-sidebar {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-accessible);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  /* Keep the sidebar in view while the user scrolls the catalog.
     96px ≈ sticky navbar height + a little breathing room. */
  position: sticky;
  top: 96px;
}

.catalog-sidebar-title {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-decorative);
}

/* --- CATEGORY FILTER LIST --- */
.category-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Each category is a real <button> for full keyboard + screen-reader support */
.category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.category-btn:hover {
  color: var(--color-cyan);
  background-color: rgba(0, 234, 255, 0.08);
  border-color: var(--border-cyan);
}

/* Active category — uses the brand green to match the nav active state */
.category-btn.active {
  color: var(--color-green);
  background-color: rgba(57, 255, 20, 0.1);
  border-color: var(--color-green);
}

/* Small count badge on the right of each category */
.category-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background-color: var(--bg-panel);
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
  min-width: 1.6rem;
  text-align: center;
}

.category-btn.active .category-count {
  color: var(--color-green);
}

/* --- MOBILE SIDEBAR TOGGLE (hidden on desktop) --- */
.catalog-sidebar-toggle {
  display: none;
  width: 100%;
  margin-bottom: var(--space-lg);
}

/* --- CATALOG RESULTS HEADER (count + current category) --- */
.catalog-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --- RESPONSIVE GAME CARD GRID --- */
.game-grid {
  display: grid;
  /* Desktop: 3 columns */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* --- SINGLE GAME CARD --- */
.game-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-accessible);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: transform var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* Synthwave hover: lift, green accent border + soft glow */
.game-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-green);
  box-shadow: var(--glow-green);
}

/* Thumbnail placeholder — gradient block with a pixel-font label.
   Swap the background for a real <img> later (keep the 16:9 ratio). */
.game-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-panel) 100%);
  border-bottom: 1px solid var(--border-decorative);
  overflow: hidden;
}

/* Decorative scanline overlay on the thumbnail (purely cosmetic) */
.game-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.15) 3px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
}

.game-thumb-label {
  font-family: var(--font-logo);
  font-size: clamp(0.7rem, 2.2vw, 1rem);
  color: var(--color-orange);
  letter-spacing: 0.05em;
  z-index: 1;
  text-align: center;
  padding: var(--space-sm);
}

/* Category tag pinned to the top-left corner of the thumbnail */
.game-tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-green);
  background-color: rgba(7, 7, 15, 0.85);
  border: 1px solid var(--border-green);
  border-radius: var(--border-radius);
  padding: 0.15rem 0.5rem;
}

/* Card text/body */
.game-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;  /* let bodies stretch so buttons line up across the row */
  padding: var(--space-lg);
}

.game-card-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.game-card-desc {
  color: var(--text-description);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  flex: 1;
}

/* Push the Play button to the bottom of the card */
.game-card-footer {
  margin-top: auto;
}

/* --- EMPTY STATE (shown when a filter has no games) --- */
.catalog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* --- BACKDROP behind the mobile off-canvas sidebar --- */
.catalog-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(7, 7, 15, 0.7);
  backdrop-filter: blur(2px);
  z-index: 1050;
}

.catalog-backdrop.active {
  display: block;
}

/* --- TABLET: 2-column game grid --- */
@media (max-width: 1024px) {
  .catalog-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-lg);
  }
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- MOBILE: single column + off-canvas sidebar --- */
@media (max-width: 768px) {
  .catalog-layout {
    grid-template-columns: 1fr;  /* stack everything */
  }

  /* Reveal the toggle button on mobile */
  .catalog-sidebar-toggle {
    display: inline-flex;
  }

  /* Slide-in sidebar drawer from the left */
  .catalog-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    border-radius: 0;
    border-right: 2px solid var(--color-green);
    z-index: 1060;
    overflow-y: auto;
    /* Hidden off-screen by default, slid in via .active */
    transform: translateX(-105%);
    transition: transform var(--transition-normal);
  }

  .catalog-sidebar.active {
    transform: translateX(0);
  }

  /* Single-column cards on phones */
  .game-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   20. BLOG PAGE — POST GRID, POST CARDS & ARTICLE TYPOGRAPHY
   ----------------------------------------------------------------------------
   Used by blog.html (the post listing) and blog-post.html (a single article).
   Provides:
     • .blog-grid / .blog-card   — responsive 2-col card grid of posts
     • .blog-thumb / .blog-tag   — featured image placeholder + category chip
     • .post-meta                — date / read-time metadata row
     • .article / .article-body  — single-post typography wrapper
     • code block + syntax-highlight styles for technical posts
   Reuses .about-hero, .section-eyebrow and the brand variables (Section 2).
   ============================================================================ */

/* --- BLOG POST GRID (2 columns desktop, 1 column mobile) --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

/* --- SINGLE BLOG POST CARD --- */
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-accessible);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: transform var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* Synthwave hover: lift + green accent border + soft glow */
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-green);
  box-shadow: var(--glow-green);
}

/* Make the whole card title link inherit colour (not link-cyan) */
.blog-card-title a {
  color: var(--text-primary);
}

.blog-card-title a:hover {
  color: var(--color-green);
  text-shadow: none;
}

/* --- FEATURED IMAGE PLACEHOLDER ---
   Gradient block with a pixel-font label. Swap for a real <img> later
   (keep the 16:9 ratio so the grid stays tidy). */
.blog-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-panel) 100%);
  border-bottom: 1px solid var(--border-decorative);
  overflow: hidden;
}

/* Decorative scanline overlay (purely cosmetic) */
.blog-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.15) 3px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
}

.blog-thumb-label {
  font-family: var(--font-logo);
  font-size: clamp(0.65rem, 2vw, 0.95rem);
  color: var(--color-orange);
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--space-sm);
  z-index: 1;
}

/* If a real image is dropped in, it fills the placeholder */
.blog-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- CATEGORY TAG / CHIP ---
   Used both pinned on the thumbnail (.blog-tag) and inline in metadata. */
.blog-tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-green);
  background-color: rgba(7, 7, 15, 0.85);
  border: 1px solid var(--border-green);
  border-radius: var(--border-radius);
  padding: 0.15rem 0.5rem;
}

/* Inline tag variant (not absolutely positioned) for article headers */
.tag-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-green);
  background-color: rgba(57, 255, 20, 0.08);
  border: 1px solid var(--border-green);
  border-radius: var(--border-radius);
  padding: 0.15rem 0.6rem;
}

/* --- CARD BODY --- */
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;  /* stretch so the Read More buttons align across a row */
  padding: var(--space-lg);
}

.blog-card-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.blog-excerpt {
  color: var(--text-description);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  flex: 1;
}

/* --- POST METADATA (date · read time) --- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

/* Small dot separator between metadata items */
.post-meta .meta-sep {
  color: var(--border-accessible-strong);
}

/* Push the Read More button to the bottom of the card */
.blog-card-footer {
  margin-top: auto;
}

/* ----------------------------------------------------------------------------
   SINGLE ARTICLE (blog-post.html)
   ---------------------------------------------------------------------------- */

/* Article hero image placeholder — taller, full-width banner */
.article-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-panel) 100%);
  border: 1px solid var(--border-accessible);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.article-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.15) 3px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
}

.article-hero-label {
  font-family: var(--font-logo);
  font-size: clamp(0.8rem, 3vw, 1.5rem);
  color: var(--color-orange);
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--space-md);
  z-index: 1;
}

.article-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article title block */
.article-header {
  margin-bottom: var(--space-xl);
}

.article-header h1 {
  margin-bottom: var(--space-md);
}

/* ----------------------------------------------------------------------------
   ARTICLE BODY TYPOGRAPHY
   Long-form reading styles. Scoped to .article-body so it never affects
   cards or other UI. Tuned for comfortable line length + WCAG AA contrast.
   ---------------------------------------------------------------------------- */
.article-body {
  font-size: 1.0625rem;       /* 17px — slightly larger for readability */
  line-height: 1.8;
  color: var(--text-primary);
}

.article-body h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--color-orange);
}

.article-body h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-green);
}

.article-body p {
  margin-bottom: var(--space-lg);
}

.article-body ul,
.article-body ol {
  margin: 0 0 var(--space-lg) var(--space-lg);
  padding-left: var(--space-md);
}

.article-body ul li {
  list-style: square;
  margin-bottom: var(--space-sm);
}

.article-body ol li {
  list-style: decimal;
  margin-bottom: var(--space-sm);
}

.article-body li::marker {
  color: var(--color-green);
}

/* Inline links inside articles get an underline for clarity */
.article-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Pull-quote / blockquote */
.article-body blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-orange);
  background-color: var(--bg-secondary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
  color: var(--text-description);
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Inline code inside prose (block code styled below) */
.article-body :not(pre) > code {
  background-color: var(--bg-secondary);
  color: var(--color-green);
  padding: 0.125rem 0.4rem;
  border-radius: var(--border-radius);
  font-size: 0.9em;
}

/* Featured image inside article flow */
.article-body img {
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-accessible);
  margin: var(--space-lg) 0;
}

/* ----------------------------------------------------------------------------
   CODE BLOCKS + LIGHTWEIGHT SYNTAX HIGHLIGHTING
   A small, dependency-free token palette. Wrap code in:
     <pre class="code-block"><code> ... <span class="tok-key">const</span> ... </code></pre>
   Tokens use synthwave-friendly colours that all pass AA on the dark panel.
   ---------------------------------------------------------------------------- */
.code-block {
  position: relative;
  background-color: #0b0b16;
  border: 1px solid var(--border-accessible);
  border-left: 3px solid var(--color-green);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
}

.code-block code {
  background: transparent;
  padding: 0;
  color: #e6e6f0;
  white-space: pre;
}

/* Optional language label in the top-right corner */
.code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bg-primary);
  background-color: var(--color-green);
  padding: 0.1rem 0.5rem;
  border-bottom-left-radius: var(--border-radius);
  font-family: var(--font-mono);
}

/* Syntax token palette (all WCAG AA on #0b0b16) */
.tok-key     { color: #FF6B2B; }                 /* keywords (const, function) */
.tok-str     { color: #39FF14; }                 /* strings */
.tok-num     { color: #FFD447; }                 /* numbers */
.tok-comment { color: #8A8AAD; font-style: italic; } /* comments */
.tok-func    { color: #00EAFF; }                 /* function names */
.tok-tag     { color: #FF6B2B; }                 /* HTML tags */
.tok-attr    { color: #FFD447; }                 /* HTML attributes */
.tok-punct   { color: #B8B8D0; }                 /* punctuation */

/* ----------------------------------------------------------------------------
   SOCIAL SHARING + RELATED POSTS (single article footer regions)
   ---------------------------------------------------------------------------- */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--border-decorative);
  border-bottom: 1px solid var(--border-decorative);
}

.share-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.share-links {
  display: flex;
  gap: var(--space-sm);
}

.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-accessible);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.share-link:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  box-shadow: var(--glow-green);
  text-shadow: none;
}

.share-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Related posts reuse the blog card grid but force a tighter look */
.related-posts {
  margin-top: var(--space-3xl);
}

.related-posts .section-eyebrow {
  margin-bottom: var(--space-lg);
}

/* --- BLOG RESPONSIVE TWEAKS --- */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;  /* single column on phones */
  }

  .article-hero {
    aspect-ratio: 16 / 9;        /* a bit taller on small screens */
  }
}


/* ============================================================================
   21. HOMEPAGE / COMING SOON — HERO, DECORATIVE FX, STATUS BAR, SOCIALS
   ----------------------------------------------------------------------------
   Used by index.html (the "Coming Soon" landing page). Reuses the shared
   .about-hero / .about-cta / .feature-grid / .section-eyebrow patterns and
   adds only the homepage-specific pieces below. All colours/spacing/fonts
   come from the CSS variables in Section 2.

   ⚠️ ACCESSIBILITY: Every glow/animation here lives on DECORATIVE elements
   only (logo flourish, divider, background FX). Body copy and headlines stay
   on the solid Space Black base for WCAG 2.1 AA contrast.

   Building blocks:
     • .fx-starfield / .fx-grid / .fx-scanlines — fixed full-page background FX
     • .home-hero            — transparent hero so the starfield shows through
     • .home-logo            — large pixel-font GRaiT GAMES wordmark
     • .home-headline        — the "Coming Soon" headline
     • .retro-divider        — neon line + pulsing diamond separator
     • .status-bar           — playful "IN DEV / BUILD / AI ON" status chips
     • .home-socials         — secondary social-follow CTA row
   ============================================================================ */

/* --- FIXED BACKGROUND FX (purely decorative, pointer-events: none) ----------
   These sit behind all content (z-index 0). Hero is transparent so they show
   through; solid sections below simply cover them as you scroll. */
.fx-starfield,
.fx-grid,
.fx-scanlines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Animated neon starfield canvas (drawn by home.js) */
.fx-starfield {
  display: block;
  width: 100%;
  height: 100%;
}

/* Faint synthwave pixel-grid, masked so it fades top & bottom */
.fx-grid {
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent 100%);
}

/* Subtle CRT scanlines drifting slowly down the screen */
.fx-scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: fx-scanmove 8s linear infinite;
}

@keyframes fx-scanmove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -300px; }
}

/* Make sure the navbar, main content and footer sit ABOVE the background FX */
#grait-navbar,
#grait-footer,
.home-hero,
main {
  position: relative;
  z-index: 1;
}

/* --- HERO (transparent so the starfield shows through) --------------------- */
.home-hero {
  position: relative;
  text-align: center;
  padding: var(--space-4xl) 0 var(--space-3xl);
  background-color: transparent;  /* let .fx-* layers show through */
}

/* Small mono "LOADING PLAYER ONE" eyebrow (reuses .section-eyebrow colour) */
.home-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-lg);
}

/* Large pixel-font wordmark. Glow is decorative; the letters themselves are
   bright brand colours on the dark base, so contrast remains strong. */
.home-logo {
  font-family: var(--font-logo);
  font-size: clamp(1.6rem, 6vw, 3.75rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xl);
  display: block;
}

.home-logo .glow-o { text-shadow: var(--glow-orange); }
.home-logo .glow-g { text-shadow: var(--glow-green); }

/* "Coming Soon" headline (Orbitron via h1 base styles) */
.home-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

/* The flickering accent word — decorative animation only */
.home-headline .flicker-word {
  color: var(--color-orange);
  display: inline-block;
  text-shadow: var(--glow-orange);
  animation: home-flicker 4s infinite;
}

@keyframes home-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.65; }
}

/* Lead tagline under the headline */
.home-tagline {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.8;
  color: var(--text-description);
}

/* --- RETRO DIVIDER (neon line + pulsing diamond) --------------------------- */
.retro-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 460px;
  margin: var(--space-xl) auto;
}

.retro-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-green), transparent);
}

.retro-divider .divider-diamond {
  width: 8px;
  height: 8px;
  background: var(--color-green);
  transform: rotate(45deg);
  box-shadow: var(--glow-green);
  animation: home-diamond-pulse 2s ease-in-out infinite;
}

@keyframes home-diamond-pulse {
  0%, 100% { opacity: 1;   transform: rotate(45deg) scale(1); }
  50%      { opacity: 0.4; transform: rotate(45deg) scale(0.7); }
}

/* --- STATUS BAR ("IN DEV / BUILD / AI ON") --------------------------------- */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  margin: var(--space-2xl) auto 0;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.status-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.status-value {
  font-family: var(--font-logo);
  font-size: 0.7rem;
  color: var(--color-green);
}

/* Decorative build "progress" bar (loops; not a real percentage) */
.status-progress {
  width: 100px;
  height: 6px;
  background-color: var(--bg-panel);
  border: 1px solid var(--color-green);
  border-radius: 2px;
  overflow: hidden;
}

.status-progress-fill {
  height: 100%;
  background: var(--gradient-green);
  animation: home-loadbar 3s ease-in-out infinite alternate;
}

@keyframes home-loadbar {
  0%   { width: 55%; }
  100% { width: 85%; }
}

/* --- NEWSLETTER / SOCIALS SECTION ------------------------------------------ */
/* The newsletter signup now links out to the hosted Beehiiv subscribe page
   (see the .cta-actions button on index.html and the global footer.js),
   so no embed container styling is needed here anymore. */

/* "Follow the Journey" label above the social buttons */
.home-follow-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

/* Secondary CTA: social follow buttons */
.home-socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.home-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--color-green);
  border-radius: var(--border-radius);
  background-color: rgba(57, 255, 20, 0.05);
  color: var(--color-green);
  transition: transform var(--transition-fast),
              background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.home-social-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.home-social-btn:hover {
  transform: translateY(-3px);
  background-color: var(--color-green);
  color: var(--bg-primary);
  box-shadow: var(--glow-green);
}

/* Orange-accent variant (first button, e.g. YouTube) for brand balance */
.home-social-btn.is-orange {
  border-color: var(--color-orange);
  color: var(--color-orange);
  background-color: rgba(255, 107, 43, 0.05);
}

.home-social-btn.is-orange:hover {
  background-color: var(--color-orange);
  color: var(--bg-primary);
  box-shadow: var(--glow-orange);
}

/* --- HOMEPAGE RESPONSIVE TWEAKS -------------------------------------------- */
@media (max-width: 640px) {
  .home-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }
  .status-bar {
    gap: var(--space-lg);
  }
  .cta-actions .btn {
    width: 100%;
  }
}

/* Respect reduced-motion: freeze the decorative homepage animations.
   (Global reduced-motion rules in Section 12 already cover transitions;
   this explicitly stops the looping background/headline FX.) */
@media (prefers-reduced-motion: reduce) {
  .fx-scanlines,
  .retro-divider .divider-diamond,
  .home-headline .flicker-word,
  .status-progress-fill {
    animation: none !important;
  }
}


/* ============================================================================
   22. PRINT STYLES
   ============================================================================ */
@media print {
  /* Hide non-essential elements when printing */
  .no-print,
  .navbar,
  .nav-toggle,
  .footer,
  .btn,
  button {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    background-color: white;
    color: black;
  }
  
  /* Remove shadows and effects for print */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Ensure links are visible */
  a {
    color: black;
    text-decoration: underline;
  }
  
  /* Show link URLs after link text */
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  img {
    page-break-inside: avoid;
  }
}


/* ============================================================================
   END OF STYLESHEET
   
   Total Sections:
   1.  Google Fonts Import
   2.  CSS Custom Properties
   3.  CSS Reset & Normalization
   4.  Global Base Styles
   5.  Typography System
   6.  Neon Glow Effects
   7.  Button Styles
   8.  Card & Container Components
   9.  Layout Utilities
   10. Spacing Utilities
   11. Responsive Breakpoints
   12. Accessibility Features
   13. Navigation Styles
   14. Footer Styles
   15. Form Elements
   16. Utility Classes
   17. Animation & Transitions
   18. About Page (Hero, Story, Feature Grid, Timeline, Tech Stack, CTA)
   19. Game Catalog (Sidebar, Filters & Game Cards)
   20. Blog Page (Post Grid, Cards, Article Typography, Code Highlighting)
   21. Homepage / Coming Soon (Hero, Background FX, Status Bar, Socials)
   22. Print Styles
   
   Questions? Refer to the brand guide at:
   /home/ubuntu/grait-games-brand-summary.md
   ============================================================================ */