:root {
  --bg: #050607;
  --bg-soft: #080a0b;
  --bg-elevated: #0b0e0f;

  --surface: rgba(255, 255, 255, 0.028);
  --surface-hover: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.06);

  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #f3f5f4;
  --text-soft: #c8ceca;
  --muted: #959e99;
  --muted-soft: #666f6a;

  --accent: #67f59a;
  --accent-strong: #84ffad;
  --accent-soft: rgba(103, 245, 154, 0.12);
  --accent-line: rgba(103, 245, 154, 0.24);

  --warning: #f2c96d;
  --danger: #ff7780;

  --container: 1440px;
  --header-h: 82px;

  --font-display:
    "Manrope",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-body:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --shadow-soft:
    0 20px 60px rgba(0, 0, 0, 0.24);

  --shadow-deep:
    0 30px 100px rgba(0, 0, 0, 0.48);

  --ease:
    cubic-bezier(0.22, 1, 0.36, 1);

  --ease-soft:
    cubic-bezier(0.16, 1, 0.3, 1);

  --section-gap:
    clamp(110px, 11vw, 190px);
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;

  background:
    linear-gradient(
      180deg,
      #07090a 0%,
      #050607 52%,
      #040506 100%
    );

  color: var(--text);

  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-booting {
  overflow: hidden;
}

body.is-command-open {
  overflow: hidden;
}

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

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

button,
select {
  color: inherit;
}

button {
  border: 0;
}

input,
select,
textarea {
  color: var(--text);
}

textarea {
  resize: vertical;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

::selection {
  background: var(--accent);
  color: #031007;
}

:focus-visible {
  outline:
    1px
    solid
    var(--accent);

  outline-offset:
    4px;
}

.container {
  width:
    min(
      calc(100% - 64px),
      var(--container)
    );

  margin:
    0 auto;
}

.section {
  position: relative;
  isolation: isolate;
  padding:
    var(--section-gap)
    0;
}

.section + .section {
  border-top:
    1px
    solid
    rgba(255, 255, 255, 0.045);
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color:
    var(--accent);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}

.section-kicker::before {
  content: "";

  width:
    18px;

  height:
    1px;

  background:
    var(--accent);
}

.section-heading {
  max-width:
    980px;
}

.section-heading h2 {
  margin:
    20px
    0
    0;

  max-width:
    980px;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      46px,
      6vw,
      92px
    );

  font-weight:
    500;

  line-height:
    0.98;

  letter-spacing:
    -0.052em;

  text-wrap:
    balance;
}

.section-heading p {
  max-width:
    760px;

  margin:
    28px
    0
    0;

  color:
    var(--muted);

  font-size:
    clamp(
      16px,
      1.2vw,
      19px
    );

  line-height:
    1.75;
}

.site-shell {
  min-height:
    100vh;

  opacity:
    0;

  transition:
    opacity
    700ms
    var(--ease);
}

body.is-ready .site-shell {
  opacity:
    1;
}

.anchor-section {
  height:
    1px;
}

hr {
  border:
    0;

  border-top:
    1px
    solid
    var(--line);
}

strong {
  font-weight:
    600;
}

small {
  font-size:
    0.82em;
}

.hidden {
  display:
    none !important;
}

.visually-hidden {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}

@media (max-width: 1050px) {
  :root {
    --header-h:
      74px;

    --section-gap:
      clamp(
        90px,
        13vw,
        140px
      );
  }

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

@media (max-width: 720px) {
  :root {
    --section-gap:
      88px;
  }

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

  .section-heading h2 {
    font-size:
      clamp(
        40px,
        12vw,
        60px
      );
  }

  .section-heading p {
    font-size:
      16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior:
      auto;
  }
}