:root {
  --bg: #141419;
  --bg-raised: #1E1E25;
  --text: #F3F1EA;
  --text-dim: rgba(243, 241, 234, 0.62);
  --text-faint: rgba(243, 241, 234, 0.4);
  --accent: #E0362A;
  --bar1: #DADAD6; --bar2: #D8CE00; --bar3: #00BEC4; --bar4: #18A84A;
  --bar5: #C21C8C; --bar6: #D62F26; --bar7: #2A3AC8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { color: var(--text); font-family: 'Archivo', sans-serif; width: 100%; overflow-x: hidden; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--text); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.78); }
}
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; animation: rec-pulse 1.6s ease-in-out infinite; }
.rec-dot--sm { width: 8px; height: 8px; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none !important; } }

.eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.eyebrow--section { font-size: 13px; }

.h2 {
  font-family: 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.02; margin: 16px 0 0; color: var(--text);
}

.bars-strip { display: flex; overflow: hidden; }
.bars-strip > span { flex: 1; }
.bars-strip > span:nth-child(1) { background: var(--bar1); }
.bars-strip > span:nth-child(2) { background: var(--bar2); }
.bars-strip > span:nth-child(3) { background: var(--bar3); }
.bars-strip > span:nth-child(4) { background: var(--bar4); }
.bars-strip > span:nth-child(5) { background: var(--bar5); }
.bars-strip > span:nth-child(6) { background: var(--bar6); }
.bars-strip > span:nth-child(7) { background: var(--bar7); }

/* Buttons */
.btn {
  font-family: 'Archivo', sans-serif; font-weight: 700; text-decoration: none;
  display: inline-block; border-radius: 999px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: none;
}
.btn-primary {
  color: #141419; background: var(--accent);
  padding: 16px 30px; font-size: clamp(15px, 1.8vw, 17px);
  box-shadow: 0 8px 20px rgba(224, 54, 42, 0.28);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(224, 54, 42, 0.4); }
.btn-outline {
  color: var(--text); background: transparent; border: 2px solid rgba(243, 241, 234, 0.35);
  padding: 15px 29px; font-size: clamp(15px, 1.8vw, 17px);
}
.btn-outline:hover { transform: translateY(-3px); border-color: var(--text); }
.btn-cta-sm { background: var(--accent); color: #141419; padding: 10px 20px; font-size: 13.5px; }
.btn-cta-sm:hover { transform: translateY(-2px); }
.btn-light { background: var(--text); color: #141419; padding: 14px 26px; font-size: 15px; border: none; }
.btn-light:hover { transform: translateY(-2px); }

/* Header / nav */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(20, 20, 25, 0.88); backdrop-filter: blur(10px);
}
.header-bars { height: 3px; }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: 'Archivo Black', sans-serif; font-size: 12.5px; line-height: 0.92; letter-spacing: -0.01em; }
.brand-tag { display: block; font-family: 'Space Mono', monospace; font-size: 8.5px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-top: 4px; }

.nav-desktop { display: flex; align-items: center; gap: 28px; }
.nav-desktop a:not(.btn) { color: rgba(243, 241, 234, 0.75); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .18s ease; }
.nav-desktop a:not(.btn):hover { color: var(--text); }
.nav-burger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; align-items: center; justify-content: center; }
.icon-hidden { display: none; }
.nav-mobile { display: none; flex-direction: column; gap: 2px; padding: 8px 20px 18px; border-top: 1px solid rgba(243, 241, 234, 0.08); }
.nav-mobile a { color: rgba(243, 241, 234, 0.8); text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 0; }
.nav-mobile.is-open { display: flex; }

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-burger { display: inline-flex; }
}

.back-link { color: rgba(243, 241, 234, 0.75); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .18s ease; }
.back-link:hover { color: var(--text); }

/* Footer */
.site-footer { padding: clamp(56px, 8vw, 88px) clamp(20px, 6vw, 48px) clamp(40px, 6vw, 56px); }
.footer-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.footer-brand-mark { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--text); }
.footer-brand-text { display: flex; flex-direction: column; text-align: left; }
.footer-brand { font-family: 'Archivo Black', sans-serif; font-size: 20px; line-height: 0.94; letter-spacing: -0.01em; }
.footer-brand-tag { display: block; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-top: 6px; }
.social-row { display: flex; gap: 14px; justify-content: center; }
.social-circle {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(243, 241, 234, 0.3);
  display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.social-circle:hover { border-color: var(--accent); transform: translateY(-2px); }
.footer-bars { width: min(480px, 88vw); height: 6px; border-radius: 4px; margin-top: clamp(16px, 3vw, 24px); }
.footer-meta {
  margin-top: 4px; display: flex; flex-direction: column; gap: 6px; align-items: center;
  font-family: 'Space Mono', monospace; font-size: 11.5px; color: var(--text-faint); text-align: center;
}
.footer-meta a { color: rgba(243, 241, 234, 0.6); text-decoration: underline; }
.footer-meta a:hover { color: var(--text); }