:root {
  --bg: #0a1d3b;
  --bg-deep: #08152d;
  --bg-soft: rgba(16, 38, 74, 0.72);
  --surface: rgba(25, 58, 103, 0.42);
  --surface-strong: rgba(14, 34, 66, 0.72);
  --surface-light: rgba(114, 191, 197, 0.12);
  --border: rgba(198, 241, 244, 0.18);
  --border-strong: rgba(198, 241, 244, 0.3);
  --text: #f4f8ff;
  --muted: #a9bdd6;
  --primary: #72bfc5;
  --secondary: #22c55e;
  --highlight: #f5b83e;
  --shadow: 0 26px 90px rgba(0, 7, 20, 0.34);
  --shadow-soft: 0 16px 48px rgba(0, 7, 20, 0.22);
  --radius-lg: 34px;
  --radius-md: 24px;
  --radius-sm: 18px;
  --container: 1320px;
  --header-height: 90px;
  --transition: 240ms ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 12%, rgba(155, 235, 240, 0.34), transparent 0 22%),
    radial-gradient(circle at 82% 8%, rgba(245, 184, 62, 0.18), transparent 0 18%),
    radial-gradient(circle at 88% 82%, rgba(114, 191, 197, 0.16), transparent 0 22%),
    radial-gradient(circle at 54% 42%, rgba(255, 255, 255, 0.08), transparent 0 32%),
    radial-gradient(circle at 24% 76%, rgba(114, 191, 197, 0.1), transparent 0 26%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0, transparent 20%, transparent 76%, rgba(255, 255, 255, 0.035) 100%),
    linear-gradient(180deg, #091730 0%, #08162b 44%, #071427 100%);
  font-family: "Inter", "Segoe UI", sans-serif;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(114, 191, 197, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 191, 197, 0.036) 1px, transparent 1px),
    radial-gradient(circle, rgba(114, 191, 197, 0.05) 1.2px, transparent 1.2px),
    linear-gradient(60deg, transparent 0 47%, rgba(114, 191, 197, 0.03) 50%, transparent 53%),
    linear-gradient(120deg, transparent 0 47%, rgba(114, 191, 197, 0.024) 50%, transparent 53%),
    radial-gradient(circle at 24% 22%, transparent 0 120px, rgba(114, 191, 197, 0.07) 121px 122px, transparent 123px 176px, rgba(114, 191, 197, 0.055) 177px 178px, transparent 179px 250px, rgba(114, 191, 197, 0.04) 251px 252px, transparent 253px),
    radial-gradient(circle at 72% 68%, transparent 0 100px, rgba(114, 191, 197, 0.06) 101px 102px, transparent 103px 150px, rgba(245, 184, 62, 0.035) 151px 152px, transparent 153px 214px, rgba(114, 191, 197, 0.04) 215px 216px, transparent 217px);
  background-size: 76px 76px, 76px 76px, 24px 24px, 220px 220px, 280px 280px, auto, auto;
  background-position: center, center, 12px 12px, center, center, center, center;
  mask-image: radial-gradient(circle at center, black 46%, transparent 92%);
  opacity: 0.62;
  animation: ambientGridDrift 30s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(195, 243, 246, 0.18), transparent 0 16%),
    radial-gradient(circle at 72% 20%, rgba(170, 234, 240, 0.16), transparent 0 18%),
    radial-gradient(circle at 68% 72%, rgba(245, 184, 62, 0.1), transparent 0 12%),
    radial-gradient(circle at 48% 50%, rgba(255, 255, 255, 0.06), transparent 0 20%),
    radial-gradient(circle at 34% 78%, rgba(114, 191, 197, 0.08), transparent 0 16%);
  mix-blend-mode: screen;
  opacity: 1;
  animation: ambientGlowFloat 18s ease-in-out infinite alternate;
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(114, 191, 197, 0.92);
  outline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
}

.page-shell {
  position: relative;
  overflow: clip;
}

.page-shell::before,
.page-shell::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.9;
}

.page-shell::before {
  top: 180px;
  left: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(155, 235, 240, 0.22), transparent 70%);
  animation: ambientOrbFloat 16s ease-in-out infinite alternate;
}

