/* Shared foundation, navigation and content components */
:root {
  --bg: #080a14;
  --bg2: #0d1020;
  --panel: #111425;
  --panel2: #171a2d;
  --line: rgba(183, 184, 234, 0.115);
  --line2: rgba(183, 184, 234, 0.18);
  --text: #f7f7ff;
  --muted: #9195b1;
  --dim: #6e7391;
  --purple: #8e76ff;
  --purple2: #b09cff;
  --teal: #8ce9d2;
  --pink: #e1a8ff;
  --max: 1240px;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    15px/1.65 Inter,
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft Yahei",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 35% 32% at 50% -5%,
      rgba(91, 76, 170, 0.1),
      transparent 75%
    ),
    linear-gradient(180deg, #090b16 0%, #090b14 100%);
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button,
input,
select {
  outline-color: var(--purple);
}
::selection {
  background: #907bff;
  color: #fff;
}
svg {
  flex-shrink: 0;
}
#particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.58;
}
.ambient {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  z-index: -2;
  opacity: 0.48;
  animation: drift 20s ease-in-out infinite alternate;
}
.ambient-one {
  width: 570px;
  height: 540px;
  top: -230px;
  right: -220px;
  background: rgba(95, 67, 184, 0.22);
}
.ambient-two {
  width: 550px;
  height: 480px;
  bottom: -250px;
  left: -260px;
  background: rgba(44, 75, 140, 0.11);
  animation-delay: -8s;
}
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  z-index: 12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
#progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #7461ff, #a9e9ff);
  z-index: 99;
  box-shadow: 0 0 14px #8c79ff;
}
.container {
  width: min(calc(100% - 88px), var(--max));
  margin: auto;
}
.page-enter {
  animation: pageIn 0.65s var(--easing) both;
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--easing),
    transform 0.9s var(--easing);
  transition-delay: var(--delay, 0ms);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.gradient-text {
  background: linear-gradient(
    105deg,
    #ebe7ff 0%,
    #aa96ff 32%,
    #90b9ff 65%,
    #b8a4ff 100%
  );
  background-size: 200% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.23em;
  color: #b0a4ec;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 11px;
}
.eyebrow-line {
  height: 1px;
  width: 25px;
  background: linear-gradient(90deg, #9c84ff, transparent);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  border: 1px solid transparent;
  padding: 15px 24px;
  min-height: 53px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  transition:
    transform 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.23) 50%,
    transparent 78%
  );
  transform: translateX(-150%);
  transition: transform 0.7s;
}
.btn:hover:before {
  transform: translateX(150%);
}
.btn:hover {
  transform: translateY(-3px);
}
.btn svg {
  transition: transform 0.3s;
}
.btn:hover svg {
  transform: translateX(4px);
}
.btn-primary {
  background: linear-gradient(125deg, #917aff, #6d65e4);
  box-shadow: 0 9px 36px rgba(106, 86, 239, 0.22);
  color: #fff;
}
.btn-primary:hover {
  box-shadow: 0 14px 48px rgba(129, 109, 255, 0.36);
}
.btn-secondary {
  border-color: #343450;
  background: rgba(20, 23, 42, 0.72);
  color: #f3f1ff;
}
.btn-secondary:hover {
  border-color: #7067a4;
  background: #1c1b35;
}
.btn-text {
  padding: 13px 0;
  background: transparent;
  color: #b9afff;
  min-height: 40px;
}
.btn-light {
  color: #151127;
  background: #fff;
  box-shadow: 0 16px 35px rgba(15, 4, 60, 0.18);
}
.btn-sm {
  min-height: 37px;
  padding: 9px 15px;
  font-size: 12px;
  gap: 8px;
  border-radius: 8px;
}
.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid transparent;
  transition:
    background 0.35s,
    border-color 0.35s,
    backdrop-filter 0.35s;
}
.site-header.scrolled {
  background: rgba(9, 10, 22, 0.82);
  backdrop-filter: blur(20px);
  border-color: var(--line);
}
.nav-wrap {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(145deg, #ada0ff, #6d65ec);
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(121, 91, 251, 0.18);
  transform: rotate(-7deg);
}
.brand-icon:after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 9px;
}
.brand-gem {
  width: 18px;
  height: 18px;
  background: #fff;
  clip-path: polygon(
    50% 0,
    64% 35%,
    100% 50%,
    64% 65%,
    50% 100%,
    36% 65%,
    0 50%,
    36% 35%
  );
  filter: drop-shadow(0 0 4px #fff);
}
.brand-text {
  font-size: 16px;
  letter-spacing: -0.045em;
  font-weight: 900;
  line-height: 1.02;
  color: white;
}
.brand-text > span {
  color: #a799ff;
}
.brand-text small {
  display: block;
  font-size: 6.5px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: #8d8da6;
  margin-top: 5px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: auto;
  margin-right: auto;
}
.nav-links a {
  color: #a6a7bb;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s;
  position: relative;
}
.nav-links a:after {
  position: absolute;
  content: "";
  left: 0;
  right: 100%;
  height: 2px;
  bottom: -11px;
  background: #a89aff;
  transition: right 0.3s;
}
.nav-links a.active,
.nav-links a:hover {
  color: white;
}
.nav-links a.active:after,
.nav-links a:hover:after {
  right: 0;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 23px;
}
.header-status {
  font-size: 10px;
  color: #83869f;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.header-status i,
.request-status i,
.terminal-foot i,
.code-window-footer i,
.model-bottom .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8ee9c9;
  box-shadow: 0 0 13px rgba(104, 240, 177, 0.7);
}
.header-status i {
  animation: pulse 2s infinite;
}
.nav-login {
  font-size: 12px;
  font-weight: 650;
  color: #e0def3;
}
.nav-login:hover {
  color: #aa99ff;
}
.menu-toggle {
  display: none;
  border: 1px solid var(--line2);
  color: white;
  background: #16162a;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
}
.mobile-menu {
  display: none;
}
.hero {
  min-height: 810px;
  padding-top: 150px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  position: relative;
}
.hero:before {
  content: "";
  position: absolute;
  left: 49%;
  top: 13%;
  width: 1px;
  height: 60%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(112, 104, 212, 0.08),
    transparent
  );
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 4;
  padding-bottom: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(143, 134, 227, 0.26);
  border-radius: 30px;
  background: rgba(117, 98, 215, 0.08);
  color: #c0b5ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 8px 11px;
  margin-bottom: 28px;
}
.pill-dot {
  width: 6px;
  height: 6px;
  background: #ac99ff;
  border-radius: 50%;
  box-shadow: 0 0 12px #ab91ff;
  animation: pulse 2.4s infinite;
}
.pill-arrow {
  color: #b6a6ff;
  font-size: 15px;
  margin-left: 10px;
}
.hero-title {
  font-size: clamp(43px, 4.35vw, 73px);
  line-height: 1.27;
  letter-spacing: -0.075em;
  margin: 0 0 23px;
  font-weight: 900;
  white-space: nowrap;
}
.text-caret {
  display: inline-block;
  vertical-align: middle;
  background: #b6a5ff;
  height: 0.72em;
  width: 3px;
  animation: blink 1s step-end infinite;
  margin-left: 8px;
  box-shadow: 0 0 15px rgba(158, 130, 255, 0.6);
}
.hero-lead {
  font-size: 16px;
  color: #9398b5;
  line-height: 2.05;
  margin: 0 0 34px;
  letter-spacing: 0.006em;
}
.type-wrap {
  color: #e0d9ff;
}
.hero-buttons {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 68px;
}
.avatar-stack {
  display: flex;
  padding-left: 5px;
}
.avatar-stack span {
  width: 33px;
  height: 33px;
  border: 3px solid #0b0d1b;
  border-radius: 50%;
  margin-left: -5px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  background: #2b2d52;
  color: #bbb2ff;
}
.avatar-stack span:nth-child(2) {
  background: #3b2d40;
  color: #e8ae9f;
}
.avatar-stack span:nth-child(3) {
  background: #263954;
  color: #9ebaff;
}
.avatar-stack span:nth-child(4) {
  background: #24305c;
  color: #7faaff;
}
.hero-trust strong {
  font-weight: 700;
  font-size: 11px;
  display: block;
  color: #d7d6e7;
}
.hero-trust small {
  font-size: 10px;
  color: #797f9d;
}
.hero-visual {
  height: 600px;
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.hero-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
}
.halo-one {
  width: 330px;
  height: 330px;
  background: rgba(104, 83, 245, 0.2);
  left: 26%;
  top: 23%;
  animation: drift 10s ease-in-out infinite alternate;
}
.halo-two {
  width: 235px;
  height: 250px;
  background: rgba(47, 114, 208, 0.13);
  left: 50%;
  top: 36%;
  animation: drift 8s ease-in-out infinite alternate-reverse;
}
.orb-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) rotate(-20deg);
  border: 1px solid rgba(140, 131, 219, 0.2);
  border-radius: 50%;
  pointer-events: none;
}
.orb-ring-outer {
  width: 525px;
  height: 525px;
  border-style: dashed;
  animation: orbitSlow 75s linear infinite;
}
.orb-ring-outer:after,
.orb-ring-inner:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ae9dff;
  left: 8%;
  top: 25%;
  box-shadow: 0 0 19px 5px rgba(166, 143, 255, 0.35);
}
.orb-ring-inner {
  width: 375px;
  height: 375px;
  border-color: rgba(153, 133, 237, 0.27);
  animation: orbitSlow 44s linear infinite reverse;
}
.orb-ring-inner:before {
  left: 84%;
  top: 15%;
  width: 6px;
  height: 6px;
  background: #75dfd2;
}
.core-orbit {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 242px;
  width: 242px;
  border: 1px solid rgba(168, 146, 255, 0.25);
  border-radius: 49% 51% 48% 52%;
  box-shadow:
    inset 0 0 75px rgba(111, 82, 227, 0.14),
    0 0 85px rgba(128, 91, 249, 0.18),
    0 0 0 14px rgba(120, 116, 229, 0.045);
  background: radial-gradient(circle at 34% 30%, #3d3774, #1c1c41 57%, #10132c);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.core-orbit:after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(197, 189, 255, 0.08);
  border-radius: 50%;
}
.core-circles {
  position: absolute;
  inset: -26px;
  border: 1px solid rgba(185, 167, 255, 0.12);
  border-radius: 50%;
  transform: rotateX(60deg) rotate(-30deg);
  animation: orbitSlow 12s linear infinite;
}
.core-mark {
  font-size: 73px;
  line-height: 1;
  background: linear-gradient(160deg, #f3ebff, #9775ff);
  color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 25px rgba(170, 123, 255, 0.65));
  animation: corePulse 4s infinite;
}
.core-orbit > span {
  font-size: 10px;
  font-family: "DM Mono", monospace;
  line-height: 1.7;
  letter-spacing: 0.23em;
  text-align: center;
  color: #bcb2eb;
  margin-top: 16px;
}
.orb-card {
  position: absolute;
  background: rgba(26, 28, 50, 0.82);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(146, 142, 214, 0.26);
  border-radius: 11px;
  z-index: 3;
  padding: 10px 13px;
  color: #f4f2ff;
  font-size: 12px;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 13px 40px rgba(0, 0, 0, 0.25);
}
.orb-card > span {
  font-size: 22px;
  font-weight: 900;
}
.orb-card small {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7dcfb9;
  margin-left: 5px;
}
.orb-card-a {
  top: 98px;
  left: 5%;
}
.orb-card-b {
  right: 0%;
  top: 180px;
}
.orb-card-c {
  left: 0%;
  bottom: 120px;
}
.float-slow {
  animation: floatA 7s ease-in-out infinite;
}
.float-mid {
  animation: floatA 5.5s ease-in-out infinite -2s;
}
.float-fast {
  animation: floatA 6s ease-in-out infinite -3s;
}
.terminal-card {
  position: absolute;
  bottom: -4px;
  right: 3%;
  width: 370px;
  background: rgba(13, 16, 31, 0.9);
  border: 1px solid #363552;
  border-radius: 13px;
  backdrop-filter: blur(22px);
  box-shadow:
    0 22px 72px rgba(0, 0, 0, 0.45),
    0 0 38px rgba(99, 77, 228, 0.08);
  z-index: 5;
  overflow: hidden;
  transform: rotate(-2deg);
  animation: terminalEnter 1.5s var(--easing) both;
}
.terminal-head {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  color: #a5a7bf;
  font-size: 10px;
  font-family: "DM Mono", monospace;
}
.terminal-lights,
.code-window-lights {
  display: flex;
  gap: 5px;
}
.terminal-lights i,
.code-window-lights i {
  height: 7px;
  width: 7px;
  background: #ef8c98;
  border-radius: 50%;
}
.terminal-lights i:nth-child(2),
.code-window-lights i:nth-child(2) {
  background: #ecc47e;
}
.terminal-lights i:nth-child(3),
.code-window-lights i:nth-child(3) {
  background: #83cfb3;
}
.request-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8ddac5;
  font-size: 8px;
}
.request-status i {
  width: 5px;
  height: 5px;
}
.terminal-code {
  padding: 18px 13px 16px;
  color: #c7cae2;
  font:
    11px/2.2 "DM Mono",
    monospace;
  white-space: nowrap;
}
.terminal-code b {
  font-weight: 400;
  color: #585c7b;
  margin-right: 14px;
}
.code-purple {
  color: #b99afe;
}
.code-green {
  color: #89dcc8;
}
.code-muted {
  color: #747a9b;
}
.terminal-cursor {
  animation: blink 1s step-end infinite;
  color: #aa94ff;
}
.terminal-foot {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 9px 15px;
  font-size: 9px;
  color: #8891aa;
}
.terminal-foot > span {
  display: flex;
  gap: 7px;
  align-items: center;
}
.terminal-foot > span:first-child {
  color: #85d8b5;
}
.hero-bottom-label {
  position: absolute;
  bottom: 25px;
  left: 0;
  font-size: 9px;
  letter-spacing: 0.2em;
  font-weight: 750;
  color: #6d708f;
}
.hero-bottom-label span {
  font-size: 19px;
  margin-left: 16px;
  color: #a99bff;
}
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(14, 16, 30, 0.63);
}
.trust-strip .container {
  display: flex;
  align-items: center;
  gap: 65px;
  min-height: 115px;
}
.trust-strip p {
  color: #7b819f;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.logos {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.provider-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #777b94;
  font-size: 15px;
  letter-spacing: -0.03em;
  font-weight: 800;
  transition:
    color 0.25s,
    transform 0.25s;
}
.provider-logo:hover {
  color: #d2d0ec;
  transform: translateY(-2px);
}
.provider-logo b {
  font-size: 25px;
  font-weight: 500;
  color: #8c8fa9;
}
.provider-logo .gemini {
  color: #8787d6;
}
.provider-logo .deepseek {
  color: #7f89bb;
}
.provider-logo .qwen {
  color: #9481bc;
}
.provider-logo .moonshot {
  color: #a0a2c5;
}
.section {
  padding-top: 130px;
  padding-bottom: 130px;
}
.section-header {
  max-width: 680px;
  margin-bottom: 53px;
}
.section-header h2 {
  font-size: clamp(36px, 4vw, 55px);
  line-height: 1.34;
  letter-spacing: -0.07em;
  font-weight: 850;
  margin: 21px 0;
}
.section-header h2 em {
  font-style: normal;
  color: #a998ff;
}
.section-header > p {
  color: #8b90ae;
  font-size: 14px;
  line-height: 1.95;
  margin: 0;
}
.section-models {
  position: relative;
}
.section-models .section-head-action {
  position: absolute;
  right: 0;
  top: 239px;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}
