:root {
  color-scheme: light dark;
  --background: #fafafa;
  --foreground: #171717;
  --muted: #5f5f5f;
  --faint: rgba(23, 23, 23, 0.1);
  --surface: rgba(255, 255, 255, 0.56);
  --primary: #6372f1;
  --rose: #d1616f;
  --mineral: #4e9f8b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html {
  font-family:
    "Google Sans Flex", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--foreground);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--background);
}

.splash-atmosphere-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    var(--background) 0%,
    color-mix(in srgb, #ebe7e3 30%, var(--background)) 54%,
    color-mix(in srgb, #edf2ee 22%, var(--background)) 100%
  );
  backface-visibility: hidden;
  transform: translateZ(0);
}

.splash-atmosphere-container::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle at 20% 20%,
    rgba(255, 255, 255, 0.48) 0%,
    transparent 44%
  );
}

.splash-atmosphere-mesh {
  position: absolute;
  inset: -10%;
  opacity: 0.9;
  filter: blur(12px);
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity;
}

.splash-blob {
  position: absolute;
  border-radius: 9999px;
  mix-blend-mode: normal;
  backface-visibility: hidden;
  will-change: auto;
}

.splash-blob-primary {
  top: -20%;
  right: -10%;
  width: 100vw;
  height: 100vw;
  background: radial-gradient(circle at center, rgba(109, 105, 216, 0.046) 0%, rgba(109, 105, 216, 0.026) 35%, rgba(109, 105, 216, 0.01) 65%, rgba(109, 105, 216, 0.002) 90%, transparent 100%);
}

.splash-blob-secondary {
  bottom: -15%;
  left: -10%;
  width: 110vw;
  height: 110vw;
  background: radial-gradient(circle at center, rgba(176, 128, 128, 0.052) 0%, rgba(176, 128, 128, 0.028) 35%, rgba(176, 128, 128, 0.01) 65%, rgba(176, 128, 128, 0.002) 90%, transparent 100%);
}

.splash-blob-tertiary {
  top: 5%;
  left: -5%;
  width: 90vw;
  height: 90vw;
  background: radial-gradient(circle at center, rgba(226, 224, 229, 0.058) 0%, rgba(226, 224, 229, 0.029) 35%, rgba(226, 224, 229, 0.01) 65%, rgba(226, 224, 229, 0.001) 90%, transparent 100%);
}

.splash-blob-quaternary {
  top: 20%;
  right: -10%;
  width: 130vw;
  height: 130vw;
  background: radial-gradient(circle at center, rgba(155, 111, 159, 0.052) 0%, rgba(155, 111, 159, 0.028) 35%, rgba(155, 111, 159, 0.01) 65%, rgba(155, 111, 159, 0.002) 90%, transparent 100%);
}

.splash-blob-warning-accent {
  top: -20%;
  left: 10%;
  width: 100vw;
  height: 100vw;
  background: radial-gradient(circle at center, rgba(78, 159, 139, 0.045) 0%, rgba(78, 159, 139, 0.023) 35%, rgba(78, 159, 139, 0.008) 65%, rgba(78, 159, 139, 0.001) 90%, transparent 100%);
}

