:root {
  --ng-bg: #eef5f6;
  --ng-bg-2: #dfe8eb;
  --ng-glass: rgba(255, 255, 255, .68);
  --ng-glass-strong: rgba(255, 255, 255, .86);
  --ng-ink: #132024;
  --ng-muted: #5d6f75;
  --ng-line: rgba(100, 135, 146, .34);
  --ng-cyan: #0aa8d8;
  --ng-blue: #2468e8;
  --ng-lime: #67c98b;
  --ng-violet: #8d70ff;
  --ng-amber: #f1b657;
  --ng-danger: #c84e62;
  --ng-focus: rgba(10, 168, 216, .24);
  --ng-shadow: 0 18px 48px rgba(17, 44, 55, .13);
  --ng-inner: inset 0 1px 0 rgba(255, 255, 255, .58);
  --bg: var(--ng-bg);
  --surface: var(--ng-glass);
  --surface-2: rgba(232, 242, 244, .78);
  --panel: var(--ng-glass);
  --input: rgba(255, 255, 255, .74);
  --hover: rgba(255, 255, 255, .9);
  --ink: var(--ng-ink);
  --muted: var(--ng-muted);
  --line: var(--ng-line);
  --soft: rgba(198, 218, 224, .58);
  --accent: var(--ng-cyan);
  --accent-dark: #087da4;
  --danger: var(--ng-danger);
  --warn: #b36f1e;
  --focus: var(--ng-focus);
  --shadow: var(--ng-shadow);
}

:root[data-theme="dark"] {
  --ng-bg: #071116;
  --ng-bg-2: #0c202a;
  --ng-glass: rgba(12, 29, 38, .72);
  --ng-glass-strong: rgba(17, 38, 48, .88);
  --ng-ink: #eefaff;
  --ng-muted: #a3bdc6;
  --ng-line: rgba(142, 211, 232, .24);
  --ng-cyan: #36d2ff;
  --ng-blue: #6aa2ff;
  --ng-lime: #9ee6a8;
  --ng-violet: #b8a4ff;
  --ng-amber: #ffd07a;
  --ng-danger: #ff8191;
  --ng-focus: rgba(54, 210, 255, .28);
  --ng-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --ng-inner: inset 0 1px 0 rgba(255, 255, 255, .1);
  --surface-2: rgba(21, 48, 60, .78);
  --input: rgba(7, 21, 28, .82);
  --hover: rgba(30, 63, 76, .88);
  --accent-dark: #8ae6ff;
  --warn: var(--ng-amber);
}

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

body {
  background:
    linear-gradient(135deg, rgba(54, 210, 255, .16), transparent 24rem),
    linear-gradient(225deg, rgba(141, 112, 255, .12), transparent 28rem),
    linear-gradient(180deg, var(--ng-bg), var(--ng-bg-2)) !important;
  color: var(--ink);
  letter-spacing: 0;
}

body::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 72%);
  opacity: .42;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

:root[data-theme="dark"] body::before {
  background:
    linear-gradient(90deg, rgba(112, 210, 235, .14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(112, 210, 235, .1) 1px, transparent 1px);
  opacity: .55;
}

.wrap {
  max-width: 1220px !important;
  padding: 26px !important;
}

.top {
  background: rgba(255, 255, 255, .48);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--ng-shadow), var(--ng-inner);
  margin-bottom: 20px !important;
  padding: 10px 12px;
  position: sticky;
  top: 10px;
  backdrop-filter: blur(20px) saturate(1.25);
  z-index: 10;
}

:root[data-theme="dark"] .top {
  background: rgba(9, 24, 32, .62);
}

.brand-logo {
  border-radius: 8px;
  display: block;
  height: 38px;
  width: 38px;
}

.mark {
  background: linear-gradient(135deg, rgba(54, 210, 255, .22), rgba(141, 112, 255, .16)) !important;
  border: 1px solid rgba(54, 210, 255, .34);
  box-shadow: var(--ng-inner);
  overflow: hidden;
}

.mark img {
  display: block;
  height: 100%;
  width: 100%;
}

.brand strong,
h1,
h2,
h3,
th {
  letter-spacing: 0 !important;
}

