:root {
  color-scheme: dark;
  --bg: #080d1a;
  --panel: #10192a;
  --panel-soft: #121e34;
  --border: #293955;
  --ink: #eff5ff;
  --muted: #9eafcc;
  --accent: #a8ccff;
  --action: #93c4ff;
  --green: #91f2cf;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); text-underline-offset: .22em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #c1dcff; outline-offset: 4px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 4.3vw, 4rem); letter-spacing: -.055em; }
h2 { font-size: 1.3rem; letter-spacing: -.035em; }
h3 { font-size: 1rem; }
p { margin-block-start: .75rem; }
form { margin: 0; }
[hidden] { display: none !important; }
.site-header { background: #0b1221; border-bottom: 1px solid var(--border); }
.header-inner, .wrap { width: min(1150px, calc(100% - 44px)); margin-inline: auto; }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; color: var(--ink); white-space: nowrap; letter-spacing: -.05em; }
.brand strong { color: var(--accent); }
.mark { background: #193763; border: 1px solid #3c6294; color: #d5e9ff; border-radius: .65rem; display: inline-grid; width: 34px; height: 34px; place-items: center; font-weight: 800; margin-right: .35rem; }
nav { display: flex; align-items: center; gap: clamp(.65rem, 2vw, 1.65rem); }
nav a { text-decoration: none; color: var(--muted); }
nav [aria-current="page"], nav a:hover { color: var(--ink); }
main { flex: 1; padding-block: 2.7rem 4rem; }
.site-footer { color: var(--muted); font-size: .88rem; border-top: 1px solid var(--border); }
.site-footer .wrap { min-height: 62px; display: flex; align-items: center; justify-content: space-between; }
.hero { display: grid; grid-template-columns: .85fr 1.2fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(.75rem, 5vw, 4.25rem); }
.hero h1 { font-size: clamp(2.85rem, 6vw, 5.5rem); }
.hero em { font-style: normal; color: #a7ccff; }
.hero p, .page-heading p, .muted { color: var(--muted); }
.hero p { max-width: 42ch; margin-block: 1.15rem 1.55rem; font-size: clamp(1rem, 2vw, 1.12rem); }
.hero img, .banner { border-radius: 15px; border: 1px solid #37548a; background: #101a32; width: 100%; align-self: start; }
.hero img { box-shadow: 0 20px 65px #030712; }
.button { min-height: 46px; padding: .68rem 1.05rem; border-radius: .65rem; border: 1px solid transparent; background: var(--action); color: #08142a; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; text-align: center; }
.button:hover { background: #bedaff; }
.button.small { min-height: 37px; padding: .4rem .7rem; }
.button.secondary { border-color: #3d5c8a; color: #c5ddff; background: #16233b; }
.button.secondary:hover { background: #223856; }
.quiet, .copy { background: transparent; border: 0; color: var(--accent); padding: .25rem; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-block-start: 1.1rem; }
.price-strip, .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.price-strip { margin-block-start: 1rem; }
.price-strip a, .stats div { display: grid; align-content: start; gap: .25rem; border: 1px solid var(--border); background: var(--panel); padding: 1.15rem; border-radius: .8rem; text-decoration: none; }
.price-strip a:hover { border-color: var(--action); }
.price-strip strong { font-size: clamp(1.4rem, 3.1vw, 2.1rem); }
.price-strip small, .stats small { color: var(--muted); }
.page-heading { margin-block-end: 1.65rem; }
.page-heading > a { display: inline-block; margin-block-end: .65rem; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: .9rem; padding: clamp(1.05rem, 3vw, 1.65rem); min-width: 0; }
.stats { margin-block-end: 1.1rem; }
.stats strong { font-size: 1.16rem; overflow-wrap: anywhere; }
.heading-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.checkout-layout, .dashboard-layout, .auth-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(300px, .85fr); gap: 1.1rem; align-items: start; }
.auth-layout { grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); }
.auth-layout .panel > p:last-child { margin-block-start: 1rem; }
.narrow { max-width: 46rem; }
.stack { display: grid; gap: .95rem; }
.panel > form.stack { margin-block-start: 1.05rem; }
.panel > p + form, .panel > p + .button { margin-block-start: .85rem; }
label { display: grid; gap: .35rem; font-weight: 550; }
input:not([type="radio"],[type="checkbox"]), textarea {
  display: block; min-width: 0; width: 100%; padding: .72rem .85rem; min-height: 46px; border-radius: .55rem;
  background: #0a1221; color: var(--ink); border: 1px solid #354a6c;
}
input::placeholder, textarea::placeholder { color: #8ca0c0; }
textarea { resize: vertical; }
input[type="radio"], input[type="checkbox"], progress { accent-color: var(--action); }
input[type="file"] { font-size: .9rem; }
input::file-selector-button { background: #213756; color: #d9e8ff; border: 0; border-radius: .35rem; padding: .3rem .5rem; margin-right: .55rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0 0 .4rem; }
.choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.choices label, .checkbox { display: flex; align-items: center; gap: .4rem; }
.choices label { background: #0c1526; border: 1px solid var(--border); border-radius: .5rem; padding: .45rem .55rem; font-size: .88rem; }
.choices label:has(:checked) { border-color: var(--action); }
.stepper { display: grid; grid-template-columns: 44px minmax(60px, 1fr) 44px; gap: .4rem; }
.quote-total { background: #0d1729; border: 1px solid var(--border); border-radius: .6rem; padding: .8rem .9rem; display: grid; gap: .4rem; }
.quote-total div, .invoice dl div { display: flex; justify-content: space-between; gap: .55rem; }
.quote-total strong, .invoice h2 { color: #b8d7ff; }
.quote-total div:last-of-type strong, .invoice h2 { font-size: 1.65rem; line-height: 1.2; }
.quote-total small { color: var(--green); }
.tiers summary { cursor: pointer; font-weight: 700; }
.tiers h3 { margin-block-start: .9rem; }
.tiers ul { list-style: none; padding: 0; margin: .3rem 0 0; }
.tiers li { display: flex; justify-content: space-between; gap: .6rem; padding: .32rem 0; color: var(--muted); border-bottom: 1px solid #213049; }
.tiers strong { color: var(--ink); }
.history { margin-top: 1.1rem; }
.records { list-style: none; padding: 0; margin: .6rem 0 0; }
.records a { padding-block: .6rem; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; overflow-wrap: anywhere; font-size: .91rem; }
.records small { color: var(--muted); grid-row: 2; }
.records span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); }
.records a:hover { color: var(--accent); }
.pill { display: inline-block; color: #dce8ff; background: #233653; border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; font-weight: 650; margin-block: 0 .55rem; }
.pill.good { background: #164134; color: var(--green); }
.notice { padding: .75rem .95rem; margin-block: 0 1rem; border-radius: .6rem; }
.notice.error { background: #301a26; border: 1px solid #83516a; color: #ffd7e3; }
.invoice .qr { width: min(100%, 260px); border-radius: .6rem; min-height: 150px; margin: .95rem auto; background: #f4f7fa; }
.invoice dl { margin: 1rem 0; }
.invoice dl div { padding-block: .38rem; border-bottom: 1px solid var(--border); }
.invoice dt { color: var(--muted); }
.invoice dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
progress { display: block; width: 100%; margin-block: .65rem; }
.report { background: #08101e; border: 1px solid var(--border); border-radius: .55rem; padding: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 25rem; overflow: auto; }
@media (max-width: 760px) {
  .hero, .checkout-layout, .dashboard-layout, .auth-layout { grid-template-columns: 1fr; }
  .hero { padding-top: 0; }
  .auth-layout .banner { display: none; }
  .checkout-layout > .banner { order: 2; }
  main { padding-block: 1.6rem 2.8rem; }
}
@media (max-width: 490px) {
  .header-inner, .wrap { width: calc(100% - 28px); }
  .header-inner { min-height: 58px; }
  nav { font-size: .85rem; gap: .65rem; }
  .mark { width: 27px; height: 27px; margin: 0; }
  .price-strip { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > :last-child { grid-column: 1 / -1; }
  .invoice dl div { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }