/* Netquor theme for Bootstrap 5.3: same palette, fonts and hero as before, expressed as Bootstrap variables. */
:root {
  --nq-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --nq-warn: #f5a623; --nq-bad: #f0554b;
  --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, monospace;
  --bs-border-radius: 6px; --bs-border-radius-lg: 12px;
}
[data-bs-theme="dark"] {
  --nq-base: #0e1217; --nq-surface: #161c25; --nq-surface-2: #1b232e; --nq-hair: #263040;
  --nq-accent: #2f8fe0; --nq-accent-2: #5fb0f5; --nq-good: #3ecf8e; --nq-glow: rgba(47, 143, 224, .18);
  --bs-body-bg: var(--nq-base); --bs-body-color: #e8ecf1; --bs-secondary-color: #8b96a5; --bs-tertiary-bg: var(--nq-surface-2);
}
[data-bs-theme="light"] {
  --nq-base: #f5f7fa; --nq-surface: #ffffff; --nq-surface-2: #eef2f7; --nq-hair: #d9dfe7;
  --nq-accent: #1f78c8; --nq-accent-2: #1f78c8; --nq-good: #15935e; --nq-glow: rgba(31, 120, 200, .14);
  --bs-body-bg: var(--nq-base); --bs-body-color: #151b23; --bs-secondary-color: #5d6877; --bs-tertiary-bg: var(--nq-surface-2);
}
:root {
  --bs-border-color: var(--nq-hair);
  --bs-link-color: var(--nq-accent-2); --bs-link-hover-color: var(--nq-accent-2);
  --bs-link-color-rgb: 95, 176, 245;
  --bs-primary: var(--nq-accent);
}

h1, h2, h3, h4 { font-family: var(--nq-display); letter-spacing: .01em; }
.display-title { font-size: clamp(44px, 6.4vw, 78px); line-height: .98; font-weight: 800; text-transform: uppercase; }
.display-heading { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; font-weight: 700; text-transform: uppercase; }
.eyebrow { font: 500 13px/1 var(--bs-font-monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--nq-accent-2); margin-bottom: 12px; }
.grad { background: linear-gradient(95deg, var(--nq-accent-2), #8fd0ff 60%, var(--nq-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 19px; line-height: 1.55; color: var(--bs-secondary-color); max-width: 56ch; }
.sub { color: var(--bs-secondary-color); font-size: 18px; max-width: 62ch; margin-top: 16px; }

/* Navbar */
.nq-nav { background: color-mix(in srgb, var(--nq-base) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nq-hair); min-height: 64px; }
.brand-name { font: 700 26px/1 var(--nq-display); letter-spacing: .06em; color: var(--bs-body-color); }
.nq-nav .nav-link { color: var(--bs-secondary-color); }
.nq-nav .nav-link:hover, .nq-nav .nav-link.active { color: var(--bs-body-color); }
.admin-badge { font: 600 11px/1 var(--bs-font-monospace); letter-spacing: .12em; text-transform: uppercase; }

/* Buttons */
.btn { --bs-btn-font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--nq-accent); --bs-btn-border-color: var(--nq-accent); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--nq-accent-2); --bs-btn-hover-border-color: var(--nq-accent-2); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--nq-accent-2); --bs-btn-active-border-color: var(--nq-accent-2); --bs-btn-focus-shadow-rgb: 95, 176, 245; }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--nq-hair);
  --bs-btn-hover-bg: var(--nq-surface); --bs-btn-hover-border-color: var(--bs-secondary-color); --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--nq-surface); --bs-btn-active-color: var(--bs-body-color); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 72px 0 56px; background:
  radial-gradient(900px 480px at 78% 8%, var(--nq-glow), transparent 70%),
  linear-gradient(var(--nq-hair) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(90deg, var(--nq-hair) 1px, transparent 1px) 0 0 / 56px 56px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .92;
  background: linear-gradient(to bottom, transparent 40%, var(--nq-base)), radial-gradient(circle at 20% 0%, var(--nq-base), transparent 60%); }
.hero > .container { position: relative; }
@media (max-width: 575.98px) { .hero { padding: 28px 0 36px; } }