.page-shell::after {
  right: -160px;
  top: 520px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(155, 235, 240, 0.14), transparent 72%);
  animation: ambientOrbFloatReverse 20s ease-in-out infinite alternate;
}

.page-shell .ambient-climate {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-climate::before,
.ambient-climate::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ambient-climate::before {
  opacity: 0.38;
  background-image:
    radial-gradient(circle at 18% 28%, transparent 0 110px, rgba(114, 191, 197, 0.1) 111px 112px, transparent 113px 150px, rgba(114, 191, 197, 0.09) 151px 152px, transparent 153px 202px, rgba(114, 191, 197, 0.08) 203px 204px, transparent 205px 256px, rgba(114, 191, 197, 0.07) 257px 258px, transparent 259px),
    radial-gradient(circle at 72% 24%, transparent 0 90px, rgba(114, 191, 197, 0.09) 91px 92px, transparent 93px 132px, rgba(114, 191, 197, 0.08) 133px 134px, transparent 135px 182px, rgba(114, 191, 197, 0.07) 183px 184px, transparent 185px 236px, rgba(114, 191, 197, 0.06) 237px 238px, transparent 239px),
    radial-gradient(circle at 56% 74%, transparent 0 120px, rgba(245, 184, 62, 0.07) 121px 122px, transparent 123px 168px, rgba(114, 191, 197, 0.08) 169px 170px, transparent 171px 228px, rgba(114, 191, 197, 0.06) 229px 230px, transparent 231px 286px, rgba(114, 191, 197, 0.06) 287px 288px, transparent 289px),
    radial-gradient(circle at 84% 58%, transparent 0 84px, rgba(114, 191, 197, 0.08) 85px 86px, transparent 87px 132px, rgba(114, 191, 197, 0.06) 133px 134px, transparent 135px 184px, rgba(245, 184, 62, 0.04) 185px 186px, transparent 187px),
    linear-gradient(105deg, transparent 0 46%, rgba(114, 191, 197, 0.05) 47%, transparent 48% 100%),
    linear-gradient(18deg, transparent 0 51%, rgba(245, 184, 62, 0.035) 52%, transparent 53% 100%);
  transform: scale(1.16);
  animation: contourDrift 28s ease-in-out infinite alternate;
}

.ambient-climate::after {
  opacity: 0.3;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(114, 191, 197, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 31% 44%, rgba(114, 191, 197, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 24%, rgba(245, 184, 62, 0.22) 0 2.4px, transparent 4px),
    radial-gradient(circle at 74% 58%, rgba(114, 191, 197, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 76%, rgba(245, 184, 62, 0.2) 0 2.4px, transparent 4px),
    radial-gradient(circle at 84% 34%, rgba(114, 191, 197, 0.16) 0 2px, transparent 3px),
    linear-gradient(12deg, transparent 0 26%, rgba(114, 191, 197, 0.08) 26.4%, transparent 26.9%, transparent 100%),
    linear-gradient(-14deg, transparent 0 46%, rgba(114, 191, 197, 0.06) 46.4%, transparent 46.9%, transparent 100%),
    linear-gradient(0deg, transparent 0 49%, rgba(114, 191, 197, 0.045) 49.4%, transparent 49.8%, transparent 100%);
  background-size: auto, auto, auto, auto, auto, auto, 460px 460px, 580px 580px, 720px 720px;
  background-repeat: no-repeat;
  animation: topoSweep 22s linear infinite;
}

.container {
  width: min(calc(100% - 3rem), var(--container));
  margin: 0 auto;
}

.container > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.hero-grid > *,
.contact-cards > * {
  min-width: 0;
}

.section {
  position: relative;
  padding: 74px 0;
}

.section.compact {
  padding: 60px 0;
}

.section:first-of-type {
  padding-top: calc(var(--header-height) + 2px);
}

.section + .section {
  border-top: 1px solid rgba(114, 191, 197, 0.06);
}

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

.section:not(.hero):not(.contact-page-intro)::before {
  content: "";
  position: absolute;
  inset: 18px 2rem;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    rgba(7, 19, 38, 0.12);
  border: 1px solid rgba(198, 241, 244, 0.09);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--highlight));
}

.section-title {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.section-title.wide {
  max-width: 16ch;
}

.section-subtitle,
.lead,
.copy,
.list {
  color: var(--muted);
}

.section-subtitle,
.lead {
  max-width: 66ch;
  font-size: 1.05rem;
}

.copy {
  font-size: 1rem;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 1.4rem;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stack-sm > * + * {
  margin-top: 0.9rem;
}

.stack-md > * + * {
  margin-top: 1.3rem;
}

.stack-lg > * + * {
  margin-top: 1.8rem;
}

.panel,
.card,
.timeline-step,
.contact-form,
.visual-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    linear-gradient(135deg, rgba(175, 236, 241, 0.07), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0.02)),
    var(--surface);
  border: 1px solid rgba(198, 241, 244, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background-color var(--transition);
  transform: translate3d(0, 0, 0);
}

.panel::before,
.card::before,
.visual-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 64%, rgba(114, 191, 197, 0.06)),
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.14), transparent 34%);
  pointer-events: none;
}

