:root {
  --color-bg: #05070d;
  --color-bg-soft: #080c14;
  --color-surface: rgba(12, 17, 29, 0.78);
  --color-surface-solid: #0d121d;
  --color-surface-elevated: #121a29;
  --color-ink: #f6f8ff;
  --color-body: #9aa8bc;
  --color-muted: rgba(255, 255, 255, 0.045);
  --color-line: rgba(151, 171, 206, 0.16);
  --color-line-strong: rgba(38, 198, 255, 0.32);
  --color-white: #ffffff;
  --color-primary: #26c6ff;
  --color-primary-dark: #0b88d1;
  --color-accent: #8f7aff;
  --color-purple: #a66cff;
  --color-orange: #ff9f43;
  --color-warm: #f2c36a;
  --shadow-soft: 0 28px 90px rgba(0, 0, 0, 0.56);
  --shadow-glow: 0 0 44px rgba(38, 198, 255, 0.22), 0 0 84px rgba(166, 108, 255, 0.16);
  --header-height: 76px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--color-body);
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(3, 5, 11, 0.22), rgba(3, 5, 11, 0.72)),
    url("../images/background.png") center top / cover fixed no-repeat,
    #03050b;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  line-height: 1.65;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  z-index: 0;
  opacity: 0.36;
  background:
    linear-gradient(90deg, rgba(3, 5, 11, 0.7), transparent 24%, transparent 70%, rgba(3, 5, 11, 0.62)),
    linear-gradient(180deg, rgba(3, 5, 11, 0.88), transparent 32%, rgba(3, 5, 11, 0.38));
}

body::after {
  display: none;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

.cursor-trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 49;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.42;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(38, 198, 255, 0.08), transparent 24%, rgba(166, 108, 255, 0.07) 72%, rgba(255, 159, 67, 0.05)),
    rgba(5, 7, 13, 0.5);
  border-bottom: 1px solid rgba(151, 171, 206, 0.18);
  backdrop-filter: blur(24px) saturate(1.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(38, 198, 255, 0.08);
  transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.site-header.is-scrolled {
  background:
    linear-gradient(90deg, rgba(38, 198, 255, 0.09), transparent 28%, rgba(166, 108, 255, 0.08) 76%, rgba(255, 159, 67, 0.06)),
    rgba(5, 7, 13, 0.72);
  border-color: rgba(38, 198, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(38, 198, 255, 0.12),
    0 18px 54px rgba(0, 0, 0, 0.42);
}

.header-inner {
  width: min(1440px, calc(100% - 28px));
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: var(--color-ink);
  font-weight: 700;
}

.brand-logo {
  flex: 0 0 auto;
  width: 58px;
  height: 46px;
  object-fit: contain;
  object-position: center;
}

.brand-name {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.brand-text {
  max-width: 330px;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-subtext {
  max-width: 330px;
  margin-top: 3px;
  overflow: hidden;
  color: #7f8da3;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: #b8c4d8;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-link::after {
  position: absolute;
  right: 14px;
  bottom: 5px;
  left: 14px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-purple), var(--color-orange));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-ink);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-cta {
  margin-left: 8px;
  color: var(--color-ink);
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.16), rgba(166, 108, 255, 0.14));
  border: 1px solid rgba(38, 198, 255, 0.34);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 24px rgba(38, 198, 255, 0.14);
}

.nav-cta:hover,
.nav-cta.is-active {
  color: var(--color-ink);
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.25), rgba(166, 108, 255, 0.2), rgba(255, 159, 67, 0.12));
  border-color: rgba(38, 198, 255, 0.56);
}

.nav-cta::after {
  display: none;
}

.nav-dropdown {
  position: relative;
}

.dropdown-trigger {
  gap: 8px;
}

.dropdown-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.nav-dropdown.is-open .dropdown-arrow {
  transform: rotate(225deg) translateY(-1px);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 170px;
  padding: 8px;
  visibility: hidden;
  background: rgba(10, 15, 26, 0.82);
  border: 1px solid rgba(151, 171, 206, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  color: #b8c4d8;
  border-radius: 6px;
}

.dropdown-menu a:hover {
  color: var(--color-ink);
  background: rgba(38, 198, 255, 0.1);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.nav-toggle-line {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3px 0;
  background: var(--color-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  border-top: 1px solid rgba(151, 171, 206, 0.12);
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section > .container > * {
  position: relative;
  z-index: 1;
}

.section-muted {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    rgba(3, 5, 11, 0.18);
}

.hero {
  min-height: 92vh;
  padding-top: calc(var(--header-height) + 56px);
  padding-bottom: 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 0;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  backdrop-filter: blur(1em) brightness(6);
  -webkit-backdrop-filter: blur(1em) brightness(6);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, hsl(0 0% 4%) 2px),
    linear-gradient(90deg, rgba(3, 5, 11, 0.64), rgba(3, 5, 11, 0.2) 46%, rgba(3, 5, 11, 0.28)),
    linear-gradient(180deg, rgba(3, 5, 11, 0.2), rgba(3, 5, 11, 0.62));
  background-size: 8px 8px, auto, auto;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  --c: #09f;
  background-color: rgba(0, 0, 0, 0.42);
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px;
  animation: heroRainHi 150s linear infinite;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 56px;
  align-items: center;
}

@keyframes heroRainHi {
  0% {
    background-position:
      0 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }

  100% {
    background-position:
      0 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-console::before,
  .console-dot-field,
  .console-aura,
  .services-wave,
  .news-marquee-inner {
    animation: none;
  }
}

.hero-content {
  max-width: 650px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 16px;
  padding: 0 10px;
  color: var(--color-primary);
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.13), rgba(166, 108, 255, 0.09));
  border: 1px solid rgba(38, 198, 255, 0.28);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(38, 198, 255, 0.12);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.18;
  letter-spacing: 0;
}

h1 {
  font-size: 60px;
  text-shadow:
    0 0 34px rgba(38, 198, 255, 0.18),
    0 0 72px rgba(166, 108, 255, 0.12);
}

h2 {
  font-size: 40px;
  text-shadow: 0 0 30px rgba(38, 198, 255, 0.1);
}

.hero h1 {
  color: transparent;
  background: linear-gradient(100deg, #ffffff 0%, #dff7ff 40%, #9fdcff 58%, #c7b6ff 78%, #ffd19a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

h3 {
  font-size: 20px;
}

.hero-copy {
  margin: 24px 0 0;
  max-width: 580px;
  color: #b7c3d7;
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #031018;
  background: linear-gradient(100deg, #59d8ff, var(--color-primary) 46%, #9b84ff 76%, #ffb35c);
  border-color: rgba(38, 198, 255, 0.6);
  box-shadow:
    0 0 34px rgba(38, 198, 255, 0.36),
    0 0 64px rgba(166, 108, 255, 0.2);
  font-weight: 700;
}

.button-primary:hover {
  background: linear-gradient(100deg, #8ee6ff, #42d4ff 46%, #b29fff 76%, #ffc06f);
  border-color: rgba(123, 224, 255, 0.84);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.button-secondary:hover {
  color: var(--color-ink);
  border-color: rgba(166, 108, 255, 0.58);
  background: linear-gradient(135deg, rgba(166, 108, 255, 0.13), rgba(255, 159, 67, 0.08));
}

.hero-console-shell {
  position: relative;
  isolation: isolate;
}

.console-dot-field,
.console-aura {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.console-dot-field {
  right: -34px;
  bottom: -54px;
  left: -30px;
  height: 156px;
  background-image:
    radial-gradient(circle, rgba(216, 244, 255, 0.58) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(38, 198, 255, 0.36) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 159, 67, 0.32) 0 1px, transparent 1.3px);
  background-position:
    0 0,
    12px 9px,
    24px 17px;
  background-size:
    18px 18px,
    42px 42px,
    64px 64px;
  mask-image: radial-gradient(ellipse at 52% 42%, #000 0 54%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 52% 42%, #000 0 54%, transparent 82%);
  opacity: 0.52;
  animation: consoleDotsDrift 18s linear infinite alternate;
}

.console-aura {
  border-radius: 999px;
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0.48;
  will-change: transform, opacity;
}

.console-aura-blue {
  right: -58px;
  bottom: -36px;
  width: 230px;
  height: 94px;
  background: rgba(38, 198, 255, 0.72);
  animation: consoleAuraBlue 8.5s ease-in-out infinite;
}

.console-aura-purple {
  bottom: -70px;
  left: 18%;
  width: 178px;
  height: 132px;
  background: rgba(166, 108, 255, 0.58);
  animation: consoleAuraPurple 11s ease-in-out infinite;
}

.console-aura-orange {
  right: 26%;
  bottom: -80px;
  width: 154px;
  height: 104px;
  background: rgba(255, 159, 67, 0.46);
  animation: consoleAuraOrange 9.5s ease-in-out infinite;
}

.hero-media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.hero-console {
  isolation: isolate;
  z-index: 2;
  min-height: 440px;
  padding: 5px;
  background: #07182e;
  box-shadow:
    0 30px 110px rgba(0, 0, 0, 0.62),
    0 0 46px rgba(38, 198, 255, 0.24),
    0 0 88px rgba(255, 48, 255, 0.16);
}

.hero-console::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 156px;
  height: 150%;
  pointer-events: none;
  content: "";
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  filter:
    drop-shadow(0 0 22px rgba(0, 183, 255, 0.48))
    drop-shadow(0 0 30px rgba(255, 48, 255, 0.3));
  opacity: 0.92;
  animation: consoleRotBG 3s linear infinite;
  will-change: transform;
}

.hero-console::after {
  position: absolute;
  inset: 5px;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 50%, transparent 0, transparent 20%, rgba(17, 17, 17, 0.42) 50%) 0 0 / 3px 3px,
    linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 18% 72%, rgba(255, 48, 255, 0.06)),
    linear-gradient(180deg, rgba(7, 24, 46, 0.98), rgba(5, 9, 18, 0.98));
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 34px rgba(38, 198, 255, 0.08),
    inset 0 0 46px rgba(255, 48, 255, 0.06);
  opacity: 1;
}

.hero-console > * {
  position: relative;
  z-index: 2;
}

@keyframes consoleRotBG {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes consoleDotsDrift {
  0% {
    background-position:
      0 0,
      12px 9px,
      24px 17px;
    transform: translate3d(-6px, 8px, 0) skewX(-2deg);
  }

  45% {
    transform: translate3d(12px, -2px, 0) skewX(1.5deg);
  }

  100% {
    background-position:
      30px 18px,
      -18px 34px,
      52px -22px;
    transform: translate3d(2px, 12px, 0) skewX(3deg);
  }
}

@keyframes consoleAuraBlue {
  0%,
  100% {
    opacity: 0.4;
    transform: translate3d(0, 0, 0) scale(1);
  }

  37% {
    opacity: 0.62;
    transform: translate3d(-34px, -18px, 0) scale(1.16, 0.88);
  }

  72% {
    opacity: 0.34;
    transform: translate3d(18px, 10px, 0) scale(0.9, 1.08);
  }
}

@keyframes consoleAuraPurple {
  0%,
  100% {
    opacity: 0.34;
    transform: translate3d(0, 0, 0) scale(0.95);
  }

  42% {
    opacity: 0.58;
    transform: translate3d(28px, -24px, 0) scale(1.22, 0.92);
  }

  76% {
    opacity: 0.3;
    transform: translate3d(-18px, 8px, 0) scale(0.86, 1.1);
  }
}

@keyframes consoleAuraOrange {
  0%,
  100% {
    opacity: 0.28;
    transform: translate3d(0, 0, 0) scale(0.92, 1);
  }

  33% {
    opacity: 0.46;
    transform: translate3d(22px, -20px, 0) scale(1.15, 0.82);
  }

  68% {
    opacity: 0.24;
    transform: translate3d(-30px, 12px, 0) scale(0.88, 1.18);
  }
}

.console-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  color: #7f8da3;
  background: rgba(7, 10, 18, 0.84);
  border-bottom: 1px solid var(--color-line);
  border-radius: 6px 6px 0 0;
  backdrop-filter: blur(18px) saturate(1.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.28);
}

.console-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4d5b70;
}

.console-topbar span:nth-child(1) {
  background: #ff6b7a;
}

.console-topbar span:nth-child(2) {
  background: var(--color-warm);
}

.console-topbar span:nth-child(3) {
  background: #31d495;
}

.console-topbar strong {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
}

.console-body {
  min-height: 394px;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.3px),
    radial-gradient(circle at 70% 20%, rgba(38, 198, 255, 0.9) 0 1px, transparent 1.3px),
    linear-gradient(rgba(151, 171, 206, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 171, 206, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11, 17, 29, 0.86), rgba(6, 9, 17, 0.94));
  background-size: 180px 160px, 220px 200px, 44px 44px, 44px 44px, auto;
  border-radius: 0 0 6px 6px;
  backdrop-filter: blur(18px) saturate(1.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
}

.console-brand {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(151, 171, 206, 0.24);
  border-radius: 8px;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.console-brand img {
  width: 150px;
  height: 104px;
  object-fit: cover;
  object-position: center;
  background: var(--color-white);
  border-radius: 8px;
}

.console-brand span,
.console-grid span,
.signal-row span {
  color: #7f8da3;
  font-size: 12px;
  font-weight: 700;
}

.console-brand strong {
  display: block;
  margin-top: 8px;
  color: var(--color-ink);
  font-size: 24px;
  line-height: 1.2;
}

.signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.signal-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: #b7c3d7;
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.11), rgba(166, 108, 255, 0.08));
  border: 1px solid rgba(38, 198, 255, 0.28);
  border-radius: 8px;
}

.console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.console-grid div {
  padding: 16px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(151, 171, 206, 0.2);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.console-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--color-primary);
  font-size: 24px;
  line-height: 1;
}

.pipeline {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 0.65fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.pipeline span {
  height: 8px;
  background: linear-gradient(90deg, rgba(38, 198, 255, 0.18), rgba(38, 198, 255, 0.9));
  border-radius: 8px;
  box-shadow: 0 0 22px rgba(38, 198, 255, 0.42);
}

.pipeline span:nth-child(2) {
  background: linear-gradient(90deg, rgba(143, 122, 255, 0.18), rgba(143, 122, 255, 0.86));
}

.pipeline span:nth-child(3) {
  background: linear-gradient(90deg, rgba(242, 195, 106, 0.18), rgba(242, 195, 106, 0.82));
}

.split-layout,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: 56px;
}

.about-layout {
  align-items: center;
}

.about-lead {
  max-width: 520px;
  margin: 24px 0 0;
  color: #aab6c9;
}

.section-copy p {
  margin-top: 0;
  color: #aab6c9;
}

.about-carousel {
  position: relative;
  min-height: 360px;
  padding: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(38, 198, 255, 0.18), transparent 34%),
    radial-gradient(circle at 84% 74%, rgba(166, 108, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.74), rgba(6, 10, 20, 0.78));
  border: 1px solid rgba(151, 171, 206, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 78px rgba(0, 0, 0, 0.42),
    0 0 54px rgba(38, 198, 255, 0.12);
}

.about-carousel::before,
.about-carousel::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.about-carousel::before {
  inset: 0;
  background:
    linear-gradient(rgba(151, 171, 206, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 171, 206, 0.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(120deg, transparent, #000 22%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(120deg, transparent, #000 22%, #000 72%, transparent);
  opacity: 0.44;
  animation: aboutGridDrift 20s linear infinite;
}

.about-carousel::after {
  right: 30px;
  bottom: 76px;
  left: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(38, 198, 255, 0.72), rgba(166, 108, 255, 0.72), rgba(255, 159, 67, 0.56), transparent);
  box-shadow: 0 0 24px rgba(38, 198, 255, 0.28);
  transform: scaleX(0);
  transform-origin: left;
  animation: aboutProgress 5.6s linear infinite;
}

.about-carousel:hover::after,
.about-carousel:focus-within::after {
  animation-play-state: paused;
}

.about-track {
  position: relative;
  z-index: 1;
  min-height: 248px;
}

.about-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(46px) scale(0.98);
  filter: blur(8px);
  transition:
    opacity 0.62s ease,
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.62s ease;
}

.about-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.about-index {
  width: max-content;
  margin-bottom: 18px;
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.about-slide h3 {
  max-width: 520px;
  font-size: 28px;
}

.about-slide p {
  max-width: 600px;
  margin: 18px 0 0;
  color: #aab6c9;
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.about-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: #dff7ff;
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.12), rgba(166, 108, 255, 0.1));
  border: 1px solid rgba(38, 198, 255, 0.24);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.about-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
}

.about-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(151, 171, 206, 0.24);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.about-arrow:hover {
  background: rgba(38, 198, 255, 0.12);
  border-color: rgba(38, 198, 255, 0.46);
  transform: translateY(-1px);
}

.about-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.about-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  background: rgba(151, 171, 206, 0.38);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.about-dots button.is-active {
  width: 28px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-purple), var(--color-orange));
  box-shadow: 0 0 18px rgba(38, 198, 255, 0.28);
}

