:root {
  --ink: #202124;
  --muted: #666a70;
  --line: rgba(32, 33, 36, .12);
  --paper: #f7f8f5;
  --white: #fff;
  --blue: #5b8def;
  --blue-soft: #eaf0ff;
  --green: #63b995;
  --green-soft: #e8f5ef;
  --yellow: #f2c65d;
  --yellow-soft: #fbf2d8;
  --coral: #ef7d73;
  --coral-soft: #fceceb;
  --max: 1240px;
  --display: "Aptos Display", "Segoe UI Variable Display", "Noto Sans SC", sans-serif;
  --body: "Aptos", "Segoe UI Variable Text", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--blue-soft); color: var(--ink); }

.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blue); }
.section-number {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: #8a8a80;
}

/* Liquid is reserved for navigation and purposeful action surfaces. */
.nav-wrap {
  position: fixed;
  z-index: 50;
  top: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
}
.nav {
  width: min(calc(100% - 32px), 1180px);
  min-height: 62px;
  margin-inline: auto;
  border-radius: 22px;
  pointer-events: auto;
}
.nav .liquid-surface__material { border-radius: 22px; }
.nav-content {
  min-height: 62px;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; font-weight: 760; letter-spacing: -.02em; }
.brand-mark {
  width: 26px; height: 26px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
  transform: rotate(8deg);
}
.brand-mark i { display: block; border-radius: 6px; }
.brand-mark i:nth-child(1) { background: var(--blue); }
.brand-mark i:nth-child(2) { background: var(--yellow); }
.brand-mark i:nth-child(3) { background: var(--green); }
.brand-mark i:nth-child(4) { background: var(--coral); }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 650; }
.nav.liquid-surface .nav-links { background: transparent; }
.nav-links a { color: #4f4f48; transition: color .2s ease; }
.nav-links a:hover { color: #000; }
.nav-actions { display: flex; align-items: center; gap: 7px; }
.icon-button, .lang-button {
  min-height: 44px; border: 0; cursor: pointer;
  background: rgba(247,247,242,.78);
  transition: background .2s ease, transform .2s ease;
}
.icon-button:hover, .lang-button:hover { background: #fff; transform: translateY(-1px); }
.lang-button { min-width: 58px; padding: 0 14px; border-radius: 15px; font-size: 12px; font-weight: 750; }
.nav-cta {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 17px; border-radius: 15px;
  background: var(--ink); color: white;
  font-size: 13px; font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-cta [data-liquid-visual] { gap: 8px; }
.nav-cta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.brand > [data-liquid-visual] { gap: 11px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.back-to-systems { display: inline-flex; align-items: center; min-height: 44px; color: #315fae; font-size: 14px; font-weight: 700; }
html[data-material="performance"] nav .liquid-surface__material { --liquid-performance-blur: 2px; backdrop-filter: blur(2px) saturate(1.12); -webkit-backdrop-filter: blur(2px) saturate(1.12); }
html[data-material="performance"] nav .liquid-surface__lens,
html[data-material="performance"] nav .liquid-surface__lens-tail,
html[data-material="performance"] nav .liquid-surface__pressure { display: none; }
html[data-material="performance"] nav .liquid-surface__sheen { opacity: 0; }
html[data-material="performance"] nav .liquid-surface__plane,
html[data-material="performance"] nav [data-liquid-visual] { transform: none !important; will-change: auto; }
.holding-page { min-height: 100vh; background: var(--paper); }
.holding-main { min-height: 100vh; padding-block: 180px 100px; display: grid; align-items: center; }
.holding-content { max-width: 820px; }
.holding-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); }
.holding-meta [data-project-number] { color: #315fae; font-weight: 800; }
.holding-content h1 { margin-top: 24px; font-size: clamp(42px, 7vw, 86px); line-height: 1.05; letter-spacing: -.055em; overflow-wrap: anywhere; }
.holding-content h2 { margin-top: 28px; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; letter-spacing: -.035em; color: #315fae; }
.holding-description { max-width: 590px; margin-top: 22px; font-size: 18px; color: var(--muted); }
.holding-content .back-to-systems { margin-top: 36px; padding: 10px 20px; border-radius: 16px; color: #fff; background: #4779d5; }
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 640px) {
  .shell { width: calc(100% - 32px); }
  .nav { width: calc(100% - 20px); min-height: 58px; border-radius: 19px; }
  .nav-content { gap: 12px; padding-inline: 12px; }
  .brand > [data-liquid-visual] { display: inline-flex !important; }
  .brand > [data-liquid-visual] > span:last-child { display: none; }
  .nav-cta { display: none; }
  .holding-main { padding-block: 138px 70px; }
  .holding-description { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}