.panel::after,
.card::after,
.visual-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.card,
.timeline-step,
.contact-form {
  padding: 1.5rem;
}

.panel {
  padding: 2rem;
}

.visual-panel {
  min-height: 100%;
  padding: 2rem;
  overflow: hidden;
}

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 184, 62, 0.45), transparent);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cta-button,
.secondary-button,
.text-link,
.nav-link,
.application-link {
  transition:
    transform var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    color var(--transition),
    opacity var(--transition),
    box-shadow var(--transition);
}

.cta-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.86rem 1.3rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cta-button {
  color: #062840;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(153, 227, 233, 0.98), rgba(114, 191, 197, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 34px rgba(114, 191, 197, 0.28);
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(114, 191, 197, 0.34);
}

.secondary-button {
  border: 1px solid rgba(198, 241, 244, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.secondary-button:hover,
.secondary-button:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.application-link:hover,
.application-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 184, 62, 0.42);
  color: white;
}

.text-link,
.application-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--primary);
  font-weight: 600;
}

.text-link::after,
.application-link::after {
  content: "→";
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
    rgba(4, 14, 30, 0.76);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.site-header.scrolled {
  border-bottom-color: rgba(114, 191, 197, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
    rgba(3, 12, 26, 0.88);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand img {
  width: clamp(132px, 17vw, 220px);
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link {
  padding: 0.68rem 0.92rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(114, 191, 197, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mobile-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

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

.mobile-nav {
  display: none;
}

.hero {
  display: flex;
  align-items: stretch;
  min-height: min(790px, calc(100svh - 6px));
  margin-top: calc(var(--header-height) + 6px);
  padding-top: 0;
  padding-bottom: 24px;
  position: relative;
}

.hero-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 2.2rem;
  min-height: min(690px, calc(100svh - var(--header-height) - 12px));
  padding-top: 0.1rem;
  position: relative;
}

.hero-copy {
  z-index: 1;
  padding: 0 0 1rem;
}

.home-hero-grid {
  align-items: center;
}

.home-hero-grid .hero-copy {
  padding-top: 0.35rem;
}

.hero-copy .section-title {
  max-width: 10ch;
  font-size: clamp(2.6rem, 5.3vw, 4.85rem);
  line-height: 0.95;
}

.hero-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}

.hero-mark img {
  width: min(100%, 420px);
}

.hero-visual {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-height: 0;
  padding: 0;
  max-width: 620px;
  margin-left: auto;
}

.hero-signal-stack {
  padding-top: 2rem;
}

.hero-visual-stage {
  position: relative;
  min-height: 390px;
  border-radius: 30px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(114, 191, 197, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(12, 29, 56, 0.26);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  overflow: hidden;
}

.hero-visual::before,
.hero-visual::after,
.hero-visual-stage::before,
.hero-visual-stage::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
}

.hero-visual::before {
  inset: auto 10% 16% auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(114, 191, 197, 0.18), transparent 66%);
}

.hero-visual::after {
  inset: 14% auto auto 8%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(245, 184, 62, 0.16), transparent 70%);
}

.hero-visual-stage::before {
  inset: auto auto 8% 10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(114, 191, 197, 0.14), transparent 68%);
}

.hero-visual-stage::after {
  inset: 16% 10% auto auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(245, 184, 62, 0.08), transparent 70%);
}

