/* ============================================================
   BOQ - Brand B - DISRUPTOR
   Anti-incumbent manifesto direction.
   Black + electric volt. Oversized type. Sharp edges. No mercy.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800,900&f[]=general-sans@400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ---------- Color ---------- */
  --boq-disruptor-ink:        #0a0a0a;
  --boq-disruptor-ink-soft:   #1a1a1a;
  --boq-disruptor-paper:      #ffffff;
  --boq-disruptor-volt:       #c4ff3b;
  --boq-disruptor-volt-deep:  #9fd624;
  --boq-disruptor-rule:       #e5e5e5;
  --boq-disruptor-rule-dark:  #2a2a2a;

  /* Semantic aliases */
  --boq-disruptor-bg:         var(--boq-disruptor-paper);
  --boq-disruptor-bg-invert:  var(--boq-disruptor-ink);
  --boq-disruptor-text:       var(--boq-disruptor-ink);
  --boq-disruptor-text-invert:var(--boq-disruptor-paper);
  --boq-disruptor-accent:     var(--boq-disruptor-volt);
  --boq-disruptor-border:     var(--boq-disruptor-rule);

  /* ---------- Typography ---------- */
  --boq-disruptor-font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --boq-disruptor-font-body:    'Inter Tight', 'Helvetica Neue', sans-serif;
  --boq-disruptor-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --boq-disruptor-fs-12:  12px;
  --boq-disruptor-fs-14:  14px;
  --boq-disruptor-fs-16:  16px;
  --boq-disruptor-fs-18:  18px;
  --boq-disruptor-fs-22:  22px;
  --boq-disruptor-fs-28:  28px;
  --boq-disruptor-fs-36:  36px;
  --boq-disruptor-fs-48:  48px;
  --boq-disruptor-fs-64:  64px;
  --boq-disruptor-fs-88:  88px;
  --boq-disruptor-fs-120: 120px;
  --boq-disruptor-fs-168: 168px;

  --boq-disruptor-lh-tight: 0.92;
  --boq-disruptor-lh-snug:  1.0;
  --boq-disruptor-lh-base:  1.55;
  --boq-disruptor-lh-lede:  1.4;

  --boq-disruptor-track-display: -0.04em;
  --boq-disruptor-track-heading: -0.03em;
  --boq-disruptor-track-body:    0;

  /* ---------- Spacing (4px base) ---------- */
  --boq-disruptor-s-0:  0;
  --boq-disruptor-s-1:  4px;
  --boq-disruptor-s-2:  8px;
  --boq-disruptor-s-3:  12px;
  --boq-disruptor-s-4:  16px;
  --boq-disruptor-s-5:  24px;
  --boq-disruptor-s-6:  32px;
  --boq-disruptor-s-7:  48px;
  --boq-disruptor-s-8:  64px;
  --boq-disruptor-s-9:  96px;
  --boq-disruptor-s-10: 128px;
  --boq-disruptor-s-11: 192px;
  --boq-disruptor-s-12: 256px;

  --boq-disruptor-section-y:        var(--boq-disruptor-s-10);
  --boq-disruptor-section-y-mobile: var(--boq-disruptor-s-8);
  --boq-disruptor-hero-y-top:       var(--boq-disruptor-s-12);
  --boq-disruptor-hero-y-bottom:    var(--boq-disruptor-s-11);

  /* ---------- Radii (sharp by default) ---------- */
  --boq-disruptor-r-0:    0;
  --boq-disruptor-r-1:    2px;
  --boq-disruptor-r-full: 9999px;

  --boq-disruptor-r-button: 0;
  --boq-disruptor-r-card:   0;
  --boq-disruptor-r-input:  0;

  /* ---------- Shadows (minimal, hard-edge) ---------- */
  --boq-disruptor-shadow-0:    none;
  --boq-disruptor-shadow-hard: 4px 4px 0 0 var(--boq-disruptor-ink);

  /* ---------- Motion ---------- */
  --boq-disruptor-dur-fast: 100ms;
  --boq-disruptor-dur-base: 160ms;
  --boq-disruptor-dur-slow: 220ms;
  --boq-disruptor-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Borders ---------- */
  --boq-disruptor-border-w-thin:  1px;
  --boq-disruptor-border-w-bold:  2px;
  --boq-disruptor-border-w-stamp: 4px;

  /* ---------- Layout ---------- */
  --boq-disruptor-container:    1280px;
  --boq-disruptor-container-px: var(--boq-disruptor-s-6);
  --boq-disruptor-measure:      56ch;
  --boq-disruptor-nav-h:        80px;
  --boq-disruptor-nav-h-mobile: 64px;

  /* ---------- Z-index ---------- */
  --boq-disruptor-z-nav:     50;
  --boq-disruptor-z-overlay: 100;
}

