/* ============================================================
   Ops+AI — Brand System
   v1.0 · Operator's Console direction
   Pink-on-navy. Terminal energy. Display + Mono pairing.
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --bg-0: #07061B;   /* deepest — viewport background */
  --bg-1: #0C0A26;   /* card / surface */
  --bg-2: #15123A;   /* raised surface */
  --bg-3: #1E1A4F;   /* highlight / accent surface */

  --ink-0: #FFFFFF;
  --ink-1: #E8E6FF;
  --ink-2: #9C97C7;
  --ink-3: #5E5A85;
  --ink-4: #38355C;

  --pink: #FF2D8F;
  --pink-soft: #FF6BB0;
  --pink-deep: #C91F73;
  --pink-glow: rgba(255, 45, 143, 0.45);
  --pink-faint: rgba(255, 45, 143, 0.08);

  --signal-go: #4ADE80;
  --signal-warn: #FFB454;
  --signal-stop: #FF5F57;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.08);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ---- Elevation ---- */
  --shadow-1: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-2: 0 12px 32px rgba(0,0,0,0.4);
  --shadow-3: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,45,143,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-pink: 0 8px 24px var(--pink-glow);
}

@font-face { font-display: swap; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-mono); }

/* ============================================================
   Logo mark — 3×3 cluster of circles
   4 corners outlined · 5 plus-shape solid · metaball joins
   Source: assets/logo/mark.svg · inlined as background-image
   so the mark renders in both browsers and screenshot tools.
   ============================================================ */

.opsai-mark {
  display: inline-block;
  width: 30px; height: 30px;
  vertical-align: middle;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 316' fill='%23FF2D8F'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M263.312 0.00411458C292.474 0.373531 316 24.1163 316 53.3507L315.996 54.0399C315.672 79.618 297.338 100.857 273.086 105.675C297.556 110.536 316 132.115 316 158C316 183.885 297.556 205.463 273.086 210.324C297.556 215.185 316 236.764 316 262.649L315.996 263.338C315.627 292.486 291.871 316 262.622 316L261.931 315.996C236.414 315.673 215.212 297.453 210.311 273.317C205.366 297.67 183.825 316 158 316C132.176 316 110.635 297.671 105.689 273.318C100.744 297.671 79.2029 316 53.3785 316L52.6883 315.996C23.7558 315.629 0.370436 292.256 0.00411459 263.338L0 262.649C6.10795e-05 236.765 18.444 215.186 42.9131 210.324C18.444 205.462 7.15866e-07 183.885 0 158C0 132.116 18.4424 110.539 42.91 105.676C18.6598 100.856 0.328117 79.6167 0.00411459 54.0399L0 53.3507C0 23.886 23.8984 0 53.3785 0L54.0687 0.00411458C79.5856 0.327356 100.788 18.546 105.689 42.6806C110.635 18.3287 132.176 3.80306e-06 158 0C183.825 0 205.366 18.3303 210.311 42.6837C215.255 18.3304 236.797 0.000121703 262.622 0L263.312 0.00411458ZM262.622 219.832C238.954 219.832 219.777 239.007 219.776 262.649C219.777 286.291 238.954 305.467 262.622 305.467C286.289 305.467 305.467 286.291 305.467 262.649C305.467 239.007 286.289 219.832 262.622 219.832ZM53.3785 219.832C29.7107 219.832 10.5334 239.007 10.5333 262.649C10.5334 286.291 29.7107 305.467 53.3785 305.467C77.0463 305.467 96.2237 286.291 96.2237 262.649C96.2236 239.007 77.0463 219.832 53.3785 219.832ZM213.356 178.571C212.469 176.453 208.152 176.452 207.266 178.57C201.86 191.489 191.516 201.829 178.592 207.235C176.464 208.125 176.465 212.524 178.592 213.414C194.677 220.142 206.764 234.516 210.31 251.988C214.567 231.009 231.14 214.5 252.158 210.324C234.581 206.832 220.112 194.715 213.356 178.571ZM108.734 178.57C107.848 176.452 103.531 176.453 102.645 178.571C95.8884 194.716 81.4189 206.833 63.8409 210.324C84.8591 214.499 101.432 231.007 105.69 251.985C109.237 234.514 121.324 220.142 137.409 213.414C139.536 212.524 139.536 208.125 137.409 207.235C124.484 201.829 114.14 191.489 108.734 178.57ZM105.69 64.0137C101.433 84.992 84.8594 101.5 63.8409 105.675C81.419 109.166 95.8884 121.284 102.645 137.429C103.531 139.547 107.848 139.548 108.734 137.43C114.14 124.511 124.484 114.171 137.409 108.765C139.536 107.875 139.536 103.476 137.409 102.586C121.324 95.8579 109.237 81.4856 105.69 64.0137ZM210.309 64.0126C206.763 81.4849 194.677 95.8579 178.592 102.586C176.465 103.476 176.464 107.875 178.592 108.765C191.516 114.171 201.86 124.511 207.266 137.43C208.152 139.548 212.469 139.547 213.356 137.429C220.111 121.285 234.579 109.169 252.155 105.676C231.138 101.5 214.566 84.9904 210.309 64.0126ZM53.3785 10.5333C29.7107 10.5333 10.5333 29.7085 10.5333 53.3507C10.5334 76.9929 29.7107 96.1681 53.3785 96.1681C77.0463 96.168 96.2237 76.9928 96.2237 53.3507C96.2237 29.7086 77.0463 10.5334 53.3785 10.5333ZM262.622 10.5333C238.954 10.5335 219.776 29.7086 219.776 53.3507C219.777 76.9928 238.954 96.168 262.622 96.1681C286.289 96.168 305.467 76.9928 305.467 53.3507C305.467 29.7086 286.289 10.5334 262.622 10.5333Z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--pink-glow));
  flex-shrink: 0;
}
.opsai-mark > span { display: none !important; }