.hero-orbit {
  position: absolute;
  inset: 10% 9%;
  border-radius: 32px;
  border: 1px solid rgba(114, 191, 197, 0.14);
  background:
    linear-gradient(180deg, rgba(114, 191, 197, 0.1), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at 18% 22%, rgba(245, 184, 62, 0.16), transparent 20%),
    radial-gradient(circle at 72% 74%, rgba(114, 191, 197, 0.14), transparent 24%),
    radial-gradient(circle at 52% 52%, transparent 0 92px, rgba(114, 191, 197, 0.08) 93px 94px, transparent 95px 142px, rgba(114, 191, 197, 0.06) 143px 144px, transparent 145px 196px, rgba(114, 191, 197, 0.05) 197px 198px, transparent 199px),
    rgba(5, 14, 28, 0.34);
  overflow: hidden;
}

.hero-orbit::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 24px;
  border: 1px solid rgba(114, 191, 197, 0.12);
}

.hero-orbit::after {
  content: "";
  position: absolute;
  inset: 16% auto auto 12%;
  width: 48%;
  height: 48%;
  border-radius: 999px;
  border: 1px solid rgba(114, 191, 197, 0.08);
}

.hero-stat-grid {
  position: relative;
  display: grid;
  gap: 1.4rem;
  max-width: 620px;
  margin-left: auto;
}

.hero-signal-stack .hero-stat-grid {
  width: min(100%, 560px);
}

.home-hero-grid .hero-signal-stack {
  padding-top: 5.1rem;
  width: 100%;
}

.home-hero-grid .hero-stat-grid {
  width: min(100%, 540px);
  gap: 1.4rem;
}

.hero-signal-card {
  min-height: 0;
  position: relative;
  transform: translate3d(0, 0, 0);
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.applications-hero-visual {
  grid-template-rows: minmax(330px, 1fr) auto;
}

.applications-hero-grid {
  align-items: center;
}

.applications-bubble-stack {
  display: flex;
  flex-direction: column;
  width: min(100%, 680px);
  max-width: 620px;
  margin-left: auto;
  padding: 1.1rem 0 0.35rem;
}

.applications-bubble-list {
  display: grid;
  gap: 1.4rem;
}

.applications-bubble {
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 1.3rem 1.45rem 1.35rem;
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate3d(0, 0, 0);
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.applications-bubble:nth-child(1) {
  align-self: stretch;
}

.applications-bubble:nth-child(2) {
  align-self: stretch;
}

.applications-bubble:nth-child(3) {
  align-self: stretch;
}

.applications-bubble-primary {
  min-height: 0;
}

.applications-card-kicker {
  display: inline-block;
  margin-bottom: 0.7rem;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.applications-hero-caption {
  margin: 0;
  color: rgba(214, 228, 244, 0.82);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 44ch;
}

.applications-bubble-footer {
  margin-top: 1rem;
  padding: 0 0.15rem;
}

.hero-stat {
  min-height: 100%;
  padding: 1.05rem 1rem 1.15rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(8, 21, 40, 0.46);
  border: 1px solid rgba(198, 241, 244, 0.12);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.hero-stat strong {
  display: block;
  margin-bottom: 0.35rem;
  color: white;
  font-size: 1.1rem;
}

.hero-stat span {
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-lede {
  max-width: 64ch;
  font-size: 1.02rem;
}

.hero-shell {
  position: relative;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(114, 191, 197, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(8, 21, 40, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transform: translateX(-50%);
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  border-color: rgba(114, 191, 197, 0.4);
  background: rgba(8, 21, 40, 0.82);
}

.scroll-cue::before,
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
}

.scroll-cue::before {
  top: 16px;
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, rgba(114, 191, 197, 0.4), rgba(114, 191, 197, 0.95));
  transform: translateX(-50%);
}

.scroll-cue::after {
  top: 22px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateX(-50%) rotate(45deg);
  animation: bounceDown 1.5s infinite;
}

@keyframes bounceDown {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) rotate(45deg) translateY(0);
  }

  40% {
    transform: translateX(-50%) rotate(45deg) translateY(4px);
  }

  60% {
    transform: translateX(-50%) rotate(45deg) translateY(2px);
  }
}

@keyframes ambientGridDrift {
  from {
    background-position: center, center, 12px 12px, center, center;
  }

  to {
    background-position: 24px 18px, 24px 18px, 36px 24px, 40px 0, -28px 32px;
  }
}

@keyframes ambientGlowFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.7;
  }

  100% {
    transform: translate3d(-1.5%, 2%, 0) scale(1.04);
    opacity: 0.9;
  }
}

@keyframes ambientOrbFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(32px, -18px, 0);
  }
}

