/* plagens.dev – site styles (on top of Bootstrap 5.3, dark theme). No external fonts. */
:root {
  --accent: #3ddc97;
  --accent-2: #4cc9f0;
  --bg: #0b0f14;
  --bg-2: #111821;
  --line: #1f2a37;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: #d5dde6;
  --bs-link-color: var(--accent-2);
  --bs-link-hover-color: #8fe0f8;
  --bs-border-color: var(--line);
}
body { background: var(--bg); }
h1, h2, h3, .navbar-brand, .font-mono { letter-spacing: -0.01em; }
.font-mono, code, .navbar-brand { font-family: var(--mono); }

.navbar { background: rgba(11, 15, 20, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.navbar-brand .dot { color: var(--accent); }
.nav-link.active { color: var(--accent) !important; }

.hero {
  padding: 6rem 0 4.5rem;
  background:
    radial-gradient(60rem 28rem at 85% -10%, rgba(76, 201, 240, .12), transparent 60%),
    radial-gradient(40rem 24rem at 0% 0%, rgba(61, 220, 151, .10), transparent 60%),
    linear-gradient(rgba(31, 42, 55, .45) 1px, transparent 1px) 0 0 / 100% 48px,
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero .prompt { font-family: var(--mono); color: var(--accent); font-size: .95rem; }
.hero h1 { font-weight: 700; }
.hero .cursor { display: inline-block; width: .5ch; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .cursor { animation: none; } }

.section { padding: 4rem 0; }
.eyebrow { font-family: var(--mono); font-size: .8rem; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; }

.card-app {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: .75rem;
  transition: border-color .15s, transform .15s;
}
.card-app:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card-app { transition: none; } .card-app:hover { transform: none; } }
.card-placeholder { border-style: dashed; background: transparent; color: #7d8b9b; }

.app-icon {
  width: 64px; height: 64px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
  color: #06120c; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.app-icon.lg { width: 96px; height: 96px; border-radius: 22px; font-size: 1.5rem; }

.badge-soft {
  font-family: var(--mono); font-weight: 500; font-size: .75rem;
  background: rgba(61, 220, 151, .1); color: var(--accent); border: 1px solid rgba(61, 220, 151, .25);
}
.btn-accent { --bs-btn-color: #06120c; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #06120c; --bs-btn-hover-bg: #6ae8b3; --bs-btn-hover-border-color: #6ae8b3; font-weight: 600; }
.btn-outline-soft { --bs-btn-color: #d5dde6; --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--bg-2); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: #fff; }

.spec dt { font-family: var(--mono); font-size: .8rem; color: #7d8b9b; font-weight: 500; }
.spec dd { margin-bottom: 1rem; }

.todo {
  border: 1px dashed #b98a1c; background: rgba(185, 138, 28, .08); color: #e6c36a;
  border-radius: .5rem; padding: .15rem .5rem; font-family: var(--mono); font-size: .85em;
  overflow-wrap: anywhere;
}
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal p, .legal li { color: #c2ccd7; }

footer { border-top: 1px solid var(--line); background: var(--bg-2); }
footer a { color: #9fb0c2; text-decoration: none; }
footer a:hover { color: var(--accent); }

.hero .lead, .text-secondary { --bs-secondary-color: #98a6b5; }
.hero .lead { color: #a9b6c4 !important; }
img.app-icon { background: none; object-fit: cover; }