.opsai-mark.sm  { width: 18px;  height: 18px;  filter: none; }
.opsai-mark.lg  { width: 48px;  height: 48px;  filter: drop-shadow(0 0 10px var(--pink-glow)); }
.opsai-mark.xl  { width: 80px;  height: 80px;  filter: drop-shadow(0 0 16px var(--pink-glow)); }
.opsai-mark.xxl { width: 144px; height: 144px; filter: drop-shadow(0 0 28px var(--pink-glow)); }
.opsai-mark.xxxl{ width: 240px; height: 240px; filter: drop-shadow(0 0 40px var(--pink-glow)); }

.opsai-mark.is-white { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 316' fill='%23FFFFFF'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M263.312 0.00411458C292.474 0.373531 316 24.1163 316 53.3507L315.996 54.0399C315.672 79.618 297.338 100.857 273.086 105.675C297.556 110.536 316 132.115 316 158C316 183.885 297.556 205.463 273.086 210.324C297.556 215.185 316 236.764 316 262.649L315.996 263.338C315.627 292.486 291.871 316 262.622 316L261.931 315.996C236.414 315.673 215.212 297.453 210.311 273.317C205.366 297.67 183.825 316 158 316C132.176 316 110.635 297.671 105.689 273.318C100.744 297.671 79.2029 316 53.3785 316L52.6883 315.996C23.7558 315.629 0.370436 292.256 0.00411459 263.338L0 262.649C6.10795e-05 236.765 18.444 215.186 42.9131 210.324C18.444 205.462 7.15866e-07 183.885 0 158C0 132.116 18.4424 110.539 42.91 105.676C18.6598 100.856 0.328117 79.6167 0.00411459 54.0399L0 53.3507C0 23.886 23.8984 0 53.3785 0L54.0687 0.00411458C79.5856 0.327356 100.788 18.546 105.689 42.6806C110.635 18.3287 132.176 3.80306e-06 158 0C183.825 0 205.366 18.3303 210.311 42.6837C215.255 18.3304 236.797 0.000121703 262.622 0L263.312 0.00411458ZM262.622 219.832C238.954 219.832 219.777 239.007 219.776 262.649C219.777 286.291 238.954 305.467 262.622 305.467C286.289 305.467 305.467 286.291 305.467 262.649C305.467 239.007 286.289 219.832 262.622 219.832ZM53.3785 219.832C29.7107 219.832 10.5334 239.007 10.5333 262.649C10.5334 286.291 29.7107 305.467 53.3785 305.467C77.0463 305.467 96.2237 286.291 96.2237 262.649C96.2236 239.007 77.0463 219.832 53.3785 219.832ZM213.356 178.571C212.469 176.453 208.152 176.452 207.266 178.57C201.86 191.489 191.516 201.829 178.592 207.235C176.464 208.125 176.465 212.524 178.592 213.414C194.677 220.142 206.764 234.516 210.31 251.988C214.567 231.009 231.14 214.5 252.158 210.324C234.581 206.832 220.112 194.715 213.356 178.571ZM108.734 178.57C107.848 176.452 103.531 176.453 102.645 178.571C95.8884 194.716 81.4189 206.833 63.8409 210.324C84.8591 214.499 101.432 231.007 105.69 251.985C109.237 234.514 121.324 220.142 137.409 213.414C139.536 212.524 139.536 208.125 137.409 207.235C124.484 201.829 114.14 191.489 108.734 178.57ZM105.69 64.0137C101.433 84.992 84.8594 101.5 63.8409 105.675C81.419 109.166 95.8884 121.284 102.645 137.429C103.531 139.547 107.848 139.548 108.734 137.43C114.14 124.511 124.484 114.171 137.409 108.765C139.536 107.875 139.536 103.476 137.409 102.586C121.324 95.8579 109.237 81.4856 105.69 64.0137ZM210.309 64.0126C206.763 81.4849 194.677 95.8579 178.592 102.586C176.465 103.476 176.464 107.875 178.592 108.765C191.516 114.171 201.86 124.511 207.266 137.43C208.152 139.548 212.469 139.547 213.356 137.429C220.111 121.285 234.579 109.169 252.155 105.676C231.138 101.5 214.566 84.9904 210.309 64.0126ZM53.3785 10.5333C29.7107 10.5333 10.5333 29.7085 10.5333 53.3507C10.5334 76.9929 29.7107 96.1681 53.3785 96.1681C77.0463 96.168 96.2237 76.9928 96.2237 53.3507C96.2237 29.7086 77.0463 10.5334 53.3785 10.5333ZM262.622 10.5333C238.954 10.5335 219.776 29.7086 219.776 53.3507C219.777 76.9928 238.954 96.168 262.622 96.1681C286.289 96.168 305.467 76.9928 305.467 53.3507C305.467 29.7086 286.289 10.5334 262.622 10.5333Z'%3E%3C/path%3E%3C/svg%3E"); filter: drop-shadow(0 0 10px rgba(255,255,255,0.25)); }
.opsai-mark.is-ink   { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 316' fill='%2307061B'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M263.312 0.00411458C292.474 0.373531 316 24.1163 316 53.3507L315.996 54.0399C315.672 79.618 297.338 100.857 273.086 105.675C297.556 110.536 316 132.115 316 158C316 183.885 297.556 205.463 273.086 210.324C297.556 215.185 316 236.764 316 262.649L315.996 263.338C315.627 292.486 291.871 316 262.622 316L261.931 315.996C236.414 315.673 215.212 297.453 210.311 273.317C205.366 297.67 183.825 316 158 316C132.176 316 110.635 297.671 105.689 273.318C100.744 297.671 79.2029 316 53.3785 316L52.6883 315.996C23.7558 315.629 0.370436 292.256 0.00411459 263.338L0 262.649C6.10795e-05 236.765 18.444 215.186 42.9131 210.324C18.444 205.462 7.15866e-07 183.885 0 158C0 132.116 18.4424 110.539 42.91 105.676C18.6598 100.856 0.328117 79.6167 0.00411459 54.0399L0 53.3507C0 23.886 23.8984 0 53.3785 0L54.0687 0.00411458C79.5856 0.327356 100.788 18.546 105.689 42.6806C110.635 18.3287 132.176 3.80306e-06 158 0C183.825 0 205.366 18.3303 210.311 42.6837C215.255 18.3304 236.797 0.000121703 262.622 0L263.312 0.00411458ZM262.622 219.832C238.954 219.832 219.777 239.007 219.776 262.649C219.777 286.291 238.954 305.467 262.622 305.467C286.289 305.467 305.467 286.291 305.467 262.649C305.467 239.007 286.289 219.832 262.622 219.832ZM53.3785 219.832C29.7107 219.832 10.5334 239.007 10.5333 262.649C10.5334 286.291 29.7107 305.467 53.3785 305.467C77.0463 305.467 96.2237 286.291 96.2237 262.649C96.2236 239.007 77.0463 219.832 53.3785 219.832ZM213.356 178.571C212.469 176.453 208.152 176.452 207.266 178.57C201.86 191.489 191.516 201.829 178.592 207.235C176.464 208.125 176.465 212.524 178.592 213.414C194.677 220.142 206.764 234.516 210.31 251.988C214.567 231.009 231.14 214.5 252.158 210.324C234.581 206.832 220.112 194.715 213.356 178.571ZM108.734 178.57C107.848 176.452 103.531 176.453 102.645 178.571C95.8884 194.716 81.4189 206.833 63.8409 210.324C84.8591 214.499 101.432 231.007 105.69 251.985C109.237 234.514 121.324 220.142 137.409 213.414C139.536 212.524 139.536 208.125 137.409 207.235C124.484 201.829 114.14 191.489 108.734 178.57ZM105.69 64.0137C101.433 84.992 84.8594 101.5 63.8409 105.675C81.419 109.166 95.8884 121.284 102.645 137.429C103.531 139.547 107.848 139.548 108.734 137.43C114.14 124.511 124.484 114.171 137.409 108.765C139.536 107.875 139.536 103.476 137.409 102.586C121.324 95.8579 109.237 81.4856 105.69 64.0137ZM210.309 64.0126C206.763 81.4849 194.677 95.8579 178.592 102.586C176.465 103.476 176.464 107.875 178.592 108.765C191.516 114.171 201.86 124.511 207.266 137.43C208.152 139.548 212.469 139.547 213.356 137.429C220.111 121.285 234.579 109.169 252.155 105.676C231.138 101.5 214.566 84.9904 210.309 64.0126ZM53.3785 10.5333C29.7107 10.5333 10.5333 29.7085 10.5333 53.3507C10.5334 76.9929 29.7107 96.1681 53.3785 96.1681C77.0463 96.168 96.2237 76.9928 96.2237 53.3507C96.2237 29.7086 77.0463 10.5334 53.3785 10.5333ZM262.622 10.5333C238.954 10.5335 219.776 29.7086 219.776 53.3507C219.777 76.9928 238.954 96.168 262.622 96.1681C286.289 96.168 305.467 76.9928 305.467 53.3507C305.467 29.7086 286.289 10.5334 262.622 10.5333Z'%3E%3C/path%3E%3C/svg%3E"); filter: none; }
.opsai-mark.is-blue  { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 316' fill='%230E1166'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M263.312 0.00411458C292.474 0.373531 316 24.1163 316 53.3507L315.996 54.0399C315.672 79.618 297.338 100.857 273.086 105.675C297.556 110.536 316 132.115 316 158C316 183.885 297.556 205.463 273.086 210.324C297.556 215.185 316 236.764 316 262.649L315.996 263.338C315.627 292.486 291.871 316 262.622 316L261.931 315.996C236.414 315.673 215.212 297.453 210.311 273.317C205.366 297.67 183.825 316 158 316C132.176 316 110.635 297.671 105.689 273.318C100.744 297.671 79.2029 316 53.3785 316L52.6883 315.996C23.7558 315.629 0.370436 292.256 0.00411459 263.338L0 262.649C6.10795e-05 236.765 18.444 215.186 42.9131 210.324C18.444 205.462 7.15866e-07 183.885 0 158C0 132.116 18.4424 110.539 42.91 105.676C18.6598 100.856 0.328117 79.6167 0.00411459 54.0399L0 53.3507C0 23.886 23.8984 0 53.3785 0L54.0687 0.00411458C79.5856 0.327356 100.788 18.546 105.689 42.6806C110.635 18.3287 132.176 3.80306e-06 158 0C183.825 0 205.366 18.3303 210.311 42.6837C215.255 18.3304 236.797 0.000121703 262.622 0L263.312 0.00411458ZM262.622 219.832C238.954 219.832 219.777 239.007 219.776 262.649C219.777 286.291 238.954 305.467 262.622 305.467C286.289 305.467 305.467 286.291 305.467 262.649C305.467 239.007 286.289 219.832 262.622 219.832ZM53.3785 219.832C29.7107 219.832 10.5334 239.007 10.5333 262.649C10.5334 286.291 29.7107 305.467 53.3785 305.467C77.0463 305.467 96.2237 286.291 96.2237 262.649C96.2236 239.007 77.0463 219.832 53.3785 219.832ZM213.356 178.571C212.469 176.453 208.152 176.452 207.266 178.57C201.86 191.489 191.516 201.829 178.592 207.235C176.464 208.125 176.465 212.524 178.592 213.414C194.677 220.142 206.764 234.516 210.31 251.988C214.567 231.009 231.14 214.5 252.158 210.324C234.581 206.832 220.112 194.715 213.356 178.571ZM108.734 178.57C107.848 176.452 103.531 176.453 102.645 178.571C95.8884 194.716 81.4189 206.833 63.8409 210.324C84.8591 214.499 101.432 231.007 105.69 251.985C109.237 234.514 121.324 220.142 137.409 213.414C139.536 212.524 139.536 208.125 137.409 207.235C124.484 201.829 114.14 191.489 108.734 178.57ZM105.69 64.0137C101.433 84.992 84.8594 101.5 63.8409 105.675C81.419 109.166 95.8884 121.284 102.645 137.429C103.531 139.547 107.848 139.548 108.734 137.43C114.14 124.511 124.484 114.171 137.409 108.765C139.536 107.875 139.536 103.476 137.409 102.586C121.324 95.8579 109.237 81.4856 105.69 64.0137ZM210.309 64.0126C206.763 81.4849 194.677 95.8579 178.592 102.586C176.465 103.476 176.464 107.875 178.592 108.765C191.516 114.171 201.86 124.511 207.266 137.43C208.152 139.548 212.469 139.547 213.356 137.429C220.111 121.285 234.579 109.169 252.155 105.676C231.138 101.5 214.566 84.9904 210.309 64.0126ZM53.3785 10.5333C29.7107 10.5333 10.5333 29.7085 10.5333 53.3507C10.5334 76.9929 29.7107 96.1681 53.3785 96.1681C77.0463 96.168 96.2237 76.9928 96.2237 53.3507C96.2237 29.7086 77.0463 10.5334 53.3785 10.5333ZM262.622 10.5333C238.954 10.5335 219.776 29.7086 219.776 53.3507C219.777 76.9928 238.954 96.168 262.622 96.1681C286.289 96.168 305.467 76.9928 305.467 53.3507C305.467 29.7086 286.289 10.5334 262.622 10.5333Z'%3E%3C/path%3E%3C/svg%3E"); filter: none; }
.opsai-mark.no-glow  { filter: none; }

/* ============================================================
   Full wordmark — mark + "Ops+AI" letters as one lockup
   Use when you want the official brand wordmark, not typed text.
   ============================================================ */
.opsai-wordmark {
  display: inline-block;
  height: 32px;
  aspect-ratio: 929 / 316;
  background: url('assets/logo/wordmark-pink.svg') center / contain no-repeat;
  vertical-align: middle;
}
.opsai-wordmark.blue  { background-image: url('assets/logo/wordmark-blue.svg'); }
.opsai-wordmark.black { background-image: url('assets/logo/wordmark-black.svg'); }
.opsai-wordmark.sm  { height: 22px; }
.opsai-wordmark.md  { height: 44px; }
.opsai-wordmark.lg  { height: 72px; }
.opsai-wordmark.xl  { height: 120px; }
.opsai-wordmark.xxl { height: 200px; }

/* ============================================================
   Background atmospherics — opt-in via classes
   ============================================================ */
.bg-lattice {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,45,143,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,143,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
}
.bg-lattice-fine {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 16px 16px;
}
.bg-glow {
  position: fixed; pointer-events: none; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--pink-glow), transparent 60%);
  filter: blur(60px);
}

/* ============================================================
   Motion primitives
   ============================================================ */
@keyframes blink   { 50% { opacity: 0; } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes scan    { 0% { transform: translateY(-100%);} 100% { transform: translateY(100%);} }
@keyframes glowpulse { 0%, 100% { box-shadow: 0 0 8px var(--pink-glow); } 50% { box-shadow: 0 0 24px var(--pink-glow); } }

.blink { animation: blink 1s infinite; }
.pulse { animation: pulse 1.6s infinite; }

/* ============================================================
   Component primitives
   ============================================================ */

/* Kicker / eyebrow chip */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--pink);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--pink-glow);
  border-radius: 999px;
  background: var(--pink-faint);
}
.kicker > .blink {
  width: 5px; height: 5px; background: var(--pink); border-radius: 50%;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--pink); color: white;
  box-shadow: var(--shadow-pink);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--pink-glow); background: var(--pink-soft); }