@keyframes ambientOrbFloatReverse {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-30px, 22px, 0);
  }
}

@keyframes contourDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1.08);
  }

  100% {
    transform: translate3d(1.5%, -2%, 0) scale(1.12);
  }
}

@keyframes topoSweep {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.18;
  }

  50% {
    transform: translate3d(1.5%, -0.8%, 0);
    opacity: 0.26;
  }

  100% {
    transform: translate3d(-1%, 1.2%, 0);
    opacity: 0.2;
  }
}

.node-map {
  position: absolute;
  inset: 16% 12% 24% 12%;
}

.node-map span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(114, 191, 197, 0.85);
  box-shadow: 0 0 16px rgba(114, 191, 197, 0.24);
}

.node-map span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(114, 191, 197, 0.5), transparent);
}

.node-map .highlight {
  width: 12px;
  height: 12px;
  background: var(--highlight);
  box-shadow: 0 0 18px rgba(245, 184, 62, 0.35);
}

.decision-flow {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-step {
  position: relative;
  min-height: 100%;
  padding: 1.4rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(198, 241, 244, 0.12);
  backdrop-filter: blur(18px) saturate(126%);
  -webkit-backdrop-filter: blur(18px) saturate(126%);
}

.decision-step.is-gap {
  background:
    linear-gradient(180deg, rgba(245, 184, 62, 0.08), rgba(245, 184, 62, 0.02)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(245, 184, 62, 0.22);
}

.decision-step h3,
.feature-card h3,
.use-case-card h3,
.audience-card h3,
.contact-card h3,
.timeline-step h3,
.application-block h3 {
  margin: 0 0 0.7rem;
  font-size: 1.18rem;
}

.decision-step p,
.feature-card p,
.use-case-card p,
.audience-card p,
.contact-card p,
.timeline-step p,
.application-block p,
.list {
  margin: 0;
  color: var(--muted);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.26), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(114, 191, 197, 0.18), rgba(114, 191, 197, 0.04));
  border: 1px solid rgba(198, 241, 244, 0.18);
  color: var(--primary);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.card-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon svg.fill-icon {
  fill: currentColor;
  stroke: none;
}

.feature-card ul,
.application-block ul,
.timeline-step ul,
.audience-list,
.deliverable-list,
.contact-meta {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.feature-card li,
.application-block li,
.timeline-step li,
.audience-list li,
.deliverable-list li,
.contact-meta li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--muted);
}

.feature-card li + li,
.application-block li + li,
.timeline-step li + li,
.audience-list li + li,
.deliverable-list li + li,
.contact-meta li + li {
  margin-top: 0.65rem;
}

.feature-card li::before,
.application-block li::before,
.timeline-step li::before,
.audience-list li::before,
.deliverable-list li::before,
.contact-meta li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
}

.feature-card:nth-child(2) .card-icon,
.timeline-step:nth-child(2) .card-icon,
.contact-card:nth-child(2) .card-icon {
  color: var(--secondary);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.05));
}

.feature-card:nth-child(3) .card-icon,
.use-case-card:nth-child(3) .card-icon,
.application-block:nth-child(3) .card-icon {
  color: var(--highlight);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(245, 184, 62, 0.18), rgba(245, 184, 62, 0.05));
}