.card,
.panel,
.plan,
.plan-box,
.step,
.settings-row,
.qr-preview,
.qr-preview-frame,
.flash,
.code-line,
.settings-row code {
  background: var(--ng-glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--ng-shadow), var(--ng-inner) !important;
  backdrop-filter: blur(18px) saturate(1.18);
}

.card {
  overflow: clip auto !important;
}

.card h1 {
  font-size: clamp(28px, 4vw, 48px) !important;
}

.card h2 {
  color: var(--ink);
  font-size: clamp(18px, 2vw, 22px) !important;
}

.hero {
  align-items: stretch;
  gap: 18px !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr) !important;
  margin-top: 28px !important;
}

.hero-copy {
  align-content: center;
  background: linear-gradient(135deg, var(--ng-glass-strong), rgba(255, 255, 255, .36));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--ng-shadow), var(--ng-inner);
  padding: clamp(22px, 5vw, 54px) !important;
  backdrop-filter: blur(20px) saturate(1.18);
}

:root[data-theme="dark"] .hero-copy {
  background: linear-gradient(135deg, rgba(14, 35, 45, .9), rgba(16, 27, 42, .62));
}

.hero h1 {
  font-size: clamp(36px, 7vw, 76px) !important;
  line-height: .98 !important;
  max-width: 820px;
}

.eyebrow {
  color: var(--accent) !important;
  letter-spacing: .04em !important;
}

.lede {
  color: var(--muted) !important;
  max-width: 760px;
}

.hero-visual {
  align-items: center;
  background:
    linear-gradient(145deg, rgba(54, 210, 255, .18), rgba(141, 112, 255, .12)),
    var(--ng-glass);
  display: grid;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

.hero-visual img {
  display: block;
  filter: drop-shadow(0 24px 46px rgba(13, 62, 82, .24));
  height: auto;
  justify-self: center;
  max-width: min(78%, 340px);
}

.hero-visual .muted {
  align-self: end;
  background: rgba(255, 255, 255, .52);
  border-top: 1px solid var(--line);
  margin: 0 -22px -22px;
  padding: 14px 22px;
}

:root[data-theme="dark"] .hero-visual .muted {
  background: rgba(7, 20, 27, .56);
}

.plans {
  margin-top: 18px !important;
}

.plan,
.plan-box {
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.plan:hover,
.plan-box:hover,
.step:hover {
  border-color: rgba(54, 210, 255, .56) !important;
  transform: translateY(-1px);
}

.btn,
button {
  background: rgba(255, 255, 255, .54) !important;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--ng-inner);
  color: var(--ink) !important;
}

:root[data-theme="dark"] .btn,
:root[data-theme="dark"] button {
  background: rgba(19, 45, 56, .72) !important;
}

.btn:hover,
button:hover {
  background: var(--hover) !important;
  border-color: rgba(54, 210, 255, .56) !important;
}

.primary,
button.primary {
  background: linear-gradient(135deg, var(--ng-cyan), var(--ng-blue)) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}

.danger {
  color: var(--danger) !important;
}

.pill {
  background: rgba(255, 255, 255, .46) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

:root[data-theme="dark"] .pill {
  background: rgba(15, 39, 49, .72) !important;
}

.pill.ok {
  border-color: rgba(103, 201, 139, .58) !important;
  color: var(--ng-lime) !important;
}

.pill.warn {
  border-color: rgba(241, 182, 87, .68) !important;
  color: var(--warn) !important;
}

input,
select,
textarea {
  background: var(--input) !important;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--ng-inner);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--focus), var(--ng-inner) !important;
}

input[type="color"] {
  padding: 4px !important;
}

.qr-preview {
  background:
    linear-gradient(135deg, rgba(54, 210, 255, .12), rgba(141, 112, 255, .1)),
    var(--ng-glass) !important;
}

.qr-preview-frame {
  background: #ffffff !important;
  min-height: 300px !important;
}

table {
  border-spacing: 0;
}

td,
th {
  border-color: var(--line) !important;
}

tr:hover td {
  background: rgba(54, 210, 255, .06);
}

.footer {
  border-top: 1px solid var(--line);
  margin-top: 34px !important;
  padding-top: 18px;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
  }

  .hero-visual {
    min-height: 280px;
  }
}

@media (max-width: 720px) {
  .wrap {
    padding: 14px !important;
  }

  .top {
    position: static;
  }

  .hero-copy {
    padding: 22px !important;
  }
}