.model-card {
  position: relative;
  min-height: 310px;
  border: 1px solid var(--line);
  background: linear-gradient(
    155deg,
    rgba(26, 29, 52, 0.72),
    rgba(13, 16, 31, 0.83)
  );
  border-radius: 17px;
  padding: 24px 22px 18px;
  overflow: hidden;
  transition:
    border-color 0.3s,
    box-shadow 0.4s,
    transform 0.3s;
  will-change: transform;
}
.model-card:before,
.feature-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 15%),
    rgba(160, 133, 255, 0.14),
    transparent 63%
  );
  transition: opacity 0.35s;
}
.model-card:hover:before,
.feature-card:hover:before {
  opacity: 1;
}
.model-card:hover {
  border-color: rgba(155, 134, 255, 0.4);
  box-shadow: 0 19px 40px rgba(0, 0, 0, 0.26);
}
.model-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}
.model-symbol {
  height: 49px;
  width: 49px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-color), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--brand-color), transparent 65%);
  box-shadow: 0 0 35px color-mix(in srgb, var(--brand-color), transparent 91%);
  color: var(--brand-color);
  border-radius: 14px;
  font-size: 26px;
  font-weight: 850;
}
.favorite {
  border: 0;
  background: transparent;
  color: #636782;
  display: grid;
  place-items: center;
  height: 28px;
  width: 28px;
  transition:
    color 0.25s,
    transform 0.25s;
}
.favorite:hover {
  color: #e7a4d8;
  transform: scale(1.12);
}
.favorite.active {
  color: #ed9bc8;
}
.favorite.active svg {
  fill: rgba(237, 155, 200, 0.2);
}
.model-provider {
  color: #8589a8;
  font-size: 11px;
  margin-bottom: 3px;
}
.model-card h3 {
  font-size: 18px;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.model-card > p {
  font-size: 11.5px;
  line-height: 1.9;
  color: #858ba7;
  height: 46px;
  margin: 0 0 16px;
}
.tag-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tag-row > span {
  border: 1px solid rgba(145, 146, 206, 0.14);
  background: rgba(112, 109, 166, 0.09);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 9px;
  color: #aaaac9;
}
.model-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 15px;
}
.model-bottom > span {
  font-size: 10px;
  color: #777e9c;
  display: flex;
  gap: 8px;
  align-items: center;
}
.model-bottom .dot {
  width: 5px;
  height: 5px;
}
.model-bottom > a {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #373854;
  background: #22243b;
  border-radius: 7px;
  color: #b4acff;
  transition:
    background 0.2s,
    transform 0.2s;
}
.model-bottom > a:hover {
  background: #35335b;
  transform: translate(2px, -2px);
}
.models-note {
  color: #757a99;
  font-size: 10px;
  margin-top: 23px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.models-note span {
  color: #aa96ff;
}
.section-features {
  background: linear-gradient(
    180deg,
    rgba(16, 18, 34, 0.6),
    rgba(9, 11, 21, 0.64)
  );
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.feature-card {
  position: relative;
  min-height: 325px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(140deg, #15182a, #0f1221);
  padding: 31px 36px;
  overflow: hidden;
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.feature-card:hover {
  border-color: rgba(148, 136, 228, 0.36);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.feature-large {
  grid-column: span 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 380px;
  background:
    radial-gradient(
      ellipse at 85% 25%,
      rgba(72, 58, 147, 0.2),
      transparent 57%
    ),
    #15182b;
}
.feature-index {
  display: block;
  color: #777eaa;
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 0.1em;
  margin-bottom: 28px;
}
.feature-icon {
  height: 48px;
  width: 48px;
  background: rgba(151, 116, 255, 0.13);
  color: #b4a1ff;
  border: 1px solid rgba(139, 108, 255, 0.19);
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 18px;
}
.feature-icon.icon-blue {
  background: rgba(88, 122, 255, 0.12);
  color: #9cb2ff;
}
.feature-icon.icon-pink {
  background: rgba(196, 123, 255, 0.12);
  color: #dba6ff;
}
.feature-icon.icon-teal {
  background: rgba(91, 215, 196, 0.1);
  color: #93e2d1;
}
.feature-card h3 {
  font-size: 26px;
  line-height: 1.47;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.feature-card p {
  color: #848aa7;
  font-size: 12px;
  max-width: 380px;
  line-height: 1.9;
  margin: 0;
}
.feature-large h3 {
  font-size: 33px;
}
.feature-diagram {
  width: 420px;
  height: 295px;
  position: relative;
  flex-shrink: 0;
}
.diagram-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 112px;
  width: 112px;
  border-radius: 50%;
  border: 1px solid #8b7ed4;
  background: radial-gradient(circle, #3b316c, #181c38 72%);
  box-shadow: 0 0 75px rgba(120, 99, 236, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #d3bfff;
  font-size: 46px;
  z-index: 2;
}
.diagram-center span {
  font-size: 7px;
  letter-spacing: 0.08em;
  color: #b1a4de;
}
.diagram-line {
  position: absolute;
  height: 1px;
  width: 75%;
  top: 50%;
  left: 12%;
  background: linear-gradient(90deg, transparent, #7770b3, transparent);
}
.diagram-line.d2 {
  transform: rotate(50deg);
}
.diagram-line.d3 {
  transform: rotate(-50deg);
}
.diagram-node {
  height: 56px;
  width: 56px;
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(141, 144, 221, 0.28);
  border-radius: 15px;
  background: #232541;
  color: #b7a9ff;
  font-size: 27px;
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  animation: floatA 5s ease-in-out infinite;
}
.dn1 {
  top: 11%;
  left: 20%;
}
.dn2 {
  top: 15%;
  right: 16%;
  animation-delay: -2s;
  color: #e9b7a1;
}
.dn3 {
  bottom: 7%;
  left: 18%;
  animation-delay: -1s;
  color: #98b7ff;
}
.dn4 {
  bottom: 9%;
  right: 12%;
  animation-delay: -3s;
  color: #87acff;
}
.mini-code {
  position: absolute;
  bottom: 30px;
  left: 36px;
  right: 36px;
  background: #101324;
  border: 1px solid #252844;
  padding: 16px;
  color: #d0d0e5;
  font:
    12px/1.9 "DM Mono",
    monospace;
  border-radius: 9px;
}
.feature-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.feature-pills span {
  font:
    9px "DM Mono",
    monospace;
  letter-spacing: 0.07em;
  color: #c7b0ea;
  padding: 8px 10px;
  border-radius: 20px;
  border: 1px solid #504569;
  background: #201b38;
}
.feature-wide {
  grid-column: span 2;
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feature-wide .feature-index {
  margin-bottom: 17px;
}
.feature-data {
  width: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #777eaa;
  font:
    9px "DM Mono",
    monospace;
  letter-spacing: 0.1em;
}
.radar {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1px solid #343c64;
  position: relative;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0,
      transparent 31px,
      rgba(105, 123, 193, 0.2) 32px
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      #343c64 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      0deg,
      transparent calc(50% - 0.5px),
      #343c64 50%,
      transparent calc(50% + 0.5px)
    );
}
.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 300deg,
    rgba(91, 214, 186, 0.24) 360deg
  );
  animation: orbitSlow 6s linear infinite;
}
.radar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #a2e7d8;
  font-size: 24px;
}
.radar-point {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #8ff0d7;
  border-radius: 50%;
  box-shadow: 0 0 14px #8ff0d7;
}
.rp1 {
  left: 26%;
  top: 24%;
}
.rp2 {
  left: 71%;
  top: 39%;
}
.rp3 {
  left: 50%;
  top: 73%;
}
.section-dev {
  padding-bottom: 155px;
}
.dev-layout {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 70px;
  align-items: center;
}
.dev-badge {
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 0.12em;
  color: #9a94d4;
}
.dev-left h3 {
  font-size: 29px;
  line-height: 1.52;
  letter-spacing: -0.04em;
  margin: 15px 0 30px;
}
.steps {
  margin-bottom: 28px;
}
.step {
  display: flex;
  gap: 22px;
  position: relative;
  padding-bottom: 25px;
}
.step:not(:last-child):after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 16px;
  border-left: 1px dashed #39364f;
}
.step > span {
  height: 33px;
  width: 33px;
  border: 1px solid #534876;
  border-radius: 9px;
  color: #b29eff;
  background: #201b37;
  display: grid;
  place-items: center;
  font:
    11px "DM Mono",
    monospace;
  flex-shrink: 0;
}
.step h4 {
  font-size: 14px;
  margin: 3px 0 5px;
}
.step p {
  color: #858ba7;
  font-size: 11px;
  margin: 0;
}
.code-window {
  background: linear-gradient(
    145deg,
    rgba(19, 22, 39, 0.97),
    rgba(12, 14, 27, 0.96)
  );
  border: 1px solid #30324c;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.28),
    0 0 75px rgba(98, 80, 176, 0.07);
}
.code-window-header {
  height: 55px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
  gap: 35px;
}
.code-window-lights i {
  height: 8px;
  width: 8px;
}
.code-tabs {
  display: flex;
  gap: 19px;
  height: 100%;
  align-items: center;
}
.code-tabs button {
  background: none;
  border: 0;
  height: 100%;
  padding: 0;
  color: #767c99;
  font:
    11px "DM Mono",
    monospace;
  position: relative;
}
.code-tabs button.selected {
  color: #c8bbff;
}
.code-tabs button.selected:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #9d83ff;
}
.copy-btn {
  margin-left: auto;
  border: 1px solid #35344e;
  background: #212238;
  color: #b8b7d4;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 7px;
  font-size: 10px;
  padding: 7px 9px;
}
.copy-btn:hover {
  color: white;
  border-color: #7563b7;
}
.syntax {
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
  margin: 0;
  padding: 33px 28px;
  min-height: 375px;
  font:
    12px/2 "DM Mono",
    Consolas,
    monospace;
  color: #b8bdd6;
  scrollbar-width: thin;
}
.code-window-footer {
  border-top: 1px solid var(--line);
  padding: 13px 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #777d9b;
  font:
    9px "DM Mono",
    monospace;
}
.code-window-footer > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.code-window-footer i {
  width: 5px;
  height: 5px;
}
.cta-section {
  padding: 0 0 130px;
}
.cta-card {
  background: linear-gradient(115deg, #3a2b88 0%, #6752c8 47%, #8c65de 100%);
  border: 1px solid rgba(203, 180, 255, 0.35);
  border-radius: 23px;
  min-height: 420px;
  position: relative;
  overflow: hidden;
  padding: 67px 75px;
  display: flex;
  align-items: center;
  isolation: isolate;
  box-shadow: 0 24px 90px rgba(67, 48, 168, 0.22);
}
.cta-grid-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 18%, black);
  z-index: -1;
}
.cta-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(190, 153, 255, 0.3),
    transparent 65%
  );
  right: -100px;
  top: -90px;
  z-index: -1;
}
.cta-content {
  position: relative;
  z-index: 3;
}
.cta-kicker {
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 750;
  color: #d5c9ff;
}
.cta-content h2 {
  font-size: clamp(35px, 4.5vw, 56px);
  line-height: 1.36;
  letter-spacing: -0.06em;
  margin: 14px 0;
}
.cta-content h2 span {
  color: #d9caff;
}
.cta-content p {
  font-size: 13px;
  color: #e0dafa;
  margin: 0 0 23px;
}
.cta-content .btn {
  margin-right: 20px;
}
.cta-content small {
  font-size: 10px;
  color: #ddd7f8;
}
.cta-shape {
  width: 360px;
  height: 360px;
  position: absolute;
  right: 11%;
  top: 50%;
  transform: translateY(-50%) rotate(35deg);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 25%;
  box-shadow:
    0 0 0 35px rgba(255, 255, 255, 0.045),
    0 0 0 70px rgba(255, 255, 255, 0.03);
  animation: shapeRotate 32s linear infinite;
}
.cta-shape-inner {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 160px;
  color: #d3bbff;
  text-shadow: 0 0 60px rgba(251, 245, 255, 0.45);
  animation: counterRotate 32s linear infinite;
}
.footer {
  border-top: 1px solid var(--line);
  background: rgba(11, 12, 23, 0.68);
}
.footer-main {
  display: grid;
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: 45px;
  padding: 76px 0 65px;
}
.footer-brand p {
  color: #777d98;
  font-size: 12px;
  margin: 24px 0;
}
.footer-mini {
  font:
    9px "DM Mono",
    monospace;
  color: #736fa7;
  letter-spacing: 0.12em;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.footer-col h4 {
  color: #dcd9f5;
  font-size: 12px;
  margin: 3px 0 12px;
}
.footer-col > a {
  font-size: 11px;
  color: #777e98;
  display: flex;
  gap: 5px;
  align-items: center;
}
.footer-col > a:hover {
  color: #beb0ff;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  color: #656c88;
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 0.02em;
}
.footer-star {
  color: #c5afff;
}
.inner-page {
  padding-top: 86px;
  min-height: 100vh;
}
.inner-hero {
  padding-top: 117px;
  padding-bottom: 81px;
  position: relative;
  overflow: hidden;
}
.inner-hero h1 {
  font-size: clamp(39px, 5vw, 65px);
  letter-spacing: -0.07em;
  margin: 20px 0;
  line-height: 1.35;
}
.inner-hero > p {
  font-size: 14px;
  color: #8e94b2;
  margin: 0;
  max-width: 650px;
  line-height: 1.9;
}
.hero-decoration {
  position: absolute;
  right: 6%;
  top: 15%;
  font-size: 300px;
  font-weight: 100;
  line-height: 1;
  color: rgba(145, 122, 255, 0.07);
  transform: rotate(-15deg);
  pointer-events: none;
}
.catalog-section {
  padding-bottom: 125px;
}
.catalog-toolbar {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.search-box {
  border: 1px solid #303149;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 17px;
  min-height: 56px;
  max-width: 690px;
  width: 100%;
  border-radius: 10px;
  background: rgba(23, 25, 46, 0.66);
  color: #777e9d;
  transition: border-color 0.25s;
}
.search-box:focus-within {
  border-color: #8175ca;
}
.search-box input {
  height: 100%;
  width: 100%;
  border: none;
  background: transparent;
  color: white;
  font-size: 13px;
  outline: none;
}
.search-box input::placeholder {
  color: #747995;
}
.search-box > span {
  font:
    10px "DM Mono",
    monospace;
  border: 1px solid #393b58;
  border-radius: 5px;
  padding: 3px 7px;
  color: #777b96;
  white-space: nowrap;
}
.sort-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 165px;
  height: 56px;
  border: 1px solid #303149;
  border-radius: 10px;
  background: rgba(23, 25, 46, 0.66);
  padding: 0 14px;
  color: #9d9abf;
}
.sort-wrap select {
  appearance: none;
  background: transparent;
  color: #c3c2d9;
  border: 0;
  font-size: 12px;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.sort-wrap option {
  background: #1c1c32;
}
.catalog-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 27px 0;
}
.filter-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 9px 17px;
  color: #9395b4;
  border: 1px solid #2a2c44;
  background: rgba(22, 24, 44, 0.75);
  border-radius: 8px;
  font-size: 12px;
  transition: all 0.2s;
}
.filter-chip:hover {
  color: white;
  border-color: #666091;
}
.filter-chip.active {
  background: #7e6de5;
  color: white;
  border-color: #9281f6;
  box-shadow: 0 6px 23px rgba(117, 93, 237, 0.23);
}
.catalog-count {
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 0.12em;
  color: #757995;
  white-space: nowrap;
}
.catalog-count strong {
  color: #c5baff;
}
.catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.catalog-disclaimer {
  font-size: 10px;
  color: #767d9a;
  line-height: 1.8;
  margin-top: 28px;
}
.catalog-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 110px;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(110deg, #16182d, #111428);
}
.catalog-bottom h3 {
  font-size: 22px;
  letter-spacing: -0.04em;
  margin: 0 0 7px;
}
.catalog-bottom p {
  font-size: 12px;
  color: #858ba5;
  margin: 0;
}
.empty-state {
  padding: 90px 20px;
  text-align: center;
  border: 1px dashed #393652;
  border-radius: 16px;
  color: #b7a7ff;
  font-size: 36px;
}
.empty-state h3 {
  color: white;
  font-size: 20px;
  margin: 10px 0;
}
.empty-state p {
  color: #898eab;
  font-size: 12px;
}
.empty-state .btn {
  margin-top: 18px;
}
.pricing-section {
  padding-bottom: 100px;
}
.pricing-switch {
  border: 1px solid #30304b;
  background: #181b31;
  display: flex;
  gap: 3px;
  margin: 0 auto 47px;
  padding: 5px;
  border-radius: 11px;
  width: max-content;
}
.pricing-switch button {
  background: transparent;
  border: 0;
  color: #878ba9;
  padding: 10px 27px;
  border-radius: 8px;
  font-size: 13px;
}
.pricing-switch button.active {
  color: #fff;
  background: #383052;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.pricing-grid {
  max-width: 930px;
  margin: auto;
  display: flex;
  justify-content: center;
  gap: 22px;
  align-items: stretch;
}
.price-card {
  flex: 1;
  min-width: 0;
  border: 1px solid #2c2d49;
  border-radius: 17px;
  background: #121527;
  padding: 35px 35px 32px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.price-card.emphasized {
  background: linear-gradient(160deg, #22203c, #161528 60%);
  border-color: #7964c1;
  box-shadow: 0 0 50px rgba(124, 96, 227, 0.13);
}
.price-popular {
  position: absolute;
  right: 0;
  top: 0;
  background: #846de9;
  font-size: 9px;
  padding: 7px 13px;
  border-radius: 0 0 0 10px;
  letter-spacing: 0.08em;
}
.price-tag {
  color: #9d90e5;
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}
.price-card h3 {
  font-size: 27px;
  letter-spacing: -0.05em;
  margin: 0 0 9px;
}
.price-card > p {
  color: #858da9;
  font-size: 12px;
  margin: 0 0 35px;
}
.price-value {
  font-size: 43px;
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 1;
}
.price-value span {
  font-size: 18px;
  color: #bbaaff;
  margin-left: 6px;
  letter-spacing: -0.04em;
}
.price-caption {
  color: #6f7596;
  font-size: 10px;
  margin-top: 10px;
}
.price-line {
  border-top: 1px solid #30304b;
  margin: 32px 0 20px;
}
.price-card ul {
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-card li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #b8bad0;
}
.price-card li svg {
  color: #9ce1c9;
  width: 16px;
}
.price-card > .btn {
  margin-top: auto;
}
.enterprise-card {
  max-width: 650px;
  min-height: 440px;
}
.pricing-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 930px;
  margin: 26px auto 0;
  padding: 16px 18px;
  border: 1px solid #393450;
  border-radius: 9px;
  color: #8c8eae;
  font-size: 11px;
}
.pricing-note svg {
  color: #a48eff;
}
.faq-section {
  padding-top: 20px;
  padding-bottom: 140px;
  max-width: 950px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 8px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  list-style: none;
  gap: 20px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #30334c;
  border-radius: 8px;
  color: #a99aed;
  transition: transform 0.25s;
}
.faq-item[open] summary span {
  transform: rotate(180deg);
}
.faq-item p {
  color: #898eaa;
  max-width: 720px;
  font-size: 12px;
  margin: 14px 0 0;
  line-height: 2;
}
.docs-hero {
  padding-bottom: 65px;
}
.docs-layout {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 75px;
  padding-bottom: 150px;
}
.docs-sidebar {
  align-self: start;
  position: sticky;
  top: 118px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docs-sidebar > span {
  font:
    10px "DM Mono",
    monospace;
  color: #747996;
  letter-spacing: 0.1em;
  padding: 0 15px 15px;
}
.docs-sidebar > a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #848aa7;
  padding: 12px 15px;
  border-radius: 8px;
}
.docs-sidebar > a:hover,
.docs-sidebar > a.active {
  color: #c9bdff;
  background: #242038;
}
.docs-side-cta {
  margin-top: 35px;
  padding: 19px;
  border-radius: 13px;
  border: 1px solid #333251;
  background: #191b32;
  font-size: 12px;
  font-weight: 750;
}
.docs-side-cta p {
  font-size: 10px;
  line-height: 1.8;
  color: #7c83a4;
  font-weight: 400;
  margin: 7px 0 15px;
}
.docs-side-cta .btn {
  font-size: 10px;
  min-height: 35px;
  padding: 8px 12px;
  gap: 8px;
}
.docs-content {
  max-width: 810px;
  min-width: 0;
}
.docs-content > section {
  padding-bottom: 60px;
  margin-bottom: 53px;
  border-bottom: 1px solid var(--line);
}
.docs-content > section:last-child {
  border: 0;
}
.docs-index {
  color: #8f85d4;
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}
.docs-content h2 {
  font-size: 27px;
  letter-spacing: -0.045em;
  margin: 0 0 16px;
}
.docs-content > section > p {
  color: #9197b2;
  font-size: 13px;
  line-height: 2;
  margin: 0 0 25px;
}
.docs-alert {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid #4a4166;
  background: #211d35;
  padding: 19px;
  border-radius: 11px;
}
.docs-alert > svg {
  color: #b5a2ff;
  margin-top: 2px;
}
.docs-alert strong {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.docs-alert span {
  display: block;
  font-size: 11px;
  color: #aaa4c9;
  line-height: 1.9;
}
.doc-step {
  display: flex;
  gap: 18px;
  margin: 25px 0;
}
.doc-step > span {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #4c4272;
  background: #28223f;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #bcaaff;
  font:
    13px "DM Mono",
    monospace;
}
.doc-step h4 {
  margin: 2px 0 4px;
  font-size: 13px;
}
.doc-step p {
  font-size: 12px;
  color: #8a8fa9;
  margin: 0;
  line-height: 1.8;
}
.inline-command {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #30344e;
  border-radius: 8px;
  background: #111526;
  color: #a0d4c9;
  font:
    12px "DM Mono",
    monospace;
}
.inline-command button {
  background: none;
  color: #9da1be;
  border: 0;
}
.docs-code .syntax {
  min-height: 380px;
}
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 25px;
}
.security-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #15182a;
  padding: 22px;
}
.security-grid svg {
  color: #b9a2ff;
}
.security-grid h4 {
  margin: 13px 0 7px;
  font-size: 13px;
}
.security-grid p {
  margin: 0;
  color: #8c92ac;
  line-height: 1.9;
  font-size: 11px;
}
#toast-layer {
  position: fixed;
  z-index: 100;
  right: 25px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  border: 1px solid rgba(144, 130, 224, 0.4);
  background: rgba(27, 26, 52, 0.95);
  box-shadow: 0 15px 35px #0006;
  backdrop-filter: blur(12px);
  padding: 12px 17px;
  min-width: 180px;
  border-radius: 9px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #e4defe;
  animation: toastIn 0.3s var(--easing) both;
}
.toast svg {
  color: #9be3d1;
}
.toast.error svg {
  color: #ec98b9;
}
.toast-exit {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s;
}
@keyframes shimmer {
  to {
    background-position: 200% 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.38;
    transform: scale(0.8);
  }
}
@keyframes floatA {
  50% {
    transform: translateY(-14px);
  }
}
@keyframes drift {
  to {
    transform: translate(45px, -35px);
  }
}
@keyframes orbitSlow {
  to {
    transform: translate(-50%, -50%) rotate(340deg);
  }
}
@keyframes corePulse {
  50% {
    filter: drop-shadow(0 0 35px rgba(200, 146, 255, 0.9));
    transform: scale(1.04);
  }
}
@keyframes shapeRotate {
  to {
    transform: translateY(-50%) rotate(395deg);
  }
}
@keyframes counterRotate {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes terminalEnter {
  from {
    opacity: 0;
    transform: rotate(-2deg) translate(25px, 40px);
  }
  to {
    opacity: 1;
    transform: rotate(-2deg);
  }
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Override orbital keyframes for locally positioned rings. */
.orb-ring-outer,
.orb-ring-inner {
  animation-name: orbitSlow;
}
.radar-sweep {
  animation-name: spin;
}
.core-circles {
  animation-name: spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 1180px) {
  .container {
    width: min(calc(100% - 56px), var(--max));
  }
  .nav-links {
    gap: 24px;
  }
  .nav-actions {
    gap: 16px;
  }
  .header-status {
    display: none;
  }
  .hero-title {
    font-size: clamp(40px, 4.5vw, 60px);
  }
  .hero-visual {
    transform: scale(0.86);
    transform-origin: center;
  }
  .trust-strip .container {
    gap: 25px;
  }
  .model-grid {
    gap: 13px;
  }
  .model-card {
    padding: 21px 17px;
  }
  .feature-diagram {
    width: 340px;
  }
  .dev-layout {
    gap: 35px;
  }
  .cta-shape {
    right: 5%;
  }
}
@media (max-width: 900px) {
  .nav-links,
  .nav-actions {
    display: none;
  }
  .nav-wrap {
    height: 72px;
  }
  .menu-toggle {
    display: flex;
  }
  .mobile-menu.open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: rgba(12, 13, 29, 0.98);
    border-bottom: 1px solid #35304c;
    backdrop-filter: blur(18px);
    flex-direction: column;
    padding: 14px 28px 26px;
    gap: 4px;
  }
  .mobile-menu > a {
    padding: 11px 8px;
    border-bottom: 1px solid #ffffff0e;
    font-size: 13px;
    color: #c7c5df;
  }
  .hero {
    padding-top: 130px;
    grid-template-columns: 1fr;
    min-height: unset;
    padding-bottom: 115px;
  }
  .hero:before {
    display: none;
  }
  .hero-copy {
    text-align: center;
  }
  .pill {
    margin-bottom: 22px;
  }
  .hero-title {
    font-size: clamp(43px, 7vw, 64px);
  }
  .hero-buttons,
  .hero-trust {
    justify-content: center;
  }
  .hero-trust {
    margin-top: 35px;
  }
  .hero-visual {
    height: 570px;
    width: min(100%, 580px);
    margin: -15px auto -45px;
    transform: scale(0.85);
  }
  .hero-bottom-label {
    bottom: 15px;
  }
  .trust-strip .container {
    min-height: 140px;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
  }
  .trust-strip p {
    margin: 0;
  }
  .logos {
    width: 100%;
    justify-content: center;
    gap: 15px 28px;
  }
  .provider-logo {
    font-size: 12px;
  }
  .provider-logo b {
    font-size: 19px;
  }
  .model-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-models .section-head-action {
    top: 265px;
  }
  .section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .feature-diagram {
    width: 300px;
  }
  .dev-layout {
    grid-template-columns: 1fr;
  }
  .dev-left {
    max-width: 590px;
  }
  .code-window {
    max-width: 750px;
    width: 100%;
  }
  .cta-card {
    padding: 58px 45px;
  }
  .cta-shape {
    right: -20%;
    opacity: 0.6;
  }
  .docs-layout {
    grid-template-columns: 180px 1fr;
    gap: 30px;
  }
}
@media (max-width: 600px) {
  .container {
    width: calc(100% - 34px);
  }
  .nav-wrap {
    height: 66px;
  }
  .mobile-menu.open {
    top: 66px;
  }
  .brand-icon {
    width: 34px;
    height: 34px;
  }
  .brand-text {
    font-size: 14px;
  }
  .brand-text small {
    font-size: 5.5px;
  }
  .hero {
    padding-top: 128px;
    padding-bottom: 80px;
    gap: 0;
  }
  .pill {
    font-size: 8px;
    padding: 7px 9px;
    letter-spacing: 0.07em;
  }
  .hero-title {
    font-size: clamp(36px, 9.4vw, 53px);
    letter-spacing: -0.074em;
  }
  .text-caret {
    height: 0.65em;
  }
  .hero-lead {
    font-size: 12px;
    margin-bottom: 25px;
  }
  .hero-buttons {
    gap: 9px;
  }
  .hero-buttons .btn {
    padding: 12px 15px;
    min-height: 45px;
    gap: 11px;
    font-size: 11px;
  }
  .hero-trust {
    margin-top: 37px;
  }
  .hero-trust small {
    font-size: 9px;
  }
  .hero-visual {
    height: 410px;
    width: 560px;
    left: 50%;
    margin: 5px 0 -12px;
    transform: translateX(-50%) scale(0.66);
    transform-origin: top center;
  }
  .hero-bottom-label {
    bottom: 22px;
    font-size: 8px;
  }
  .trust-strip .container {
    min-height: 155px;
  }
  .logos {
    gap: 10px 24px;
  }
  .provider-logo {
    font-size: 10px;
  }
  .provider-logo b {
    font-size: 18px;
  }
  .section {
    padding: 80px 0;
  }
  .section-header {
    margin-bottom: 32px;
  }
  .section-header h2 {
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.42;
    margin: 17px 0;
  }
  .section-header > p {
    font-size: 12px;
  }
  .eyebrow {
    font-size: 9px;
  }
  .section-models .section-head-action {
    position: static;
    margin: -18px 0 22px;
  }
  .model-grid,
  .catalog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .model-card {
    min-height: 270px;
    padding: 17px 14px 12px;
    border-radius: 12px;
  }
  .model-top {
    margin-bottom: 13px;
  }
  .model-symbol {
    height: 41px;
    width: 41px;
    border-radius: 11px;
    font-size: 22px;
  }
  .model-card h3 {
    font-size: 14px;
  }
  .model-provider {
    font-size: 10px;
  }
  .model-card > p {
    font-size: 10px;
    line-height: 1.65;
    min-height: 54px;
    height: auto;
    margin-bottom: 8px;
  }
  .tag-row > span {
    padding: 2px 5px;
    font-size: 8px;
  }
  .model-bottom {
    margin-top: 12px;
    padding-top: 11px;
  }
  .model-bottom > span {
    font-size: 9px;
  }
  .model-bottom > a {
    width: 24px;
    height: 24px;
  }
  .models-note {
    line-height: 1.8;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature-card,
  .feature-large,
  .feature-wide {
    grid-column: auto;
    min-height: unset;
    padding: 27px;
  }
  .feature-card {
    padding-bottom: 38px;
  }
  .feature-large {
    display: block;
    padding-bottom: 0;
  }
  .feature-card h3 {
    font-size: 23px;
  }
  .feature-large h3 {
    font-size: 27px;
  }
  .feature-card p {
    font-size: 11px;
  }
  .feature-diagram {
    height: 245px;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
  .diagram-center {
    height: 95px;
    width: 95px;
    font-size: 38px;
  }
  .diagram-node {
    height: 46px;
    width: 46px;
    font-size: 24px;
  }
  .mini-code {
    position: static;
    margin-top: 27px;
    font-size: 10px;
    padding: 12px;
  }
  .feature-pills {
    margin-top: 27px;
  }
  .feature-wide {
    display: block;
  }
  .feature-data {
    display: none;
  }
  .dev-left h3 {
    font-size: 24px;
  }
  .code-window-header {
    gap: 14px;
    padding: 0 13px;
  }
  .code-tabs {
    gap: 11px;
  }
  .code-tabs button {
    font-size: 10px;
  }
  .syntax {
    font-size: 10px;
    padding: 19px 15px;
    min-height: 310px;
  }
  .code-window-footer {
    padding: 10px 14px;
    font-size: 8px;
  }
  .cta-section {
    padding: 0 0 75px;
  }
  .cta-card {
    min-height: 380px;
    padding: 43px 27px;
  }
  .cta-content h2 {
    font-size: 35px;
  }
  .cta-content p {
    font-size: 11px;
    max-width: 270px;
  }
  .cta-content .btn {
    margin-right: 0;
  }
  .cta-content small {
    display: block;
    margin-top: 13px;
  }
  .cta-shape {
    width: 190px;
    height: 190px;
    right: -75px;
    top: 20%;
    opacity: 0.33;
  }
  .cta-shape-inner {
    font-size: 100px;
  }
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 22px;
    padding: 55px 0;
  }
  .footer-brand {
    grid-column: span 2;
  }
  .footer-col h4 {
    font-size: 11px;
  }
  .footer-bottom {
    gap: 10px;
    flex-direction: column;
    font-size: 9px;
  }
  .inner-page {
    padding-top: 66px;
  }
  .inner-hero {
    padding: 75px 0 45px;
  }
  .inner-hero h1 {
    font-size: clamp(35px, 9vw, 45px);
  }
  .inner-hero > p {
    font-size: 12px;
  }
  .hero-decoration {
    font-size: 190px;
    right: -15%;
  }
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .search-box {
    min-height: 50px;
  }
  .sort-wrap {
    height: 44px;
    min-width: 0;
    width: 100%;
  }
  .catalog-filters {
    margin: 20px 0 25px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .filter-items {
    gap: 6px;
  }
  .filter-chip {
    padding: 7px 11px;
    font-size: 11px;
  }
  .catalog-count {
    font-size: 9px;
  }
  .catalog-section {
    padding-bottom: 60px;
  }
  .catalog-bottom {
    padding: 25px;
    margin-bottom: 75px;
    display: block;
  }
  .catalog-bottom h3 {
    font-size: 19px;
  }
  .catalog-bottom .btn {
    margin-top: 20px;
  }
  .pricing-section {
    padding-bottom: 75px;
  }
  .pricing-grid {
    flex-direction: column;
    gap: 17px;
  }
  .price-card {
    min-height: unset;
    padding: 30px 26px;
  }
  .price-card ul {
    margin-bottom: 30px;
  }
  .faq-section {
    padding-top: 5px;
    padding-bottom: 90px;
  }
  .faq-item summary {
    font-size: 12px;
  }
  .docs-hero {
    padding-bottom: 35px;
  }
  .docs-layout {
    display: block;
    padding-bottom: 80px;
  }
  .docs-sidebar {
    display: none;
  }
  .docs-content > section {
    padding-bottom: 40px;
    margin-bottom: 37px;
  }
  .docs-content h2 {
    font-size: 23px;
  }
  .security-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 390px) {
  .hero-title {
    font-size: 34px;
  }
  .hero-visual {
    transform: translateX(-50%) scale(0.57);
    height: 355px;
  }
  .model-grid {
    grid-template-columns: 1fr;
  }
  .model-card {
    min-height: unset;
  }
  .model-card > p {
    min-height: auto;
  }
  .model-bottom {
    margin-top: 16px;
  }
  .hero-buttons .btn {
    font-size: 10px;
    padding: 11px 12px;
  }
  .copy-btn span {
    display: none;
  }
  .code-tabs {
    gap: 8px;
  }
  .cta-content h2 {
    font-size: 31px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .ambient {
    display: none;
  }
  .tilt {
    transform: none !important;
  }
}

/* Mobile containment: orbit artwork must not widen the page grid. */
@media (max-width: 600px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    min-width: 0;
  }
  .hero-visual {
    min-width: 0;
  }
}
/* Homepage atmosphere and scene layout */
/* AI Treasury / Cosmic Edition
   Visual direction follows the user-supplied planet-and-grid reference.
   All effects use CSS + a locally rendered planet, no CDN assets or external scripts. */
:root {
  --bg: #03050d;
  --bg2: #080a18;
  --panel: #0b1020;
  --panel2: #11152a;
  --purple: #a07cff;
  --purple2: #c4b3ff;
  --teal: #70d9ff;
  --line: rgba(152, 158, 255, 0.14);
  --line2: rgba(152, 158, 255, 0.22);
}
html {
  scroll-padding-top: 90px;
}
body {
  background: #03050d;
}
body:before {
  background:
    radial-gradient(ellipse 65% 35% at 50% 0%, #17082f28, transparent 75%),
    linear-gradient(180deg, #03050d, #060916);
}
#particles {
  opacity: 0.36;
}
.ambient {
  opacity: 0.25;
}
.noise {
  opacity: 0.09;
}
#progress {
  background: linear-gradient(90deg, #664dff, #23d7fa);
}
/* Floating capsule navigation inspired by reference screenshot */
.site-header,
.site-header.scrolled {
  width: min(calc(100% - 80px), 1190px);
  top: 22px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(182, 182, 255, 0.16);
  border-radius: 999px;
  background: rgba(5, 6, 17, 0.63);
  box-shadow:
    0 9px 38px #0005,
    0 1px 0 #d8cbff10 inset;
  backdrop-filter: blur(23px);
  -webkit-backdrop-filter: blur(23px);
}
.site-header.scrolled {
  background: rgba(7, 8, 23, 0.92);
  border-color: rgba(149, 158, 255, 0.27);
}
.nav-wrap {
  width: calc(100% - 48px);
  height: 63px;
  gap: 16px;
}
.brand {
  gap: 9px;
}
.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 0 24px #596aff2d;
}
.brand-text {
  font-size: 12px;
  letter-spacing: -0.035em;
}
.brand-text small {
  font-size: 6px;
  letter-spacing: 0.17em;
}
.nav-links {
  gap: 31px;
}
.nav-links a {
  font-size: 11px;
  font-weight: 550;
  transition: color 0.25s;
}
.nav-links a:hover {
  color: #e7dfff;
}
.nav-links a.active {
  color: #f7f4ff;
}
.nav-links a.active:after {
  background: linear-gradient(90deg, #7a7dff, #43d1ff);
  bottom: -20px;
}
.nav-actions {
  gap: 21px;
}
.nav-login {
  font-size: 11px;
}
.nav-actions .btn-primary {
  border-radius: 100px;
  min-height: 35px;
  padding: 8px 16px;
  background: linear-gradient(116deg, #ad71fb 0%, #6e6af9 55%, #198be5 100%);
  box-shadow: 0 0 25px #7777ff7a;
  font-size: 10px;
}
.nav-actions .btn-primary:hover {
  box-shadow: 0 0 36px #7990ffba;
}
/* Hero structure / cinematic depth */
.cosmic-home {
  overflow: hidden;
}
.hero.cosmic-hero {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: clamp(700px, 100svh, 980px);
  padding: 0;
  margin: 0;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 43% 36% at 51% 14%,
      rgba(24, 45, 92, 0.15),
      transparent 80%
    ),
    radial-gradient(
      ellipse 34% 43% at 3% 5%,
      rgba(56, 6, 131, 0.34),
      transparent 85%
    ),
    radial-gradient(
      ellipse 36% 42% at 98% 3%,
      rgba(55, 7, 136, 0.34),
      transparent 85%
    ),
    linear-gradient(180deg, #05020e 0%, #01050d 58%, #02030c 100%);
}
.cosmic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(
      90deg,
      rgba(82, 32, 184, 0.12),
      transparent 19%,
      transparent 81%,
      rgba(78, 35, 170, 0.1)
    ),
    radial-gradient(ellipse 52% 28% at 50% 54%, rgba(0, 0, 0, 0.2), transparent);
}
.cosmic-hero::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: auto 0 0;
  height: 14%;
  pointer-events: none;
  background: linear-gradient(0deg, #04050e 3%, transparent);
}
.cosmic-aura {
  position: absolute;
  z-index: 0;
  top: -18%;
  left: 50%;
  width: min(98vw, 1480px);
  height: 63%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at top,
    rgba(97, 40, 188, 0.2),
    rgba(24, 27, 78, 0.04) 56%,
    transparent 72%
  );
  filter: blur(22px);
  animation: auraBreath 8s ease-in-out infinite alternate;
}
.cosmic-starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.cosmic-starfield i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--color, #c0daff);
  opacity: var(--a);
  box-shadow: 0 0 8px currentColor;
  animation: starTwinkle var(--duration) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
/* Local procedural blue planet: atmospheric glow + slow floating orbit */
.cosmic-planet-wrap {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 50%;
  top: 13%;
  width: min(72vw, 855px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 30px #19b4e32a);
  animation: planetHover 9s ease-in-out infinite alternate;
}
.cosmic-planet-backlight {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 35%,
    transparent 48%,
    rgba(54, 195, 253, 0.19) 63%,
    transparent 69%
  );
  filter: blur(13px);
}
.cosmic-planet {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: none;
  filter: contrast(1.1) saturate(1.22);
  box-shadow:
    inset 0 13px 25px -12px #67eaffab,
    inset 0 2px 0 #8eedff9e;
  opacity: 0.98;
  overflow: hidden;
}
.cosmic-planet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 45% 35% at 54% 2%,
      rgba(102, 245, 255, 0.35),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0000 22%,
      #00071212 34%,
      #00050eb8 66%,
      #00040efc 95%
    );
}
.cosmic-planet-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border-top: 2px solid rgba(87, 235, 255, 0.88);
  border-left: 1px solid rgba(43, 154, 255, 0.12);
  border-right: 1px solid rgba(30, 107, 241, 0.17);
  box-shadow:
    0 -7px 29px -12px #66eaff,
    0 -15px 75px -35px #0bdcfc,
    inset 0 18px 25px -23px #8cfcff;
  mask-image: linear-gradient(#000, transparent 55%);
  -webkit-mask-image: linear-gradient(#000, transparent 55%);
  animation: rimPulse 6s ease-in-out infinite alternate;
}
.cosmic-planet-horizon {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(0, 3, 11, 0.36) 50%,
    rgba(0, 2, 9, 0.97) 76%,
    #01030a 96%
  );
  border-radius: 50%;
}
/* moving shooting stars */
.cosmic-streak {
  position: absolute;
  z-index: 3;
  width: 1px;
  height: 105px;
  transform: rotate(-39deg);
  transform-origin: top;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent,
    #468acb70 25%,
    #84d5ffef 92%,
    transparent
  );
  filter: drop-shadow(0 0 4px #45acff);
  animation: meteorFall 8s linear infinite;
}
.streak-one {
  top: 18%;
  left: 17%;
  height: 105px;
  animation-delay: -1.2s;
}
.streak-two {
  top: 11%;
  left: 76%;
  height: 82px;
  animation-delay: -5.4s;
  animation-duration: 9s;
}
.streak-three {
  top: 39%;
  left: 6%;
  height: 74px;
  animation-delay: -4.3s;
  animation-duration: 11s;
}
.streak-four {
  top: 22%;
  left: 90%;
  height: 110px;
  animation-delay: -7.2s;
  animation-duration: 13s;
}
.streak-five {
  top: 3%;
  left: 36%;
  height: 48px;
  animation-delay: -3.2s;
  animation-duration: 10s;
}
/* reference's illuminated perspective floor */
.cosmic-floor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}
.cosmic-grid {
  position: absolute;
  left: -21%;
  width: 142%;
  top: 65%;
  height: 95%;
  background-image:
    linear-gradient(rgba(100, 118, 200, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 111, 191, 0.29) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(550px) rotateX(65deg);
  transform-origin: top center;
  box-shadow: 0 -4px 50px #526ff717;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.06),
    #000 22%,
    #000 54%,
    transparent 97%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.06),
    #000 22%,
    #000 54%,
    transparent 97%
  );
  animation: gridFlow 24s linear infinite;
}
.cosmic-floor-fog {
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(
    180deg,
    rgba(3, 7, 17, 0.04) 0%,
    transparent 15%,
    rgba(1, 3, 12, 0.45) 94%
  );
}
.cosmic-nodes {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.cosmic-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(125, 163, 255, 0.32);
  font-size: 18px;
  font-weight: 600;
  color: #c0bfff;
  background: linear-gradient(
    145deg,
    rgba(32, 45, 89, 0.85),
    rgba(11, 13, 42, 0.82)
  );
  box-shadow:
    0 7px 21px #000a,
    0 0 22px #566fff29,
    inset 0 0 11px #6f78fb1a;
  transform: perspective(250px) rotateX(26deg) rotateZ(-15deg);
  animation: nodeFloat 4.8s ease-in-out infinite alternate;
}
.cosmic-node::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid #5c67f50c;
  border-radius: 50%;
  box-shadow: 0 0 12px #5560d02c;
}
.node-1 {
  left: 12%;
  top: 74%;
  color: #8b69ff;
  animation-delay: -1s;
}
.node-2 {
  left: 25%;
  top: 83%;
  color: #99d5ff;
  animation-delay: -2.6s;
}
.node-3 {
  left: 48%;
  top: 85%;
  color: #97e5bc;
  animation-delay: -1.8s;
}
.node-4 {
  left: 69%;
  top: 81%;
  color: #c3b2ff;
  animation-delay: -0.7s;
}
.node-5 {
  left: 83%;
  top: 75%;
  color: #e2a5ff;
  animation-delay: -3s;
}
.node-6 {
  left: 7%;
  top: 91%;
  color: #fd97ad;
  animation-delay: -2.5s;
}
.node-7 {
  left: 94%;
  top: 89%;
  color: #c0a2ff;
  animation-delay: -1.5s;
}
.node-8 {
  left: 39%;
  top: 73%;
  color: #99c8ff;
  animation-delay: -2.2s;
}
/* textual content: centered like original reference */
.cosmic-hero-content {
  position: absolute;
  z-index: 7;
  left: 18px;
  right: 18px;
  top: 29%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(
    calc(var(--px, 0) * 10px),
    calc(var(--py, 0) * 6px),
    0
  );
  transition: transform 0.3s ease-out;
}
.cosmic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  padding: 7px 16px;
  color: #d6dcff;
  font:
    500 10px/1.5 "DM Mono",
    monospace;
  letter-spacing: 0.07em;
  background: rgba(3, 9, 21, 0.76);
  border: 1px solid rgba(114, 176, 229, 0.28);
  box-shadow:
    0 0 22px #24bbff12,
    inset 0 1px 10px #4f63ae15;
}
.eyebrow-spark {
  color: #b8eeff;
  font-size: 16px;
  line-height: 1;
}
.eyebrow-spot {
  height: 5px;
  width: 5px;
  background: #57dbfa;
  border-radius: 50%;
  box-shadow: 0 0 13px #49dbfa;
  animation: starTwinkle 2s ease-in-out infinite alternate;
}
.cosmic-headline {
  margin: 23px 0 16px;
  color: #fff;
  font-size: clamp(48px, 5.8vw, 91px);
  font-weight: 800;
  line-height: 1.21;
  letter-spacing: -0.082em;
  text-shadow:
    0 2px 22px #000e,
    0 0 30px #8cc3ff24;
  white-space: nowrap;
}
.cosmic-title-shine {
  background: linear-gradient(
    102deg,
    #fff 11%,
    #b9f3ff 28%,
    #e4ddff 46%,
    #ffffff 62%,
    #75d8ff 80%,
    #fff 91%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: titleFlow 8s ease-in-out infinite alternate;
}
.cosmic-headline-dot {
  color: #a0b6ff;
}
.cosmic-subline {
  margin: 0;
  max-width: 540px;
  color: #bbc5d8;
  line-height: 1.88;
  font-size: clamp(12px, 1.09vw, 15px);
  font-weight: 450;
  text-shadow: 0 1px 12px #000;
}
#typewriter {
  color: #e9efff;
  border-right: 1px solid #8cceff;
  padding-right: 3px;
  animation: blinkBorder 1s steps(1) infinite;
}
.cosmic-actions {
  display: flex;
  gap: 13px;
  justify-content: center;
  margin-top: 26px;
}
.cosmic-btn {
  min-width: 142px;
  height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 650;
  border-radius: 40px;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
  position: relative;
  overflow: hidden;
}
.cosmic-btn:hover {
  transform: translateY(-4px);
}
.cosmic-primary {
  background: linear-gradient(112deg, #bd69eb 0%, #876dfc 49%, #278cf6 100%);
  color: #fff;
  box-shadow:
    0 7px 33px rgba(90, 89, 254, 0.38),
    inset 0 1px 0 #ffffff55;
  border: 1px solid #a5a1ff63;
}
.cosmic-primary::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -70%;
  height: 260%;
  width: 24%;
  background: linear-gradient(90deg, transparent, #fff5, transparent);
  transform: rotate(22deg);
  transition: left 0.7s;
}
.cosmic-primary:hover::after {
  left: 145%;
}
.cosmic-primary:hover {
  box-shadow: 0 10px 45px #647aff86;
}
.cosmic-outline {
  background: rgba(4, 8, 21, 0.7);
  border: 1px solid #45577e;
  color: #f4f6ff;
  box-shadow: 0 0 16px #185ac416;
}
.cosmic-outline:hover {
  border-color: #89baff;
  box-shadow: 0 0 25px #4caeff32;
}
.cosmic-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  margin-top: 48px;
}
.metric {
  display: flex;
  min-width: 130px;
  flex-direction: column;
  gap: 1px;
}
.metric strong {
  font-size: clamp(24px, 2.15vw, 33px);
  font-weight: 740;
  line-height: 1.2;
  letter-spacing: -0.055em;
  color: #fff;
  text-shadow: 0 0 25px #77cfff38;
}
.metric strong span {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.metric small {
  font-size: 10px;
  color: #a5b1ca;
  letter-spacing: 0.02em;
}
.metric-separator {
  width: 1px;
  height: 35px;
  background: linear-gradient(transparent, #8f9cc64f, transparent);
}
.hero-appear {
  animation: heroReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cosmic-headline.hero-appear {
  animation-delay: 0.14s;
}
.cosmic-subline.hero-appear {
  animation-delay: 0.29s;
}
.cosmic-actions.hero-appear {
  animation-delay: 0.46s;
}
.cosmic-metrics.hero-appear {
  animation-delay: 0.65s;
}
.cosmic-scroll {
  z-index: 9;
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #929fc9;
  font:
    9px "DM Mono",
    monospace;
  letter-spacing: 0.2em;
  transition: color 0.2s;
}
.cosmic-scroll:hover {
  color: #d3eeff;
}
.scroll-line {
  width: 1px;
  height: 33px;
  background: linear-gradient(#cdd5ff, transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
.cosmic-edge-label {
  position: absolute;
  z-index: 9;
  bottom: 29px;
  left: 3%;
  font:
    9px "DM Mono",
    monospace;
  color: #5c668b;
  letter-spacing: 0.09em;
}
.cosmic-edge-label.right {
  left: auto;
  right: 3%;
}
/* Extend the concept into all existing inner pages */
.trust-strip {
  border-top: 1px solid #323a6f2e;
  border-bottom: 1px solid #323a6f2e;
  background: linear-gradient(90deg, #09091a, #080c19 51%, #0a0a1b);
}
.section-models,
.section-dev {
  position: relative;
}
.section-models:before,
.section-dev:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -15%;
  top: 0;
  width: 70%;
  height: 650px;
  background: radial-gradient(
    ellipse,
    rgba(44, 67, 139, 0.11),
    transparent 60%
  );
  pointer-events: none;
}
.model-card,
.feature-card,
.price-card,
.code-window {
  background-color: rgba(10, 16, 31, 0.85);
  border-color: rgba(111, 149, 224, 0.16);
}
.model-card:hover,
.feature-card:hover {
  border-color: rgba(112, 196, 255, 0.43);
  box-shadow:
    0 24px 85px #0009,
    0 0 25px #196ba516;
}
.inner-page {
  background: radial-gradient(
    ellipse 65% 460px at 50% 2%,
    rgba(24, 67, 113, 0.13),
    transparent 83%
  );
}
.inner-hero:before {
  content: "";
  position: absolute;
  right: 1%;
  top: -30%;
  width: min(45vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: none;
  opacity: 0.19;
  filter: blur(0.5px) saturate(0.8);
  pointer-events: none;
  mask-image: linear-gradient(#000, transparent 85%);
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
}
.inner-hero h1 {
  letter-spacing: -0.06em;
  text-shadow: 0 0 55px #4d96fc1c;
}
/* Focus and accessibility */
:where(a, button, input, select):focus-visible {
  outline: 2px solid #61d6ff;
  outline-offset: 3px;
}
@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes titleFlow {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes blinkBorder {
  50% {
    border-color: transparent;
  }
}
@keyframes planetHover {
  0% {
    transform: translate(-50%, 0) rotate(-0.4deg);
  }
  100% {
    transform: translate(-50%, -14px) rotate(0.4deg);
  }
}
@keyframes rimPulse {
  0% {
    opacity: 0.66;
    filter: brightness(0.9);
  }
  100% {
    opacity: 1;
    filter: brightness(1.35);
  }
}
@keyframes auraBreath {
  from {
    opacity: 0.5;
    transform: translateX(-50%) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1.07);
  }
}
@keyframes meteorFall {
  0%,
  7% {
    opacity: 0;
    translate: -100px -150px;
  }
  9% {
    opacity: 0.55;
  }
  15% {
    opacity: 0;
    translate: 110px 170px;
  }
  100% {
    opacity: 0;
    translate: 110px 170px;
  }
}
@keyframes gridFlow {
  to {
    background-position:
      0 70px,
      0 70px;
  }
}
@keyframes nodeFloat {
  to {
    translate: 0 -14px;
    box-shadow:
      0 18px 22px #0009,
      0 0 24px #607eff44;
  }
}
@keyframes starTwinkle {
  from {
    opacity: calc(var(--a, 0.4) * 0.45);
    transform: scale(0.7);
  }
  to {
    opacity: var(--a, 0.8);
    transform: scale(1.28);
  }
}
@keyframes scrollPulse {
  50% {
    opacity: 0.4;
    transform: translateY(8px);
  }
}
@media (max-width: 1100px) {
  .nav-links {
    gap: 19px;
  }
  .nav-wrap {
    width: calc(100% - 32px);
  }
  .cosmic-planet-wrap {
    width: min(84vw, 820px);
    top: 16%;
  }
  .cosmic-hero-content {
    top: 30%;
  }
  .cosmic-metrics {
    gap: 28px;
  }
}
@media (max-width: 900px) {
  .site-header,
  .site-header.scrolled {
    width: calc(100% - 38px);
    top: 15px;
  }
  .nav-wrap {
    height: 59px;
  }
  .mobile-menu.open {
    left: 8px;
    right: 8px;
    top: 66px;
    border: 1px solid #30355e;
    border-radius: 18px;
    background: #090d20f5;
  }
  .hero.cosmic-hero {
    min-height: 850px;
  }
  .cosmic-hero-content {
    top: 34%;
  }
  .cosmic-planet-wrap {
    width: 770px;
    top: 20%;
  }
  .cosmic-headline {
    font-size: clamp(40px, 7vw, 65px);
  }
  .cosmic-grid {
    top: 65%;
    background-size: 52px 52px;
  }
  .cosmic-node {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .cosmic-metrics {
    margin-top: 38px;
  }
}
@media (max-width: 600px) {
  .site-header,
  .site-header.scrolled {
    width: calc(100% - 26px);
    top: 10px;
    border-radius: 24px;
  }
  .nav-wrap {
    height: 55px;
    width: calc(100% - 24px);
  }
  .brand-icon {
    width: 30px;
    height: 30px;
  }
  .brand-text {
    font-size: 12px;
  }
  .mobile-menu.open {
    top: 60px;
    left: 0;
    right: 0;
  }
  .hero.cosmic-hero {
    height: 100svh;
    min-height: 720px;
    max-height: 880px;
  }
  .cosmic-hero-content {
    top: 29%;
    left: 12px;
    right: 12px;
    transform: none;
  }
  .cosmic-planet-wrap {
    width: 710px;
    top: 19%;
  }
  .cosmic-eyebrow {
    font-size: 8px;
    max-width: calc(100vw - 50px);
    gap: 6px;
    padding: 7px 11px;
    letter-spacing: 0.02em;
    white-space: normal;
  }
  .cosmic-headline {
    margin-top: 21px;
    margin-bottom: 12px;
    font-size: clamp(35px, 9.2vw, 52px);
    letter-spacing: -0.065em;
    white-space: normal;
  }
  .cosmic-subline {
    font-size: 11px;
    line-height: 1.95;
    max-width: 350px;
  }
  .cosmic-actions {
    margin-top: 25px;
    gap: 10px;
  }
  .cosmic-btn {
    height: 45px;
    min-width: 132px;
    font-size: 11px;
    padding: 0 14px;
  }
  .cosmic-metrics {
    width: 100%;
    gap: 12px;
    margin-top: 40px;
  }
  .metric {
    min-width: 0;
    flex: 1;
  }
  .metric strong {
    font-size: 24px;
  }
  .metric strong span {
    font-size: 10px;
  }
  .metric small {
    font-size: 9px;
  }
  .metric-separator {
    height: 34px;
  }
  .cosmic-grid {
    top: 63%;
    left: -62%;
    width: 224%;
    height: 116%;
    background-size: 44px 44px;
    transform: perspective(390px) rotateX(69deg);
  }
  .cosmic-node {
    width: 25px;
    height: 25px;
    font-size: 14px;
    border-radius: 8px;
  }
  .node-2 {
    left: 23%;
    top: 76%;
  }
  .node-3 {
    left: 46%;
    top: 81%;
  }
  .node-4 {
    left: 76%;
    top: 78%;
  }
  .node-1 {
    left: 8%;
    top: 72%;
  }
  .node-5 {
    left: 90%;
    top: 73%;
  }
  .node-8 {
    left: 30%;
    top: 67%;
  }
  .cosmic-edge-label {
    display: none;
  }
  .cosmic-scroll {
    bottom: 20px;
    font-size: 8px;
  }
}
@media (max-width: 390px) {
  .cosmic-headline {
    font-size: 34px;
  }
  .cosmic-eyebrow {
    font-size: 7px;
  }
  .cosmic-metrics {
    gap: 6px;
  }
  .metric strong {
    font-size: 22px;
  }
  .metric small {
    font-size: 8px;
  }
  .cosmic-planet-wrap {
    width: 660px;
  }
  .cosmic-actions {
    gap: 7px;
  }
  .cosmic-btn {
    min-width: 122px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-appear,
  .cosmic-planet-wrap,
  .cosmic-planet-shimmer,
  .cosmic-streak,
  .cosmic-node,
  .cosmic-aura,
  .cosmic-grid,
  .cosmic-title-shine,
  .cosmic-starfield i,
  #typewriter,
  .scroll-line {
    animation: none !important;
  }
  .hero-appear {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .cosmic-hero-content {
    transition: none;
  }
}
/* Final art direction: luminous planetary horizon above a near-black hemisphere. */
@media (min-width: 901px) {
  .cosmic-planet-wrap {
    top: 19%;
  }
}
.cosmic-planet {
  filter: brightness(0.6) contrast(1.17) saturate(0.83);
}
.cosmic-planet::after {
  background:
    radial-gradient(
      ellipse 45% 22% at 50% 3%,
      rgba(107, 241, 255, 0.23),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(0, 7, 22, 0.06) 0%,
      rgba(0, 7, 20, 0.4) 17%,
      rgba(0, 5, 15, 0.78) 35%,
      rgba(0, 3, 13, 0.91) 58%,
      #01030b 85%
    );
}
.cosmic-planet-horizon {
  background: linear-gradient(
    180deg,
    transparent 11%,
    rgba(0, 3, 11, 0.15) 27%,
    rgba(0, 2, 9, 0.78) 64%,
    #01030a 91%
  );
}
/* TRUE 3D / GPU geometry, shading and axis rotation; not a CSS/animated image */
.real-3d-earth {
  top: 15% !important;
  filter: drop-shadow(0 0 28px rgba(27, 112, 233, 0.2));
}
.earth-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: block;
  transition: opacity 0.9s ease;
}
.earth-webgl-canvas.globe-ready {
  opacity: 1;
}
.earth-webgl-canvas.globe-error {
  opacity: 0;
}
.real-3d-earth .cosmic-planet-backlight {
  inset: 7%;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(22, 115, 238, 0.13) 32%,
    rgba(40, 170, 250, 0.11) 55%,
    transparent 75%
  );
  filter: blur(18px);
}
.real-3d-earth .cosmic-planet-shimmer {
  inset: 11%;
  border: none;
  background: radial-gradient(
    circle,
    transparent 56%,
    rgba(26, 134, 255, 0.16) 69%,
    transparent 80%
  );
  box-shadow: none;
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 0.7;
}
.real-3d-earth .cosmic-planet-horizon {
  background: linear-gradient(
    to bottom,
    transparent 27%,
    rgba(0, 3, 12, 0.05) 50%,
    rgba(0, 3, 12, 0.48) 76%,
    rgba(0, 3, 12, 0.87) 96%
  );
  border-radius: 50%;
  inset: 0;
}
@media (max-width: 600px) {
  .real-3d-earth {
    top: 13% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .real-3d-earth {
    animation: none !important;
  }
}
.earth-no-webgl {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 0 21px #118bd055);
  transition: opacity 0.75s ease;
}
.real-3d-earth:has(.globe-ready) .earth-no-webgl {
  opacity: 0;
}
/* Homepage hero and shared dark presentation */
/* AI TREASURY — FINAL ART DIRECTION
 * User-approved galaxy UI: fixed, detailed 3D Earth + animated foreground.
 * All interactions are live DOM; the artwork is not a screenshot.
 */
:root {
  --galaxy-stroke: rgba(98, 129, 255, 0.29);
  --galaxy-surface: rgba(6, 13, 37, 0.72);
  --galaxy-blue: #4b9cfb;
  --galaxy-purple: #a55cfe;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #030714;
  color: #f5f7ff;
}
body:before {
  background:
    radial-gradient(ellipse at 52% 0, rgba(20, 43, 112, 0.26), transparent 53%),
    linear-gradient(#030817, #050717);
}
#particles {
  opacity: 0.54;
}
.site-header,
.site-header.scrolled {
  top: 14px;
  width: min(calc(100% - 8%), 1490px);
  border-radius: 21px;
  background: rgba(3, 10, 28, 0.82);
  border: 1px solid rgba(111, 150, 251, 0.27);
  box-shadow:
    inset 0 1px 0 #a9bbff18,
    0 10px 45px #02041099;
}
.nav-wrap {
  width: calc(100% - 52px);
  max-width: none;
  height: 65px;
}
.brand {
  gap: 12px;
  white-space: nowrap;
}
.brand-icon {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
.brand-icon:before,
.brand-icon:after {
  content: none;
}
.brand-gem {
  background: linear-gradient(138deg, #41d8ff 0%, #5075ff 48%, #bf58fa 95%);
  clip-path: polygon(
    44% 5%,
    65% 5%,
    100% 90%,
    73% 90%,
    57% 47%,
    32% 91%,
    1% 91%
  );
  width: 37px;
  height: 37px;
  transform: none;
  border-radius: 0;
  filter: drop-shadow(0 0 8px #697bff75);
}
.brand-text,
.brand-text span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #f8faff;
}
.brand-text small {
  display: none;
}
.nav-links {
  gap: clamp(18px, 3.3vw, 57px);
}
.nav-links a {
  font-size: 14px;
  font-weight: 550;
  color: #c0c8e7;
}
.nav-links a.active {
  color: #fff;
}
.nav-links a.active:after {
  bottom: -22px;
  height: 2px;
  background: linear-gradient(90deg, #8e55ff, #d567ff);
  box-shadow: 0 0 12px #9d68ff;
}
.nav-actions {
  gap: 16px;
}
.nav-search {
  background: none;
  border: 0;
  color: #eaf3ff;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.nav-search:hover {
  background: #6473f329;
  color: #bda5ff;
}
.nav-login {
  border: 1px solid #7080bc36;
  padding: 9px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 650;
}
.nav-login:hover {
  background: #6988ff1d;
  border-color: #8b9cff80;
}
.nav-actions .btn-primary {
  font-size: 13px;
  min-width: 104px;
  min-height: 41px;
  justify-content: center;
}
/* ----------------------------------- HERO ---------------------------------- */
.hero.cosmic-hero.final-hero {
  height: 940px;
  min-height: 880px;
  max-height: none;
  background:
    radial-gradient(ellipse 70% 52% at 50% 34%, #152c6319, transparent 88%),
    radial-gradient(ellipse 20% 45% at 0% 64%, #37137d38, transparent 88%),
    radial-gradient(ellipse 20% 45% at 100% 62%, #142a7838, transparent 88%),
    #020715;
}
.final-hero:before {
  background-image:
    radial-gradient(
      circle at 50% 53%,
      rgba(42, 128, 242, 0.1),
      transparent 59%
    ),
    radial-gradient(ellipse 55% 60% at 50% 50%, transparent 40%, #02071527 100%);
}
.final-hero:after {
  z-index: 8;
  background: linear-gradient(0deg, #040713, transparent 98%);
  height: 5%;
  pointer-events: none;
}
.final-hero .cosmic-aura {
  width: 125%;
  height: 88%;
  top: -12%;
  opacity: 0.67;
  background:
    radial-gradient(ellipse at 50% 26%, #284fbf24, transparent 49%),
    radial-gradient(ellipse 65% 55% at 50% 65%, #47147d22, transparent 69%);
}
.final-hero .cosmic-planet-wrap.real-3d-earth {
  width: min(77vw, 1080px);
  top: 7% !important;
  max-width: none;
  animation: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 25px #2972ff47);
  z-index: 2;
}
.final-hero .real-3d-earth .cosmic-planet-backlight {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(28, 92, 205, 0.08) 43%,
    rgba(71, 153, 255, 0.27) 59%,
    rgba(45, 130, 255, 0.14) 65%,
    transparent 74%
  );
  filter: blur(20px);
  inset: 0;
}
.final-hero .real-3d-earth .cosmic-planet-shimmer {
  inset: 9.5%;
  background: radial-gradient(
    circle at 55% 45%,
    transparent 61%,
    rgba(12, 109, 235, 0.14) 66%,
    rgba(92, 193, 255, 0.16) 70%,
    transparent 76%
  );
  box-shadow: 0 0 40px #239dff20;
  opacity: 0.85;
  animation: rimPulse 7s infinite alternate;
}
.final-hero .real-3d-earth .cosmic-planet-horizon {
  background: linear-gradient(
    180deg,
    transparent 42%,
    rgba(0, 2, 14, 0.06) 62%,
    rgba(0, 5, 15, 0.49) 83%,
    #020714f5 100%
  );
  inset: 7%;
  opacity: 0.72;
}
.final-hero .earth-no-webgl {
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.final-hero .cosmic-streak {
  z-index: 3;
}
.final-hero .cosmic-starfield {
  z-index: 1;
}
/* Planetary trajectories */
.orbit {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 50%;
  width: 1010px;
  height: 265px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: #7b50fe66;
  border-bottom-color: #468eff80;
  transform: translateX(-50%) rotate(-13deg);
  box-shadow: 0 0 4px #4987f51c;
}
.orbit-one {
  top: 195px;
}
.orbit-two {
  top: 282px;
  width: 1160px;
  height: 236px;
  transform: translateX(-50%) rotate(12deg);
  border-top-color: #8d4dff87;
  border-bottom-color: #5669ed50;
}
.orbit-three {
  top: 390px;
  width: 940px;
  height: 130px;
  transform: translateX(-50%) rotate(-5deg);
  border-top-color: #516de258;
  border-bottom-color: #a25bf178;
}
.orbit i {
  position: absolute;
  top: 0;
  left: var(--orbit-x, 26%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #eddbff;
  box-shadow:
    0 0 10px 4px #8461fc,
    0 0 23px #507dff;
  animation: orbitTwinkle 2.7s ease-in-out infinite alternate;
}
.orbit i:nth-child(2) {
  --orbit-x: 59%;
  animation-delay: 1s;
}
.orbit i:nth-child(3) {
  --orbit-x: 86%;
  animation-delay: 2s;
}
@keyframes orbitTwinkle {
  from {
    opacity: 0.5;
    transform: scale(0.65);
  }
  to {
    opacity: 1;
    transform: scale(1.35);
  }
}
/* Floating model entry chips with working links */
.model-satellites {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.satellite {
  position: absolute;
  pointer-events: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 180px;
  min-height: 66px;
  padding: 10px 14px;
  border: 1px solid #6889eb6b;
  border-radius: 18px;
  background: linear-gradient(125deg, #0b1439e8, #0c102ae8);
  box-shadow:
    0 8px 32px #0008,
    inset 0 1px 0 #a7b8fc13,
    0 0 25px #203bef0a;
  text-align: left;
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  animation: satelliteFloat 5s ease-in-out infinite alternate;
}
.satellite:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: #b38fff;
  box-shadow:
    0 14px 35px #000b,
    0 0 25px #7859ff2d;
}
.satellite strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}
.satellite small {
  display: block;
  margin-top: 5px;
  color: #a7b6da;
  font-size: 10px;
  white-space: nowrap;
}
.sat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
  flex: 0 0 auto;
}
.logo-chat {
  background: #126b60;
  color: #dbfdf0;
  font-size: 30px;
}
.logo-claude {
  color: #f4a466;
  font-size: 39px;
}
.logo-gemini {
  background: linear-gradient(110deg, #61d8ff, #8b57ff, #e5a1ff);
  background-clip: text;
  color: transparent;
  font-size: 42px;
}
.logo-deepseek {
  color: #5885ff;
  font-size: 43px;
}
.logo-image {
  color: #eef5ff;
  font-size: 33px;
}
.logo-llama {
  color: #4c9bff;
  font-size: 39px;
}
.sat-chat {
  left: 11%;
  top: 16.5%;
  animation-delay: -1s;
}
.sat-claude {
  left: 5%;
  top: 33%;
  animation-delay: -2.5s;
}
.sat-gemini {
  left: 8%;
  top: 50%;
  animation-delay: -0.5s;
}
.sat-deepseek {
  right: 11%;
  top: 16.5%;
  animation-delay: -2s;
}
.sat-image {
  right: 5%;
  top: 33%;
  animation-delay: -3s;
}
.sat-llama {
  right: 8%;
  top: 50%;
  animation-delay: -1.5s;
}
@keyframes satelliteFloat {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -9px;
  }
}
/* Central text — matches the approved composition */
.final-hero .cosmic-hero-content {
  z-index: 6;
  top: 30.5%;
  left: 0;
  right: 0;
  max-width: 900px;
  margin: 0 auto;
  transform: none;
}
.final-hero .cosmic-eyebrow {
  padding: 9px 19px;
  font-size: 12px;
  letter-spacing: 0.015em;
  font-family: Inter, "Microsoft YaHei", sans-serif;
  background: #031029dc;
  border-color: #5168a0a8;
  color: #e6eaff;
}
.final-hero .eyebrow-spark {
  color: #48b9ff;
  font-size: 15px;
}
.final-hero .cosmic-headline {
  font-size: clamp(60px, 5.7vw, 94px);
  margin: 16px 0 10px;
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 1.16;
  color: #cce1ff;
  text-shadow:
    0 5px 28px #000,
    0 0 28px #235dff75;
}
.final-hero .cosmic-title-shine {
  background: linear-gradient(
    103deg,
    #e8f4ff 0%,
    #7ab9ff 35%,
    #9c77ff 63%,
    #cb73fa 95%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 160%;
  animation: titleFlow 8s ease-in-out infinite alternate;
}
.hero-secondline {
  font-size: clamp(24px, 2.55vw, 37px);
  font-weight: 790;
  letter-spacing: -0.045em;
  margin: 0 0 13px;
  text-shadow: 0 3px 13px #000;
}
.final-hero .cosmic-subline {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.9;
  color: #cbd4e8;
  text-shadow: 0 3px 18px #000;
}
.final-hero .cosmic-actions {
  margin-top: 26px;
  gap: 17px;
}
.final-hero .cosmic-btn {
  font-size: 14px;
  height: 54px;
  padding: 0 28px;
  min-width: 197px;
  font-weight: 700;
}
.final-hero .cosmic-primary {
  background: linear-gradient(103deg, #c064f0, #8669fb 52%, #247ff2);
  border-color: #b5a3fb8c;
}
.final-hero .cosmic-outline {
  border-color: #6477b1b3;
  background: rgba(2, 8, 24, 0.85);
}
/* Animated luminous floor, with fixed Earth above */
.final-hero .cosmic-floor {
  z-index: 4;
  top: 0;
}
.final-hero .cosmic-grid {
  top: 73%;
  background-image:
    linear-gradient(rgba(70, 96, 246, 0.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 95, 254, 0.52) 1px, transparent 1px);
  background-size: 76px 76px;
  transform: perspective(620px) rotateX(65deg);
  box-shadow: 0 -8px 70px #3d73fd37;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 24%,
    #000 74%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 24%,
    #000 74%,
    transparent 100%
  );
}
.final-hero .cosmic-floor-fog {
  inset: 70% 0 0;
  background: linear-gradient(180deg, #090f2506, transparent 37%, #02081372);
}
.floor-center-light {
  position: absolute;
  left: 50%;
  top: 72.5%;
  width: 80%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    #348aff,
    #69ceff,
    transparent
  );
  box-shadow: 0 0 21px 6px #2565ff7a;
}
.hero-metrics {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 73%;
  transform: translateX(-50%);
  width: min(1060px, 92vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: #fff;
}
.hero-metric {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 3px 23px;
  border-right: 1px solid #808bb266;
}
.hero-metric:last-child {
  border-right: 0;
}
.metric-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  color: #a997ff;
  background: #151b4db3;
  border-radius: 50%;
  border: 1px solid #6074f03a;
  box-shadow: 0 0 16px #3b50f126;
}
.hero-metric strong {
  display: block;
  font-size: 31px;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.06em;
}
.hero-metric strong span {
  font-size: 21px;
}
.hero-metric small {
  display: block;
  font-size: 12px;
  color: #b3bbd9;
  margin-top: 6px;
}
.hero-benefits {
  position: absolute;
  left: 50%;
  top: 85.3%;
  transform: translateX(-50%);
  z-index: 7;
  width: min(1290px, 90%);
  min-height: 96px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  border-radius: 20px;
  border: 1px solid #6176e54d;
  background: linear-gradient(110deg, #07102ae8, #050a20eb);
  box-shadow:
    0 12px 49px #000a,
    inset 0 1px #a7c4ff18;
  backdrop-filter: blur(13px);
}
.benefit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 16px 9px;
}
.benefit > span {
  width: 45px;
  height: 45px;
  border: 1px solid #6485ef55;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #b28bff;
  background: #151a4caa;
  flex: 0 0 auto;
}
.benefit strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.benefit small {
  display: block;
  margin-top: 5px;
  color: #8b9aba;
  font-size: 10px;
  white-space: nowrap;
}
/* Rest of website, cohesive glass and galaxy look */
.section-models,
.section-features,
.section-dev,
.pricing-section,
.catalog-section {
  position: relative;
}
.section-header h2 em,
.about-copy em {
  font-style: normal;
  background: linear-gradient(100deg, #80b9ff, #bf84ff);
  color: transparent;
  background-clip: text;
}
.model-card,
.feature-card,
.price-card,
.code-window,
.docs-sidebar,
.docs-content {
  border-color: #7283ca38;
  background-color: #081026df;
  box-shadow: inset 0 1px #a3b6ff0d;
}
.model-card:hover,
.feature-card:hover {
  border-color: #7388f2a8;
}
.inner-page {
  min-height: 65vh;
}
.about-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
  padding-bottom: 125px;
}
.about-glow {
  min-height: 390px;
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 48%, #5064fa55, transparent 42%),
    linear-gradient(135deg, #090e27, #0a112a);
  border: 1px solid #6875ca55;
  overflow: hidden;
}
.about-glow > span {
  font-size: 130px;
  line-height: 1.5;
  color: #c1b9ff;
  text-shadow: 0 0 50px #8364fa;
  animation: orbitTwinkle 4s ease-in-out infinite alternate;
}
.about-glow strong {
  font-size: 17px;
  letter-spacing: 0.14em;
}
.about-glow small {
  color: #889ec5;
  letter-spacing: 0.21em;
  font-size: 9px;
  margin-top: 8px;
}
.about-copy h2 {
  font-size: clamp(33px, 3.2vw, 56px);
  line-height: 1.24;
  margin: 19px 0 30px;
}
.about-copy p {
  line-height: 2;
  color: #aebcd6;
  max-width: 640px;
  margin: 16px 0;
}
.about-actions {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}
/* Responsive design */
@media (max-width: 1200px) {
  .sat-chat {
    left: 6%;
  }
  .sat-claude {
    left: 2%;
  }
  .sat-gemini {
    left: 4%;
  }
  .sat-deepseek {
    right: 6%;
  }
  .sat-image {
    right: 2%;
  }
  .sat-llama {
    right: 4%;
  }
  .satellite {
    width: 158px;
    min-height: 59px;
  }
  .sat-icon {
    width: 35px;
    height: 35px;
    font-size: 27px;
  }
  .final-hero .cosmic-planet-wrap.real-3d-earth {
    width: 950px;
  }
  .hero-metric {
    gap: 9px;
    padding: 3px 12px;
  }
  .brand-text,
  .brand-text span {
    font-size: 17px;
  }
  .nav-links {
    gap: 20px;
  }
}
@media (max-width: 900px) {
  .site-header,
  .site-header.scrolled {
    top: 12px;
    width: calc(100% - 36px);
  }
  .nav-wrap {
    height: 61px;
  }
  .hero.cosmic-hero.final-hero {
    height: 920px;
    min-height: 920px;
  }
  .final-hero .cosmic-planet-wrap.real-3d-earth {
    width: 900px;
    top: 13% !important;
  }
  .final-hero .cosmic-hero-content {
    top: 34%;
    padding: 0 20px;
  }
  .final-hero .cosmic-headline {
    font-size: 70px;
  }
  .hero-secondline {
    font-size: 28px;
  }
  .satellite {
    transform: scale(0.83);
    animation: none;
  }
  .sat-chat {
    left: -1%;
    top: 19%;
  }
  .sat-claude {
    left: -3%;
    top: 45%;
  }
  .sat-gemini {
    display: none;
  }
  .sat-deepseek {
    right: -1%;
    top: 19%;
  }
  .sat-image {
    right: -3%;
    top: 45%;
  }
  .sat-llama {
    display: none;
  }
  .hero-metrics {
    top: 76%;
  }
  .hero-benefits {
    top: 86%;
    width: 94%;
  }
  .benefit {
    gap: 8px;
  }
  .benefit > span {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .benefit small {
    font-size: 9px;
  }
  .benefit strong {
    font-size: 12px;
  }
  .about-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-glow {
    min-height: 290px;
  }
}
@media (max-width: 600px) {
  .site-header,
  .site-header.scrolled {
    width: calc(100% - 24px);
    top: 10px;
    border-radius: 20px;
  }
  .nav-wrap {
    height: 57px;
    width: calc(100% - 25px);
  }
  .brand {
    gap: 5px;
  }
  .brand-icon {
    width: 30px;
    height: 30px;
  }
  .brand-gem {
    width: 28px;
    height: 28px;
  }
  .brand-text,
  .brand-text span {
    font-size: 15px;
  }
  .mobile-menu.open {
    top: 63px;
  }
  .hero.cosmic-hero.final-hero {
    height: 920px;
    min-height: 920px;
    max-height: none;
  }
  .final-hero .cosmic-planet-wrap.real-3d-earth {
    top: 10% !important;
    width: 670px;
  }
  .final-hero .real-3d-earth .cosmic-planet-horizon {
    opacity: 0.88;
  }
  .orbit {
    width: 780px;
    top: 170px;
  }
  .orbit-two {
    width: 790px;
    top: 230px;
  }
  .orbit-three {
    width: 700px;
    top: 300px;
  }
  .satellite {
    width: 131px;
    min-height: 43px;
    padding: 7px 8px;
    gap: 7px;
    border-radius: 13px;
    animation: none;
  }
  .satellite strong {
    font-size: 11px;
  }
  .satellite small {
    font-size: 8px;
    margin-top: 2px;
  }
  .sat-icon {
    width: 26px;
    height: 28px;
    flex-basis: 26px;
    font-size: 21px;
  }
  .sat-chat {
    left: 2%;
    top: 18%;
  }
  .sat-deepseek {
    right: 2%;
    top: 18%;
  }
  .sat-claude {
    left: 1%;
    top: 29%;
  }
  .sat-image {
    right: 1%;
    top: 29%;
  }
  .sat-gemini,
  .sat-llama {
    display: none;
  }
  .final-hero .cosmic-hero-content {
    top: 36%;
    left: 10px;
    right: 10px;
    padding: 0;
    max-width: 100%;
  }
  .final-hero .cosmic-eyebrow {
    font-size: 9px;
    padding: 8px 12px;
    white-space: nowrap;
    max-width: 100%;
  }
  .final-hero .cosmic-headline {
    margin: 16px 0 9px;
    font-size: clamp(42px, 11.5vw, 62px);
    letter-spacing: -0.075em;
  }
  .hero-secondline {
    font-size: clamp(17px, 4.3vw, 23px);
    letter-spacing: -0.04em;
    line-height: 1.4;
    margin: 0 0 12px;
  }
  .final-hero .cosmic-subline {
    font-size: 11px;
    line-height: 1.8;
    max-width: 360px;
    margin: 0 auto;
  }
  .final-hero .cosmic-actions {
    margin-top: 22px;
    gap: 10px;
    max-width: 100%;
  }
  .final-hero .cosmic-btn {
    font-size: 11px;
    min-width: 0;
    padding: 0 14px;
    height: 44px;
    gap: 6px;
  }
  .final-hero .cosmic-grid {
    top: 73%;
    background-size: 56px 56px;
  }
  .floor-center-light {
    top: 72%;
  }
  .hero-metrics {
    top: 71%;
    width: 94%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }
  .hero-metric {
    padding: 0 8px;
    gap: 9px;
    justify-content: center;
  }
  .hero-metric:nth-child(even) {
    border-right: 0;
  }
  .hero-metric strong {
    font-size: 22px;
  }
  .hero-metric strong span {
    font-size: 14px;
  }
  .hero-metric small {
    font-size: 9px;
    margin-top: 3px;
  }
  .metric-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  .metric-icon svg {
    width: 18px;
    height: 18px;
  }
  .hero-benefits {
    top: 85%;
    min-height: 104px;
    width: 94%;
    grid-template-columns: 1fr 1fr;
    row-gap: 0;
    padding: 6px 2px;
    border-radius: 17px;
  }
  .benefit {
    justify-content: flex-start;
    padding: 7px 8px;
    gap: 7px;
  }
  .benefit > span {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
  .benefit > span svg {
    width: 16px;
    height: 16px;
  }
  .benefit strong {
    font-size: 10px;
  }
  .benefit small {
    font-size: 8px;
    white-space: normal;
    margin-top: 1px;
  }
  .about-layout {
    padding-bottom: 65px;
  }
  .about-glow {
    min-height: 250px;
  }
  .about-copy h2 {
    font-size: 32px;
  }
}
@media (max-width: 360px) {
  .brand-text,
  .brand-text span {
    font-size: 13px;
  }
  .satellite {
    width: 122px;
  }
  .final-hero .cosmic-headline {
    font-size: 42px;
  }
  .hero-secondline {
    font-size: 16px;
  }
  .hero-benefits {
    top: 85.5%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .satellite,
  .orbit i,
  .final-hero .real-3d-earth .cosmic-planet-shimmer,
  .about-glow > span {
    animation: none !important;
  }
}
/* Alignment correction: transform-based entrance animation must not override centering. */
.final-hero .hero-metrics,
.final-hero .hero-benefits {
  transform: none;
  translate: -50% 0;
  animation: heroFadeOnly 1s ease-out both;
}
.final-hero .hero-metrics {
  animation-delay: 0.5s;
}
.final-hero .hero-benefits {
  animation-delay: 0.72s;
}
@keyframes heroFadeOnly {
  from {
    opacity: 0;
    filter: blur(9px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
/* The globe disappears naturally into the perspective horizon instead of covering the floor. */
.final-hero .cosmic-planet-wrap.real-3d-earth {
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.84) 66%,
    transparent 84%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.84) 66%,
    transparent 84%
  );
}
/* Approved composition and responsive geometry */
/* Composition measured against the supplied 1672 × 941 reference. */
:root {
  --reference-border: rgba(94, 117, 224, 0.44);
}
body {
  background: #020616;
}
.ambient,
.noise,
#particles {
  display: none;
}
.page-enter {
  animation: none;
}
.site-header,
.site-header.scrolled {
  top: 0.837vw;
  width: 89.1%;
  max-width: none;
  margin: auto;
  border-radius: 1.2vw;
  background: rgba(2, 7, 23, 0.87);
  border: 1px solid rgba(86, 115, 202, 0.38);
  box-shadow: inset 0 1px 0 #b4c7ff08;
  backdrop-filter: blur(16px);
}
.nav-wrap {
  width: 93.4%;
  height: 3.83vw;
  gap: 2vw;
}
.brand {
  gap: 0.7vw;
}
.brand-emblem {
  width: 2.4vw;
  height: 2.4vw;
  flex-shrink: 0;
  overflow: visible;
}
.brand-text,
.brand-text span {
  font-size: 1.38vw;
  font-weight: 650;
  letter-spacing: -0.035em;
}
.nav-links {
  gap: 3.35vw;
}
.nav-links a {
  font-size: 1.02vw;
  font-weight: 500;
  color: #c6cbde;
}
.nav-links a.active::after {
  bottom: -1.07vw;
  height: 2px;
}
.nav-actions {
  gap: 0.9vw;
}
.nav-search {
  width: 2.6vw;
  height: 2.6vw;
}
.nav-search svg {
  width: 1.25vw;
  height: 1.25vw;
}
.nav-login {
  padding: 0.39vw 1.3vw;
  font-size: 1.02vw;
  font-weight: 500;
}
.nav-actions .btn-primary {
  min-width: 6.2vw;
  min-height: 2.48vw;
  font-size: 1.02vw;
  padding: 0 1.2vw;
  border-radius: 30px;
  background: linear-gradient(105deg, #bf57f7, #7467fc 55%, #2197ff);
  border: 1px solid #b495ff8c;
}
.hero.cosmic-hero.final-hero {
  height: 56.28vw;
  min-height: 0;
  max-height: none;
  padding: 0;
  display: block;
  isolation: isolate;
  background: #020616;
}
.final-hero::before,
.final-hero::after {
  content: none;
}
.cosmic-scene-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.earth-texture-credit {
  margin: 12px 0 0;
  color: #717a95;
  font-size: 11px;
  line-height: 1.5;
}
.earth-texture-credit a {
  color: #959fbb;
}
.final-hero .hero-appear {
  animation: none;
  opacity: 1;
  filter: none;
}
.final-hero .model-satellites {
  z-index: 2;
}
.satellite {
  width: 11.08vw;
  min-height: 0;
  height: 4.15vw;
  padding: 0.65vw 1.1vw;
  border: 1px solid var(--reference-border);
  border-radius: 1.15vw;
  background: linear-gradient(125deg, #0b1237ee, #070c25ee);
  gap: 0.95vw;
  box-shadow: inset 0 1px 0 #96aaff06;
  animation: none;
  translate: none;
  transform: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.satellite:hover {
  transform: none;
  background: #11183bea;
  box-shadow: 0 0 22px #7869ff30;
}
.satellite strong {
  font-size: 0.84vw;
  line-height: 1.3;
  font-weight: 550;
}
.satellite small {
  margin-top: 0.25vw;
  font-size: 0.66vw;
  line-height: 1.4;
  font-weight: 400;
  color: #bdc2d5;
}
.sat-icon {
  width: 2.3vw;
  height: 2.3vw;
  flex: 0 0 2.3vw;
  border-radius: 0.65vw;
}
.sat-icon .ai-brand-mark {
  width: 100%;
  height: 100%;
}
.logo-chat {
  background: #059b78;
  padding: 0.24vw;
}
.sat-chat {
  left: 12.85%;
  top: 16.74%;
}
.sat-claude {
  left: 6.91%;
  top: 33.7%;
}
.sat-gemini {
  left: 10.04%;
  top: 49.99%;
  display: flex;
}
.sat-deepseek {
  right: 12.55%;
  top: 16.63%;
}
.sat-image {
  right: 6.57%;
  top: 33.38%;
}
.sat-llama {
  right: 9.93%;
  top: 48.08%;
  display: flex;
}
.ai-brand-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.mark-light {
  filter: brightness(0) invert(1);
}
.provider-logo b {
  display: flex;
}
.provider-logo .ai-brand-mark {
  width: 24px;
  height: 24px;
}
.model-symbol .ai-brand-mark {
  width: 65%;
  height: 65%;
  margin: auto;
}
.diagram-node .ai-brand-mark {
  width: 55%;
  height: 55%;
}
.final-hero .cosmic-hero-content {
  position: absolute;
  top: 31.77%;
  left: 0;
  right: 0;
  max-width: none;
  width: 80%;
  padding: 0;
  margin: auto;
  transform: none;
  z-index: 3;
  text-align: center;
}
.final-hero .cosmic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8vw;
  font-size: 0.99vw;
  line-height: 1.4;
  padding: 0.54vw 1.32vw;
  color: #f2f4fd;
  border-radius: 30px;
  background: #01091fda;
  border: 1px solid #576bb6a3;
  letter-spacing: 0;
}
.final-hero .eyebrow-spark {
  display: grid;
  place-items: center;
  color: #3cafff;
}
.final-hero .eyebrow-spark svg {
  width: 1.05vw;
  height: 1.05vw;
}
.final-hero .cosmic-headline {
  font-size: 5.8vw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.055em;
  margin: 0.62vw 0 0.6vw;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff 15%, #d6e3ff 39%, #83a6ff 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 9px #0b132d90);
}
.final-hero .cosmic-title-shine {
  background:
    linear-gradient(180deg, #ffffff80 0%, transparent 47%, #34185555 100%),
    linear-gradient(110deg, #eef5ff 0%, #8facff 35%, #a483ff 64%, #c568ec 95%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: none;
  background-size: 100%;
}
.final-hero .hero-secondline {
  font-size: 2.35vw;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 0.64vw;
  text-shadow: 0 2px 9px #000;
  white-space: nowrap;
}
.final-hero .cosmic-subline {
  max-width: none;
  font-size: 0.97vw;
  line-height: 1.52;
  color: #d1d2df;
  margin: 0 auto;
  font-weight: 400;
  text-shadow: 0 2px 9px #000;
}
.final-hero .cosmic-actions {
  margin-top: 1.55vw;
  gap: 1.28vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-hero .cosmic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 3.5vw;
  padding: 0 1.8vw;
  gap: 0.68vw;
  font-size: 1.02vw;
  font-weight: 500;
  border-radius: 50px;
}
.final-hero .cosmic-btn svg {
  width: 1.1vw;
  height: 1.1vw;
}
.final-hero .cosmic-primary {
  width: 13.45vw;
  background: linear-gradient(110deg, #bd52f1, #8060fd 52%, #2098ff);
  border: 1px solid #ca9eff9c;
  box-shadow:
    inset 0 1px 0 #ffffff22,
    0 8px 30px #5264ff28;
}
.final-hero .cosmic-outline {
  width: 12.35vw;
  background: #010719b5;
  border: 1px solid #929affb0;
}
.final-hero .hero-metrics {
  width: 66.2%;
  top: 75.2%;
  left: 50%;
  translate: -50% 0;
  transform: none;
  animation: none;
  z-index: 3;
  grid-template-columns: repeat(4, 1fr);
}
.hero-metric {
  height: 3.88vw;
  padding: 0 1vw;
  gap: 1.1vw;
  justify-content: center;
  border-color: #7d78b047;
}
.metric-icon {
  width: 3.35vw;
  height: 3.35vw;
  flex-basis: 3.35vw;
  background: radial-gradient(circle at 40% 20%, #23388299, #080d30e0 65%);
  border: 1px solid #5061b052;
  box-shadow: inset 0 0 10px #8b83ff12;
  color: #b18dff;
}
.metric-icon svg {
  width: 1.92vw;
  height: 1.92vw;
  filter: drop-shadow(0 0 4px #6e65df);
}
.hero-metric strong {
  font-size: 1.8vw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hero-metric small {
  font-size: 0.91vw;
  color: #c7c8da;
  line-height: 1.4;
  margin-top: 0.15vw;
}
.hero-metric > span:last-child,
.benefit > div {
  text-align: left;
}
.final-hero .hero-benefits {
  top: 87.2%;
  left: 50%;
  width: 85.8%;
  height: 10.85%;
  min-height: 0;
  translate: -50% 0;
  transform: none;
  animation: none;
  z-index: 3;
  border-radius: 1.4vw;
  border-color: #5966bd70;
  background: linear-gradient(110deg, #03091fee, #020619ed);
  backdrop-filter: blur(12px);
  box-shadow: none;
  padding: 0 1.8vw;
}
.benefit {
  gap: 1vw;
  padding: 0;
  justify-content: center;
}
.benefit > span {
  width: 3.05vw;
  height: 3.05vw;
  flex-basis: 3.05vw;
  color: #b49aff;
  background: radial-gradient(circle at 40% 20%, #1d276b88, #070d29cc 70%);
  border-color: #5d5db36b;
}
.benefit > span svg {
  width: 1.7vw;
  height: 1.7vw;
}
.benefit strong {
  font-size: 0.95vw;
  font-weight: 600;
}
.benefit small {
  font-size: 0.73vw;
  margin-top: 0.17vw;
  color: #a1a6bf;
}
.brand-emblem {
  filter: drop-shadow(0 2px 6px #5752ff20);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #c1adff;
  outline-offset: 5px;
}
/* Mobile reflow keeps all six model entries available. */
@media (max-width: 900px) {
  .site-header,
  .site-header.scrolled {
    top: 12px;
    width: calc(100% - 28px);
    border-radius: 18px;
  }
  .nav-wrap {
    height: 60px;
    width: calc(100% - 32px);
  }
  .brand {
    gap: 9px;
  }
  .brand-emblem {
    width: 34px;
    height: 34px;
  }
  .brand-text,
  .brand-text span {
    font-size: 20px;
  }
  .mobile-menu.open {
    top: 62px;
    border-radius: 0 0 18px 18px;
  }
  .hero.cosmic-hero.final-hero {
    height: 1030px;
    min-height: 1030px;
  }
  .final-hero .cosmic-hero-content {
    top: 150px;
    width: calc(100% - 34px);
  }
  .final-hero .cosmic-eyebrow {
    padding: 9px 15px;
    font-size: 11px;
    gap: 9px;
  }
  .final-hero .eyebrow-spark svg {
    width: 15px;
    height: 15px;
  }
  .final-hero .cosmic-headline {
    font-size: clamp(45px, 9vw, 74px);
    line-height: 1.2;
    margin: 16px 0 10px;
  }
  .final-hero .hero-secondline {
    font-size: clamp(21px, 3.7vw, 31px);
    line-height: 1.5;
    white-space: normal;
    max-width: 580px;
    margin: 0 auto 14px;
  }
  .final-hero .cosmic-subline {
    font-size: 13px;
    line-height: 1.8;
    max-width: 520px;
  }
  .final-hero .cosmic-subline br {
    display: none;
  }
  .final-hero .cosmic-actions {
    margin-top: 23px;
    gap: 12px;
  }
  .final-hero .cosmic-btn {
    height: 48px;
    font-size: 13px;
    padding: 0 16px;
    gap: 8px;
  }
  .final-hero .cosmic-btn svg {
    width: 17px;
    height: 17px;
  }
  .final-hero .cosmic-primary {
    width: 183px;
  }
  .final-hero .cosmic-outline {
    width: 170px;
  }
  .model-satellites {
    top: 510px;
    bottom: auto;
    height: 220px;
    left: 50%;
    width: min(600px, calc(100% - 34px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .satellite,
  .sat-gemini,
  .sat-llama {
    display: flex;
    position: static;
    width: 100%;
    height: 65px;
    min-height: 0;
    padding: 10px 14px;
    border-radius: 14px;
    gap: 12px;
    transform: none;
  }
  .sat-chat {
    order: 0;
  }
  .sat-deepseek {
    order: 1;
  }
  .sat-claude {
    order: 2;
  }
  .sat-image {
    order: 3;
  }
  .sat-gemini {
    order: 4;
  }
  .sat-llama {
    order: 5;
  }
  .satellite strong {
    font-size: 14px;
  }
  .satellite small {
    margin-top: 3px;
    font-size: 10px;
  }
  .sat-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    border-radius: 9px;
  }
  .logo-chat {
    padding: 4px;
  }
  .final-hero .hero-metrics {
    top: 773px;
    width: min(650px, 94%);
    gap: 0;
  }
  .hero-metric {
    height: 57px;
    padding: 0 8px;
    gap: 9px;
  }
  .metric-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
  .metric-icon svg {
    width: 23px;
    height: 23px;
  }
  .hero-metric strong {
    font-size: 22px;
  }
  .hero-metric small {
    font-size: 10px;
    margin-top: 3px;
  }
  .final-hero .hero-benefits {
    top: 881px;
    width: 94%;
    height: 115px;
    border-radius: 18px;
    padding: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
  .benefit {
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 10px;
  }
  .benefit > span {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .benefit > span svg {
    width: 23px;
    height: 23px;
  }
  .benefit strong {
    font-size: 12px;
  }
  .benefit small {
    font-size: 9px;
    margin-top: 2px;
  }
}
@media (max-width: 600px) {
  .hero.cosmic-hero.final-hero {
    height: 1090px;
    min-height: 1090px;
  }
  .final-hero .cosmic-hero-content {
    top: 135px;
  }
  .final-hero .hero-secondline {
    max-width: 345px;
  }
  .final-hero .hero-secondline span {
    display: block;
  }
  .final-hero .cosmic-subline {
    max-width: 350px;
    font-size: 12px;
  }
  .final-hero .cosmic-actions {
    gap: 10px;
  }
  .final-hero .cosmic-btn {
    font-size: 12px;
    height: 47px;
    padding: 0 13px;
  }
  .final-hero .cosmic-primary {
    width: 174px;
  }
  .final-hero .cosmic-outline {
    width: 157px;
  }
  .model-satellites {
    top: 475px;
    height: 220px;
    gap: 10px;
  }
  .satellite {
    height: 65px;
    padding: 9px 11px;
    gap: 9px;
  }
  .satellite strong {
    font-size: 13px;
  }
  .satellite small {
    font-size: 9px;
  }
  .sat-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  .final-hero .hero-metrics {
    top: 740px;
    grid-template-columns: 1fr 1fr;
    gap: 22px 0;
    width: 92%;
  }
  .hero-metric {
    justify-content: flex-start;
    padding-left: 12%;
  }
  .hero-metric:nth-child(even) {
    border: 0;
  }
  .final-hero .hero-benefits {
    top: 931px;
    height: 128px;
    padding: 8px;
  }
  .benefit {
    padding: 4px 6px;
    gap: 7px;
  }
  .benefit > span {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .benefit strong {
    font-size: 11px;
  }
  .benefit small {
    font-size: 8px;
    white-space: normal;
  }
}
@media (max-width: 360px) {
  .final-hero .cosmic-headline {
    font-size: 42px;
  }
  .final-hero .cosmic-eyebrow {
    font-size: 10px;
  }
  .final-hero .cosmic-btn {
    font-size: 11px;
    padding: 0 10px;
  }
  .final-hero .cosmic-primary {
    width: 156px;
  }
  .final-hero .cosmic-outline {
    width: 141px;
  }
  .satellite {
    padding: 9px 8px;
    gap: 7px;
  }
  .satellite small {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .earth-light-sweep,
  .earth-rim-pulse {
    animation: none !important;
  }
}
/* Navigation interaction and motion */
/* Subtle movement for the glass navigation; keep the approved layout intact. */
.site-header {
  isolation: isolate;
  --nav-pointer-x: 50%;
  --nav-pointer-y: 50%;
  transition:
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    #5580f515 5%,
    #ac63fdba 23%,
    #6597ff52 38%,
    #51bdffb0 52%,
    #6b75ef22 65%,
    #bb68f9a6 80%,
    #5580f515 96%
  );
  background-size: 300% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
  animation: nav-border-flow 13s ease-in-out infinite alternate;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--nav-pointer-x) var(--nav-pointer-y),
    #698cff20,
    #836bff08 40%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.site-header.pointer-inside::after {
  opacity: 1;
}
.site-header .nav-wrap {
  position: relative;
  z-index: 1;
  transition:
    height 0.4s ease,
    gap 0.45s ease;
}
.site-header.scrolled {
  background: rgba(2, 7, 22, 0.96);
  border-color: #738ef657;
  box-shadow:
    inset 0 1px 0 #ffffff08,
    0 10px 36px #00051a8c,
    0 0 25px #4564d810;
}
.site-header.nav-compact {
  top: 0.62vw;
  width: 76%;
}
.site-header.nav-compact .nav-wrap {
  height: calc(3.83vw - 5px);
  gap: 1.25vw;
}
.nav-enhanced .nav-links {
  position: relative;
  isolation: isolate;
  transition: gap 0.45s ease;
}
.nav-enhanced.nav-compact .nav-links {
  gap: 2.2vw;
}
.nav-enhanced .nav-links > a {
  z-index: 1;
  transition:
    color 0.22s ease,
    text-shadow 0.22s ease;
}
.nav-enhanced .nav-links > a::after {
  display: none;
}
.nav-enhanced .nav-links > a:hover,
.nav-enhanced .nav-links > a:focus-visible,
.nav-enhanced .nav-links > a.active {
  color: #fff;
  text-shadow: 0 0 18px #a997ff3d;
}
.nav-motion-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--indicator-width, 0px);
  height: var(--indicator-height, 0px);
  transform: translate3d(var(--indicator-x, 0px), var(--indicator-y, 0px), 0);
  pointer-events: none;
  border: 1px solid #9aabff28;
  border-radius: 11px;
  background: linear-gradient(120deg, #7765eb1c, #538bea17);
  box-shadow:
    inset 0 1px 0 #b7c4ff0d,
    0 0 18px #6d7af50d;
  opacity: 0;
}
.nav-motion-indicator.is-ready {
  opacity: 1;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s ease,
    opacity 0.2s ease;
}
.nav-motion-indicator::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b675fb, #8292ff 50%, #5fc7ff);
  box-shadow: 0 0 9px #a383ff73;
}
.site-header .brand-emblem {
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}
.site-header .brand:hover .brand-emblem,
.site-header .brand:focus-visible .brand-emblem {
  transform: rotate(-5deg) scale(1.06);
  filter: drop-shadow(0 0 10px #9573ff65);
}
.site-header .nav-search,
.site-header .nav-login {
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.site-header .nav-search:hover,
.site-header .nav-search:focus-visible {
  background: #7985ff20;
  box-shadow: inset 0 0 0 1px #93a4ff35;
}
.site-header .nav-login:hover,
.site-header .nav-login:focus-visible {
  background: #7c80fc18;
  border-color: #8ea4ff7a;
  box-shadow: 0 0 18px #657fff15;
}
.site-header .nav-actions .btn-primary {
  background-size: 220% 100%;
  animation: nav-button-flow 7s ease-in-out infinite alternate;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.site-header .nav-actions .btn-primary:hover,
.site-header .nav-actions .btn-primary:focus-visible {
  transform: translateY(-1px);
  border-color: #d3b8ffc4;
  box-shadow: 0 0 25px #886fff60;
}
@keyframes nav-border-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
@keyframes nav-button-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
@media (max-width: 900px) {
  .site-header.nav-compact {
    top: 9px;
    width: calc(100% - 36px);
  }
  .site-header.nav-compact .nav-wrap {
    height: 56px;
  }
  .site-header .mobile-menu {
    z-index: 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header .nav-actions .btn-primary {
    animation: none;
  }
  .site-header,
  .site-header *,
  .site-header::after {
    transition: none !important;
  }
}
/* Live catalog, session and status presentation */
.live-data-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 24px;
  padding: 12px 16px;
  border: 1px solid #33354e;
  border-radius: 12px;
  background: #111324;
  color: #aeb5d5;
  font-size: 12px;
  line-height: 1.6;
}
.live-data-status[data-state="stale"] {
  border-color: #785b36;
  color: #efc88b;
}
.live-data-status[data-state="error"] {
  border-color: #793a51;
  color: #ffc2d0;
}
.live-health {
  display: block;
  margin-top: 4px;
  color: #aeb5d5;
  font-size: 11px;
}
.live-health[data-api-health="ready"] {
  color: #89d8c2;
}
.live-health[data-api-health="error"] {
  color: #ffadc1;
}
.live-refresh {
  flex-shrink: 0;
  border: 1px solid #635c93;
  border-radius: 8px;
  padding: 7px 12px;
  color: #dfdcff;
  background: #29233e;
  font: inherit;
  cursor: pointer;
}
.live-refresh:disabled {
  opacity: 0.5;
  cursor: wait;
}
.live-refresh:focus-visible {
  outline: 2px solid #b6a6ff;
  outline-offset: 3px;
}
.model-live-price {
  margin: 12px 0;
  color: #c7c6e2;
  font-size: 11px;
  line-height: 1.8;
}
.live-pricing {
  margin: 28px 0 36px;
  border: 1px solid #34364d;
  border-radius: 20px;
  padding: 26px;
  background: linear-gradient(120deg, #121425, #0c0e1c);
}
.live-pricing h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.live-pricing > p {
  color: #a1a8c6;
  font-size: 12px;
  line-height: 1.9;
}
.live-pricing .live-data-status {
  margin: 16px 0;
}
.live-price-scroll {
  overflow-x: auto;
}
.live-price-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  color: #d9ddf1;
  font-size: 13px;
  text-align: left;
}
.live-price-table th {
  color: #a6acd0;
  font-size: 11px;
  font-weight: 500;
}
.live-price-table th,
.live-price-table td {
  padding: 15px 10px;
  border-bottom: 1px solid #272a40;
  vertical-align: top;
}
.live-price-table td:not(:first-child) {
  font-family: "DM Mono", monospace;
}
.live-price-table tbody tr:last-child td {
  border-bottom: 0;
}
.live-price-table small {
  display: block;
  margin-top: 5px;
  color: #929ab9;
  font: 11px inherit;
  line-height: 1.6;
}
.live-pricing-link {
  display: inline-flex;
  margin-top: 14px;
  align-items: center;
  gap: 6px;
  color: #c7b9ff;
  font-size: 12px;
}
.request-status[data-state="error"] {
  color: #ffc2d0;
}
.request-status[data-state="error"] i {
  background: #ff849f;
  box-shadow: none;
}
.integration-status {
  grid-column: 1/-1;
  color: #aeb5d5;
  font-size: 14px;
  line-height: 1.8;
}
[data-auth-entry][hidden],
[data-session-account][hidden] {
  display: none !important;
}
.nav-account {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-session-phase="checking"],
[data-session-phase="error"] {
  color: #aeb5d5;
  font-size: 12px;
}
@media (max-width: 640px) {
  .live-pricing {
    padding: 18px;
    border-radius: 14px;
  }
  .live-data-status {
    align-items: flex-start;
    gap: 10px;
    padding: 11px;
    font-size: 11px;
  }
  .live-refresh {
    padding: 6px 10px;
  }
  .live-pricing h2 {
    font-size: 21px;
  }
}
/* Brand identity, descender-safe titles and subtle motion */
/* Subtle brand motion, without extra canvas loops or network requests. */
.site-brand-symbol {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.site-brand-symbol::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, #7d6cff55, transparent 72%);
  animation: brand-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.site-brand-symbol .brand-emblem {
  position: relative;
  object-fit: contain;
}
.brand-text {
  display: block;
  max-width: 13rem;
  line-height: 1.3;
  padding: 0.04em 0 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Gradient paint bounds must include descenders, not just the capital height. */
.final-hero .cosmic-headline {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: -0.04em;
  line-height: 1.25;
  background: none;
}
.final-hero .cosmic-title-shine {
  display: inline-block;
  max-width: 100%;
  padding: 0.04em 0.02em 0.12em;
  overflow: visible;
  background: linear-gradient(
    110deg,
    #eef5ff 5%,
    #91b9ff 29%,
    #ab83ff 56%,
    #ce85f3 74%,
    #eef5ff 95%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: brand-shimmer 10s ease-in-out infinite alternate;
}
.cosmic-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cosmic-primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    #ffffff30 50%,
    transparent 75%
  );
  transform: translateX(-140%);
  animation: brand-button-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.diagram-center [data-site-name],
.about-copy .eyebrow [data-site-name] {
  text-transform: uppercase;
}
@keyframes brand-breathe {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.25);
  }
}
@keyframes brand-shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
@keyframes brand-button-sheen {
  0%,
  70% {
    transform: translateX(-140%);
  }
  95%,
  100% {
    transform: translateX(140%);
  }
}
.brand-motion-paused .site-brand-symbol::before,
.brand-motion-paused .cosmic-title-shine,
.brand-motion-paused .cosmic-primary::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .site-brand-symbol::before,
  .final-hero .cosmic-title-shine,
  .cosmic-primary::after {
    animation: none !important;
  }
  .cosmic-primary::after {
    display: none;
  }
}
@media (max-width: 600px) {
  .brand-text {
    max-width: 10rem;
  }
}
/* Lower-page AI network and request visualization */
/* Scoped enhancement: never restyle the existing account, pricing or docs UI. */
.tm-motion {
  --tm-accent: 110, 153, 255;
  position: relative;
  color: #f1f0fc;
}
.tm-motion h2,
.tm-motion p {
  margin: 0;
}
.tm-motion button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.tm-motion button:disabled {
  cursor: default;
  opacity: 0.65;
}
.tm-motion button:focus-visible,
.tm-motion a:focus-visible {
  outline: 2px solid #a7bcff;
  outline-offset: 5px;
}
.tm-motion [hidden] {
  display: none !important;
}
.tm-gradient {
  background: linear-gradient(110deg, #dce8ff 5%, #9d9dff 48%, #ce8eef 95%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding-bottom: 0.13em;
  display: inline-block;
}
.tm-nexus {
  padding-block: 95px 65px;
  scroll-margin-top: 115px;
}
.tm-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid #939aff29;
  gap: 16px;
}
.tm-eyebrow {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #bab6e2;
  line-height: 1.5;
}
.tm-eyebrow i,
.tm-visual-caption > i,
.tm-selection-note > i,
.tm-stage-top i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b59bff;
  box-shadow: 0 0 12px #ac84ff88;
  flex-shrink: 0;
}
.tm-section-index {
  font-size: 10px;
  color: #777f9b;
  letter-spacing: 0.1em;
}
.tm-motion-toggle {
  font-size: 10px !important;
  color: #b9b6d7 !important;
  border: 1px solid #8c91bc30;
  border-radius: 30px;
  background: #111328b8;
  padding: 8px 13px;
  white-space: nowrap;
}
.tm-overline {
  color: #a299cb;
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 18px !important;
}
.tm-nexus-layout {
  display: grid;
  grid-template-columns: 1.17fr 1fr;
  gap: 65px;
  align-items: center;
  padding-top: 55px;
}
.tm-nexus-visual {
  height: 580px;
  position: relative;
  min-width: 0;
  background: radial-gradient(ellipse at center, #39246a18, transparent 65%);
}
.tm-nexus-visual::before,
.tm-nexus-visual::after {
  content: "";
  position: absolute;
  width: 82%;
  height: 82%;
  left: 9%;
  top: 9%;
  border: 1px solid #8086ba10;
  border-radius: 50%;
  pointer-events: none;
}
.tm-nexus-visual::after {
  width: 96%;
  height: 96%;
  left: 2%;
  top: 2%;
  border-style: dashed;
  opacity: 0.65;
}
.tm-nexus-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tm-nexus-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.tm-nexus-center img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px #9482ff99);
}
.tm-nexus-center span {
  font-size: 8px;
  letter-spacing: 0.3em;
  color: #d2d3ff;
}
.tm-cross {
  position: absolute;
  font-size: 18px;
  color: #6e709650;
  font-weight: 300;
}
.tm-cross-one {
  left: 6%;
  top: 12%;
}
.tm-cross-two {
  right: 6%;
  bottom: 12%;
}
.tm-orbital-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  max-width: 205px;
  background: linear-gradient(120deg, #101329ee, #090e21ed);
  border: 1px solid #757db243;
  border-radius: 12px;
  box-shadow: 0 8px 30px #0005;
  transition:
    border-color 0.35s,
    box-shadow 0.35s,
    transform 0.35s;
  animation: tm-node-float 9s ease-in-out infinite;
}
.tm-orbital-node:hover,
.tm-orbital-node.tm-selected {
  border-color: rgba(var(--tm-accent), 0.7);
  box-shadow: 0 0 28px rgba(var(--tm-accent), 0.13);
  transform: translateY(-3px);
}
.tm-orbital-node > img,
.tm-orbital-node > svg {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.tm-orbital-node .mark-light {
  filter: brightness(0) invert(0.85);
}
.tm-orbital-node > span {
  display: block;
  min-width: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-orbital-node small {
  display: block;
  color: #7f8aa9;
  font-size: 9px;
  margin-top: 5px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-orbital-node > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #797c9a;
  margin-left: 6px;
  flex-shrink: 0;
}
.tm-selected > i {
  background: #ac9bff;
  box-shadow: 0 0 10px #a28cff;
}
.tm-node-0 {
  left: 0;
  top: 26%;
  animation-delay: -1s;
}
.tm-node-1 {
  right: 0;
  top: 11%;
  animation-delay: -3s;
}
.tm-node-2 {
  left: 5%;
  bottom: 13%;
  animation-delay: -5s;
}
.tm-node-3 {
  right: -1%;
  bottom: 26%;
  animation-delay: -7s;
}
.tm-visual-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #8b8fac;
}
.tm-visual-caption > span {
  color: #727b99;
  letter-spacing: 0.03em;
  margin-left: 10px;
  font-size: 8px;
}
.tm-nexus-copy h2 {
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.tm-description {
  font-size: 13px;
  line-height: 2;
  color: #939ab4;
  margin-top: 17px !important;
}
.tm-feature-lines {
  margin-top: 32px;
}
.tm-feature-lines > div {
  display: flex;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid #939aff29;
}
.tm-feature-lines > div > span {
  font-size: 10px;
  color: #727b9e;
  line-height: 2;
}
.tm-feature-lines p {
  font-size: 13px;
  line-height: 1.6;
}
.tm-feature-lines small {
  display: block;
  color: #78819f;
  font-size: 11px;
  margin-top: 7px;
}
.tm-selection-note {
  border-top: 1px solid #939aff29;
  padding-top: 19px;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 10px;
  color: #a0a8c3;
  flex-wrap: wrap;
  line-height: 1.8;
}
.tm-selection-note small {
  margin-left: auto;
  font-size: 9px;
  color: #7b84a1;
}
.tm-flow {
  padding-block: 35px 70px;
  scroll-margin-top: 115px;
}
.tm-flow-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 44px 0 38px;
  gap: 30px;
}
.tm-flow-heading h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.45;
}
.tm-flow-heading > p {
  font-size: 12px;
  line-height: 2;
  color: #858eaa;
  margin-bottom: 7px;
}
.tm-signal-stage {
  height: 390px;
  position: relative;
  overflow: clip;
  border: 1px solid #7e7eeb33;
  border-radius: 22px;
  background: #070b18;
  isolation: isolate;
}
.tm-signal-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 44%, #7650dd26, transparent 50%);
}
.tm-signal-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.85;
}
.tm-stage-grid {
  position: absolute;
  bottom: -70%;
  left: -20%;
  width: 140%;
  height: 130%;
  background:
    linear-gradient(#6a5bb514 1px, transparent 1px),
    linear-gradient(90deg, #6a5bb514 1px, transparent 1px);
  background-size: 45px 45px;
  transform: perspective(320px) rotateX(64deg);
  mask-image: linear-gradient(transparent, #000 25%, transparent 90%);
  z-index: -1;
}
.tm-stage-top,
.tm-stage-bottom {
  position: absolute;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 9px;
  color: #8c92ad;
  letter-spacing: 0.1em;
}
.tm-stage-top {
  top: 24px;
}
.tm-stage-top > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-stage-top > span:last-child {
  font-size: 8px;
  color: #8590ae;
}
.tm-stage-bottom {
  bottom: 22px;
}
.tm-stage-bottom > span {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: #a1aac6;
  line-height: 1.8;
}
.tm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 40px;
  padding: 14px 23px;
  min-height: 48px;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.4;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  white-space: nowrap;
}
.tm-button:hover {
  transform: translateY(-2px);
}
.tm-primary {
  background: linear-gradient(110deg, #a44df1, #7969ff 55%, #398dff);
  border: 1px solid #beb6ff40;
  box-shadow:
    inset 0 1px #ffffff28,
    0 8px 38px #6855ed20;
}
.tm-primary:hover {
  box-shadow: 0 8px 40px #7b66ff50;
}
.tm-secondary {
  border: 1px solid #a9b3ff55;
  background: #08112699;
}
.tm-stage-bottom .tm-button {
  font-size: 11px !important;
  padding: 11px 18px;
  min-height: 39px;
  flex-shrink: 0;
}
.tm-route-svg {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: -1;
  overflow: visible;
}
.tm-route-base {
  fill: none;
  stroke: #7b7fc13a;
  stroke-width: 1;
}
.tm-route-running {
  fill: none;
  stroke: url(#tm-route-glow);
  stroke-width: 2;
  stroke-dasharray: 12 150;
  stroke-linecap: round;
  animation: tm-route-signal 6s linear infinite;
  filter: drop-shadow(0 0 7px #afa1ff);
}
.tm-sending .tm-route-running {
  stroke-width: 3;
  animation-duration: 1.5s;
}
.tm-route-stations {
  position: absolute;
  inset: 82px 8% 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.tm-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  position: relative;
  text-align: center;
  padding-top: 22px;
  min-width: 0;
}
.tm-station-symbol {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border: 1px solid #777ecf50;
  background: linear-gradient(145deg, #171c39, #0d1124);
  border-radius: 22px;
  font-size: 36px;
  color: #a2a4ff;
  box-shadow:
    inset 0 1px #d4ccff15,
    0 0 38px #4d4ea512;
  transition:
    border-color 0.4s,
    box-shadow 0.4s;
}
.tm-station-symbol > img,
.tm-station-symbol > svg {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.tm-gateway .tm-station-symbol > img {
  width: 50px;
  height: 50px;
}
.tm-station strong {
  font-size: 14px;
  font-weight: 500;
  margin-top: 22px;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-station > span {
  font-size: 7px;
  letter-spacing: 0.16em;
  color: #8792b0;
  margin-top: 6px;
}
.tm-station small {
  font-size: 10px;
  color: #8188a7;
  margin-top: 11px;
}
.tm-gateway .tm-station-symbol {
  border-color: #b395fd80;
  background: linear-gradient(145deg, #3b2768, #14192f);
  box-shadow: 0 0 45px #9664ed33;
  z-index: 1;
}
.tm-gateway-halo {
  position: absolute;
  width: 135px;
  height: 135px;
  top: -5px;
  border: 1px solid #ad91ff28;
  border-radius: 50%;
  animation: tm-halo-pulse 5s ease-in-out infinite;
}
.tm-gateway-halo::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed #967adb55;
  border-radius: 50%;
  animation: tm-halo-spin 35s linear infinite;
}
.tm-station.tm-active .tm-station-symbol {
  border-color: #b5d4ff;
  box-shadow: 0 0 50px #8c7bff77;
}
.tm-flow-caption {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 10px;
  color: #8c96b2;
  margin-top: 18px;
  line-height: 1.8;
}
.tm-flow-caption code {
  font-family: inherit;
  color: #b6b8db;
  overflow-wrap: anywhere;
}
.tm-flow-caption a {
  color: #c7b6f4;
}
.tm-motion img[src$="/zai.svg"] {
  filter: brightness(0) saturate(100%) invert(79%) sepia(25%) saturate(1076%)
    hue-rotate(197deg);
}
.tm-final {
  overflow: clip;
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border-bottom: 1px solid #939aff29;
}
.tm-final-content {
  text-align: center;
  padding-block: 40px;
}
.tm-final-content h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.045em;
  margin-top: 25px;
}
.tm-final-content > p {
  font-size: 13px;
  color: #9196b1;
  margin: 18px 0 28px;
}
.tm-final-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.tm-final-caption {
  display: block;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: #8890ae;
  margin-top: 30px;
}
.tm-horizon {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, #6550b838, transparent 62%);
}
.tm-horizon-ring {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 1400px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid #b094f778;
  box-shadow:
    0 -8px 35px #815cd63a,
    inset 0 20px 60px #3e60af16;
  transform: translateX(-50%) rotate(-9deg);
  animation: tm-horizon-drift 18s ease-in-out infinite alternate;
}
.tm-horizon-ring.tm-second {
  width: 1600px;
  height: 580px;
  top: 82%;
  border-color: #5e9bc548;
  transform: translateX(-50%) rotate(8deg);
  animation-delay: -9s;
}
.tm-horizon-light {
  position: absolute;
  bottom: -110px;
  left: 20%;
  width: 60%;
  height: 170px;
  background: #a079e94a;
  filter: blur(70px);
  border-radius: 50%;
  animation: tm-halo-pulse 9s ease-in-out infinite;
}
.tm-motion.tm-paused *,
.tm-motion.tm-paused *::before,
.tm-motion.tm-paused *::after,
.tm-offscreen *,
.tm-offscreen *::before,
.tm-offscreen *::after {
  animation-play-state: paused !important;
}
.tm-offscreen.tm-final .tm-horizon-ring,
.tm-offscreen.tm-final .tm-horizon-light {
  animation-play-state: paused !important;
}
@keyframes tm-node-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -9px;
  }
}
@keyframes tm-halo-pulse {
  0%,
  100% {
    opacity: 0.4;
    scale: 0.96;
  }
  50% {
    opacity: 1;
    scale: 1.04;
  }
}
@keyframes tm-halo-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes tm-route-signal {
  to {
    stroke-dashoffset: -324;
  }
}
@keyframes tm-horizon-drift {
  to {
    transform: translateX(-50%) rotate(1deg);
  }
}
@media (min-width: 1600px) {
  .tm-nexus-visual {
    height: 640px;
  }
}
@media (max-width: 1100px) {
  .tm-nexus-layout {
    gap: 30px;
    grid-template-columns: 1fr 1fr;
  }
  .tm-nexus-visual {
    height: 470px;
  }
  .tm-orbital-node {
    padding: 10px;
    max-width: 170px;
  }
  .tm-orbital-node > img,
  .tm-orbital-node > svg {
    width: 22px;
    height: 22px;
  }
  .tm-orbital-node > span {
    font-size: 10px;
  }
  .tm-orbital-node small {
    font-size: 8px;
  }
  .tm-orbital-node > i {
    margin-left: 2px;
  }
  .tm-feature-lines {
    margin-top: 24px;
  }
  .tm-feature-lines > div {
    padding: 14px 0;
  }
  .tm-nexus-copy h2 {
    font-size: 40px;
  }
}
@media (max-width: 760px) {
  .tm-nexus {
    padding-block: 60px 50px;
  }
  .tm-flow {
    padding-block: 10px 55px;
  }
  .tm-section-top {
    padding-bottom: 20px;
    gap: 10px;
  }
  .tm-eyebrow {
    font-size: 8px;
    letter-spacing: 0.12em;
    gap: 8px;
  }
  .tm-eyebrow i {
    width: 4px;
    height: 4px;
  }
  .tm-section-index {
    font-size: 8px;
    letter-spacing: 0.03em;
  }
  .tm-motion-toggle {
    font-size: 8px !important;
    padding: 7px 9px;
  }
  .tm-nexus-layout {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-top: 20px;
  }
  .tm-nexus-visual {
    height: min(104vw, 490px);
    width: 100%;
    max-width: 500px;
  }
  .tm-nexus-copy {
    width: 100%;
  }
  .tm-nexus-copy h2 {
    font-size: 38px;
  }
  .tm-nexus-copy h2 br {
    display: none;
  }
  .tm-overline {
    font-size: 9px;
    margin-bottom: 12px !important;
  }
  .tm-description {
    font-size: 12px;
    line-height: 1.9;
  }
  .tm-feature-lines > div {
    gap: 20px;
    padding: 16px 0;
  }
  .tm-feature-lines p {
    font-size: 12px;
  }
  .tm-feature-lines small {
    font-size: 10px;
  }
  .tm-node-0 {
    left: 0;
    top: 24%;
  }
  .tm-node-1 {
    right: 0;
    top: 12%;
  }
  .tm-node-2 {
    left: 2%;
    bottom: 15%;
  }
  .tm-node-3 {
    right: 0;
    bottom: 26%;
  }
  .tm-orbital-node {
    max-width: 150px;
  }
  .tm-orbital-node > span {
    max-width: 96px;
  }
  .tm-selection-note {
    font-size: 9px;
  }
  .tm-selection-note small {
    font-size: 8px;
  }
  .tm-visual-caption {
    font-size: 7px;
    gap: 6px;
  }
  .tm-visual-caption > span {
    font-size: 7px;
    margin-left: 3px;
  }
  .tm-flow-heading {
    display: block;
    padding-top: 28px;
  }
  .tm-flow-heading h2 {
    font-size: 29px;
  }
  .tm-flow-heading > p {
    font-size: 11px;
    margin-top: 15px;
  }
  .tm-signal-stage {
    height: 350px;
    border-radius: 17px;
  }
  .tm-stage-top,
  .tm-stage-bottom {
    left: 17px;
    right: 17px;
    gap: 10px;
  }
  .tm-stage-top {
    top: 19px;
    font-size: 7px;
  }
  .tm-stage-top > span:last-child {
    font-size: 6px;
    max-width: 70px;
    text-align: right;
    line-height: 1.8;
  }
  .tm-route-stations {
    inset: 87px 3% 70px;
  }
  .tm-station {
    width: 95px;
  }
  .tm-station-symbol {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 27px;
  }
  .tm-station-symbol > img,
  .tm-station-symbol > svg {
    width: 29px;
    height: 29px;
  }
  .tm-gateway .tm-station-symbol > img {
    width: 35px;
    height: 35px;
  }
  .tm-station strong {
    font-size: 11px;
    margin-top: 20px;
  }
  .tm-station > span {
    font-size: 5px;
    letter-spacing: 0.06em;
  }
  .tm-station small {
    font-size: 8px;
  }
  .tm-gateway-halo {
    width: 94px;
    height: 94px;
    top: 4px;
  }
  .tm-route-svg {
    top: -12px;
  }
  .tm-stage-bottom {
    bottom: 19px;
    align-items: flex-end;
  }
  .tm-stage-bottom > span {
    font-size: 8px;
    max-width: 140px;
    line-height: 1.8;
  }
  .tm-stage-bottom .tm-button {
    font-size: 9px !important;
    padding: 10px 12px;
    gap: 12px;
  }
  .tm-flow-caption {
    font-size: 8px;
    gap: 8px 16px;
  }
  .tm-final {
    min-height: 500px;
  }
  .tm-final-content h2 {
    font-size: 38px;
  }
  .tm-final-content > p {
    font-size: 11px;
  }
  .tm-final-caption {
    font-size: 6px;
    letter-spacing: 0.16em;
  }
  .tm-final-actions {
    gap: 10px;
  }
  .tm-final-actions .tm-button {
    font-size: 10px !important;
    padding: 13px 18px;
  }
  .tm-horizon-ring {
    width: 900px;
    height: 330px;
    top: 81%;
  }
  .tm-horizon-ring.tm-second {
    width: 1000px;
    height: 350px;
    top: 86%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-motion *,
  .tm-motion *::before,
  .tm-motion *::after {
    animation: none !important;
    transition: none !important;
  }
}