:root {
  --premium-bg: #090b0e;
  --premium-bg-soft: #0b111b;
  --premium-panel: #0d1522;
  --premium-panel-2: #101b2b;
  --premium-text: #f3f7fb;
  --premium-muted: #8f9db0;
  --premium-muted-2: #657287;
  --premium-line: rgba(255, 255, 255, 0.09);
  --premium-line-strong: rgba(255, 255, 255, 0.15);
  --premium-blue: #66a8ff;
  --premium-blue-2: #3478f6;
  --premium-cyan: #52e6d8;
  --premium-green: #6fea9f;
  --premium-amber: #ffc978;
  --premium-red: #ff7e91;
  --premium-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
  --premium-radius: 24px;
  --premium-max: 1760px;
  --premium-heading-size: clamp(36px, 4.5vw, 58px);
  --button-primary-bg: rgba(134, 181, 237, .065);
  --button-primary-hover: rgba(134, 181, 237, .13);
  --button-primary-border: rgba(152, 190, 234, .45);
  --button-primary-text: #c2d9f3;
  --button-secondary-bg: rgba(255, 255, 255, .025);
  --button-secondary-hover: rgba(255, 255, 255, .055);
  --button-secondary-text: #bac9db;
  --page-gutter: 7.75vw;
}

* { box-sizing: border-box; }