.application-block,
.contact-card,
.audience-card {
  padding: 1.8rem;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.feature-card,
.use-case-card,
.application-block,
.hero-signal-card,
.applications-bubble,
.contact-card,
.audience-card,
.card,
.panel,
.timeline-step,
.contact-form,
.visual-panel {
  will-change: transform;
}

.card:hover,
.card.reveal.is-visible:hover {
  z-index: 3;
  transform: translate3d(0, -12px, 0);
  box-shadow: 0 42px 98px rgba(0, 10, 28, 0.5);
}

.feature-card:hover,
.feature-card.reveal.is-visible:hover,
.use-case-card:hover,
.use-case-card.reveal.is-visible:hover,
.application-block:hover,
.application-block.reveal.is-visible:hover,
.contact-card:hover,
.contact-card.reveal.is-visible:hover,
.audience-card:hover,
.audience-card.reveal.is-visible:hover {
  z-index: 3;
  transform: translate3d(0, -12px, 0);
  box-shadow: 0 42px 98px rgba(0, 10, 28, 0.5);
}

.hero-signal-card:hover,
.hero-signal-card:focus-visible,
.hero-signal-card.reveal.is-visible:hover,
.applications-bubble:hover,
.applications-bubble:focus-visible,
.applications-bubble.reveal.is-visible:hover {
  z-index: 3;
  transform: translate3d(0, -3px, 0) !important;
  box-shadow: 0 18px 40px rgba(0, 10, 28, 0.22) !important;
}

.hero-signal-card:hover,
.hero-signal-card.reveal.is-visible:hover,
.applications-bubble:hover,
.applications-bubble.reveal.is-visible:hover {
  z-index: 3;
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 24px 56px rgba(0, 10, 28, 0.3);
}

.panel:hover,
.panel.reveal.is-visible:hover,
.timeline-step:hover,
.timeline-step.reveal.is-visible:hover,
.contact-form:hover,
.contact-form.reveal.is-visible:hover,
.visual-panel:hover,
.visual-panel.reveal.is-visible:hover {
  z-index: 2;
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 34px 84px rgba(0, 10, 28, 0.38);
}

.application-block .application-meta {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.4rem;
}

.application-meta .meta-panel {
  padding: 1rem;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(198, 241, 244, 0.11);
  backdrop-filter: blur(16px) saturate(126%);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
}

.meta-panel strong {
  display: block;
  margin-bottom: 0.55rem;
  color: white;
}

.metric-band {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1.7rem;
}

.metric-chip {
  padding: 1.15rem 1.2rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(198, 241, 244, 0.11);
  backdrop-filter: blur(16px) saturate(126%);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
  text-align: left;
}

.metric-chip strong {
  display: block;
  margin-bottom: 0.35rem;
  color: white;
  font-size: 0.98rem;
}

.highlight-line {
  color: #dce9ff;
  font-size: 1.04rem;
}

.cta-band {
  padding: 2rem;
  background:
    radial-gradient(circle at right top, rgba(195, 243, 246, 0.24), transparent 28%),
    linear-gradient(135deg, rgba(9, 25, 49, 0.62), rgba(11, 31, 60, 0.68));
}

.audience-card {
  min-height: 100%;
}

.footer {
  padding: 28px 0 44px;
  border-top: 1px solid rgba(114, 191, 197, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(5, 12, 24, 0.34);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.94rem;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.5rem;
}

.contact-page-intro {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 10px);
  margin-top: calc(var(--header-height) + 10px);
  padding-top: 0;
  padding-bottom: 40px;
}

.contact-intro {
  max-width: 72ch;
}

.contact-cards {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-card .profile {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.35rem;
}

.avatar {
  position: relative;
  overflow: hidden;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.22), transparent 28%),
    radial-gradient(circle at 30% 30%, rgba(114, 191, 197, 0.34), transparent 45%),
    linear-gradient(135deg, rgba(114, 191, 197, 0.14), rgba(245, 184, 62, 0.1));
  border: 1px solid rgba(198, 241, 244, 0.18);
}

.avatar-photo {
  width: 132px;
  height: 132px;
  border-radius: 30px;
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
}

.contact-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

.contact-page-intro .container {
  display: grid;
  gap: 1.6rem;
  align-content: center;
  min-height: calc(100svh - var(--header-height) - 28px);
}

.contact-card h3 {
  margin-top: 0.15rem;
  margin-bottom: 0.3rem;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.05;
}

.contact-role {
  margin: 0;
  color: #d9e6f8;
  font-size: 1.02rem;
  line-height: 1.45;
}

.contact-linkline {
  margin-top: 0.45rem;
}

.contact-linkline a {
  color: var(--primary);
  font-weight: 700;
  transition: color var(--transition), opacity var(--transition);
}

.contact-linkline a:hover,
.contact-linkline a:focus-visible {
  color: white;
}

