/* 2026 Organic Space Strategy Aesthetic */
:root {
  --deep-space: #020617; /* Even deeper obsidian */
  --panel-bg: rgba(15, 23, 42, 0.65); /* Increased transparency */
  --teal-glow: #14b8a6;
  --accent-blue: #3b82f6;
  --nebula-purple: #6366f1;
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  --border-glass: rgba(255, 255, 255, 0.08);
}

body { 
  font-family: 'Inter', -apple-system, sans-serif; 
  color: var(--text-primary); 
  margin: 0;
  background-color: var(--deep-space);
  /* Organic Nebula & Starfield Effect */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
    /* This adds tiny "organic" star particles */
    radial-gradient(1px 1px at 10% 10%, #fff, transparent),
    radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 40% 90%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 30%, #fff, transparent),
    radial-gradient(1px 1px at 95% 60%, rgba(255,255,255,0.4), transparent);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Glassmorphism Panels */
.landing-container, .detail-content {
  background: var(--panel-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 28px;
  border: 1px solid var(--border-glass);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

.landing-container {
  max-width: 900px;
  margin: 60px auto;
  padding: 50px;
}

/* Sidebar (Organic Transparency) */
.sidebar { 
  width: 260px; 
  background: transparent; 
  padding: 60px 30px;
  /* Soft organic divider instead of a hard line */
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pillars / Buttons (Fluid Glow) */
.pillar { 
  background: rgba(255, 255, 255, 0.03); 
  color: var(--text-primary) !important; 
  padding: 20px; 
  text-align: center; 
  border-radius: 16px; 
  border: 1px solid var(--border-glass);
  text-decoration: none; 
  font-weight: 600; 
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pillar:hover { 
  background: rgba(20, 184, 166, 0.15); 
  border-color: var(--teal-glow);
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(20, 184, 166, 0.2);
}

/* Activity Cards (Soft Depth) */
.activity-card { 
  display: flex; 
  align-items: center; 
  padding: 24px; 
  background: rgba(255, 255, 255, 0.02); 
  border-radius: 20px; 
  margin-bottom: 20px; 
  border: 1px solid var(--border-glass);
  transition: 0.3s ease;
}

.activity-card:hover { 
  background: rgba(255, 255, 255, 0.05); 
  transform: translateX(5px);
  border-color: var(--accent-blue);
}

/* Typography Polish */
h1, h2, h3 { 
  letter-spacing: -0.02em;
  background: linear-gradient(to bottom right, #fff, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.activity-card a { 
  color: var(--teal-glow); 
  text-decoration: none; 
  font-weight: 600;
}