/* AICLYSM DESIGN SYSTEM */
@import url("./tokens.css");
@import url("./navbar.css");
@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap);

/* Reset + Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Typography */
.text-display { font-family: var(--font-display); }
.text-body    { font-family: var(--font-body); }
.text-mono    { font-family: var(--font-mono); }

/* Glassmorphism */
.glass {
  background: rgba(8, 11, 18, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: rgba(8, 11, 18, 0.85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--color-border-glass-hover);
  border-radius: var(--radius-lg);
}

/* Glow */
.glow-cyan    { box-shadow: var(--shadow-glow-cyan); }
.glow-purple  { box-shadow: var(--shadow-glow-purple); }

/* Text Gradients */
.text-gradient {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-cyan {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  border: none;
  outline: none;
  white-space: nowrap;
}
.btn-primary { background: var(--gradient-primary); color: #020408; box-shadow: 0 0 20px rgba(0,240,255,0.2); }
.btn-primary:hover { transform: scale(1.04) translateY(-1px); box-shadow: var(--shadow-glow-cyan); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: transparent; color: var(--color-cyan); border: 1px solid var(--color-border-glass-hover); }
.btn-secondary:hover { background: var(--color-bg-hover); border-color: var(--color-cyan); }
.btn-magenta { background: var(--gradient-magenta); color: #ffffff; box-shadow: 0 0 20px rgba(255,0,128,0.2); }
.btn-magenta:hover { transform: scale(1.04) translateY(-1px); box-shadow: var(--shadow-glow-purple); }

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
}

/* Keyframes */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
 100% { transform: translateY(0px); } }
@keyframes scrollHint { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes borderGlow {
  0%, 100% { border-color: var(--color-border-glass); box-shadow: 0 0 10px rgba(0,240,255,0.05); }
  50% { border-color: var(--color-border-glass-hover); box-shadow: 0 0 30px rgba(0,240,255,0.2); }
}

/* Animation Utilities */
.animate-fade-up        { animation: fadeInUp 0.6s ease both; }
.animate-pulse-glow     { animation: pulse 2s ease-in-out infinite, borderGlow 3s ease-in-out infinite; }
.animate-ticker         { animation: ticker linear infinite; }

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* Label */
.label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-cyan); }

/* Divider */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--color-border-glass), transparent); border: none; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 50px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.badge-live  { background: rgba(0,255,136,0.12); color: var(--color-green); border: 1px solid rgba(0,255,136,0.3); }
.badge-beta  { background: rgba(123,47,247,0.12); color: var(--color-purple); border: 1px solid rgba(123,47,247,0.3); }
.badge-new   { background: rgba(0,240,255,0.12); color: var(--color-cyan); border: 1px solid rgba(0,240,255,0.3); }
.badge-soon  { background: rgba(71,85,105,0.2); color: var(--color-text-muted); border: 1px solid rgba(71,85,105,0.3); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.6); }
::selection { background: rgba(0,240,255,0.25); color: var(--color-text-primary); }

@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;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Light Mode Overrides ─────────────────────────────────── */
html.light body { background-color: transparent; }
html.light .glass {
  background: rgba(255,255,255,0.6);
  border-color: var(--color-border-medium);
}
html.light .glass-strong {
  background: rgba(255,255,255,0.85);
  border-color: var(--color-border-medium);
}
html.light .btn-primary { color: #ffffff; }
html.light .btn-magenta { color: #ffffff; }
html.light .badge-live { background: rgba(3,104,48,0.08); color: var(--color-green); border-color: rgba(3,104,48,0.2); }
html.light .badge-beta { background: rgba(92,31,184,0.08); color: var(--color-purple); border-color: rgba(92,31,184,0.2); }
html.light .badge-new { background: rgba(8,95,109,0.08); color: var(--color-cyan); border-color: rgba(8,95,109,0.2); }
html.light ::-webkit-scrollbar-track { background: var(--color-bg-primary); }
html.light ::-webkit-scrollbar-thumb { background: rgba(8,95,109,0.3); }
html.light ::selection { background: rgba(8,95,109,0.2); }
html.light .divider { background: linear-gradient(90deg, transparent, var(--color-border-medium), transparent); }