:root {
  --bg: var(--qbx-color-bg);
  --bg2: var(--qbx-color-bg-soft);
  --ink: var(--qbx-color-text);
  --text: var(--qbx-color-muted);
  --mute: color-mix(in srgb, var(--qbx-color-muted) 78%, transparent);
  --line: var(--qbx-color-line);
  --acc: var(--qbx-color-brand);
  --acc2: color-mix(in srgb, var(--qbx-color-brand) 11%, var(--qbx-color-surface));
  --dark: #050810;
  --w: var(--qbx-size-content-max);
  --r: var(--qbx-radius-card);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-size: 16px;
  letter-spacing: -.005em;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 34%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 34%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  mask-image: linear-gradient(180deg, #000, transparent 44rem);
  pointer-events: none;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.045em; }
h1 { font-size: clamp(2.65rem, 6vw, 5.25rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
p { line-height: 1.72; }
.wrap { width: min(100%, var(--w)); padding-inline: clamp(20px, 4vw, 54px); }
.lead { max-width: 48rem; color: var(--text); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.75; }
.small { color: var(--mute); line-height: 1.65; }

nav {
  min-height: var(--qbx-header-desktop);
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
}

nav .wrap { position: relative; min-height: var(--qbx-header-desktop); gap: 20px; }
.brand { color: var(--ink); font-size: 1rem; font-weight: 850; letter-spacing: -.025em; }
.brand img { width: 48px; height: 28px; object-fit: contain; }
nav ul { gap: clamp(14px, 2vw, 30px); font-size: .9rem; }
nav li a { position: relative; padding: 30px 0 27px; color: var(--text); }
nav li.on a { border: 0; color: var(--ink); }
nav li.on a::after {
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--acc);
  content: "";
}

.tg, .mobile-menu {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--qbx-radius-control);
  background: var(--qbx-color-surface);
  color: var(--ink);
  box-shadow: none;
}

.mobile-menu { display: none; font: 800 1rem/1 inherit; cursor: pointer; }

.btn {
  min-height: var(--qbx-control-min);
  justify-content: center;
  border-color: var(--line);
  border-radius: var(--qbx-radius-control);
  padding: 12px 20px;
  color: var(--ink);
  font-weight: 800;
  transition: transform var(--qbx-motion-fast), border-color var(--qbx-motion-fast), background var(--qbx-motion-fast);
}

.btn:hover { border-color: var(--acc); background: var(--acc2); transform: translateY(-1px); }
.btn.fill { border-color: var(--acc); background: var(--acc); color: var(--qbx-color-brand-contrast); }
.btn.fill:hover { border-color: var(--qbx-color-brand-strong); background: var(--qbx-color-brand-strong); color: var(--qbx-color-brand-contrast); }
.btn.small { min-height: 42px; padding: 9px 15px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible { outline: var(--qbx-focus-ring); outline-offset: 3px; }

.hero, .page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(190, 220, 235, .14);
  background:
    radial-gradient(circle at 82% 20%, rgba(102, 241, 214, .13), transparent 25rem),
    radial-gradient(circle at 70% 92%, rgba(142, 131, 255, .12), transparent 30rem),
    #050810;
  color: #eef8ff;
  text-align: left;
}

.hero::after, .page-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(190, 220, 235, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 220, 235, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  mask-image: radial-gradient(circle at 75% 35%, #000, transparent 62%);
}

.hero { padding: clamp(72px, 10vw, 132px) 0 clamp(78px, 10vw, 122px); }
.page-hero { padding: clamp(68px, 9vw, 112px) 0 clamp(52px, 7vw, 82px); }
.hero .mark { width: 78px; height: auto; margin: 0 0 28px; filter: brightness(0) invert(1); opacity: .92; }
.hero .eyebrow, .page-hero .q, .sh .q {
  margin-bottom: 18px;
  color: #66f1d6;
  font: 750 .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero h1, .page-hero h1 { max-width: 980px; color: #f5fbff; }
.hero .lead, .page-hero .lead { margin: 24px 0 0; color: #b3c4ce; }
.hero .cta { justify-content: flex-start; margin-top: 34px; }
.hero .btn:not(.fill), .page-hero .btn:not(.fill) { border-color: rgba(190, 220, 235, .25); color: #eef8ff; }
.hero .btn:not(.fill):hover, .page-hero .btn:not(.fill):hover { background: rgba(102, 241, 214, .08); }

.partner-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 900px;
  margin-top: 44px;
  overflow: hidden;
  border: 1px solid rgba(190, 220, 235, .16);
  border-radius: var(--qbx-radius-card);
  background: rgba(190, 220, 235, .13);
}

.partner-proof div { padding: 20px; background: rgba(5, 8, 16, .9); }
.partner-proof small { display: block; color: #7f96a4; font-size: .72rem; letter-spacing: .05em; }
.partner-proof strong { display: block; margin-top: 5px; color: #eef8ff; font-size: .98rem; line-height: 1.45; }

section { padding: clamp(76px, 9vw, 122px) 0; }
section.alt { background: color-mix(in srgb, var(--bg2) 88%, transparent); }
.sh { max-width: 820px; margin: 0 0 54px; text-align: left; }
.sh p.lead { margin: 18px 0 0; }
.sub { margin-top: 82px; }
.sub > h3 { margin-bottom: 24px; }

.steps, .pages, .cards, .plans, .tools, .abc, .kit { gap: 18px; }
.steps > *, .pages > *, .cards > *, .plans > *, .tools > *, .abc > *, .kit > *,
.sim .cols > *, .split > *, .client > *, .form .g > * { min-width: 0; }
.step, .pages a, .card, .plan, .tool, .abc .card, .calc, .form, .tablewrap, .client {
  border-color: var(--line);
  border-radius: var(--qbx-radius-card);
  background: var(--qbx-color-surface);
  box-shadow: 0 18px 50px rgba(7, 20, 26, .055);
}

.step { min-height: 240px; padding: 27px 24px; border: 1px solid var(--line); }
.step .n, .pages .n, .card .k, .plan .chip, .abc .k { color: var(--acc); font: 780 .72rem/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .1em; }
.step .n { margin-bottom: 52px; }
.step h4, .pages h4 { color: var(--ink); font-size: 1.25rem; }
.step p, .pages p, .card p { color: var(--text); }

.pages a { min-height: 250px; padding: 28px; transition: transform var(--qbx-motion-fast), border-color var(--qbx-motion-fast), box-shadow var(--qbx-motion-fast); }
.pages a:hover { border-color: var(--acc); box-shadow: var(--qbx-shadow-panel); transform: translateY(-4px); }
.pages .n { margin-bottom: 54px; }

.calc { margin-top: 66px; padding: clamp(22px, 4vw, 38px); }
.calc .cbox { border-color: var(--line); border-radius: 16px; background: var(--bg2); }
.calc .ctag.qbx { background: var(--acc); color: var(--qbx-color-brand-contrast); }
.calc .cout, .calc .cres { border-color: var(--line); }
.calc .num, .calc .cres .v.acc { color: var(--acc); }
.calc .bq { background: var(--acc); }
.calc .cf.has-select { grid-template-columns: minmax(0, 1fr) max-content; }
.calc .cf.has-select select { width: max-content; max-width: 100%; }

.note { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.hub { gap: clamp(42px, 8vw, 96px); }
.orbit .c { background: #07141a; color: #eef8ff; box-shadow: 0 0 0 18px rgba(25, 127, 126, .08), 0 30px 70px rgba(7, 20, 26, .2); }
.orbit .n { border-color: var(--line); background: var(--qbx-color-surface); box-shadow: 0 12px 38px rgba(7, 20, 26, .08); }
.orbit .ring, .orbit .core { border-color: color-mix(in srgb, var(--acc) 32%, transparent); }

.team .m { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--qbx-color-surface); }
.team img { background: var(--bg2); }
.team .role { color: var(--acc); }

.plan { min-height: 430px; padding: 30px 24px; }
.plan.best { border-color: var(--acc); box-shadow: 0 24px 68px rgba(25, 127, 126, .13); }
.plan .badge { background: var(--acc); color: var(--qbx-color-brand-contrast); }
.plan .fee { margin-top: auto; border: 1px solid color-mix(in srgb, var(--acc) 18%, transparent); background: var(--acc2); }
.plan .fee b { color: var(--acc); }

.sim {
  border: 1px solid rgba(190, 220, 235, .13);
  border-radius: var(--qbx-radius-panel);
  background: #050810;
  box-shadow: 0 36px 100px rgba(5, 8, 16, .28);
}
.panel, .kpi { border-color: rgba(190, 220, 235, .13); border-radius: 16px; background: #0b1421; }
.chart { border-color: rgba(190, 220, 235, .13); background: #07101a; }

table { background: var(--qbx-color-surface); }
th { background: var(--bg2); }
tr.best td { background: var(--acc2); }
.card.new { border-color: var(--acc); background: var(--acc2); }
.chain span.acc { border-color: var(--acc); background: var(--acc); color: var(--qbx-color-brand-contrast); }

.client, .form { padding: clamp(22px, 4vw, 34px); }
.client { grid-template-columns: repeat(3, minmax(0, 1fr)) max-content; }
.client > div { width: 100%; min-width: 0; }
.client-control { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--qbx-radius-control); background: var(--bg); }
.client-control input { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.client-control:focus-within { outline: var(--qbx-focus-ring); outline-offset: 3px; }
.client-control input:focus-visible { outline: 0; }
input, select, textarea { min-height: 46px; border-radius: var(--qbx-radius-control) !important; }
input[type="range"] { min-height: auto; accent-color: var(--acc); }
.tool .f.has-select { grid-template-columns: minmax(0, 1fr) max-content; }
.tool .f.has-select select { width: max-content; max-width: 100%; }
.money-control { min-width: 0; }
.money-control input { width: 100%; }
.money-human { display: block; min-height: 1.35em; margin-top: 5px; color: var(--mute); font-size: .78rem; line-height: 1.35; text-align: right; }
.tool .out .v { color: var(--acc); }
.kit div { padding: 22px 0 4px; border-top-color: var(--line); }
.ideas div { padding: 22px 0; border-bottom-color: var(--line); }
details { border-bottom-color: var(--line); }
summary { min-height: 52px; align-items: center; }
summary::after { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }

.status-note {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--qbx-color-gold) 34%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--qbx-color-gold) 8%, var(--qbx-color-surface));
  color: var(--text);
  font-size: .86rem;
}
.status-note strong { color: var(--ink); }

footer { padding: 64px 0 44px; border-top-color: var(--line); background: #050810; color: #7f96a4; }
footer .co { color: #dbeaf2; }
footer p { color: #7f96a4; }
.pager { padding: 54px 0; }

@media (max-width: 960px) {
  nav { min-height: var(--qbx-header-mobile); }
  nav .wrap { min-height: var(--qbx-header-mobile); }
  nav ul {
    position: absolute;
    top: calc(100% + 1px);
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--qbx-color-surface);
    box-shadow: var(--qbx-shadow-panel);
  }
  body.menu-open nav ul { display: flex; }
  nav li a { display: block; padding: 15px 18px; }
  nav li.on a::after { top: 12px; right: auto; bottom: 12px; left: 7px; width: 2px; height: auto; }
  .mobile-menu { display: grid; margin-left: auto; }
  nav .btn.small { display: none; }
  .tg { margin-left: 0; }
  .partner-proof { grid-template-columns: 1fr; }
  .steps[style], .pages[style], .cards[style], .plans[style], .tools[style], .abc[style], .kit[style], .flow[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .hero { padding-top: 72px; }
  .team .m { grid-template-columns: 82px 1fr; }
  .client { grid-template-columns: minmax(0, 1fr); }
  .client > div, .client-control, .client input, .client .btn { width: 100%; }
}

@media (max-width: 600px) {
  h1 { font-size: clamp(2.35rem, 12vw, 3.45rem); }
  .wrap { padding-inline: 20px; }
  .brand span { display: none; }
  .hero, .page-hero { text-align: left; }
  .hero .cta { display: grid; grid-template-columns: 1fr; }
  .hero .cta .btn { width: 100%; }
  .partner-proof div { padding: 17px; }
  .steps[style], .pages[style], .cards[style], .plans[style], .tools[style], .abc[style], .kit[style], .flow[style] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tool .f[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tool .f.has-select { grid-template-columns: 1fr; }
  .tool .f.has-select select { width: 100%; }
  .step, .pages a { min-height: 0; }
  .step .n, .pages .n { margin-bottom: 26px; }
  .calc { padding: 18px; }
  .calc .cf.has-select { grid-template-columns: 1fr; }
  .calc .cf.has-select select { width: 100%; }
  .plan { min-height: 0; }
  .pager { display: grid; grid-template-columns: 1fr; }
  .pager .btn { width: 100%; }
}

@media print {
  .mobile-menu { display: none !important; }
  body::before { display: none; }
}