@keyframes aboutGridDrift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 76px 38px, 76px 38px;
  }
}

@keyframes aboutProgress {
  0% {
    transform: scaleX(0);
    opacity: 0.2;
  }

  12%,
  82% {
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-carousel::before,
  .about-carousel::after {
    animation: none;
  }

  .about-slide {
    transition: none;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.stats-grid div {
  padding: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.stats-grid strong,
.stats-grid span {
  display: block;
}

.stats-grid strong {
  color: var(--color-primary);
  font-size: 30px;
  line-height: 1;
}

.stats-grid span {
  margin-top: 8px;
  color: var(--color-body);
}

.section-heading {
  max-width: 620px;
  margin-bottom: 36px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.services-section {
  isolation: isolate;
  padding-bottom: 132px;
}

.services-wave-field {
  position: absolute;
  right: 0;
  bottom: -210px;
  left: 0;
  z-index: 0;
  height: 390px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.78;
  mask-image: linear-gradient(to top, #000 0 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0 58%, transparent 100%);
}

.services-wave {
  position: absolute;
  left: 50%;
  bottom: -570px;
  width: 2940px;
  height: 980px;
  margin-left: -1470px;
  background: linear-gradient(744deg, rgba(175, 64, 255, 0.72), rgba(91, 66, 243, 0.64) 58%, rgba(0, 221, 235, 0.68));
  border-radius: 40%;
  filter: blur(2px) saturate(1.25);
  opacity: 0.44;
  transform-origin: center;
  animation: servicesWave 22s infinite linear;
}

.services-wave-two {
  bottom: -595px;
  width: 3120px;
  height: 1040px;
  margin-left: -1560px;
  background: linear-gradient(744deg, rgba(38, 198, 255, 0.62), rgba(166, 108, 255, 0.54) 60%, rgba(255, 159, 67, 0.48));
  opacity: 0.36;
  animation-duration: 20s;
  animation-direction: reverse;
}

.services-wave-three {
  bottom: -625px;
  width: 3300px;
  height: 1100px;
  margin-left: -1650px;
  background: linear-gradient(744deg, rgba(255, 159, 67, 0.4), rgba(91, 66, 243, 0.48) 58%, rgba(0, 221, 235, 0.5));
  opacity: 0.28;
  animation-duration: 18s;
}

@keyframes servicesWave {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.contact-form {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.78), rgba(8, 12, 22, 0.72));
  border: 1px solid rgba(151, 171, 206, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.38);
}

.service-card {
  position: relative;
  padding: 28px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.038)),
    rgba(8, 13, 24, 0.24);
  border: 1px solid rgba(216, 236, 255, 0.24);
  border-radius: 8px;
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(38, 198, 255, 0.08),
    0 24px 72px rgba(0, 0, 0, 0.34);
}

.service-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(38, 198, 255, 0.55), rgba(166, 108, 255, 0.34), transparent);
}

.service-card::after {
  display: none;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-card:hover,
.case-item:hover,
.contact-info a:hover {
  border-color: rgba(38, 198, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 78px rgba(0, 0, 0, 0.46),
    0 0 42px rgba(38, 198, 255, 0.16),
    0 0 74px rgba(166, 108, 255, 0.1);
}

.service-card p,
.case-item p {
  margin-bottom: 0;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  color: #061019;
  background: linear-gradient(135deg, var(--color-primary), #8be5ff 48%, var(--color-orange));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 0 30px rgba(38, 198, 255, 0.24);
}

.case-list {
  display: grid;
  gap: 20px;
}

.case-item {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.028));
  border: 1px solid rgba(151, 171, 206, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.case-item:hover {
  transform: translateY(-2px);
}

.case-item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  filter: saturate(1.08) contrast(1.14) brightness(0.72);
}

.case-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 10px;
  color: #dff7ff;
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.14), rgba(166, 108, 255, 0.12), rgba(255, 159, 67, 0.08));
  border: 1px solid rgba(38, 198, 255, 0.26);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.news-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.news-marquee-inner {
  display: flex;
  width: max-content;
  animation: newsMarquee 22s linear infinite;
}

.news-marquee:hover .news-marquee-inner {
  animation-play-state: paused;
}

.news-marquee-group {
  display: flex;
  align-items: stretch;
}

.news-pill {
  display: grid;
  align-content: start;
  width: 380px;
  min-height: 170px;
  margin: 0 14px;
  padding: 22px 24px;
  white-space: normal;
  color: var(--color-ink);
  background:
    linear-gradient(145deg, rgba(17, 24, 39, 0.76), rgba(8, 12, 22, 0.66)),
    rgba(3, 5, 11, 0.44);
  border: 1px solid rgba(151, 171, 206, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.34);
}

.news-pill time {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--color-primary);
  font-weight: 700;
}

