:root {
  --color-bg: #161826;
  --color-ground: #080810;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-neutral-100: #f3f5fe;
  --color-neutral-500: #9397ab;
  --color-neutral-700: #595d6c;
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-md: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-400); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-ground);
}
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 32px; }
.nav { display: flex; align-items: center; gap: 11.2px; padding: 26px 0; }
.nav-brand {
  margin-right: auto;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav a:not(.nav-brand) { color: var(--color-text); font-size: 14px; }
.nav a:not(.nav-brand):hover { color: var(--color-accent); }

.hero { position: relative; overflow: hidden; width: 100%; }
.wave-field, .wave-field svg, .wave-fade { position: absolute; inset: 0; }
.wave-field { pointer-events: none; }
.wave-field svg { width: 100%; height: 100%; display: block; }
.wave-field path { fill: none; stroke-width: 1; }
.wave-a { animation: rb-wave-a 26s linear infinite; }
.wave-a path { stroke: var(--color-accent); opacity: 0.14; }
.wave-b { animation: rb-wave-b 38s linear infinite; }
.wave-b path { stroke: var(--color-accent); opacity: 0.09; }
.wave-c { animation: rb-wave-a 52s linear infinite; }
.wave-c path { stroke: var(--color-neutral-500); opacity: 0.10; }
.wave-fade {
  background: linear-gradient(to right, var(--color-ground) 0%, transparent 40%, transparent 70%, var(--color-ground) 100%);
}
@keyframes rb-wave-a { from { transform: translateX(0); } to { transform: translateX(-720px); } }
@keyframes rb-wave-b { from { transform: translateX(-720px); } to { transform: translateX(0); } }
.hero-content { position: relative; padding-top: 150px; padding-bottom: 170px; }
h1, h2 { margin: 0; font-weight: 500; }
h1 { margin-bottom: 44px; font-size: clamp(56px, 9vw, 110px); line-height: 1.02; letter-spacing: -0.03em; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 11px 20px;
  color: var(--color-text);
  cursor: pointer;
  font: 500 15px/1.2 var(--font-body);
  text-decoration: none;
}
.btn:disabled { cursor: not-allowed; opacity: 0.45; }
.btn-primary { border-color: var(--color-accent); color: var(--color-accent); }
.btn-primary:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-block { width: 100%; margin-top: 6px; }

.product-section .container { padding-top: 88px; padding-bottom: 96px; }
.product-section h2 { margin-bottom: 20px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em; }
.product-section h2 a { color: var(--color-text); }
.product-section h2 a:hover { color: var(--color-accent-300); }
.product-section p { max-width: 62ch; margin: 0; color: color-mix(in srgb, var(--color-text) 74%, transparent); font-size: 18px; line-height: 1.65; }

.belief-band { width: 100%; background: radial-gradient(760px 380px at 22% 0%, var(--color-section-glow), transparent 68%), var(--color-section); }
.belief-band .container { padding-top: 96px; padding-bottom: 96px; }
.kicker { margin-bottom: 22px; color: var(--color-accent-300); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.belief-statement { max-width: 26ch; margin: 0 0 28px; color: var(--color-neutral-100); font-size: clamp(24px, 3.4vw, 36px); line-height: 1.32; letter-spacing: -0.015em; }
.belief-body { max-width: 56ch; margin: 0; color: color-mix(in srgb, var(--color-neutral-100) 78%, transparent); font-size: 17px; line-height: 1.66; }

.contact-section .container { padding-top: 96px; padding-bottom: 96px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 56px; align-items: start; }
.contact-section h2 { margin-bottom: 18px; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; }
.contact-section p { max-width: 40ch; margin: 0; color: color-mix(in srgb, var(--color-text) 74%, transparent); font-size: 17px; line-height: 1.6; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.field > label { display: block; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); font-size: 12px; }
.input { width: 100%; min-height: 36px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); padding: 6px 10px; color: var(--color-text); caret-color: var(--color-accent); font: 14px/1.55 var(--font-body); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-message { margin-top: 14px !important; font-size: 14px !important; }
.form-message.error { color: var(--color-accent-300); }
.form-message.success { color: color-mix(in srgb, var(--color-text) 80%, transparent); }

.site-footer { margin-top: auto; width: 100%; }
.hr { height: 1px; width: calc(100% - 64px); max-width: 1080px; border: 0; margin: 0 auto; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); }
.footer-content { padding-top: 28px; padding-bottom: 40px; color: color-mix(in srgb, var(--color-text) 50%, transparent); font-size: 13px; }

@media (max-width: 540px) {
  .container { padding-inline: 22px; }
  .nav { gap: 10px; }
  .nav a:not(.nav-brand) { font-size: 13px; }
  .hero-content { padding-top: 120px; padding-bottom: 130px; }
  .hr { width: calc(100% - 44px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave-a, .wave-b, .wave-c { animation-play-state: paused; }
}