/* =========================
   JWLE.US — Hacker Boot Camp theme
   (ported from the static wwwroot home site during the ClaudeApp merge)
   ========================= */

/* =========================
   THEME VARIABLES
   ========================= */
:root {
  --bg: #0f0e14;                /* deep charcoal */
  --surface: #16131d;           /* card surface */
  --surface-2: #1b1724;         /* elevated surface */
  --border: #2a2434;
  --text: #f0eef6;
  --muted: #a7a4b2;
  --purple: #6b3ea6;            /* primary — deep purple */
  --purple-2: #8d5ae0;          /* brighter purple accent */
  --aqua: #48b6de;              /* secondary accent */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #ef4444;
  --radius: 16px;
  --glow: 0 0 34px rgba(141, 90, 224, 0.22);
}

/* =========================
   BASE
   ========================= */
html,
body {
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(141, 90, 224, 0.07), transparent 60%),
    radial-gradient(900px 450px at 10% 10%, rgba(72, 182, 222, 0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.container-narrow {
  max-width: 1080px;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.opacity-70 { opacity: .7; }
.opacity-80 { opacity: .8; }

.gradient-text {
  background: linear-gradient(90deg, #e9e4ff, #a2e8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   LAYOUT HELPERS
   ========================= */
.section {
  padding: 5rem 0;
}

.section h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section .lead {
  color: var(--muted);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* =========================
   NAVBAR
   ========================= */
.navbar {
  backdrop-filter: saturate(1.1) blur(6px);
  background: rgba(15, 14, 20, 0.7);
  border-bottom: 1px solid var(--border);
}

.navbar .nav-link {
  font-weight: 600;
}

/* =========================
   HERO
   ========================= */
.hero {
  position: relative;
  padding: 8rem 0 5rem;
  overflow: clip;
}

.brand-badge {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(141, 90, 224, 0.14), rgba(72, 182, 222, 0.14));
  border: 1px solid var(--border);
  box-shadow: var(--glow);
}

.hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

.hero-sub {
  color: var(--muted);
  max-width: 60ch;
}

.cta-btn {
  border-radius: 999px;
  padding: .85rem 1.25rem;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(141, 90, 224, 0.18);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
  will-change: transform;
}

.cta-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.03);
  box-shadow: 0 16px 34px rgba(141, 90, 224, 0.28);
}

/* =========================
   CARDS
   ========================= */
.card-hx {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition:
    transform .25s cubic-bezier(.2, .9, .2, 1),
    box-shadow .25s ease,
    filter .25s ease;
  will-change: transform, box-shadow;
}

.card-hx:hover {
  transform: translateY(-8px);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(141, 90, 224, 0.14);
  filter: contrast(1.03) saturate(1.03);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(141, 90, 224, 0.14);
  border: 1px solid var(--border);
  color: #dacdf8;
  font-size: .85rem;
  font-weight: 700;
}

/* =========================
   LINKS
   ========================= */
.link-arrow {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
}

.link-arrow i {
  transition: transform .2s ease;
}

.link-arrow:hover i {
  transform: translateX(4px);
}

/* =========================
   TIMELINE
   ========================= */
.timeline {
  border-left: 2px dashed rgba(141, 90, 224, 0.35);
  padding-left: 1.5rem;
}

.timeline .dot {
  width: 12px;
  height: 12px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--purple-2);
  box-shadow: 0 0 0 4px rgba(141, 90, 224, 0.18);
}

/* =========================
   FOOTER
   ========================= */
footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(141, 90, 224, 0.06), rgba(72, 182, 222, 0.06));
}

/* =========================
   AUTH DISPLAY (added in merge)
   ========================= */
.login-name {
  font-weight: 700;
  color: var(--aqua);
}

.auth-inline {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.auth-inline form { margin: 0; }