@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800&display=swap');

:root {
  --color-carbon: #0D0D0D;
  --color-laser: #FF0033;
  --color-metallic: #C0C0C0;
}

html { scroll-behavior: smooth; }

::selection { background: rgba(255,0,51,0.3); color: #fff; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #121212; }
::-webkit-scrollbar-thumb { background: rgba(255,0,51,0.5); border-radius: 9999px; }

.tech-border {
  border: 1px solid rgba(255,0,51,0.2);
  position: relative;
  background: linear-gradient(135deg, rgba(255,0,51,0.05) 0%, transparent 50%);
}
.tech-border::before { content: ''; position: absolute; top: 0; left: 0; width: 2rem; height: 1px; background: #FF0033; }
.tech-border::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 2rem; background: #FF0033; }

.glow-text { text-shadow: 0 0 20px rgba(255, 0, 51, 0.5); }

.carbon-card {
  background: #121212;
  border: 1px solid rgba(42,42,42,0.5);
  border-radius: 0.5rem;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

.laser-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; background: #FF0033; color: #fff; font-weight: 600;
  border-radius: 0.25rem; transition: all 0.3s;
}
.laser-btn:hover { background: #E60000; box-shadow: 0 0 20px rgba(255,0,51,0.4); }

.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border: 1px solid rgba(192,192,192,0.3);
  color: #E8E8E8; font-weight: 500; border-radius: 0.25rem; transition: all 0.3s;
}
.ghost-btn:hover { border-color: rgba(255,0,51,0.5); color: #fff; }

.section-title { font-family: Orbitron, sans-serif; font-size: 1.875rem; font-weight: 700; color: #fff; }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-subtitle { color: #C0C0C0; font-size: 1.125rem; margin-top: 0.5rem; }

.input-field {
  width: 100%; padding: 0.75rem 1rem; background: #1E1E1E;
  border: 1px solid rgba(42,42,42,0.5); border-radius: 0.25rem;
  color: #E8E8E8;
}
.input-field:focus { outline: none; border-color: rgba(255,0,51,0.5); }

.label-text { display: block; font-size: 0.875rem; font-weight: 500; color: #C0C0C0; margin-bottom: 0.375rem; }

.prose-dark { color: #E8E8E8; line-height: 1.75; }
.prose-dark h1, .prose-dark h2, .prose-dark h3 { color: #fff; font-family: Orbitron, sans-serif; margin: 1.5rem 0 0.75rem; }
.prose-dark p { margin-bottom: 1rem; }
.prose-dark a { color: #FF0033; }
.prose-dark strong { color: #fff; }

.text-gradient-laser {
  background: linear-gradient(to right, #FF0033, #E60000);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hero slider */
.hero-slide { display: none; }
.hero-slide.active { display: block; }
.hero-dot.active { width: 2rem; background: #FF0033; }

/* Laser canvas */
#laser-canvas { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; }

/* Admin */
.admin-sidebar { width: 16rem; min-height: 100vh; background: #121212; border-right: 1px solid rgba(42,42,42,0.3); }
.admin-nav-active { background: rgba(255,0,51,0.1); color: #FF0033; border: 1px solid rgba(255,0,51,0.2); }