/* Midnight design concept for TB. Self-hosted system fonts; no dependencies. */
:root { color-scheme: dark;
  --tb-background: #0B1220;
  --tb-surface: #131E30;
  --tb-surface-hover: #1A2940;
  --tb-text: #EEF3FA;
  --tb-muted: #A8B6CC;
  --tb-accent: #83B5FF;
  --tb-border: #2B3C55;
  --tb-radius: 16px;
  --tb-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.tb-midnight { margin:0; background:var(--tb-background); color:var(--tb-text); font-family:var(--tb-font); line-height:1.6; }
.tb-midnight *, .tb-midnight *::before, .tb-midnight *::after { box-sizing:border-box; }
.tb-container { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.tb-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; border-bottom:1px solid var(--tb-border); }
.tb-logo { display:block; width:165px; height:48px; }
.tb-nav { display:flex; gap:24px; flex-wrap:wrap; }
.tb-nav a { color:var(--tb-muted); text-decoration:none; }
.tb-nav a:hover { color:var(--tb-text); }
.tb-hero { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:60px; padding-block:96px; }
.tb-eyebrow { color:var(--tb-accent); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.tb-title { font-size:clamp(36px,5.5vw,68px); line-height:1.08; letter-spacing:-.045em; margin:20px 0 24px; }
.tb-description { color:var(--tb-muted); max-width:520px; font-size:18px; }
.tb-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border:1px solid transparent; border-radius:10px; background:var(--tb-accent); color:var(--tb-background); text-decoration:none; font:600 15px var(--tb-font); cursor:pointer; transition:background .18s ease; }
.tb-button:hover { background:#A1C7FF; }
.tb-button--secondary { background:transparent; border-color:var(--tb-border); color:var(--tb-text); }
.tb-button--secondary:hover { background:var(--tb-surface-hover); }
.tb-midnight :focus-visible { outline:3px solid var(--tb-accent); outline-offset:4px; }
.tb-button:disabled { opacity:.5; cursor:not-allowed; }
.tb-art { min-height:300px; border:1px solid var(--tb-border); border-radius:24px; display:grid; place-items:center; background:radial-gradient(ellipse at top right,#233D63,var(--tb-surface) 70%); }
.tb-art img { width:144px; height:144px; }
.tb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:64px; }
.tb-card { background:var(--tb-surface); border:1px solid var(--tb-border); border-radius:var(--tb-radius); padding:28px; }
.tb-card h2 { font-size:20px; margin:16px 0 8px; }
.tb-card p { color:var(--tb-muted); margin:0; }
.tb-number { font-size:12px; color:var(--tb-accent); letter-spacing:.12em; }
.tb-input { width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--tb-border); border-radius:10px; background:var(--tb-background); color:var(--tb-text); font:inherit; }
.tb-footer { padding-block:24px; border-top:1px solid var(--tb-border); color:var(--tb-muted); font-size:13px; }
@media(max-width:760px) { .tb-header { align-items:flex-start; flex-direction:column; } .tb-nav { gap:16px; } .tb-hero { grid-template-columns:1fr; gap:32px; padding-block:48px; } .tb-art { min-height:200px; } .tb-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .tb-midnight * { transition:none!important; animation:none!important; } }