/* ============================================================
   Component primitives - opt-in via .boq-disruptor scope
   ============================================================ */

.boq-disruptor {
  font-family: var(--boq-disruptor-font-body);
  font-size: var(--boq-disruptor-fs-18);
  line-height: var(--boq-disruptor-lh-base);
  color: var(--boq-disruptor-text);
  background: var(--boq-disruptor-bg);
  -webkit-font-smoothing: antialiased;
}

.boq-disruptor h1, .boq-disruptor h2, .boq-disruptor h3 {
  font-family: var(--boq-disruptor-font-display);
  font-weight: 800;
  letter-spacing: var(--boq-disruptor-track-heading);
  line-height: var(--boq-disruptor-lh-snug);
  margin: 0;
}

.boq-disruptor h1.hero {
  font-size: var(--boq-disruptor-fs-120);
  font-weight: 900;
  letter-spacing: var(--boq-disruptor-track-display);
  line-height: var(--boq-disruptor-lh-tight);
}

.boq-disruptor .lede {
  font-size: var(--boq-disruptor-fs-22);
  font-weight: 500;
  line-height: var(--boq-disruptor-lh-lede);
  max-width: var(--boq-disruptor-measure);
}

/* Buttons - never rounded */
.boq-disruptor .btn {
  display: inline-block;
  font-family: var(--boq-disruptor-font-display);
  font-weight: 500;
  font-size: var(--boq-disruptor-fs-16);
  padding: var(--boq-disruptor-s-4) var(--boq-disruptor-s-6);
  border-radius: var(--boq-disruptor-r-button);
  border: 0;
  cursor: pointer;
  transition: background var(--boq-disruptor-dur-fast) var(--boq-disruptor-ease),
              color var(--boq-disruptor-dur-fast) var(--boq-disruptor-ease),
              transform var(--boq-disruptor-dur-base) var(--boq-disruptor-ease);
}
.boq-disruptor .btn-primary {
  background: var(--boq-disruptor-ink);
  color: var(--boq-disruptor-paper);
}
.boq-disruptor .btn-primary:hover {
  background: var(--boq-disruptor-volt);
  color: var(--boq-disruptor-ink);
  box-shadow: var(--boq-disruptor-shadow-hard);
  transform: translate(-2px, -2px);
}
.boq-disruptor .btn-secondary {
  background: transparent;
  color: var(--boq-disruptor-ink);
  border: var(--boq-disruptor-border-w-bold) solid var(--boq-disruptor-ink);
  padding: calc(var(--boq-disruptor-s-4) - 2px) calc(var(--boq-disruptor-s-6) - 2px);
}
.boq-disruptor .btn-secondary:hover {
  background: var(--boq-disruptor-ink);
  color: var(--boq-disruptor-paper);
}
.boq-disruptor .btn-ghost {
  background: transparent;
  color: var(--boq-disruptor-ink);
  padding-left: 0;
  padding-right: 0;
  border-bottom: 2px solid var(--boq-disruptor-volt);
}
.boq-disruptor .btn-ghost:hover {
  border-bottom-width: 4px;
}

/* Cards - bare by default */
.boq-disruptor .card           { padding: var(--boq-disruptor-s-7); }
.boq-disruptor .card-hairline  { border: 1px solid var(--boq-disruptor-rule); }
.boq-disruptor .card-accent    { background: var(--boq-disruptor-volt); color: var(--boq-disruptor-ink); }

/* Inverse surface */
.boq-disruptor .invert {
  background: var(--boq-disruptor-ink);
  color: var(--boq-disruptor-paper);
}
.boq-disruptor .invert .card-hairline { border-color: var(--boq-disruptor-rule-dark); }

/* Mono utility for prices and speeds */
.boq-disruptor .mono { font-family: var(--boq-disruptor-font-mono); font-feature-settings: 'tnum'; }

/* Oversized typographic background word */
.boq-disruptor .bg-word {
  position: absolute;
  font-family: var(--boq-disruptor-font-display);
  font-weight: 900;
  font-size: 240px;
  letter-spacing: var(--boq-disruptor-track-display);
  line-height: 1;
  color: var(--boq-disruptor-rule);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.boq-disruptor .invert .bg-word { color: var(--boq-disruptor-rule-dark); }

/* Nav */
.boq-disruptor .nav { height: var(--boq-disruptor-nav-h); display: flex; align-items: center; }
@media (max-width: 768px) {
  .boq-disruptor .nav { height: var(--boq-disruptor-nav-h-mobile); }
  .boq-disruptor h1.hero { font-size: var(--boq-disruptor-fs-64); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .boq-disruptor *, .boq-disruptor *::before, .boq-disruptor *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}