:root {
  --bg: #04070f;
  --blue: #208bff;
  --blue-soft: #7cc0ff;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.58);
  --faint: rgba(255, 255, 255, 0.34);
  --hair: rgba(255, 255, 255, 0.12);
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
  height: 100vh;
}

/* Lenis requirements */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #fff;
  color: #000;
  padding: 10px 16px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------- stage */

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.stage.is-ready {
  opacity: 1;
}
#gl {
  display: block;
  width: 100%;
  height: 100%;
}

/* Darkens the frame edges so copy always has contrast to sit on. */
.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(4, 7, 15, 0) 30%, rgba(4, 7, 15, 0.72) 100%),
    linear-gradient(to bottom, rgba(4, 7, 15, 0.75) 0%, rgba(4, 7, 15, 0) 22%);
}

/* ------------------------------------------------------------- preloader */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--bg);
  transition: opacity 0.7s ease;
}
.preloader.is-done {
  opacity: 0;
  pointer-events: none;
}
.preloader__mark img {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 0 26px rgba(32, 139, 255, 0.65));
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.preloader__copy {
  margin: 0;
  text-align: center;
  font-weight: 200;
  font-size: clamp(15px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.preloader__track {
  width: min(240px, 50vw);
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.preloader__track span {
  display: block;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.preloader__status {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ----------------------------------------------------------------- intro */

.intro {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  background: radial-gradient(circle at 50% 50%, rgba(4, 7, 15, 0.35) 0%, rgba(4, 7, 15, 0.9) 75%);
}
.intro.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.intro.is-done {
  opacity: 0;
  pointer-events: none;
}
.intro__line {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(30px, 5.6vw, 68px);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(14px);
  animation: introLine 1.1s ease forwards;
}
.intro__line--1 {
  animation-delay: 0.4s;
}
.intro__line--2 {
  color: var(--blue-soft);
  animation-delay: 2.6s;
}
/* Each line lands and then holds. The couplet used to decay to 0.18 and sit
   there as ghost type over the hero; the overlay's own fade-out is what should
   clear it, so the line animation ends at full strength. */
@keyframes introLine {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.intro__skip {
  position: absolute;
  bottom: 42px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.3s ease;
}
.intro__skip:hover {
  color: #fff;
}

/* The intro is a beat of its own. Its backdrop is deliberately translucent so
   the particle stage still reads through it, which meant scene 01's headline
   and the page chrome sat live underneath the couplet — two blocks of type in
   the same place, reading as one jumbled slide. Everything but the stage stays
   down until the intro clears, then fades up together. */
body.is-intro main,
body.is-intro .chrome,
body.is-intro .counter {
  opacity: 0;
}

/* ---------------------------------------------------------------- chrome */

.chrome {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 46px);
  transition: opacity 0.9s ease;
}
.chrome--top {
  top: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.brand img {
  width: 26px;
  height: auto;
}
.chrome__nav {
  display: flex;
  gap: 26px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chrome__nav a:hover {
  color: #fff;
}

.counter {
  position: fixed;
  z-index: 60;
  right: clamp(18px, 4vw, 46px);
  bottom: 34px;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(4, 10, 24, 0.45);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.counter__index {
  color: var(--faint);
}
.counter__label {
  color: var(--blue-soft);
}

/* ---------------------------------------------------------------- scenes */

main {
  position: relative;
  z-index: 10;
  transition: opacity 0.9s ease;
}

.scene {
  min-height: 145vh;
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 6vw, 90px);
  pointer-events: none;
}
.scene__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  will-change: transform, opacity;
}
.scene__inner--center {
  text-align: center;
  max-width: 900px;
}
.scene__inner--left {
  max-width: 620px;
  margin: 0;
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--blue);
}

.display {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(46px, 9vw, 116px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.display--small {
  font-size: clamp(36px, 6.4vw, 82px);
}
.headline {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.headline em,
.display em {
  font-style: normal;
  color: var(--blue-soft);
}
.lede {
  margin: 0 auto 44px;
  max-width: 620px;
  font-weight: 200;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.7;
  color: var(--muted);
}
.body {
  margin: 0 0 18px;
  font-weight: 200;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.76);
}
.body--muted {
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 17px);
}

.hint {
  margin: 46px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.9;
  }
}

/* doors */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 780px;
  margin: 0 auto;
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 170px;
  padding: 26px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(3px);
  text-align: left;
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    transform 0.4s ease;
}
.door:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}
.door__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.door__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.01em;
}
.door__arrow {
  margin-top: auto;
  color: var(--blue-soft);
  transition: transform 0.4s ease;
}
.door:hover .door__arrow {
  transform: translateX(6px);
}

/* tags */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* split */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 44px;
  text-align: left;
}
.split__col {
  padding: 26px 24px;
  border-top: 1px solid var(--hair);
}
.split__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--blue);
}
.split__col h3 {
  margin: 14px 0 10px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
}
.split__col p {
  margin: 0 0 16px;
  font-weight: 200;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.link {
  font-size: 13px;
  font-weight: 300;
  color: var(--blue-soft);
}
.link:hover {
  color: #fff;
}

/* services list */

.services {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}
.services li {
  border-bottom: 1px solid var(--hair);
}
.services a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 0 15px 16px;
  border-left: 1px solid transparent;
  transition:
    border-color 0.3s ease,
    padding-left 0.3s ease;
}
.services a:hover {
  border-left-color: var(--blue);
  padding-left: 24px;
}
.services b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
}
.services span {
  font-size: 13px;
  font-weight: 200;
  line-height: 1.6;
  color: var(--faint);
}

/* product cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  /* Opaque enough to stay readable when the particle shape passes behind. */
  background: rgba(6, 12, 26, 0.82);
  backdrop-filter: blur(8px);
  transition:
    border-color 0.4s ease,
    transform 0.4s ease,
    background 0.4s ease;
}
.card:hover {
  border-color: rgba(32, 139, 255, 0.55);
  background: rgba(32, 139, 255, 0.06);
  transform: translateY(-4px);
}
.card--lead {
  grid-row: span 2;
}
.card__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
}
.card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.card sup {
  font-size: 11px;
  opacity: 0.7;
}
.card p {
  margin: 0;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.7;
  color: var(--muted);
}
.card__cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  color: var(--blue-soft);
}

/* actions + footer */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}
.btn {
  padding: 14px 30px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 300;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
.btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn--primary:hover {
  background: #46a3ff;
  border-color: #46a3ff;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 70px;
  font-size: 12px;
  font-weight: 200;
  color: var(--faint);
}
.footer__sep {
  opacity: 0.5;
}
.footer a:hover {
  color: #fff;
}

/* --------------------------------------------------- fallbacks + motion */

@media (max-width: 720px) {
  .chrome__nav {
    display: none;
  }
  .scene {
    min-height: 130vh;
  }
  .card--lead {
    grid-row: auto;
  }
}

/* No WebGL: drop the cinematic layer, keep a readable dark page. */
html.no-webgl .stage,
html.no-webgl .counter {
  display: none;
}
html.no-webgl body {
  background: linear-gradient(160deg, #04070f 0%, #0a1a35 100%);
}
html.no-webgl .scene {
  min-height: auto;
  padding-top: 90px;
  padding-bottom: 90px;
}
html.no-webgl .scene__inner {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__mark img,
  .hint {
    animation: none;
  }
  .scene {
    min-height: 100vh;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}