html {
  margin: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body { margin: 0; }

body.premium-landing {
  background: var(--premium-bg);
  color: var(--premium-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.icon-sprite {
  display: none;
}

.premium-landing svg {
  fill: none;
  height: 1em;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1em;
}

.premium-landing a {
  color: inherit;
  text-decoration: none;
}

.premium-landing button,
.premium-landing input {
  color: inherit;
  font: inherit;
}

.container {
  margin: auto;
  width: min(var(--premium-max), 84.5%);
}

.nav-wrap {
  inset: 14px 0 auto;
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

.nav {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(9, 11, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.22);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  pointer-events: auto;
  transition: 0.3s ease;
}

.nav.scrolled {
  background: rgba(9, 11, 14, 0.94);
  border-color: rgba(255, 255, 255, 0.14);
}

.brand {
  align-items: center;
  display: flex;
  font-weight: 740;
  gap: 11px;
  letter-spacing: -0.02em;
}

.brand-mark {
  background: url("shield-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(115, 174, 245, 0.16));
  flex: 0 0 auto;
  height: 36px;
  position: relative;
  width: 32px;
}

.brand-mark.mini {
  height: 32px;
  width: 28px;
}

.brand small {
  color: var(--premium-muted);
  font-weight: 600;
  margin-left: 4px;
}

.nav-links,
.nav-actions {
  align-items: center;
  display: flex;
}

.nav-links {
  gap: 6px;
}

.nav-links a {
  border-radius: 10px;
  color: #aab5c5;
  font-size: 13px;
  padding: 9px 11px;
  transition: 0.2s;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.nav-actions {
  gap: 8px;
}

.premium-landing .btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 16px;
  font-weight: 680;
  gap: 10px;
  justify-content: center;
  line-height: 1.4;
  min-height: 48px;
  padding: 12px 18px;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.premium-landing .btn svg { flex: none; }
.premium-landing .nav-actions .btn { font-size: 14px; line-height: 20px; min-height: 36px; padding: 7px 14px; }

.btn:hover {
  transform: translateY(-1px);
}

.premium-landing .btn-ghost {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.premium-landing .btn-ghost:hover {
  background: var(--button-secondary-hover);
}

.premium-landing .btn-primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.premium-landing .btn-primary:hover {
  background: var(--button-primary-hover);
}

@media (max-width: 760px) {
  .premium-landing .btn { font-size: 13px; min-height: 44px; padding: 11px 14px; }
}

.hamburger {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--premium-line);
  border-radius: 12px;
  display: none;
  font-size: 11px;
  height: 42px;
  width: 52px;
}

.hamburger:focus-visible,
.faq-q:focus-visible,
.btn:focus-visible,
.premium-landing a:focus-visible {
  outline: 3px solid rgba(102, 168, 255, 0.36);
  outline-offset: 3px;
}

.hero {
  align-items: center;
  display: flex;
  min-height: 820px;
  padding: 155px 0 100px;
  position: relative;
}

.hero::before {
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.07), transparent);
  content: "";
  height: 650px;
  left: 50%;
  opacity: 0.7;
  position: absolute;
  top: 40px;
  width: 1px;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 50px 50px;
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
}

.hero-grid {
  align-items: center;
  display: grid;
  gap: 76px;
  grid-template-columns: 1.03fr 0.97fr;
  position: relative;
}

.eyebrow {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--premium-line);
  border-radius: 999px;
  color: #b6c4d8;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 8px 11px;
  text-transform: uppercase;
}

.eyebrow .pulse {
  animation: pulse 2.2s infinite;
  background: var(--premium-green);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(111, 234, 159, 0.5);
  height: 7px;
  width: 7px;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(111, 234, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 234, 159, 0); }
}

.hero h1 {
  font-size: clamp(52px, 6vw, 78px);
  letter-spacing: -0.055em;
  line-height: 0.96;
  margin: 23px 0 24px;
  max-width: 760px;
}

.gradient-text {
  background: linear-gradient(110deg, #fff 20%, #8fb8ff 65%, #67e7d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  color: #aab5c4;
  font-size: 18px;
  line-height: 1.62;
  margin: 0 0 31px;
  max-width: 620px;
}

.hero-actions,
.section-actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-actions {
  margin-bottom: 24px;
}

.trust-row {
  color: #738196;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 16px 22px;
}

.trust-row span {
  align-items: center;
  display: flex;
  gap: 7px;
}

.premium-landing .trust-row span:not(.dot) {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #8997aa;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}

.premium-landing .trust-row span:not(.dot)::before {
  background: var(--premium-green);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(111, 234, 159, 0.35);
  content: "";
  height: 6px;
  width: 6px;
}

.dot {
  background: #4e5c70;
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
  height: 4px;
  padding: 0;
  width: 4px;
}

.premium-landing .trust-row .dot {
  background: #4e5c70;
  border: 0;
  border-radius: 50%;
  height: 4px;
  min-height: 0;
  padding: 0;
  width: 4px;
}

.product-stage {
  perspective: 1200px;
  position: relative;
}

.product-glow {
  background: rgba(52, 120, 246, 0.22);
  border-radius: 50%;
  filter: blur(75px);
  inset: 15% 3%;
  position: absolute;
  transform: translateZ(-100px);
}

.app-window {
  background: linear-gradient(180deg, rgba(17, 27, 43, 0.98), rgba(10, 17, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.50), inset 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
  transform: rotateY(-2deg) rotateX(1deg);
  transition: transform 0.2s ease;
}

.window-top {
  align-items: center;
  background: rgba(255, 255, 255, 0.018);
  border-bottom: 1px solid var(--premium-line);
  display: flex;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
}

.mac-dot {
  background: #2c3849;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.mac-dot:nth-child(1) { background: #ff6b76; }
.mac-dot:nth-child(2) { background: #ffc96b; }
.mac-dot:nth-child(3) { background: #6ee7a4; }

.address-bar {
  align-items: center;
  border: 1px solid var(--premium-line);
  border-radius: 7px;
  color: #64738a;
  display: flex;
  flex: 1;
  font-size: 10px;
  height: 24px;
  margin-left: 8px;
  max-width: 300px;
  padding: 0 9px;
}

.app-content {
  display: grid;
  grid-template-columns: 58px 1fr;
  min-height: 475px;
  padding: 15px;
}

.mock-sidebar {
  align-items: center;
  border-right: 1px solid var(--premium-line);
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-right: 12px;
}

.side-logo {
  background: url("shield-mark.svg") center / contain no-repeat;
  height: 34px;
  width: 34px;
}

.side-ico {
  border: 1px solid transparent;
  border-radius: 9px;
  color: #526177;
  display: grid;
  font-size: 15px;
  height: 32px;
  place-items: center;
  width: 32px;
}

.side-ico.active {
  background: rgba(79, 139, 249, 0.12);
  border-color: rgba(91, 150, 255, 0.18);
  color: #86baff;
}

.main-ui {
  padding-left: 16px;
}

.ui-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tiny {
  color: #62738a;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ui-title {
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.02em;
  margin: 5px 0 2px;
}

.ui-sub {
  color: #718099;
  font-size: 10px;
}

.status-pill {
  background: rgba(255, 201, 120, 0.08);
  border: 1px solid rgba(255, 201, 120, 0.25);
  border-radius: 999px;
  color: #ffd49a;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 8px;
}

.identity-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--premium-line);
  border-radius: 16px;
  display: grid;
  gap: 13px;
  grid-template-columns: 90px 1fr;
  margin-bottom: 10px;
  padding: 13px;
}

.score-ring {
  background: conic-gradient(var(--premium-blue) 0 100%, rgba(255, 255, 255, 0.06) 100% 100%);
  border-radius: 50%;
  display: grid;
  height: 78px;
  place-items: center;
  position: relative;
  width: 78px;
}

.score-ring::before {
  background: #101827;
  border-radius: 50%;
  content: "";
  inset: 6px;
  position: absolute;
}

.score-ring b {
  font-size: 17px;
  position: relative;
}

.score-ring small {
  bottom: 19px;
  color: #78869b;
  font-size: 7px;
  position: absolute;
}

.carrier-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
}

.kv {
  border: 1px solid var(--premium-line);
  border-radius: 10px;
  min-width: 0;
  padding: 8px 9px;
}

.kv span {
  color: #697990;
  display: block;
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kv b {
  color: #d7e1ec;
  display: block;
  font-size: 9px;
  font-weight: 650;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.checks {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.check {
  align-items: center;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--premium-line);
  border-radius: 11px;
  color: #aeb9c7;
  display: flex;
  font-size: 9px;
  gap: 9px;
  overflow: hidden;
  padding: 9px 10px;
  position: relative;
}

.check-ico {
  background: rgba(111, 234, 159, 0.08);
  border: 1px solid rgba(111, 234, 159, 0.15);
  border-radius: 7px;
  color: var(--premium-green);
  display: grid;
  font-size: 12px;
  height: 19px;
  place-items: center;
  width: 19px;
}

.check strong {
  color: #7f8da1;
  font-size: 8px;
  font-weight: 650;
  margin-left: auto;
}

.check.done strong {
  color: #80e6ab;
}

.progress {
  background: linear-gradient(90deg, var(--premium-blue), var(--premium-cyan));
  bottom: 0;
  height: 1px;
  left: 0;
  position: absolute;
  transition: width 0.65s ease;
  width: 0;
}

.check.done .progress {
  width: 100%;
}

.timeline {
  background: #0b121e;
  border: 1px solid var(--premium-line);
  border-radius: 12px;
  margin-top: 10px;
  padding: 11px 12px;
}

.tl-title {
  color: #687991;
  font-size: 8px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.events {
  align-items: center;
  display: flex;
}

.event {
  color: #77859a;
  flex: 1;
  font-size: 7px;
  padding-top: 13px;
  position: relative;
}

.event::before {
  background: #263449;
  border: 2px solid #0b121e;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 7px;
  z-index: 2;
}

.event::after {
  background: #243147;
  content: "";
  height: 1px;
  left: 7px;
  position: absolute;
  right: 0;
  top: 5px;
}

.event:last-child::after {
  display: none;
}

.event.on::before {
  background: var(--premium-green);
  box-shadow: 0 0 13px rgba(111, 234, 159, 0.5);
}

.floating-chip {
  backdrop-filter: blur(12px);
  background: rgba(13, 21, 34, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  color: #a5b1c1;
  font-size: 10px;
  padding: 10px 12px;
  position: absolute;
}

.floating-chip b {
  color: #fff;
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}

.fc-1 {
  animation: float 5s ease-in-out infinite;
  right: -28px;
  top: 95px;
}

.fc-2 {
  animation: float 5.6s 0.7s ease-in-out infinite;
  bottom: 70px;
  left: -32px;
}

.fc-dot {
  background: var(--premium-green);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(111, 234, 159, 0.7);
  display: inline-block;
  height: 7px;
  margin-right: 6px;
  width: 7px;
}

@keyframes float {
  50% { transform: translateY(-9px); }
}

.premium-landing section {
  padding: 108px 0;
  position: relative;
}

.section-kicker {
  color: #78aaff;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(36px, 4.5vw, 58px);
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
  max-width: 810px;
}

.section-copy {
  color: #8f9cad;
  font-size: 16px;
  line-height: 1.7;
  margin: 20px 0 0;
  max-width: 660px;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.center .section-title,
.center .section-copy {
  margin-left: auto;
  margin-right: auto;
}

.trust-strip {
  padding: 0 0 40px !important;
}

.trust-inner {
  border-bottom: 1px solid var(--premium-line);
  border-top: 1px solid var(--premium-line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.trust-item {
  align-items: center;
  border-right: 1px solid var(--premium-line);
  color: #8996a8;
  display: flex;
  font-size: 11px;
  gap: 9px;
  justify-content: center;
  padding: 19px 12px;
  text-align: center;
}

.trust-item:last-child {
  border-right: 0;
}

.mini-icon {
  background: rgba(80, 145, 255, 0.07);
  border: 1px solid rgba(80, 145, 255, 0.11);
  border-radius: 7px;
  color: #72aafc;
  display: grid;
  font-size: 12px;
  height: 22px;
  place-items: center;
  width: 22px;
}

.dash-shell {
  background: linear-gradient(180deg, #0e1725, #0a101a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  box-shadow: var(--premium-shadow);
  display: grid;
  grid-template-columns: 210px 1fr;
  margin-top: 50px;
  min-height: 540px;
  overflow: hidden;
}

.dash-side {
  background: #0a111c;
  border-right: 1px solid var(--premium-line);
  padding: 20px 14px;
}

.dash-brand {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 730;
  gap: 9px;
  margin-bottom: 28px;
}

.dash-menu {
  display: grid;
  gap: 5px;
}

.dash-menu div {
  border-radius: 9px;
  color: #65758d;
  font-size: 11px;
  padding: 10px 11px;
}

.dash-menu div.active {
  background: rgba(76, 138, 248, 0.10);
  border: 1px solid rgba(76, 138, 248, 0.13);
  color: #9bc2ff;
}

.dash-main {
  padding: 22px;
}

.dash-head {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.dash-head h3 {
  font-size: 18px;
  margin: 0;
}

.dash-head p {
  color: #6e7d92;
  font-size: 10px;
  margin: 5px 0 0;
}

.new-btn {
  align-items: center;
  background: #eff5ff;
  border: 0;
  border-radius: 8px;
  color: #0b1421;
  display: inline-flex;
  font-size: 10px;
  font-weight: 730;
  height: 34px;
  justify-content: center;
  padding: 0 11px;
}

.summary-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, 1fr);
  margin: 18px 0;
}

.metric {
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--premium-line);
  border-radius: 13px;
  padding: 12px;
}

.metric span {
  color: #6b7b91;
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.metric b {
  display: block;
  font-size: 21px;
  margin-top: 5px;
}

.metric b.green,
.ok {
  color: #86e9aa;
}

.metric b.amber {
  color: #ffd18d;
}

.metric small {
  color: #66758a;
  font-size: 8px;
}

.table-box {
  border: 1px solid var(--premium-line);
  border-radius: 15px;
  overflow: hidden;
}

.table-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--premium-line);
  display: flex;
  gap: 8px;
  height: 45px;
  padding: 0 11px;
}

.search,
.filter {
  align-items: center;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  color: #657389;
  display: flex;
  font-size: 9px;
  height: 28px;
  padding: 0 9px;
}

.search {
  flex: 1;
  max-width: 190px;
}

.table-row {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: #91a0b2;
  display: grid;
  font-size: 9px;
  grid-template-columns: 1.5fr 0.8fr 1fr 0.8fr 0.7fr;
  min-height: 47px;
  padding: 0 11px;
}

.table-row:last-child {
  border-bottom: 0;
}

.table-row.header {
  background: rgba(255, 255, 255, 0.016);
  color: #5f7089;
  font-size: 7px;
  letter-spacing: 0.08em;
  min-height: 34px;
  text-transform: uppercase;
}

.entity b {
  color: #d8e2ed;
  display: block;
  font-size: 10px;
}

.entity small {
  color: #677891;
  font-size: 8px;
}

.tag {
  background: rgba(111, 234, 159, 0.06);
  border: 1px solid rgba(111, 234, 159, 0.16);
  border-radius: 999px;
  color: #80dfa2;
  display: inline-flex;
  font-size: 8px;
  padding: 5px 7px;
  width: max-content;
}

.tag.pending {
  background: rgba(255, 201, 120, 0.06);
  border-color: rgba(255, 201, 120, 0.18);
  color: #efc27e;
}

.tag.review {
  background: rgba(102, 168, 255, 0.06);
  border-color: rgba(102, 168, 255, 0.18);
  color: #87b7ff;
}

.workflow-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 52px;
  position: relative;
}

.workflow-grid::before {
  background: linear-gradient(90deg, rgba(102, 168, 255, 0.05), rgba(102, 168, 255, 0.5), rgba(82, 230, 216, 0.4), rgba(82, 230, 216, 0.05));
  content: "";
  height: 1px;
  left: 16%;
  position: absolute;
  right: 16%;
  top: 56px;
  z-index: 0;
}

.step {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--premium-line);
  border-radius: 22px;
  display: block;
  min-height: 270px;
  padding: 22px;
  position: relative;
  transition: 0.25s;
  z-index: 1;
}

.premium-landing .step + .step {
  border-top: 1px solid var(--premium-line);
}

.step:hover {
  background: linear-gradient(180deg, rgba(102, 168, 255, 0.045), rgba(255, 255, 255, 0.015));
  border-color: rgba(102, 168, 255, 0.22);
  transform: translateY(-4px);
}

.step-no {
  background: #0c1421;
  border: 1px solid var(--premium-line-strong);
  border-radius: 15px;
  box-shadow: 0 0 0 8px var(--premium-bg);
  color: #93bdff;
  display: grid;
  font-size: 12px;
  font-weight: 780;
  height: 48px;
  place-items: center;
  width: 48px;
}

.step h3 {
  font-size: 18px;
  margin: 36px 0 10px;
}

.step p {
  color: #7f8da0;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.step-ui {
  background: #0a111c;
  border: 1px solid var(--premium-line);
  border-radius: 13px;
  display: grid;
  gap: 6px;
  margin-top: 20px;
  padding: 11px;
}

.mini-row {
  align-items: center;
  color: #63748c;
  display: flex;
  font-size: 8px;
  justify-content: space-between;
}

.mini-row strong {
  color: #abb8c8;
  font-size: 9px;
}

.signal {
  background: #1b2637;
  border-radius: 99px;
  height: 4px;
  overflow: hidden;
}

.signal i {
  background: linear-gradient(90deg, var(--premium-blue-2), var(--premium-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
}

.extension {
  align-items: center;
  display: grid;
  gap: 70px;
  grid-template-columns: 0.88fr 1.12fr;
}

.section-actions {
  margin-top: 28px;
}

.browser {
  background: #e9edf2;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  box-shadow: var(--premium-shadow);
  color: #17202c;
  overflow: hidden;
  transform: rotate(1deg);
}

.browser-top {
  align-items: center;
  background: #d9dee5;
  display: flex;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
}

.browser-url {
  align-items: center;
  background: #fff;
  border-radius: 7px;
  color: #8b95a1;
  display: flex;
  flex: 1;
  font-size: 8px;
  height: 25px;
  margin-left: 7px;
  padding: 0 9px;
}

.browser-body {
  background: #f7f8fa;
  display: grid;
  grid-template-columns: 1fr 220px;
  min-height: 410px;
}

.cd-page {
  padding: 18px;
}

.cd-head {
  align-items: center;
  border-bottom: 1px solid #dfe4ea;
  display: flex;
  height: 30px;
  justify-content: space-between;
  margin-bottom: 15px;
}

.cd-title {
  font-size: 12px;
  font-weight: 760;
}

.grey-btn {
  background: #e4e8ed;
  border-radius: 5px;
  height: 22px;
  width: 78px;
}

.cd-company {
  background: #fff;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  padding: 14px;
}

.cd-company h4 {
  font-size: 13px;
  margin: 0 0 4px;
}

.cd-company p {
  color: #79828d;
  font-size: 8px;
  margin: 0;
}

.cd-info {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.cd-info div {
  border-top: 1px solid #edf0f3;
  padding-top: 7px;
}

.cd-info span {
  color: #9aa2ab;
  display: block;
  font-size: 7px;
}

.cd-info b {
  font-size: 9px;
}

.fake-lines {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.fake-lines i {
  background: #e4e8ed;
  border-radius: 4px;
  display: block;
  height: 8px;
}

.fake-lines i:nth-child(2) { width: 84%; }
.fake-lines i:nth-child(3) { width: 65%; }

.ext-panel {
  background: #0d1522;
  border-left: 1px solid #1b2a3c;
  color: #fff;
  padding: 15px;
}

.ext-brand {
  align-items: center;
  display: flex;
  font-size: 11px;
  font-weight: 760;
  gap: 7px;
}

.found {
  background: rgba(111, 234, 159, 0.05);
  border: 1px solid rgba(111, 234, 159, 0.14);
  border-radius: 11px;
  color: #a8b7c8;
  font-size: 8px;
  margin-top: 17px;
  padding: 10px;
}

.found b {
  color: #dce8f3;
  display: block;
  font-size: 10px;
  margin-bottom: 5px;
}

.verify-btn {
  align-items: center;
  background: linear-gradient(180deg, #74b2ff, #4e8bf8);
  border: 0;
  border-radius: 9px;
  color: #07111f;
  display: flex;
  font-size: 9px;
  font-weight: 750;
  height: 34px;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

.ext-note {
  color: #6f7e91;
  font-size: 7px;
  line-height: 1.5;
  margin-top: 10px;
}

.bento {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.25fr 0.75fr 1fr;
  grid-template-rows: 220px 220px;
  margin-top: 46px;
}

.bento-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--premium-line);
  border-radius: 21px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  transition: 0.25s;
}

.bento-card:hover {
  border-color: rgba(102, 168, 255, 0.20);
  transform: translateY(-2px);
}

.bento-card.large {
  grid-row: 1 / 3;
}

.bento-card.wide {
  grid-column: 2 / 4;
}

.bento-card h3 {
  font-size: 16px;
  margin: 0 0 7px;
}

.bento-card p {
  color: #738197;
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
  max-width: 270px;
}

.bento-visual {
  background: #0a111b;
  border: 1px solid var(--premium-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  bottom: 0;
  left: 18px;
  min-height: 125px;
  padding: 12px;
  position: absolute;
  right: 18px;
}

.bento-visual.compact {
  min-height: 90px;
}

.doc {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #8997aa;
  display: flex;
  font-size: 9px;
  gap: 9px;
  padding: 8px;
}

.doc:last-child {
  border-bottom: 0;
}

.doc small {
  color: #66758a;
}

.doc-icon {
  background: rgba(102, 168, 255, 0.08);
  border-radius: 7px;
  color: #7fb4ff;
  display: grid;
  height: 25px;
  place-items: center;
  width: 25px;
  flex: 0 0 auto;
  font-size: 13px;
}

.doc-status {
  color: #77dfa0;
  font-size: 8px;
  margin-left: auto;
}

.status-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 17px;
}

.status-cloud span {
  border: 1px solid var(--premium-line);
  border-radius: 999px;
  color: #8998aa;
  font-size: 8px;
  padding: 7px 9px;
}

.status-cloud span.good {
  background: rgba(111, 234, 159, 0.05);
  border-color: rgba(111, 234, 159, 0.17);
  color: #78dfa0;
}

.history-line {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.h-event {
  align-items: flex-start;
  color: #6e7d91;
  display: flex;
  font-size: 8px;
  gap: 10px;
}

.h-dot {
  border: 2px solid var(--premium-green);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(111, 234, 159, 0.25);
  height: 8px;
  margin-top: 2px;
  width: 8px;
}

.h-event b {
  color: #a9b6c6;
  display: block;
  font-size: 9px;
  margin-bottom: 2px;
}

.compare {
  border: 1px solid var(--premium-line);
  border-radius: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 48px;
  overflow: hidden;
}

.compare-col {
  padding: 28px;
}

.compare-col:first-child {
  background: rgba(255, 126, 145, 0.025);
  border-right: 1px solid var(--premium-line);
}

.compare-col:last-child {
  background: rgba(111, 234, 159, 0.025);
}

.compare-label {
  border: 1px solid var(--premium-line);
  border-radius: 999px;
  color: #8996a9;
  display: inline-flex;
  font-size: 9px;
  letter-spacing: 0.09em;
  margin-bottom: 22px;
  padding: 7px 9px;
  text-transform: uppercase;
}

.compare-col h3 {
  font-size: 26px;
  letter-spacing: -0.035em;
  margin: 0 0 25px;
}

.flow-list {
  display: grid;
}

.flow-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px 1fr;
  min-height: 54px;
  position: relative;
}

.flow-row:not(:last-child)::after {
  background: var(--premium-line-strong);
  content: "";
  height: 32px;
  left: 16px;
  position: absolute;
  top: 38px;
  width: 1px;
}

.flow-ico {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--premium-line);
  border-radius: 11px;
  color: #8b99aa;
  display: grid;
  font-size: 11px;
  height: 34px;
  place-items: center;
  width: 34px;
}

.flow-row strong {
  font-size: 12px;
}

.flow-row span:not(.flow-ico) {
  color: #6e7c91;
  display: block;
  font-size: 9px;
  margin-top: 3px;
}

.good-flow .flow-ico {
  background: rgba(111, 234, 159, 0.04);
  border-color: rgba(111, 234, 159, 0.16);
  color: #77dfa0;
}

.pricing-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 45px;
}

.price-card {
  background: rgba(255, 255, 255, 0.016);
  border: 1px solid var(--premium-line);
  border-radius: 22px;
  padding: 24px;
  position: relative;
  transition: 0.25s;
}

.price-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-4px);
}

.price-card.featured {
  background: linear-gradient(180deg, rgba(75, 138, 249, 0.10), rgba(255, 255, 255, 0.015));
  border-color: rgba(92, 151, 255, 0.28);
  box-shadow: 0 30px 70px rgba(29, 83, 166, 0.13);
}

.recommended {
  background: #dbe9ff;
  border-radius: 999px;
  color: #11203a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 8px;
  position: absolute;
  right: 16px;
  text-transform: uppercase;
  top: 15px;
}

.plan {
  color: #8390a2;
  font-size: 11px;
  font-weight: 700;
}

.price {
  font-size: 43px;
  font-weight: 780;
  letter-spacing: -0.05em;
  margin: 12px 0 3px;
}

.price small {
  color: #768499;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.price-desc {
  color: #7c899b;
  font-size: 11px;
  line-height: 1.6;
  min-height: 36px;
}

.features {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.features div {
  align-items: center;
  color: #9aa8ba;
  display: flex;
  font-size: 10px;
  gap: 8px;
}

.features div::before {
  color: #76e3a1;
  content: "+";
}

.price-card .btn {
  width: 100%;
}

.reviews {
  display: grid;
  gap: 16px;
  grid-template-columns: 1.15fr 0.85fr;
  margin-top: 45px;
}

.quote-big {
  background: linear-gradient(155deg, rgba(102, 168, 255, 0.055), rgba(255, 255, 255, 0.014));
  border: 1px solid var(--premium-line);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  padding: 30px;
}

.quote-mark {
  color: #43628c;
  font-size: 50px;
  line-height: 1;
}

.quote-big blockquote {
  color: #dce6f1;
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.45;
  margin: 10px 0 30px;
}

.quote-meta b {
  display: block;
  font-size: 12px;
}

.quote-meta span {
  color: #728096;
  font-size: 10px;
}

.quotes-small {
  display: grid;
  gap: 16px;
}

.quote-card {
  background: rgba(255, 255, 255, 0.016);
  border: 1px solid var(--premium-line);
  border-radius: 20px;
  padding: 22px;
}

.quote-card p {
  color: #a2afbf;
  font-size: 12px;
  line-height: 1.65;
  margin: 0 0 18px;
}

.quote-card b {
  font-size: 10px;
}

.quote-card span {
  color: #6d7b90;
  font-size: 9px;
  margin-left: 5px;
}

.product-proof {
  padding-top: 86px !important;
}

.proof-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 38px;
}

.proof-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--premium-line);
  border-radius: 18px;
  min-height: 190px;
  padding: 22px;
}

.proof-card span {
  align-items: center;
  background: rgba(102, 168, 255, 0.08);
  border: 1px solid rgba(102, 168, 255, 0.16);
  border-radius: 12px;
  color: #84b8ff;
  display: flex;
  font-size: 18px;
  height: 42px;
  justify-content: center;
  margin-bottom: 22px;
  width: 42px;
}

.proof-card h3 {
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 0 0 9px;
}

.proof-card p {
  color: #748398;
  font-size: 12px;
  line-height: 1.62;
  margin: 0;
}

.faq {
  align-items: start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--premium-line);
  border-radius: 24px;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  padding: 38px;
}

.faq-list {
  background: rgba(7, 11, 18, 0.38);
  border: 1px solid var(--premium-line);
  border-radius: 16px;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--premium-line);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-q {
  align-items: center;
  background: rgba(255, 255, 255, 0.012);
  border: 0;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 650;
  justify-content: space-between;
  padding: 20px 20px;
  text-align: left;
  width: 100%;
}

.faq-plus {
  border: 1px solid var(--premium-line);
  border-radius: 9px;
  color: #8d9aad;
  display: grid;
  height: 27px;
  place-items: center;
  transition: 0.25s;
  width: 27px;
}

.faq-a {
  color: #9ba8b9;
  font-size: 13px;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  padding: 0 60px 0 20px;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-a {
  max-height: 180px;
  padding-bottom: 22px;
}

.faq-item.open .faq-plus {
  border-color: var(--premium-line-strong);
  color: #fff;
  transform: rotate(45deg);
}

.final-cta {
  padding: 50px 0 110px !important;
}

.cta-box {
  align-items: center;
  background:
    radial-gradient(600px 260px at 50% 100%, rgba(51, 120, 246, 0.19), transparent 75%),
    linear-gradient(180deg, #0d1522, #0a1019);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  display: flex;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
  padding: 55px 25px;
  position: relative;
  text-align: center;
}

.cta-box::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
  position: absolute;
}

.cta-content {
  position: relative;
}

.cta-content h2 {
  font-size: clamp(40px, 5vw, 66px);
  letter-spacing: -0.05em;
  line-height: 0.97;
  margin: 0 auto 18px;
  max-width: 800px;
}

.cta-content p {
  color: #8795a7;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 26px;
  max-width: 580px;
}

.cta-actions {
  justify-content: center;
}

.premium-landing footer {
  padding: 84px 0 30px;
  position: relative;
}

.site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(134, 181, 237, 0.16) 20%, rgba(152, 190, 234, 0.38) 50%, rgba(134, 181, 237, 0.16) 80%, transparent);
  box-shadow: 0 0 14px rgba(134, 181, 237, 0.12);
  content: "";
  height: 1px;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
}

.footer-inner {
  align-items: flex-start;
  display: grid;
  gap: 8%;
  grid-template-columns: 1fr 1.65fr;
}

.footer-left .brand {
  font-size: 22px;
}

.footer-left .brand small {
  display: inline;
}

.footer-left .brand-mark {
  height: 43px;
  width: 38px;
}

.footer-left p {
  color: #939dac;
  font-size: 15px;
  line-height: 1.75;
  margin: 24px 0 26px;
  max-width: 355px;
}

.footer-cta {
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 18px;
}

.footer-links {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 10px;
}

.footer-col b {
  color: #8e99aa;
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.footer-col a {
  color: #939dac;
  display: table;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  transition: color 0.2s ease;
}

.footer-col a:hover,
.footer-bottom a:hover {
  color: #b9d9ff;
}

.footer-wordmark {
  container-type: inline-size;
  margin-top: 80px;
  overflow: hidden;
  user-select: none;
}

.footer-wordmark span {
  background: linear-gradient(180deg, #465365 0%, #263140 65%, #141c27 100%);
  background-clip: text;
  color: transparent;
  display: block;
  font-size: 23cqw;
  font-weight: 600;
  height: 0.82em;
  letter-spacing: -0.055em;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  -webkit-background-clip: text;
}

.footer-bottom {
  align-items: center;
  border-top: 1px solid var(--premium-line);
  color: #8c97a7;
  display: flex;
  font-size: 12px;
  gap: 20px;
  justify-content: space-between;
  line-height: 1.6;
  margin-top: 54px;
  padding-top: 25px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.footer-bottom a {
  transition: color 0.2s ease;
}

.site-footer a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--premium-blue);
  outline-offset: 5px;
}

@media (max-width: 1000px) {
  .footer-inner { gap: 5%; grid-template-columns: 1fr 1.4fr; }
  .footer-links { gap: 18px; }
  .footer-left p { font-size: 14px; }
  .footer-col a { font-size: 13px; }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }

@media (max-width: 1000px) {
  .nav-links {
    display: none;
  }

  .hero-grid,
  .extension,
  .faq,
  .reviews {
    grid-template-columns: 1fr;
  }

  .faq {
    gap: 28px;
    padding: 28px;
  }

  .hero {
    padding-top: 135px;
  }

  .hero::before {
    display: none;
  }

  .product-stage {
    margin: auto;
    max-width: 650px;
  }

  .hero-copy {
    text-align: center;
  }

  .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .trust-row {
    justify-content: center;
  }

  .premium-landing .trust-row .dot {
    display: none !important;
  }

  .dash-shell {
    grid-template-columns: 160px 1fr;
  }

  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
  }

  .bento-card.large {
    grid-row: 1 / 3;
  }

  .bento-card.wide {
    grid-column: 1 / 3;
  }

  .floating-chip {
    display: none;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 26px, var(--premium-max));
  }

  .nav-wrap {
    top: 8px;
  }

  .nav {
    border-radius: 15px;
    padding-left: 12px;
  }

  .brand {
    min-width: 0;
  }

  .brand small {
    display: none;
  }

  .nav-actions .btn {
    display: none;
  }

  .hamburger {
    display: grid;
    place-items: center;
  }

  .nav.open {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .nav.open .nav-links {
    display: grid;
    order: 3;
    padding: 8px 0 2px;
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 125px 0 70px;
  }

  .hero-grid {
    gap: 36px;
  }

  .hero h1 {
    font-size: 49px;
  }

  .lead {
    font-size: 15px;
  }

  .product-stage {
    width: 100%;
  }

  .product-glow {
    inset: 10% 0;
  }

  .app-window {
    transform: none;
  }

  .app-content {
    grid-template-columns: 45px 1fr;
    padding: 10px;
  }

  .mock-sidebar {
    padding-right: 8px;
  }

  .main-ui {
    padding-left: 10px;
  }

  .identity-card {
    grid-template-columns: 1fr;
  }

  .score-ring {
    margin: auto;
  }

  .carrier-grid,
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-inner {
    grid-template-columns: 1fr 1fr;
  }

  .trust-item:nth-child(2n) {
    border-right: 0;
  }

  .trust-item:last-child {
    border-top: 1px solid var(--premium-line);
    grid-column: 1 / 3;
  }

  .premium-landing section {
    padding: 78px 0;
  }

  .section-title {
    font-size: 39px;
  }

  .workflow-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .workflow-grid::before {
    display: none;
  }

  .step {
    min-height: auto;
  }

  .dash-shell {
    grid-template-columns: 1fr;
  }

  .dash-side,
  .cd-page {
    display: none;
  }

  .dash-main {
    padding: 16px;
  }

  .dash-head {
    align-items: flex-start;
    display: grid;
  }

  .dash-head .new-btn {
    justify-self: start;
  }

  .table-toolbar {
    height: auto;
    padding: 11px;
  }

  .search {
    max-width: none;
  }

  .dashboard-table .table-row.header {
    display: none;
  }

  .dashboard-table .table-row {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto;
    min-height: 0;
    padding: 13px;
  }

  .dashboard-table .table-row > * {
    min-width: 0;
  }

  .dashboard-table .table-row > *:nth-child(3) {
    color: #718098;
    grid-column: 1 / 2;
  }

  .dashboard-table .table-row > *:nth-child(4),
  .dashboard-table .table-row > *:nth-child(5) {
    color: #63748b;
    font-size: 8px;
  }

  .browser-body,
  .compare {
    grid-template-columns: 1fr;
  }

  .ext-panel {
    min-height: 0;
  }

  .browser {
    transform: none;
  }

  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .bento-card,
  .bento-card.large,
  .bento-card.wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
  }

  .compare-col:first-child {
    border-bottom: 1px solid var(--premium-line);
    border-right: 0;
  }

  .quote-big {
    min-height: auto;
  }

  .quote-big blockquote {
    font-size: 19px;
  }

  .footer-inner {
    gap: 40px;
    grid-template-columns: 1fr;
  }

  .footer-links {
    gap: 16px;
    padding-top: 0;
  }

  .premium-landing footer { padding-top: 48px; }
  .footer-col b { font-size: 10px; margin-bottom: 20px; }
  .footer-col a { font-size: 12px; margin-bottom: 15px; }
  .footer-wordmark { margin-top: 38px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 30px; padding-top: 22px; }
  .footer-bottom-links { gap: 16px; }

  .faq-a {
    padding-right: 10px;
  }

  .cursor-glow {
    display: none;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: 43px;
  }

  .hero-copy {
    text-align: left;
  }

  .hero-actions,
  .trust-row {
    justify-content: flex-start;
  }

  .btn-lg {
    width: 100%;
  }

  .premium-landing .trust-row .dot {
    display: none;
  }

  .trust-row {
    display: grid;
  }

  .hero {
    padding-bottom: 48px;
  }

  .app-content {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .window-top {
    padding: 0 10px;
  }

  .address-bar {
    font-size: 8px;
    min-width: 0;
  }

  .mock-sidebar {
    border-bottom: 1px solid var(--premium-line);
    border-right: 0;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 12px;
    padding: 0 0 10px;
  }

  .side-logo {
    height: 30px;
    width: 30px;
  }

  .side-ico {
    height: 30px;
    width: 30px;
  }

  .main-ui {
    padding-left: 0;
  }

  .score-ring {
    height: 70px;
    width: 70px;
  }

  .carrier-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .dash-head {
    display: grid;
  }

  .new-btn {
    width: max-content;
  }

  .table-toolbar {
    display: grid;
  }

  .filter {
    width: max-content;
  }

  .faq {
    border-radius: 18px;
    padding: 18px;
  }

  .faq-q {
    font-size: 13px;
    gap: 14px;
    padding: 17px 15px;
  }

  .faq-a {
    font-size: 12px;
    padding-left: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Final structural pass */
.hero-simple {
  min-height: 790px;
  padding-bottom: 78px;
}

.hero-simple .hero-grid {
  gap: 92px;
}

.hero-simple h1 {
  max-width: 690px;
}

.hero-simple .lead {
  max-width: 670px;
}

.hero-product .identity-card {
  grid-template-columns: 106px 1fr;
}

.completion-mark {
  align-content: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(111, 234, 159, 0.18), transparent 46%),
    rgba(111, 234, 159, 0.05);
  border: 1px solid rgba(111, 234, 159, 0.18);
  border-radius: 18px;
  display: grid;
  height: 96px;
  justify-items: center;
  width: 96px;
}

.completion-mark b {
  color: #dfffea;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.completion-mark small {
  color: #83dca3;
  font-size: 8px;
  font-weight: 700;
}

.status-pill.ready,
.ready-label {
  background: rgba(111, 234, 159, 0.08);
  border-color: rgba(111, 234, 159, 0.22);
  color: #92e9b1;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateX(34px); }
  to { opacity: 1; transform: translateX(0); }
}

.demo-surface {
  background: linear-gradient(180deg, rgba(17, 27, 43, 0.98), rgba(8, 14, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 26px;
  box-shadow: var(--premium-shadow);
  min-height: 610px;
  overflow: hidden;
  padding: 26px;
}

.demo-head {
  align-items: center;
  border-bottom: 1px solid var(--premium-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: -4px 0 24px;
  padding-bottom: 18px;
}

.demo-head > div {
  margin-right: auto;
}

.demo-head b {
  color: #ecf5ff;
  display: block;
  font-size: 15px;
}

.demo-head small {
  color: #708199;
  font-size: 11px;
}

.path-grid {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 48px 1fr;
  padding-top: 34px;
}

.path-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--premium-line);
  border-radius: 18px;
  display: grid;
  min-height: 160px;
  padding: 20px;
}

.path-card svg {
  color: #82b8ff;
  font-size: 24px;
}

.path-card span,
.path-card small {
  color: #74859b;
  font-size: 11px;
}

.path-card b {
  color: #eef5ff;
  font-size: 18px;
}

.path-card.done {
  background: rgba(111, 234, 159, 0.055);
  border-color: rgba(111, 234, 159, 0.18);
}

.path-line {
  background: linear-gradient(90deg, rgba(102, 168, 255, 0.15), rgba(82, 230, 216, 0.72));
  height: 2px;
}

.document-stack,
.status-list,
.queue-table {
  display: grid;
  gap: 12px;
}

.document-row,
.status-list div,
.queue-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--premium-line);
  border-radius: 16px;
  color: #96a5b8;
  display: grid;
  gap: 14px;
  grid-template-columns: auto 1fr auto;
  min-height: 78px;
  padding: 16px;
}

.document-row > span,
.status-list svg {
  color: #80b5ff;
  font-size: 21px;
}

.document-row b,
.status-list b,
.queue-row b {
  color: #ecf5ff;
}

.document-row small,
.queue-row small {
  color: #738398;
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.document-row.received strong,
.status-list b {
  color: #88e8aa;
}

.document-row.pending strong {
  color: #ffd18d;
}

.status-list div {
  grid-template-columns: 1fr auto;
}

.status-list span {
  align-items: center;
  display: flex;
  gap: 10px;
}

.review-banner {
  background: rgba(111, 234, 159, 0.08);
  border: 1px solid rgba(111, 234, 159, 0.18);
  border-radius: 18px;
  color: #dfffea;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-top: 22px;
  padding: 30px;
  text-align: center;
}

.timeline-large {
  display: grid;
  gap: 0;
}

.timeline-large div {
  display: grid;
  gap: 16px;
  grid-template-columns: 54px 14px 1fr;
  min-height: 88px;
  position: relative;
}

.timeline-large div:not(:last-child)::after {
  background: rgba(111, 234, 159, 0.22);
  bottom: 0;
  content: "";
  left: 60px;
  position: absolute;
  top: 28px;
  width: 1px;
}

.timeline-large time {
  color: #7eaefe;
  font-size: 11px;
  font-weight: 800;
}

.timeline-large span {
  background: var(--premium-green);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(111, 234, 159, 0.45);
  height: 11px;
  margin-top: 2px;
  width: 11px;
}

.timeline-large p {
  color: #7f8ea3;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.timeline-large b {
  color: #edf6ff;
  display: block;
  font-size: 14px;
}

.queue-row {
  grid-template-columns: 1.3fr 0.7fr 1fr;
}

.queue-row.header {
  background: transparent;
  color: #61728a;
  font-size: 10px;
  font-weight: 800;
  min-height: 36px;
  text-transform: uppercase;
}

.signup-cta {
  padding: 125px 0 !important;
}

.signup-cta-inner {
  align-items: center;
  background:
    radial-gradient(620px 340px at 50% 40%, rgba(52, 120, 246, 0.18), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-bottom: 1px solid var(--premium-line);
  border-top: 1px solid var(--premium-line);
  display: grid;
  justify-items: center;
  min-height: 620px;
  padding: 70px 0;
  text-align: center;
}

.signup-cta h2,
.faq-heading h2 {
  font-size: clamp(42px, 5vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.96;
  margin: 0;
}

.signup-cta p,
.faq-heading p {
  color: #8795a8;
  font-size: 16px;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 640px;
}

.verification-badge {
  background: rgba(11, 18, 30, 0.82);
  border: 1px solid var(--premium-line-strong);
  border-radius: 24px;
  box-shadow: var(--premium-shadow);
  display: grid;
  gap: 18px;
  margin: 38px 0 28px;
  min-width: min(520px, 100%);
  padding: 24px;
  text-align: left;
}

.badge-head {
  align-items: center;
  display: flex;
  gap: 12px;
}

.badge-head b {
  color: #f2f8ff;
}

.badge-head small {
  color: #75859a;
  display: block;
  font-size: 11px;
}

.badge-checks {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.badge-checks span {
  background: rgba(111, 234, 159, 0.055);
  border: 1px solid rgba(111, 234, 159, 0.16);
  border-radius: 12px;
  color: #aebccd;
  font-size: 12px;
  padding: 12px;
}

.badge-checks b {
  color: #8dedac;
  float: right;
}

.verification-badge > strong {
  background: rgba(111, 234, 159, 0.08);
  border-radius: 14px;
  color: #dcffe8;
  display: block;
  letter-spacing: 0.08em;
  padding: 14px;
  text-align: center;
}

.reviews-section {
  padding-top: 92px !important;
}

.reviews-heading {
  text-align: center;
}

.reviews-heading .section-title {
  margin-inline: auto;
  max-width: 900px;
}

.reviews-wall {
  margin-top: 36px;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 740px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
  overflow: hidden;
}

.review-column { min-width: 0; }
.review-track { animation: reviewScroll var(--review-duration, 82s) linear infinite; animation-delay: var(--review-delay, -17s); will-change: transform; }
.review-column:nth-child(2) .review-track { animation-direction: reverse; }
.review-group { display: grid; gap: 22px; padding-bottom: 22px; }
.review-card {
  background: linear-gradient(145deg, rgba(122, 159, 207, .075), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  min-height: 218px;
  padding: 27px;
}
.review-card-head { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.review-card h3 { color: #e5e9ef; font-size: 17px; font-weight: 550; letter-spacing: -.025em; line-height: 1.4; margin: 0 0 5px; }
.review-card-head > div > span { color: #8794a5; font-size: 12px; line-height: 1.5; }
.review-avatar { align-items: center; background: rgba(102, 168, 255, .065); border: 1px solid rgba(152, 190, 234, .14); border-radius: 12px; color: #a2c6f3; display: flex; flex: 0 0 40px; height: 40px; justify-content: center; width: 40px; }
.review-avatar svg { height: 19px; width: 19px; }
.review-card blockquote { color: #abb5c3; font-size: 15px; letter-spacing: -.01em; line-height: 1.75; margin: 28px 0 0; }
.reviews-offscreen .review-track { animation-play-state: paused; }
@keyframes reviewScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.faq-section {
  padding: 102px 0 116px !important;
}

.faq-heading {
  margin: 0 auto 56px;
  max-width: 1200px;
  text-align: center;
}

.faq-heading h2 { color: #e5e6e8; font-size: clamp(36px, 4.2vw, 62px); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; margin: 0; max-width: none; }
.faq-heading p { color: #a3aab5; font-size: clamp(15px, 1.4vw, 20px); max-width: 1000px; }

.faq-simple {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  max-width: 1200px;
  overflow: visible;
}

.faq-simple .faq-item,
.faq-simple .faq-item:first-child,
.faq-simple .faq-item:last-child {
  background: rgba(255, 255, 255, .008);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  overflow: hidden;
  transition: background .25s, border-color .25s;
}

.faq-simple .faq-q {
  background: transparent;
  color: #dce1e7;
  font-size: 18px;
  font-weight: 600;
  gap: 24px;
  line-height: 1.5;
  padding: 27px 30px;
  transition: color .25s;
}

.faq-simple .faq-item:hover {
  background: rgba(255, 255, 255, 0.025);
}

.faq-simple .faq-q:hover { background: transparent; }

/* Highlight and keyboard focus belong to the whole accordion card. */
.faq-simple .faq-q:focus-visible { outline: none; }
.faq-simple .faq-item:has(.faq-q:focus-visible) {
  outline: 2px solid var(--premium-blue);
  outline-offset: 3px;
}

.faq-simple .faq-item.open .faq-q {
  background: transparent;
  color: #a5cbfa;
}

.faq-simple .faq-item.open { background: rgba(134, 181, 237, .025); border-color: rgba(152, 190, 234, .19); }
.faq-chevron { color: #99a4b3; flex: 0 0 20px; height: 20px !important; transition: transform .3s, color .3s; width: 20px !important; }
.faq-item.open .faq-chevron { color: #a5cbfa; transform: rotate(180deg); }

.faq-simple .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  max-width: none;
  opacity: 0;
  padding: 0;
  transition: grid-template-rows .35s ease, opacity .25s ease;
}

.faq-simple .faq-item.open .faq-a {
  grid-template-rows: 1fr;
  max-height: none;
  opacity: 1;
  padding: 0;
}

.faq-answer-inner { min-height: 0; overflow: hidden; }
.faq-answer-inner p { color: #a3aebc; font-size: 16px; line-height: 1.8; margin: 0; padding: 0 30px 28px; }

@media (max-width: 1000px) {
  .reviews-wall { gap: 16px; height: 670px; }
  .review-group { gap: 16px; padding-bottom: 16px; }
  .review-card { padding: 22px; }
  .review-card h3 { font-size: 15px; }
  .review-card blockquote { font-size: 14px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .reviews-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-column:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .reviews-section { padding-top: 60px !important; }
  .faq-section { padding: 68px 0 76px !important; }
  .faq-heading { margin-bottom: 32px; }
  .faq-heading h2 { font-size: clamp(32px, 7vw, 44px); }
  .faq-simple { gap: 12px; }
  .faq-simple .faq-q { font-size: 15px; gap: 16px; padding: 22px 20px; }
  .faq-answer-inner p { font-size: 14px; padding: 0 20px 22px; }
}
@media (max-width: 559px) {
  .reviews-wall { grid-template-columns: 1fr; height: 620px; }
  .review-column:nth-child(n+2) { display: none; }
  .review-card { min-height: 0; padding: 25px; }
  .review-card h3 { font-size: 17px; }
  .review-card blockquote { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-wall { height: auto; -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .review-track { animation: none; will-change: auto; }
  .review-group[aria-hidden="true"] { display: none; }
  .faq-simple .faq-a, .faq-chevron { transition: none; }
}

@media (max-width: 760px) {
  .hero-simple {
    padding-top: 126px;
  }

  .hero-simple h1 {
    font-size: 44px;
  }

  .hero-product {
    width: 100%;
  }

  .hero-product .app-content {
    min-height: 0;
    min-width: 0;
  }

  .hero-product .identity-card {
    grid-template-columns: 1fr;
  }

  .hero-product .completion-mark {
    height: 82px;
    justify-self: center;
    width: 82px;
  }

  .hero-product .carrier-grid {
    grid-template-columns: 1fr;
  }

  .hero-product .ui-heading {
    display: grid;
    gap: 10px;
  }

  .hero-product .status-pill {
    justify-self: start;
  }

  .path-grid,
  .badge-checks,
  .queue-row,
  .document-row {
    grid-template-columns: 1fr;
  }

  .path-line {
    height: 28px;
    justify-self: center;
    width: 2px;
  }

  .demo-surface {
    padding: 18px;
  }

  .signup-cta-inner {
    padding: 54px 0;
  }

  .reviews {
    grid-template-columns: 1fr;
  }
}

/* Repair pass: animated hero, feature scroll, and CTA spacing */
.completion-mark {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.completion-mark.complete {
  background:
    radial-gradient(circle at 50% 18%, rgba(111, 234, 159, 0.25), transparent 48%),
    rgba(111, 234, 159, 0.08);
  border-color: rgba(111, 234, 159, 0.28);
  box-shadow: 0 0 34px rgba(111, 234, 159, 0.12);
}

.hero-product .check.running {
  border-color: rgba(99, 168, 255, 0.32);
}

.hero-product .check.running .progress {
  animation: verifyProgress 0.85s ease both;
  opacity: 1;
  transform-origin: left center;
  width: 100%;
}

@keyframes verifyProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.path-card {
  min-height: 138px;
  padding: 18px;
}

.signup-cta {
  background:
    radial-gradient(720px 360px at 50% 28%, rgba(52, 120, 246, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006));
  border-bottom: 1px solid var(--premium-line);
  border-top: 1px solid var(--premium-line);
  padding: 112px 0 !important;
}

.signup-cta-inner {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
}

.signup-cta h2 {
  font-size: clamp(44px, 6vw, 88px);
  letter-spacing: -0.05em;
  line-height: 0.98;
  max-width: 980px;
}

.verification-badge {
  margin: 42px 0 30px;
  max-width: 760px;
  min-width: 0;
  padding: 26px;
  width: min(760px, 100%);
}

.path-grid {
  padding-top: 0;
}

/* The menu stays in view while the six previews scroll in normal document flow. */
.premium-landing .feature-scroll {
  padding: 28px 0 64px;
}

.feature-intro {
  margin-bottom: 40px;
  position: static;
}

.feature-intro .section-title {
  max-width: 920px;
  font-size: clamp(32px, 3vw, 46px);
}

.feature-intro .section-copy { margin-top: 14px; }

.feature-stage {
  scroll-margin-top: 104px;
}

.feature-stage-inner {
  align-items: start;
  display: grid;
  gap: clamp(48px, 7.2vw, 110px);
  grid-template-columns: minmax(0, 0.33fr) minmax(0, 0.67fr);
}

.feature-left {
  overflow-anchor: none;
  position: sticky;
  top: 104px;
}

.premium-landing .feature-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--premium-line);
  border-radius: 0;
  color: var(--premium-muted);
  cursor: pointer;
  display: grid;
  gap: 0 14px;
  grid-template-columns: 40px minmax(0, 1fr);
  height: auto;
  padding: 15px 0;
  text-align: left;
  width: 100%;
}

.premium-landing .feature-item.active {
  border-bottom-color: rgba(102, 168, 255, 0.42);
  color: var(--premium-text);
}

.premium-landing .feature-item:hover {
  color: var(--premium-text);
}

.feature-item:focus-visible {
  outline: 2px solid var(--premium-blue);
  outline-offset: 5px;
}

.feature-icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent);
  border: 1px solid var(--premium-line);
  border-radius: 10px;
  display: grid;
  font-size: 19px;
  height: 40px;
  place-items: center;
  width: 40px;
}

.feature-item.active .feature-icon {
  border-color: rgba(102, 168, 255, 0.28);
  color: #a8cbff;
}

.feature-item strong {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 550;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.feature-item em {
  color: #a2adbc;
  display: none;
  font-size: 14px;
  font-style: normal;
  grid-column: 1 / -1;
  line-height: 1.6;
  margin-top: 16px;
}

.feature-item.active em {
  animation: featureDescriptionIn 0.25s ease;
  display: block;
}

@keyframes featureDescriptionIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.feature-right {
  --feature-top-fade: min(144px, 16vh);
  --feature-bottom-fade: min(180px, 26vh);
  --feature-side-strength: .35;
  --feature-fade-mask:
    linear-gradient(180deg,
      transparent var(--feature-clip-top, 0px),
      #000 calc(var(--feature-clip-top, 0px) + var(--feature-top-fade)),
      #000 max(calc(var(--feature-clip-top, 0px) + var(--feature-top-fade)), calc(var(--feature-viewport-bottom, 100%) - var(--feature-bottom-fade))),
      transparent var(--feature-viewport-bottom, 100%)),
    linear-gradient(90deg,
      #000 40%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .020)) 45%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .074)) 50%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .156)) 55%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .259)) 60%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .376)) 65%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .500)) 70%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .624)) 75%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .741)) 80%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .844)) 85%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .926)) 90%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength) * .980)) 95%,
      rgb(0 0 0 / calc(1 - var(--feature-side-strength))) 100%);
  clip-path: inset(var(--feature-clip-top, 0px) 0 0);
  display: grid;
  gap: 72px;
  -webkit-mask-image: var(--feature-fade-mask);
  mask-image: var(--feature-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  min-width: 0;
  width: calc(100% + max(var(--page-gutter), (100vw - var(--premium-max)) / 2));
}

.feature-visual {
  min-width: 0;
  position: relative;
  scroll-margin-top: 128px;
}

.feature-visual .demo-surface,
.feature-browser {
  height: 550px;
  min-height: 0;
  width: 100%;
}

.feature-visual .demo-surface {
  align-content: center;
  background: #101823;
  display: grid;
  padding: 30px;
}

.feature-browser {
  background: #0e1218;
  border-color: rgba(255, 255, 255, 0.08);
  color: #c5ccd7;
  transform: none;
}

.feature-video {
  aspect-ratio: 80 / 43;
  background: #0e1218;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.feature-video video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.feature-browser .browser-top { background: #171c23; }
.feature-browser .browser-url { background: #232a34; color: #8792a3; }
.feature-browser .cd-company { background: #131a23; border-color: #232c38; }
.feature-browser .cd-head { border-bottom-color: #252e3a; }
.feature-browser .cd-info div { border-top-color: #252e3a; }
.feature-browser .grey-btn,
.feature-browser .fake-lines i { background: #242d39; }

.feature-browser .browser-body {
  background: #0e131a;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.72fr);
  min-height: calc(100% - 42px);
  padding: 0;
}

.feature-visual > .browser,
.feature-visual > .demo-surface {
  opacity: 0.68;
}

.feature-visual > .feature-video {
  opacity: 0.9;
}

.feature-browser .cd-page {
  min-width: 0;
  padding: 24px 18px;
}

.feature-browser .cd-info b {
  overflow-wrap: anywhere;
}

.feature-browser .browser-url {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

@media (min-width: 900px) and (max-height: 700px) {
  .feature-left { top: 104px; }
  .premium-landing .feature-item { padding: 12px 0; }
  .feature-icon { height: 34px; width: 34px; }
  .feature-item em { font-size: 12px; line-height: 1.5; margin-top: 10px; }
}

@media (min-width: 900px) and (max-height: 560px) {
  .feature-left { top: 88px; }
  .premium-landing .feature-item { padding: 7px 0; }
  .feature-icon { height: 28px; width: 28px; font-size: 16px; }
  .feature-item strong { font-size: 15px; }
  .feature-item em { font-size: 11px; }
}

@media (max-width: 899px) {
  .premium-landing .feature-scroll { padding: 36px 0; }
  .feature-intro { margin-bottom: 36px; }
  .feature-stage-inner { gap: 0; grid-template-columns: 1fr; }
  .feature-left,
  .feature-right { display: contents; }
  .feature-right { clip-path: none; -webkit-mask-image: none; mask-image: none; }
  .premium-landing .feature-item { color: var(--premium-text); padding: 20px 0; }
  .feature-item em { display: block; }
  .feature-visual {
    clip-path: inset(var(--feature-clip-top, 0px) 0 0);
    -webkit-mask-image: linear-gradient(180deg, transparent var(--feature-clip-top, 0px), #000 calc(var(--feature-clip-top, 0px) + var(--feature-top-fade, 0px)));
    mask-image: linear-gradient(180deg, transparent var(--feature-clip-top, 0px), #000 calc(var(--feature-clip-top, 0px) + var(--feature-top-fade, 0px)));
    margin: 20px 0 56px;
  }
  .feature-visual:last-child { margin-bottom: 0; }
  .feature-visual .demo-surface,
  .feature-browser { height: auto; min-height: 360px; }
  .feature-visual .demo-surface { padding: 22px; }
  .feature-browser .browser-body { min-height: 360px; }
  .feature-visual > .browser,
  .feature-visual > .demo-surface,
  .feature-visual > .feature-video { opacity: 1; }
}

@media (max-width: 760px) {
  .feature-browser .browser-body { grid-template-columns: 1fr; }
  .feature-browser .cd-page { display: block; }
  .feature-item strong { font-size: 19px; }
  .feature-visual .demo-head { flex-wrap: wrap; }
  .feature-visual .review-banner { font-size: 18px; padding: 24px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-item.active em { animation: none; }
}

/* Centered hero: a single headline above the emblem and orbiting product cards. */
.premium-landing .hero-centered {
  display: block;
  min-height: 0;
  padding: 94px 0 24px;
}

.hero-centered::before { display: none; }
.hero-layout { position: relative; }
.hero-centered .hero-copy { padding-top: 37px; text-align: center; }

.hero-centered h1 {
  color: #e5e6e8;
  font-size: clamp(38px, 3.8vw, 60px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.12;
  margin: 24px auto;
  max-width: 1200px;
}

.hero-centered .lead {
  color: #a3a5aa;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.5;
  margin: 0 auto 30px;
  max-width: 1060px;
}

.hero-centered .hero-actions { gap: 14px; justify-content: center; margin: 0; }
.premium-landing .hero-actions .btn { font-size: 14px; gap: 8px; line-height: 20px; min-height: 40px; padding: 9px 16px; }
@media(max-width:760px) { .premium-landing .hero-actions .btn { font-size: 13px; line-height: 18px; min-height: 38px; padding: 9px 14px; } }

.hero-visual {
  height: 370px;
  margin: 22px auto 0;
  max-width: 1040px;
  position: relative;
  width: 100%;
}

@property --shield-look {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.hero-emblem {
  --shield-look: 0;
  animation: heroShieldFloat 7s ease-in-out infinite, heroShieldGlow 8s ease-in-out infinite, heroShieldLook 14s ease-in-out infinite;
  height: 400px;
  left: 50%;
  max-width: none;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 384px;
  z-index: 2;
}

.hero-emblem .shield-artwork {
  display: block;
  height: 100%;
  overflow: visible;
  stroke: none;
  stroke-width: 1;
  width: 100%;
}
.shield-head {
  transform: perspective(700px) rotateY(calc(var(--shield-look) * 1deg)) rotateZ(calc(var(--shield-look) * -.06deg));
  transform-origin: 240px 224px;
}
.shield-head-back { transform: translate(calc(7px - var(--shield-look) * .6px), -7px); }
.shield-body {
  transform: perspective(900px) rotateY(calc(var(--shield-look) * .15deg));
  transform-origin: 240px 400px;
}
.shield-mesh { transform: translateX(calc(var(--shield-look) * .15px)); }
.shield-face { transform: translate(calc(var(--shield-look) * .85px), 30px); }
.shield-pupils { transform: translateX(calc(var(--shield-look) * .3px)); }
.shield-eyes {
  animation: heroShieldBlink 9.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-visual .product-glow {
  background: rgba(90, 140, 190, 0.06);
  filter: blur(60px);
  inset: 20% 32%;
}

.hero-visual::after {
  background: linear-gradient(transparent, var(--premium-bg));
  bottom: -4px;
  content: "";
  height: 80px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 5;
}

.hero-visual .hero-product {
  animation: heroCardFloat 8s ease-in-out -1s infinite;
  background: #0d1117;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.2);
  left: 64px;
  position: absolute;
  top: 58px;
  transform: rotate(-7deg) rotateY(var(--card-yaw, 0deg)) rotateX(var(--card-pitch, 0deg)) scale(.76);
  transform-origin: left top;
  width: 310px;
}

.hero-visual .window-top { height: 29px; padding: 0 9px; }
.hero-visual .mac-dot { height: 5px; width: 5px; opacity: .7; }
.hero-visual .address-bar { font-size: 7px; height: 18px; }
.hero-visual .app-content { display: block; min-height: 0; padding: 13px; }
.hero-visual .mock-sidebar { display: none; }
.hero-visual .main-ui { padding: 0; }
.hero-visual .ui-heading { margin-bottom: 9px; }
.hero-visual .ui-title { font-size: 13px; }
.hero-visual .ui-sub { font-size: 8px; }
.hero-visual .tiny { font-size: 7px; }
.hero-visual .status-pill { font-size: 7px; padding: 5px 7px; }
.hero-visual .identity-card { gap: 9px; grid-template-columns: 64px 1fr; margin-bottom: 8px; padding: 9px; }
.hero-visual .completion-mark { border-radius: 12px; height: 60px; width: 60px; }
.hero-visual .completion-mark b { font-size: 21px; }
.hero-visual .completion-mark small { font-size: 6px; }
.hero-visual .carrier-grid { gap: 4px; grid-template-columns: 1fr 1fr; }
.hero-visual .kv { border-radius: 6px; padding: 5px; }
.hero-visual .kv span { font-size: 5px; }
.hero-visual .kv b { font-size: 7px; margin-top: 2px; }
.hero-visual .checks { gap: 5px; margin: 0; }
.hero-visual .check { border-radius: 7px; font-size: 8px; padding: 7px; }
.hero-visual .check strong { font-size: 7px; }
.hero-visual .check-ico { font-size: 10px; height: 17px; width: 17px; }
.hero-visual .timeline { display: none; }

.hero-orbit-card {
  animation: heroCardFloat 8s ease-in-out infinite;
  background: linear-gradient(145deg, #0e1217, #0b0e12);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 9px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  color: #bfc5ce;
  font-size: 11px;
  padding: 16px;
  position: absolute;
}
.orbit-label { color: #7f8792; display: block; font-size: 9px; margin-bottom: 13px; }
.hero-orbit-card svg { color: #9cb3cd; font-size: 13px; }
.hero-orbit-card > div { align-items: center; display: flex; gap: 8px; }
.hero-orbit-card small { color: #7e8793; font-size: 9px; }
.hero-carrier-card { animation-delay: -4s; left: 116px; top: 228px; transform: rotate(-5deg) scale(.78); transform-origin: left top; width: 230px; }
.hero-carrier-card > b { display: block; font-size: 13px; margin-bottom: 4px; }
.hero-carrier-card > small { display: block; margin-bottom: 12px; }
.hero-carrier-card > div { font-size: 10px; margin-top: 8px; }
.hero-documents-card { animation-delay: -2s; animation-duration: 9s; right: 54px; top: 98px; transform: rotate(5deg) scale(.76); transform-origin: right top; width: 280px; }
.hero-documents-card > div { background: rgba(255, 255, 255, .018); border-radius: 5px; margin-top: 6px; padding: 9px 7px; }
.hero-documents-card small { color: #8aae95; margin-left: auto; }
.hero-activity-card { animation-delay: -5s; animation-duration: 10s; right: 100px; top: 236px; transform: rotate(6deg) scale(.78); transform-origin: right top; width: 250px; }
.hero-activity-card > div { font-size: 10px; margin-top: 11px; }
.hero-activity-card i { background: #85a58e; border-radius: 50%; height: 5px; width: 5px; }
.hero-activity-card time { color: #68737e; font-size: 8px; margin-left: auto; }

.hero-proof {
  align-items: center;
  color: #92979f;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 0;
}
.hero-proof svg { color: #a1b9d6; }

@keyframes heroShieldFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes heroShieldGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(140, 192, 255, 0.08)); }
  50% { filter: drop-shadow(0 0 12px rgba(140, 192, 255, 0.2)); }
}

@keyframes heroShieldLook {
  0%, 10%, 100% { --shield-look: 0; }
  24%, 36% { --shield-look: -16; }
  50%, 57% { --shield-look: 0; }
  73%, 85% { --shield-look: 16; }
}

@keyframes heroShieldBlink {
  0%, 30%, 33%, 76%, 79%, 100% { transform: scaleY(1); }
  31.5%, 77.5% { transform: scaleY(.08); }
}

@keyframes heroCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

.hero-motion-paused .hero-emblem,
.hero-motion-paused .shield-eyes,
.hero-motion-paused .hero-product,
.hero-motion-paused .hero-orbit-card {
  animation-play-state: paused;
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --page-gutter: 32px; }
  .container { width: calc(100% - 64px); }
  .hero-visual .hero-product { left: 0; width: 260px; }
  .hero-documents-card { right: 0; width: 240px; }
  .hero-carrier-card { left: 30px; width: 205px; }
  .hero-activity-card { right: 20px; width: 225px; }
  .hero-emblem { height: 400px; width: 384px; }
}

@media (max-width: 760px) {
  :root { --page-gutter: 13px; }
  .premium-landing .hero-centered { padding: 94px 0 16px; }
  .hero-centered .hero-copy { padding-top: 31px; }
  .hero-centered h1 { font-size: clamp(32px, 7.8vw, 48px); margin: 20px auto; max-width: 550px; overflow-wrap: normal; white-space: normal; width: 100%; }
  .hero-centered .lead { font-size: 15px; margin-bottom: 22px; max-width: 520px; }
  .hero-centered .btn-lg { width: auto; }
  .hero-visual { height: 330px; margin-top: 18px; max-width: 620px; }
  .hero-emblem { height: 320px; top: 0; width: 307px; }
  .hero-visual .hero-product { left: 0; top: 92px; transform: rotate(-7deg) scale(.49); transform-origin: left top; width: 270px; }
  .hero-documents-card { font-size: 9px; right: 0; top: 82px; transform: rotate(5deg) scale(.53); transform-origin: right top; width: 230px; }
  .hero-carrier-card,
  .hero-activity-card { display: none; }
  .hero-proof { font-size: 11px; gap: 6px; margin-top: 4px; }
  .feature-intro .section-title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-emblem,
  .shield-eyes,
  .hero-visual .hero-product,
  .hero-orbit-card { animation: none; }
  .hero-emblem { --shield-look: 0; }
  .hero-visual .hero-product { transition: none; }
}

/* Two compact, continuous dealership rows. Duplicate groups form an exact loop. */
.premium-landing .dealer-section { background: transparent; padding: 46px 0 40px; }
.dealer-heading { margin-bottom: 34px; position: relative; text-align: center; }
.dealer-heading h2 { color: #939eae; font-size: 11px; font-weight: 500; letter-spacing: .23em; line-height: 1.6; margin: 0; text-transform: uppercase; }
.dealer-marquee { display: grid; gap: 25px; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); overflow: hidden; }
.dealer-row { overflow: hidden; }
.dealer-track { animation: dealerScroll var(--dealer-duration, 90s) linear infinite; animation-delay: var(--dealer-delay, -12s); display: flex; width: max-content; will-change: transform; }
.dealer-row:nth-child(2) .dealer-track { animation-direction: reverse; }
.dealer-group { align-items: center; display: flex; flex-shrink: 0; gap: 46px; padding-right: 46px; }
.dealer-name { align-items: center; color: #a9b3c1; display: inline-flex; flex-shrink: 0; font-size: 17px; font-weight: 500; gap: 13px; line-height: 1.4; white-space: nowrap; }
.dealer-brand { align-items: center; background: #111922; border: 1px solid rgba(149, 187, 230, .18); border-radius: 50%; display: inline-flex; flex-shrink: 0; height: 46px; justify-content: center; width: 46px; }
.dealer-brand img { display: block; filter: brightness(0) invert(1); height: 32px; object-fit: contain; opacity: .78; width: 32px; }
.dealer-brand-bmw img, .dealer-brand-volkswagen img, .dealer-brand-mercedesbenz img { height: 29px; width: 29px; }
.dealer-brand-audi img, .dealer-brand-chrysler img { height: 34px; width: 34px; }
.dealer-offscreen .dealer-track { animation-play-state: paused; }
@keyframes dealerScroll { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .premium-landing .dealer-section { padding: 30px 0 26px; }
  .dealer-heading { margin-bottom: 28px; padding: 0 32px; }
  .dealer-heading h2 { font-size: 10px; letter-spacing: .18em; }
  .dealer-marquee { gap: 20px; }
  .dealer-group { gap: 30px; padding-right: 30px; }
  .dealer-name { font-size: 14px; gap: 10px; }
  .dealer-brand { height: 38px; width: 38px; }
  .dealer-brand img { height: 26px; width: 26px; }
  .dealer-brand-bmw img, .dealer-brand-volkswagen img, .dealer-brand-mercedesbenz img { height: 24px; width: 24px; }
  .dealer-brand-audi img, .dealer-brand-chrysler img { height: 29px; width: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .dealer-marquee { mask-image: none; margin: 0 auto; max-width: 1760px; width: 84.5%; }
  .dealer-track { animation: none; width: 100%; will-change: auto; }
  .dealer-group { flex-wrap: wrap; gap: 20px 30px; padding: 0; width: 100%; }
  .dealer-group[aria-hidden="true"] { display: none; }
  .dealer-name { white-space: normal; }
}

/* Install the extension from the same workflow the feature previews describe. */
.premium-landing .extension-section { background: transparent; border: 0; padding: 100px 0; }
.extension-card { align-items: center; background: radial-gradient(ellipse at 85% 65%, rgba(90, 140, 195, .065), transparent 50%), #0b0e12; border: 1px solid rgba(255, 255, 255, .09); border-radius: 30px; display: flex; min-height: 450px; overflow: hidden; padding: 68px 64px; position: relative; }
.extension-copy { max-width: 66%; position: relative; z-index: 2; }
.extension-copy h2 { font-size: clamp(30px, 2.65vw, 47px); font-weight: 600; letter-spacing: -.045em; line-height: 1.28; margin: 0; max-width: 790px; }
.extension-copy p { color: #919ba9; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; margin: 24px 0 30px; max-width: 650px; }
.extension-install:disabled { cursor: default; }
.extension-install:focus-visible { outline: 2px solid #9ac7fc; outline-offset: 5px; }
.extension-mascot { --shield-look: -10; animation: extensionShieldLook 15s ease-in-out infinite; bottom: -92px; height: 535px; position: absolute; right: -36px; width: 514px; z-index: 1; }
.extension-mascot .shield-artwork { display: block; height: 100%; overflow: visible; stroke: none; stroke-width: 1; width: 100%; }
.extension-mascot .shield-eyes { animation-delay: -3s; }
@keyframes extensionShieldLook { 0%, 15%, 100% { --shield-look: -12; } 40%, 55% { --shield-look: 9; } 80% { --shield-look: -4; } }
.extension-motion-paused, .extension-motion-paused .shield-eyes { animation-play-state: paused; }
@media (min-width: 1600px) { .extension-card { min-height: 500px; padding: 80px; } .extension-mascot { bottom: -108px; height: 610px; width: 585px; right: -30px; } }
@media (max-width: 1100px) and (min-width: 761px) { .extension-card { padding: 48px 40px; min-height: 410px; } .extension-copy { max-width: 65%; } .extension-copy h2 { font-size: 32px; } .extension-mascot { height: 470px; width: 451px; bottom: -86px; right: -85px; } }
@media (max-width: 760px) { .premium-landing .extension-section { padding: 54px 0; } .extension-card { border-radius: 22px; display: block; min-height: 0; padding: 34px 28px 0; } .extension-copy { max-width: 100%; } .extension-copy h2 { font-size: clamp(27px, 5.6vw, 36px); max-width: 520px; } .extension-copy p { font-size: 14px; margin: 18px 0 24px; max-width: 430px; } .extension-mascot { bottom: auto; height: 390px; margin: 14px -52px -30px auto; position: relative; right: auto; width: 374px; } }
@media (max-width: 390px) { .extension-card { padding: 30px 24px 0; } .extension-mascot { height: 360px; margin: 12px -46px -26px auto; width: 346px; } }
@media (prefers-reduced-motion: reduce) { .extension-mascot, .extension-mascot .shield-eyes { animation: none; } .extension-mascot { --shield-look: -10; } }

/* Share the reviews heading scale across the main landing-page titles. */
.premium-landing .section-title,
.premium-landing .hero-centered h1,
.premium-landing .extension-copy h2,
.premium-landing .faq-heading h2 {
  font-size: var(--premium-heading-size);
}
@media (max-width: 760px) {
  .premium-landing { --premium-heading-size: 39px; }
}