.splash-atmosphere-grain {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0.11;
  pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3dy95eS9paS9saS9tYS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS9reS+f6unpAAAAB3RSTlMGmt7i6v76OG706AAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADJJREFUeNo9zEcSADAIA0F6997/f9XQBY6cgKK01koizT96S4LPrS6JvTM6Nf6P0R37S4J/mAn6AAD3773AAAAAAElFTkSuQmCC");
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

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

.shell {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100svh;
  min-height: 35rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.topbar,
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.logo {
  display: block;
  width: auto;
  height: clamp(1.55rem, 2.2vw, 1.95rem);
}

.locale-list {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locale-list a {
  display: inline-flex;
  min-width: 2.3rem;
  height: 2.3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.locale-list a[aria-current="page"] {
  border-color: var(--faint);
  background: var(--surface);
  color: var(--foreground);
}

.hero {
  display: grid;
  place-items: center;
  min-height: 0;
  text-align: center;
}

.hero-inner {
  display: grid;
  width: min(100%, 54rem);
  justify-items: center;
  gap: clamp(0.95rem, 2vh, 1.35rem);
}

.kicker {
  margin: 0;
  color: var(--primary);
  font-size: clamp(0.74rem, 1.2vw, 0.86rem);
  font-weight: 720;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.9rem, 6.4vw, 5.8rem);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 0.98;
}

.summary {
  max-width: 43rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  line-height: 1.58;
}

.value-line {
  max-width: 42rem;
  margin: clamp(0.35rem, 1vh, 0.75rem) 0 0;
  color: var(--foreground);
  font-size: clamp(0.94rem, 1.25vw, 1.05rem);
  font-weight: 650;
  line-height: 1.55;
}

.value-line span {
  color: var(--muted);
  font-weight: 500;
}

.footer {
  color: var(--muted);
  font-size: 0.82rem;
}

.footer span:last-child {
  text-align: right;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --muted: #a3a3a3;
    --faint: rgba(255, 255, 255, 0.08);
    --surface: rgba(25, 25, 25, 0.66);
    --primary: color-mix(in srgb, #6372f1 88%, #ffffff);
  }

  .splash-atmosphere-container {
    background: linear-gradient(
      135deg,
      var(--background) 0%,
      color-mix(in srgb, #1d1919 54%, var(--background)) 58%,
      color-mix(in srgb, #111614 38%, var(--background)) 100%
    );
  }

  .splash-atmosphere-container::after {
    background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(0, 0, 0, 0.24) 100%);
  }

  .splash-atmosphere-mesh {
    opacity: 0.72;
  }

  .splash-blob-primary {
    background: radial-gradient(circle at center, rgba(109, 105, 216, 0.04) 0%, rgba(109, 105, 216, 0.021) 35%, rgba(109, 105, 216, 0.007) 65%, rgba(109, 105, 216, 0.001) 90%, transparent 100%);
  }

  .splash-blob-secondary {
    background: radial-gradient(circle at center, rgba(126, 84, 86, 0.034) 0%, rgba(126, 84, 86, 0.017) 35%, rgba(126, 84, 86, 0.006) 65%, rgba(126, 84, 86, 0.001) 90%, transparent 100%);
  }

  .splash-blob-tertiary {
    background: radial-gradient(circle at center, rgba(128, 122, 128, 0.024) 0%, rgba(128, 122, 128, 0.012) 35%, rgba(128, 122, 128, 0.004) 65%, rgba(128, 122, 128, 0.001) 90%, transparent 100%);
  }

  .splash-blob-quaternary {
    background: radial-gradient(circle at center, rgba(116, 78, 124, 0.032) 0%, rgba(116, 78, 124, 0.016) 35%, rgba(116, 78, 124, 0.005) 65%, rgba(116, 78, 124, 0.001) 90%, transparent 100%);
  }

  .splash-blob-warning-accent {
    background: radial-gradient(circle at center, rgba(59, 124, 105, 0.028) 0%, rgba(59, 124, 105, 0.014) 35%, rgba(59, 124, 105, 0.005) 65%, rgba(59, 124, 105, 0.001) 90%, transparent 100%);
  }

  .splash-atmosphere-grain {
    opacity: 0.09;
  }
}

@media (max-width: 720px) {
  .shell {
    min-height: 32rem;
    padding: 1rem;
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(2.55rem, 11vw, 4.2rem);
  }

  .summary {
    font-size: clamp(0.98rem, 4vw, 1.08rem);
  }
}

@media (max-height: 640px) {
  .shell {
    padding-block: 0.85rem;
  }

  .hero-inner {
    gap: 0.7rem;
  }

  h1 {
    font-size: clamp(2.45rem, 5.6vw, 4.9rem);
  }

  .summary,
  .value-line {
    font-size: 0.95rem;
    line-height: 1.45;
  }
}