/* Sections, cards */
.section { padding: 92px 0; }
.section.tight { padding: 56px 0 72px; }
@media (max-width: 575.98px) { .section { padding: 56px 0; } .section.tight { padding: 40px 0 56px; } }
.card { --bs-card-bg: var(--nq-surface); --bs-card-border-color: var(--nq-hair); --bs-card-border-radius: 12px; --bs-card-spacer-x: 1.5rem; --bs-card-spacer-y: 1.5rem; }
.card h3 { font-size: 26px; font-weight: 700; letter-spacing: .02em; margin: 14px 0 8px; line-height: 1.1; }
.card p { color: var(--bs-secondary-color); font-size: 15px; }
.nq-lift { transition: border-color .15s, transform .15s; }
.nq-lift:hover { border-color: color-mix(in srgb, var(--nq-accent) 60%, var(--nq-hair)); transform: translateY(-2px); }
a.nq-lift { text-decoration: none; color: inherit; display: block; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.big { width: 30px; height: 30px; color: var(--nq-accent-2); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stat-value { font: 700 56px/1 var(--nq-display); }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--nq-hair); --bs-table-hover-bg: var(--nq-surface-2); --bs-table-hover-color: var(--bs-body-color); }
.table > :not(caption) > * > * { padding: .95rem 1.25rem; }
.nq-table thead th { font: 500 12px/1 var(--bs-font-monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); }
.nq-table tbody tr:last-child td { border-bottom: 0; }
.nq-table tr.link { cursor: pointer; }
.nq-table td .form-control { min-width: 6rem; max-width: 9rem; }

/* Status pills (Bootstrap badges) */
.nq-pill { background: transparent !important; border: 1px solid var(--nq-hair); font: 500 12px/1.4 var(--bs-font-monospace); color: var(--bs-secondary-color); padding: .25em .85em; }
.nq-pill.nq-ok { color: var(--nq-good); border-color: color-mix(in srgb, var(--nq-good) 45%, transparent); }
.nq-pill.nq-warn { color: var(--nq-warn); border-color: color-mix(in srgb, var(--nq-warn) 45%, transparent); }
.nq-pill.nq-bad { color: var(--nq-bad); border-color: color-mix(in srgb, var(--nq-bad) 45%, transparent); }
.nq-pill.nq-info { color: var(--nq-accent-2); border-color: color-mix(in srgb, var(--nq-accent) 45%, transparent); }

/* Tabs, forms, alerts */
.nav-tabs { --bs-nav-tabs-border-color: var(--nq-hair); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--nq-accent); --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-body-color); --bs-nav-tabs-link-active-color: var(--bs-body-color); }
.nav-tabs .nav-link { border-width: 0 0 2px; border-radius: 0; }
.nav-tabs .nav-link.active { border-bottom-color: var(--nq-accent); }
.form-control, .form-select { background-color: var(--nq-base); border-color: var(--nq-hair); }
.form-control:focus, .form-select:focus { background-color: var(--nq-base); border-color: var(--nq-accent-2); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nq-accent) 30%, transparent); }
.alert-warning { --bs-alert-bg: transparent; --bs-alert-color: var(--nq-warn); --bs-alert-border-color: color-mix(in srgb, var(--nq-warn) 45%, transparent); }
.subhead { font-size: 26px; text-transform: uppercase; margin: 40px 0 14px; }

/* Prices on the app cards and the Subscribe page */
.price-line, .card p.price-line { font: 700 30px/1.1 var(--nq-display); letter-spacing: .01em; color: var(--nq-accent-2); }

/* Waiting for an instance to be built, and the "ready" tick. */
.nq-orbit { position: relative; width: 120px; height: 120px; margin: 0 auto; display: grid; place-items: center; }
.nq-orbit img { animation: nq-bob 2.4s ease-in-out infinite; }
.nq-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--bs-primary); animation: nq-spin 1.6s linear infinite; }
.nq-orbit i:nth-of-type(2) { inset: 12px; border-top-color: var(--bs-info); animation-duration: 2.2s; animation-direction: reverse; }
.nq-orbit i:nth-of-type(3) { inset: 24px; border-top-color: var(--bs-secondary-color); animation-duration: 3s; }
.nq-check { width: 64px; height: 64px; }
.nq-check circle { fill: none; stroke: var(--bs-success); stroke-width: 3; stroke-dasharray: 150; stroke-dashoffset: 150; animation: nq-draw .6s ease-out forwards; }
.nq-check path { fill: none; stroke: var(--bs-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: nq-draw .4s .5s ease-out forwards; }
@keyframes nq-spin { to { transform: rotate(360deg); } }
@keyframes nq-bob { 50% { transform: translateY(-4px) scale(1.06); } }
@keyframes nq-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .nq-orbit img, .nq-orbit i { animation: none; } .nq-check circle, .nq-check path { animation-duration: .01s; } }

/* Bootstrap's d-flex and friends use !important, which would keep a `hidden` element on screen. */
[hidden] { display: none !important; }