.contact-bio {
  max-width: 72ch;
  margin: 0 0 1.35rem;
  font-size: 1.03rem;
  line-height: 1.72;
}

.contact-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(114, 191, 197, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--primary);
  font-weight: 700;
}

.contact-actions:hover,
.contact-actions:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(114, 191, 197, 0.38);
  color: white;
}

.contact-meta {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-top: auto;
}

.contact-meta li {
  padding: 0.95rem 1rem 0.95rem 2.1rem;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(198, 241, 244, 0.1);
  overflow-wrap: anywhere;
}

.contact-meta li::before {
  top: 1.35rem;
  left: 0.95rem;
}

.contact-tail {
  max-width: 72ch;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.field-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label {
  color: #d9e6f8;
  font-weight: 600;
  font-size: 0.94rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.92rem 1rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(114, 191, 197, 0.16);
  border-radius: 16px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(169, 189, 214, 0.8);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.section-accent {
  position: absolute;
  inset: auto -180px -100px auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(114, 191, 197, 0.14), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: white;
  color: #071326;
}

.skip-link:focus {
  top: 1rem;
}

@media (max-width: 1080px) {
  .hero-grid,
  .contact-layout,
  .grid-3,
  .grid-4,
  .grid-2,
  .application-block .application-meta {
    grid-template-columns: 1fr;
  }

  .metric-band,
  .contact-cards {
    grid-template-columns: 1fr;
  }

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

  .hero-visual-stage {
    min-height: 320px;
  }

  .decision-flow {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-card .profile {
    grid-template-columns: 132px minmax(0, 1fr);
  }

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

  .applications-bubble-stack {
    width: 100%;
    margin-left: 0;
    min-height: 0;
    padding: 0;
  }

  .hero-signal-stack {
    padding-top: 0.5rem;
  }

  .home-hero-grid .hero-copy {
    padding-top: 0;
  }

  .home-hero-grid .hero-signal-stack {
    padding-top: 0.5rem;
  }

  .applications-bubble-list {
    gap: 1rem;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 76px;
  }

  .container {
    width: min(calc(100% - 1.2rem), var(--container));
  }

  .section {
    padding: 60px 0;
  }

  .section:not(.hero):not(.contact-page-intro)::before {
    inset: 12px 0.6rem;
    border-radius: 24px;
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .brand img {
    width: min(72vw, 240px);
  }

  .mobile-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
  }

  .nav {
    display: none;
  }

  .mobile-nav {
    display: grid;
    gap: 0.55rem;
    padding: 0 0 1rem;
  }

  .mobile-nav[hidden] {
    display: none;
  }

  .mobile-nav .nav-link {
    width: 100%;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
  }

  .hero,
  .contact-page-intro {
    min-height: auto;
    margin-top: calc(var(--header-height) + 8px);
    padding-top: 0;
    padding-bottom: 28px;
  }

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

  .hero-visual-stage {
    min-height: 260px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-copy .section-title,
  .section-title,
  .hero-lede,
  .section-subtitle,
  .copy,
  .highlight-line,
  .hero-stat strong,
  .hero-stat span,
  .applications-bubble strong,
  .applications-bubble span,
  .contact-card h3,
  .contact-bio,
  .application-block h3,
  .application-meta p,
  .application-meta li,
  .contact-meta li {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .applications-bubble,
  .applications-bubble:nth-child(1),
  .applications-bubble:nth-child(2),
  .applications-bubble:nth-child(3) {
    width: 100%;
    min-height: 0;
    align-self: stretch;
    border-radius: 28px;
  }

  .hero-stat-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .panel,
  .card,
  .timeline-step,
  .contact-form,
  .application-block,
  .contact-card,
  .audience-card,
  .visual-panel {
    padding: 1.2rem;
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-button,
  .secondary-button {
    width: 100%;
  }

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

  .profile {
    justify-items: start;
  }

  .contact-meta {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .avatar-photo {
    width: 120px;
    height: 120px;
  }

  .scroll-cue {
    bottom: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .page-shell::before,
  .page-shell::after,
  .ambient-climate::before,
  .ambient-climate::after,
  .scroll-cue::after,
  .reveal {
    animation: none !important;
    transition: none !important;
  }
}