/* CC thematic branding — Specs (specs) */
:root {
  --cc-accent: #0891b2;
  --cc-accent-dark: #0e7490;
  --cc-accent-rgb: 8, 145, 178;
}
html[data-cc-theme="specs"] {
  scroll-behavior: smooth;
}
body {
  font-family: 'IBM Plex Sans', sans-serif !important;
  position: relative;
}
body > * {
  position: relative;
  z-index: 1;
}
h1, h2, h3, .brand, .wordmark {
  font-family: 'Orbitron', sans-serif !important;
}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:linear-gradient(rgba(var(--cc-accent-rgb),.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cc-accent-rgb),.18) 1px, transparent 1px);
  background-size:40px 40px;
}

header{
  background:rgba(248,250,252,.94) !important;
  border-bottom:1px solid rgba(var(--cc-accent-rgb),.25) !important;
  box-shadow:0 0 24px rgba(var(--cc-accent-rgb),.08) !important;
}
::selection {
  background: rgba(8, 145, 178, 0.18) !important;
}
input[type=email]:focus, input[type=text]:focus, textarea:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.14) !important;
}
.kicker, .kick, .pre, .sec-label, .hero .tag, .hero .over, .cat-no span,
.status-line, .badge {
  color: var(--cc-accent) !important;
}
.hero {
  position: relative;
}
section.alt, .tier {
  background: color-mix(in srgb, var(--cc-accent) 3%, transparent) !important;
}
.cc-waitlist {
  background: #081018 !important;
  border-color: rgba(8, 145, 178, 0.22) !important;
}
.cc-waitlist-label {
  color: rgba(8, 145, 178, 0.85) !important;
}
.cc-waitlist-title {
  color: #f3f4f6 !important;
}
.cc-waitlist-btn {
  background: var(--cc-accent) !important;
  border-color: color-mix(in srgb, var(--cc-accent) 70%, white) !important;
}
.cc-waitlist-btn:hover {
  background: var(--cc-accent-dark) !important;
}
.cc-waitlist-form input:focus {
  outline-color: var(--cc-accent) !important;
}
footer {
  border-top: 1px solid rgba(8, 145, 178, 0.12);
}
footer a:hover {
  color: var(--cc-accent) !important;
}
@media (max-width: 720px) {
  header .bar {
    flex-wrap: nowrap !important;
    gap: 8px 10px !important;
  }
  header .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header .bar nav {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }
  header .bar > .btn,
  header .bar > a.btn,
  header .bar-actions .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 44px !important;
  }
  .hero::before, .hero::after {
    display: none;
  }
}