.news-pill strong {
  display: block;
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1.28;
}

.news-pill span {
  display: block;
  margin-top: 12px;
  color: #aab6c9;
}

@keyframes newsMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.contact-section {
  color: #aab6c9;
  background:
    linear-gradient(180deg, rgba(3, 5, 11, 0.32), rgba(3, 5, 11, 0.64));
}

.contact-section h2,
.contact-section .eyebrow {
  color: var(--color-ink);
}

.contact-info {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.contact-info a,
.contact-info div {
  display: grid;
  gap: 4px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028));
  border: 1px solid rgba(151, 171, 206, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(14px) saturate(1.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.22);
}

.contact-info a {
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-info a:hover {
  background: linear-gradient(135deg, rgba(38, 198, 255, 0.12), rgba(166, 108, 255, 0.08));
  border-color: rgba(38, 198, 255, 0.42);
}

.contact-info span {
  color: #7f8da3;
  font-size: 12px;
  font-weight: 700;
}

.contact-info strong {
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.5;
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--color-ink);
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(151, 171, 206, 0.22);
  border-radius: 8px;
  outline: none;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #68768c;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 3px rgba(38, 198, 255, 0.16),
    0 0 26px rgba(38, 198, 255, 0.16);
}

.site-footer {
  padding: 24px 0;
  color: #7f8da3;
  background: #04060b;
  border-top: 1px solid var(--color-line);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.footer-inner a:hover {
  color: var(--color-ink);
}

@media (max-width: 900px) {
  :root {
    --header-height: 68px;
  }

  .nav-toggle {
    display: grid;
  }

  .brand-text,
  .brand-subtext {
    max-width: min(52vw, 360px);
  }

  .site-nav {
    position: absolute;
    top: var(--header-height);
    right: 20px;
    left: 20px;
    display: grid;
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    background: rgba(8, 12, 20, 0.98);
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    transition: max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
  }

  .site-nav.is-open {
    max-height: calc(100vh - var(--header-height) - 24px);
    padding: 12px;
    overflow-y: auto;
    border-color: var(--color-line);
  }

  .nav-link {
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 0 10px;
  }

  .nav-link::after,
  .nav-link.is-active::after {
    display: none;
  }

  .nav-cta {
    margin: 6px 0 0;
    justify-content: center;
  }

  .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0 0 8px;
    padding: 4px;
    visibility: visible;
    border: 1px solid var(--color-line);
    box-shadow: none;
    opacity: 1;
    transform: none;
    background: rgba(255, 255, 255, 0.04);
  }

  .nav-dropdown.is-open .dropdown-menu {
    display: block;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 48px);
  }

  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 34px;
  }

  .hero-grid,
  .split-layout,
  .contact-grid,
  .case-item {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 36px;
  }

  .about-carousel {
    min-height: 340px;
  }

  .about-slide h3 {
    font-size: 26px;
  }

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

  .case-item {
    gap: 18px;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 28px, 1120px);
  }

  .brand-logo {
    width: 46px;
    height: 38px;
  }

  .brand-text {
    max-width: calc(100vw - 180px);
    font-size: 15px;
  }

  .brand-subtext {
    display: none;
  }

  .section {
    padding: 68px 0;
  }

  .services-section {
    padding-bottom: 112px;
  }

  .services-wave-field {
    bottom: -180px;
    height: 330px;
  }

  .services-wave {
    bottom: -440px;
    width: 2280px;
    height: 760px;
    margin-left: -1140px;
  }

  .services-wave-two {
    bottom: -465px;
    width: 2430px;
    height: 810px;
    margin-left: -1215px;
  }

  .services-wave-three {
    bottom: -490px;
    width: 2580px;
    height: 860px;
    margin-left: -1290px;
  }

  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 30px;
  }

  .hero-copy {
    font-size: 16px;
  }

  .about-lead {
    margin-top: 18px;
  }

  .about-carousel {
    min-height: 430px;
    padding: 22px;
  }

  .about-track {
    min-height: 318px;
  }

  .about-slide h3 {
    font-size: 23px;
  }

  .about-slide p {
    margin-top: 14px;
  }

  .about-tags {
    gap: 8px;
    margin-top: 20px;
  }

  .about-controls {
    margin-top: 22px;
  }

  .hero-actions,
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .hero-console {
    min-height: 0;
  }

  .console-body {
    min-height: 0;
    padding: 18px;
  }

  .console-brand,
  .console-grid {
    grid-template-columns: 1fr;
  }

  .console-brand img {
    width: 100%;
    height: 150px;
  }

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

  .news-pill {
    width: 320px;
    min-height: 190px;
    margin: 0 10px;
    padding: 20px;
  }

  .service-card,
  .contact-form {
    padding: 22px;
  }
}