:root {
  --ink: #f5f7ff;
  --muted: #9aa4bc;
  --muted-2: #69738d;
  --night: #070a18;
  --night-2: #0b1025;
  --panel: #111730;
  --panel-2: #151c3a;
  --line: rgba(145, 160, 210, .16);
  --cyan: #21c7ff;
  --blue: #367cff;
  --violet: #7b6cff;
  --red: #ff3158;
  --green: #31d49a;
  --shadow: 0 34px 90px rgba(0, 0, 0, .42);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 4%, rgba(65, 77, 192, .18), transparent 29rem),
    radial-gradient(circle at 8% 20%, rgba(22, 135, 207, .09), transparent 30rem),
    var(--night);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.page-rail {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.page-rail i:nth-child(1) { background: var(--cyan); }
.page-rail i:nth-child(2) { background: var(--violet); }
.page-rail i:nth-child(3) { background: var(--red); }

.site-header {
  position: sticky;
  z-index: 80;
  top: 4px;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 34px;
  padding: 0 max(24px, calc((100vw - 1220px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(7, 10, 24, .78);
  backdrop-filter: blur(20px);
}

.wordmark { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.wordmark-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(109, 141, 255, .48);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(36, 199, 255, .15), rgba(122, 108, 255, .22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 28px rgba(20, 44, 128, .2);
  color: #b9d9ff;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.03em;
}
.wordmark > span:last-child { display: grid; gap: 2px; }
.wordmark strong { font-size: 15px; letter-spacing: -.01em; }
.wordmark small { color: var(--muted-2); font-size: 9px; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; }

.site-header nav { display: flex; align-items: center; gap: 30px; }
.site-header nav a {
  position: relative;
  padding: 27px 0;
  color: #9fa9bf;
  font-size: 13px;
  font-weight: 640;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 18px;
  height: 2px;
  background: var(--cyan);
  transition: right .2s ease;
}
.site-header nav a:hover { color: #fff; }
.site-header nav a:hover::after { right: 0; }
.header-cta {
  justify-self: end;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid rgba(80, 150, 255, .34);
  border-radius: 10px;
  background: rgba(29, 60, 134, .22);
  color: #dbe8ff;
  font-size: 12px;
  font-weight: 750;
  transition: .2s ease;
}
.header-cta:hover { border-color: rgba(60, 193, 255, .7); background: rgba(36, 99, 177, .3); transform: translateY(-1px); }
.menu-toggle { display: none; }

.hero {
  min-height: 790px;
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(620px, 1.3fr);
  align-items: center;
  gap: 54px;
  padding-top: 92px;
  padding-bottom: 104px;
}
.hero-copy { position: relative; z-index: 3; }
.eyebrow, .section-kicker {
  color: #7edfff;
  font-size: 11px;
  font-weight: 790;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(49, 212, 154, .09); }
.hero h1 {
  max-width: 660px;
  margin: 24px 0 24px;
  font-size: clamp(48px, 5vw, 73px);
  line-height: .98;
  letter-spacing: -.063em;
}
.hero h1 em, .problem-grid h2 em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(90deg, #5cd8ff 3%, #7791ff 52%, #a875ff);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero-copy > p {
  max-width: 620px;
  margin: 0;
  color: #abb4c9;
  font-size: 17px;
  line-height: 1.72;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 780;
  transition: .2s ease;
}
.button.primary {
  border-color: #338ae8;
  background: linear-gradient(108deg, #0969a9, #2d70df 52%, #6658d9);
  box-shadow: 0 15px 36px rgba(39, 92, 205, .25);
}
.button.primary:hover { filter: brightness(1.12); transform: translateY(-2px); }
.button.secondary { border-color: var(--line); background: rgba(255, 255, 255, .025); color: #b2bbcf; }
.button.secondary:hover { border-color: rgba(103, 130, 200, .44); color: #fff; }
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0;
  margin-top: 44px;
}
.hero-proof > span { min-width: 130px; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--line); }
.hero-proof > span:last-child { border-right: 0; }
.hero-proof strong, .hero-proof small { display: block; }
.hero-proof strong { color: #eff4ff; font-size: 22px; }
.hero-proof small { margin-top: 4px; color: #727e98; font-size: 10px; font-weight: 650; line-height: 1.35; text-transform: uppercase; }

.product-stage { position: relative; min-width: 0; perspective: 1400px; }
.stage-glow {
  position: absolute;
  inset: 9% -5% -5% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 104, 255, .25), rgba(44, 194, 255, .08) 42%, transparent 70%);
  filter: blur(24px);
}
.product-window {
  position: relative;
  z-index: 2;
  width: 760px;
  overflow: hidden;
  border: 1px solid rgba(112, 137, 211, .27);
  border-radius: 17px;
  background: #0c1125;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .018) inset;
  transform: rotateY(-7deg) rotateX(1deg);
  transform-origin: center left;
}
.window-top {
  height: 48px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(147, 162, 210, .12);
  background: #090e20;
}
.mini-brand { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.mini-brand i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #295982;
  border-radius: 7px;
  background: #0d2945;
  color: #70d7ff;
  font-size: 8px;
  font-style: normal;
}
.window-search {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(143, 158, 199, .15);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  color: #69738a;
  font-size: 8px;
}
.window-user { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #171f43; color: #a9befe; font-size: 8px; font-weight: 800; }
.window-body { min-height: 456px; display: grid; grid-template-columns: 125px minmax(0, 1fr); }
.preview-nav { padding: 15px 8px; border-right: 1px solid rgba(146, 159, 200, .11); background: #090e20; }
.preview-nav-label { display: block; margin: 0 7px 7px; color: #515d79; font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.preview-nav b {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0;
  padding: 0 7px;
  border-radius: 6px;
  color: #727d97;
  font-size: 7px;
  font-weight: 650;
}
.preview-nav b.active { background: linear-gradient(90deg, rgba(17, 122, 190, .27), rgba(53, 80, 165, .13)); color: #d9e8ff; }
.preview-nav b i { width: 11px; color: #4dbbe9; font-size: 8px; font-style: normal; }
.preview-nav b small { margin-left: auto; color: #71809f; font-size: 6px; }
.preview-nav .channels-label { margin-top: 22px; }
.preview-nav b .dot { width: 5px; height: 5px; border-radius: 50%; }
.dot.cyan { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.dot.violet { background: var(--violet); }
.dot.red { background: var(--red); }
.preview-main { min-width: 0; padding: 10px; background: linear-gradient(145deg, #111831, #0d1229); }
.preview-hero {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(80, 145, 205, .22);
  border-radius: 9px;
  background: linear-gradient(105deg, #07304d, #16255a 55%, #292451);
}
.preview-hero span small, .preview-hero span strong, .preview-hero div small, .preview-hero div b, .preview-hero div em { display: block; }
.preview-hero span small { color: #53c5ef; font-size: 6px; font-weight: 800; letter-spacing: .11em; }
.preview-hero span strong { margin-top: 7px; font-size: 13px; letter-spacing: -.03em; }
.preview-hero div { min-width: 103px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.preview-hero div small { color: #8598bd; font-size: 6px; }
.preview-hero div b { margin-top: 2px; font-size: 16px; }
.preview-hero div em { color: #8c9aba; font-size: 6px; font-style: normal; }
.preview-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 7px 0; }
.preview-metrics > span { min-height: 52px; padding: 8px; border: 1px solid rgba(142, 156, 204, .14); border-radius: 7px; background: rgba(255, 255, 255, .025); }
.preview-metrics > span.selected { border-color: rgba(41, 195, 255, .45); box-shadow: inset 2px 0 0 var(--cyan); }
.preview-metrics small, .preview-metrics strong, .preview-metrics em { display: block; }
.preview-metrics small { overflow: hidden; color: #71809d; font-size: 5.5px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.preview-metrics strong { margin-top: 5px; font-size: 13px; }
.preview-metrics em { color: #5e6983; font-size: 5px; font-style: normal; }
.preview-workspace {
  min-height: 291px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  overflow: hidden;
  border: 1px solid rgba(143, 158, 203, .15);
  border-radius: 8px;
  background: #0c1126;
}
.preview-list { border-right: 1px solid rgba(143, 158, 203, .12); }
.list-head { height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #5f6d8b; font-size: 5.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.preview-list article {
  min-height: 73px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-top: 1px solid rgba(143, 158, 203, .1);
}
.preview-list article.active { background: rgba(31, 113, 176, .1); box-shadow: inset 2px 0 0 var(--cyan); }
.preview-list article > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #172443; color: #8fcdf1; font-size: 6px; font-style: normal; font-weight: 800; }
.preview-list article span { min-width: 0; }
.preview-list article span strong, .preview-list article span small, .preview-list article code, .preview-list article > b small { display: block; }
.preview-list article span strong { font-size: 7px; }
.preview-list article span small { overflow: hidden; margin-top: 3px; color: #77849d; font-size: 5.5px; text-overflow: ellipsis; white-space: nowrap; }
.preview-list article code { margin-top: 3px; color: #536079; font-size: 5px; }
.preview-list article > b { color: #a9b7cf; font-size: 6px; text-align: right; }
.preview-list article > b small { margin-top: 4px; color: #59657e; font-size: 5px; font-weight: 500; }
.preview-detail { padding: 16px; }
.preview-detail > small { color: #44b8e8; font-size: 5.5px; font-weight: 800; letter-spacing: .1em; }
.preview-detail h3 { margin: 8px 0 3px; font-size: 15px; letter-spacing: -.04em; }
.preview-detail > p { margin: 0; color: #73819a; font-size: 6px; }
.detail-grid { display: grid; grid-template-columns: 1.15fr .7fr .85fr; margin-top: 14px; overflow: hidden; border: 1px solid rgba(142, 157, 202, .15); border-radius: 7px; }
.detail-grid > span { min-height: 48px; display: grid; align-content: center; gap: 4px; padding: 0 9px; border-right: 1px solid rgba(142, 157, 202, .13); }
.detail-grid > span:last-child { border: 0; }
.detail-grid small { color: #64718d; font-size: 5px; text-transform: uppercase; }
.detail-grid b { overflow: hidden; font-size: 6.5px; text-overflow: ellipsis; }
.detail-grid .offer { background: #101f3f; }
.detail-grid .offer b { color: #fff; font-size: 10px; }
.email-preview { margin-top: 12px; padding: 12px; border: 1px solid rgba(54, 174, 229, .2); border-left: 2px solid var(--cyan); border-radius: 7px; background: rgba(27, 75, 121, .09); }
.email-preview small, .email-preview b { display: block; }
.email-preview small { color: #6d7b97; font-size: 5px; font-weight: 800; }
.email-preview b { margin-top: 7px; color: #b8c8df; font-size: 6.5px; }
.email-preview p { margin: 8px 0 0; color: #71809b; font-size: 5.5px; line-height: 1.5; }
.floating-card {
  position: absolute;
  z-index: 4;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(111, 144, 219, .32);
  border-radius: 11px;
  background: rgba(17, 25, 55, .9);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
  backdrop-filter: blur(15px);
}
.floating-card small, .floating-card b { display: block; }
.floating-card small { color: #67738e; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.floating-card b { margin-top: 5px; font-size: 9px; }
.floating-card > strong { margin-left: auto; color: var(--green); font-size: 15px; }
.floating-card > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(49, 212, 154, .08); }
.float-one { left: -31px; bottom: 58px; width: 184px; }
.float-two { right: -26px; top: 68px; width: 174px; }
.float-two > strong { color: var(--cyan); font-size: 13px; }

.problem-band { padding: 108px 0; border-block: 1px solid var(--line); background: linear-gradient(105deg, rgba(10, 20, 48, .85), rgba(25, 22, 67, .62)); }
.problem-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; align-items: center; }
.problem-grid h2 { margin: 18px 0 0; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; letter-spacing: -.052em; }
.problem-copy { padding-left: 52px; border-left: 1px solid rgba(108, 137, 208, .23); }
.problem-copy p { margin: 0; color: #aab3c7; font-size: 16px; line-height: 1.75; }
.problem-copy p + p { margin-top: 20px; }

.channels, .feature-section, .roadmap { padding-top: 124px; padding-bottom: 124px; }
.section-heading { max-width: 780px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .roadmap h2 {
  margin: 16px 0 0;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.052em;
}
.section-heading > p { max-width: 650px; margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.channel-card {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(22, 29, 61, .92), rgba(11, 16, 38, .9));
}
.channel-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; }
.channel-card.service::before { background: var(--cyan); }
.channel-card.auction::before { background: var(--violet); }
.channel-card.street::before { background: var(--red); }
.channel-number { position: absolute; right: 27px; top: 24px; color: rgba(118, 132, 171, .22); font-size: 48px; font-weight: 850; letter-spacing: -.06em; }
.channel-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(99, 154, 231, .3); border-radius: 14px; background: rgba(43, 87, 156, .14); color: #6ecfff; font-size: 23px; }
.auction .channel-icon { border-color: rgba(128, 105, 239, .34); background: rgba(89, 62, 175, .15); color: #a69aff; }
.street .channel-icon { border-color: rgba(242, 67, 101, .3); background: rgba(171, 46, 79, .14); color: #ff7791; }
.channel-card h3 { margin: 27px 0 14px; font-size: 24px; letter-spacing: -.035em; }
.channel-card p { min-height: 92px; margin: 0; color: #9ba6bc; font-size: 14px; line-height: 1.65; }
.channel-card ul { display: grid; gap: 10px; margin: 23px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.channel-card li { color: #c4ccdc; font-size: 12px; }
.channel-card li::before { content: "✓"; margin-right: 9px; color: #54d1ff; font-weight: 900; }
.auction li::before { color: #9a8aff; }
.street li::before { color: #ff5f7d; }

.workflow-section { padding: 116px 0 126px; border-block: 1px solid var(--line); background: radial-gradient(circle at center top, rgba(63, 82, 183, .14), transparent 34rem), #090d20; }
.workflow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 64px 0 0; padding: 0; list-style: none; }
.workflow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 51px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet), var(--red)); opacity: .65; }
.workflow li { position: relative; z-index: 1; min-width: 0; display: grid; justify-items: center; text-align: center; }
.workflow li > span { color: #5b6784; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700; }
.workflow li > i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 15px 0 18px;
  border: 1px solid rgba(98, 139, 222, .38);
  border-radius: 50%;
  background: #101730;
  box-shadow: 0 0 0 8px #090d20;
  color: #75d8ff;
  font-size: 18px;
  font-style: normal;
}
.workflow li:nth-child(n+3) > i { color: #9b91ff; }
.workflow li:nth-child(n+5) > i { color: #ff6482; }
.workflow strong { font-size: 14px; }
.workflow small { max-width: 135px; margin-top: 7px; color: #737f99; font-size: 10px; line-height: 1.45; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
.feature-card {
  min-height: 310px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 28, 58, .86), rgba(11, 16, 37, .92));
}
.feature-card.wide { grid-column: 1 / -1; min-height: 290px; }
.feature-label { color: #60cdf9; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.feature-card h3 { margin: 15px 0 12px; font-size: 27px; letter-spacing: -.04em; }
.feature-card > p, .brand-card p { max-width: 670px; margin: 0; color: #98a4bb; font-size: 14px; line-height: 1.7; }
.mini-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 30px; }
.mini-counters span { min-height: 86px; display: grid; align-content: center; padding: 0 17px; border: 1px solid rgba(113, 139, 207, .17); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.mini-counters span:first-child { border-color: rgba(48, 190, 246, .4); box-shadow: inset 3px 0 0 var(--cyan); }
.mini-counters b { font-size: 26px; }
.mini-counters small { margin-top: 3px; color: #78849c; font-size: 10px; text-transform: uppercase; }
.search-demo {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 28px;
  padding: 0 15px;
  border: 1px solid rgba(71, 159, 221, .27);
  border-radius: 11px;
  background: rgba(7, 17, 38, .65);
  color: #59c8f5;
}
.search-demo span { min-width: 0; overflow: hidden; color: #c9d8eb; font-family: ui-monospace, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.search-demo b { margin-left: auto; color: #667491; font-size: 9px; text-transform: uppercase; }
.status-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.status-pills span { padding: 9px 11px; border: 1px solid rgba(110, 137, 204, .2); border-radius: 30px; background: rgba(255, 255, 255, .025); color: #9aa8c1; font-size: 10px; font-weight: 700; }
.status-pills span:nth-child(2) { border-color: rgba(75, 171, 228, .28); color: #72c7f2; }
.status-pills span:nth-child(3) { border-color: rgba(60, 194, 145, .28); color: #67d3a8; }
.brand-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.theme-stack { width: 330px; display: grid; gap: 8px; }
.theme { min-height: 54px; display: flex; align-items: center; gap: 13px; padding: 0 15px; border: 1px solid rgba(111, 135, 202, .16); border-radius: 11px; background: rgba(255, 255, 255, .022); color: #9eabc2; font-size: 11px; }
.theme i { width: 38px; height: 7px; border-radius: 5px; background: linear-gradient(90deg, var(--cyan) 33%, var(--violet) 33% 66%, var(--red) 66%); }
.theme.neutral i { filter: grayscale(1); opacity: .55; }
.theme.future i { background: linear-gradient(90deg, #f1a51e, #e95836, #9d3fd5); opacity: .6; }

.roadmap { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.roadmap-copy > p { margin: 22px 0 0; color: #98a4bb; font-size: 15px; line-height: 1.72; }
.roadmap-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roadmap-columns article { min-height: 385px; padding: 29px; border: 1px solid rgba(79, 173, 221, .25); border-radius: 18px; background: linear-gradient(145deg, rgba(16, 47, 77, .55), rgba(12, 18, 42, .9)); }
.roadmap-columns article.future-list { border-color: rgba(125, 105, 231, .22); background: linear-gradient(145deg, rgba(50, 37, 103, .45), rgba(12, 18, 42, .9)); }
.roadmap-columns article > span { color: #60cef7; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.roadmap-columns .future-list > span { color: #9d91f7; }
.roadmap-columns ul { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.roadmap-columns li { display: flex; align-items: center; gap: 10px; color: #abb6ca; font-size: 12px; line-height: 1.4; }
.roadmap-columns li b { width: 20px; height: 20px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(53, 199, 154, .1); color: var(--green); font-size: 9px; }
.future-list li b { background: rgba(125, 108, 255, .1); color: #9c90ff; }

.closing { padding-bottom: 120px; }
.closing-inner {
  min-height: 255px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 50px 58px;
  overflow: hidden;
  border: 1px solid rgba(78, 125, 221, .3);
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 10%, rgba(95, 68, 193, .45), transparent 19rem),
    linear-gradient(110deg, #0b2948, #172258 56%, #302050);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .27);
}
.closing h2 { margin: 14px 0 8px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.052em; }
.closing p { margin: 0; color: #a9b6d0; font-size: 14px; }

.site-footer {
  min-height: 122px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0; color: #65708a; font-size: 11px; text-align: center; }
.site-footer > span { justify-self: end; color: #59647c; font-size: 10px; }

@media (max-width: 1180px) {
  .site-header { padding-inline: 24px; }
  .hero { grid-template-columns: 1fr; padding-top: 90px; }
  .hero-copy { max-width: 800px; }
  .product-stage { width: min(820px, 100%); margin: 0 auto; }
  .product-window { width: 100%; transform: none; }
  .float-one { left: -14px; }
  .float-two { right: -14px; }
  .roadmap { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 68px;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0d1228;
    box-shadow: var(--shadow);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 14px; border-radius: 8px; }
  .site-header nav a:hover { background: rgba(255, 255, 255, .04); }
  .site-header nav a::after { display: none; }
  .header-cta { display: none; }
  .menu-toggle { width: 42px; height: 42px; display: grid; place-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); }
  .menu-toggle > span { width: 17px; height: 2px; border-radius: 2px; background: #a8b5cc; }
  .problem-grid { grid-template-columns: 1fr; gap: 45px; }
  .problem-copy { padding: 0; border: 0; }
  .channel-grid { grid-template-columns: 1fr; }
  .channel-card { min-height: 0; }
  .channel-card p { min-height: 0; }
  .workflow { grid-template-columns: repeat(3, 1fr); gap: 40px 0; }
  .workflow::before { display: none; }
  .brand-card { grid-template-columns: 1fr; }
  .theme-stack { width: 100%; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1220px); }
  .site-header { min-height: 68px; padding-inline: 14px; }
  .wordmark-icon { width: 38px; height: 38px; }
  .hero { min-height: 0; gap: 58px; padding-top: 72px; padding-bottom: 78px; }
  .hero h1 { font-size: 45px; }
  .hero-copy > p { font-size: 15px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { width: 100%; grid-template-columns: repeat(3, 1fr); }
  .hero-proof > span { min-width: 0; margin-right: 10px; padding-right: 10px; }
  .hero-proof strong { font-size: 19px; }
  .hero-proof small { font-size: 8px; }
  .product-stage { overflow: hidden; border-radius: 14px; }
  .product-window { width: 760px; transform: scale(.56); transform-origin: top left; }
  .product-stage { height: 305px; }
  .floating-card { display: none; }
  .problem-band, .workflow-section { padding: 78px 0; }
  .channels, .feature-section, .roadmap { padding-top: 82px; padding-bottom: 82px; }
  .problem-grid h2, .section-heading h2, .roadmap h2 { font-size: 37px; }
  .channel-card, .feature-card { padding: 25px; border-radius: 18px; }
  .workflow { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card.wide { grid-column: auto; }
  .mini-counters { grid-template-columns: 1fr 1fr; }
  .roadmap-columns { grid-template-columns: 1fr; }
  .roadmap-columns article { min-height: 0; }
  .closing { padding-bottom: 80px; }
  .closing-inner { align-items: flex-start; flex-direction: column; padding: 36px 26px; }
  .closing .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; text-align: left; }
  .site-footer p { text-align: left; }
  .site-footer > span { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
.site-footer nav { display: flex; gap: 16px; }
.site-footer nav a { color: #a9b8d5; text-decoration: none; font-size: 12px; }
.site-footer nav a:hover { color: #7edfff; }
.legal-page { min-height: 100vh; padding: 70px 24px; background: #080d1d; color: #eef4ff; }
.legal-card { width: min(820px, 100%); margin: auto; padding: 36px; border: 1px solid rgba(126,161,220,.2); border-radius: 22px; background: #111933; }
.legal-card h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -.04em; }
.legal-card h2 { margin-top: 28px; color: #7edfff; }
.legal-card p, .legal-card li { color: #b7c2d8; line-height: 1.7; }
.legal-card a { color: #7edfff; }