.btn-ghost {
  background: transparent; color: var(--ink-1);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--pink-glow); color: var(--pink); }
.btn-mono {
  background: var(--bg-1); color: var(--ink-0);
  border-color: var(--line);
}
.btn-mono:hover { border-color: var(--pink-glow); }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pill-pink  { background: var(--pink-faint); color: var(--pink); }
.pill-go    { background: rgba(74,222,128,0.1); color: var(--signal-go); }
.pill-warn  { background: rgba(255,180,84,0.1); color: var(--signal-warn); }
.pill-neutral { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }

/* Section index marker */
.idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.idx span { color: var(--pink); }

/* Cards */
.surface {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.surface-raised {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* Terminal block */
.term {
  background: linear-gradient(180deg, #100E2A 0%, #0A0820 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  font-family: var(--font-mono);
  overflow: hidden;
  position: relative;
}
.term-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.term-light { width: 11px; height: 11px; border-radius: 50%; }
.term-light.r { background: var(--signal-stop); }
.term-light.y { background: var(--signal-warn); }
.term-light.g { background: var(--signal-go); }
.term-title { margin-left: 12px; font-size: 11px; color: var(--ink-3); }
.term-body {
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-1);
}
.term-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px);
}
.term-glare {
  position: absolute; top: 0; left: 0; right: 0; height: 100px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,45,143,0.06), transparent);
}
.term-cursor {
  display: inline-block; width: 0.55ch; height: 0.95em;
  background: var(--pink); animation: blink 1s infinite; vertical-align: -2px;
}
.term-prompt { color: var(--pink); }
.term-cmd    { color: var(--ink-0); }
.term-out    { color: var(--ink-2); }
.term-ok     { color: var(--signal-go); }
.term-warn   { color: var(--signal-warn); }
.term-ink    { color: var(--ink-0); }

/* Section header pattern */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 44px; line-height: 1; letter-spacing: -0.03em;
  margin: 12px 0 0; color: var(--ink-0);
}
.section-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.section-head .meta b { color: var(--ink-1); font-weight: 500; }

/* Display headlines */
.display-xl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 88px; line-height: 0.92; letter-spacing: -0.04em;
  text-wrap: balance; color: var(--ink-0);
}
.display-lg {
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 0.96; letter-spacing: -0.04em;
}
.display-md {
  font-family: var(--font-display); font-weight: 600;
  font-size: 44px; line-height: 1; letter-spacing: -0.03em;
}
.gradient-pink {
  background: linear-gradient(120deg, var(--pink), var(--pink-soft));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

/* Dotted dividers */
.div-dashed { border-top: 1px dashed var(--line-strong); }

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }