:root {
  --w-bg: #0c1117;
  --w-bg-2: #11161f;
  --w-ink: #e6ebf2;
  --w-mute: #8893a3;
  --w-rule: #1f2733;
  --w-accent: #5b8def;
  --w-teal: #2e8b78;
  --w-white: #fff;
  --w-font: "Inter", system-ui, -apple-system, sans-serif;
  --w-content-max: 1100px;
  --w-text-max: 560px;
  --w-heading-max: 640px;
  --w-caps-max: 540px;
  --w-section-py: 96px;
  --w-section-px: 32px;
  --w-text-md: 14.5px;
  --w-grid-gap-y: 32px;
  --w-grid-gap-x: 40px;
  --w-hero-min-h: 55vh;
  --w-nav-blur: 12px;
  --w-blob-blur: 160px;
  --w-blob-1-size: 700px;
  --w-blob-2-size: 600px;
  --w-blob-1-alpha: 0.5;
  --w-blob-2-alpha: 0.32;
  --w-fade-duration: 0.6s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--w-bg);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--w-accent); color: var(--w-white); }

/* ── Background — subtle ambient color, no carnival ── */
.hero {
  position: relative;
}
.bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--w-bg);
  overflow: hidden;
}
.bg::before, .bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--w-blob-blur));
  will-change: transform;
}
.bg::before {
  width: var(--w-blob-1-size); height: var(--w-blob-1-size);
  top: -160px; left: -200px;
  background: color-mix(in srgb, var(--w-accent) 35%, transparent);
  opacity: var(--w-blob-1-alpha);
}
.bg::after {
  width: var(--w-blob-2-size); height: var(--w-blob-2-size);
  bottom: -180px; right: -160px;
  background: color-mix(in srgb, var(--w-teal) 60%, transparent);
  opacity: var(--w-blob-2-alpha);
}

/* Image layers — only show if files are present, blended discreetly */
.img-layer {
  position: absolute; inset: -20px;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
  display: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 100%);
}
.img-layer.has-src { display: block; }
.img-layer--back  { filter: blur(6px) saturate(0.85) brightness(0.6);
                    mix-blend-mode: screen; opacity: 0.32;
                    animation: bg-pan 24s ease-in-out infinite alternate; }
.img-layer--front { filter: blur(60px) saturate(1.2);
                    mix-blend-mode: overlay; opacity: 0.45;
                    animation: bg-pan 32s ease-in-out infinite alternate; }

@keyframes bg-pan {
  0%   { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(2%, 2%, 0); }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--w-bg) 80%, transparent);
  backdrop-filter: blur(var(--w-nav-blur));
  border-bottom: 1px solid var(--w-rule);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.brand-mark {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--w-accent), var(--w-teal));
  display: grid; place-items: center;
}
.brand-mark svg { width: 13px; height: 13px; stroke: var(--w-white); stroke-width: 2; fill: none; }
.nav-r {
  display: flex; gap: 26px; font-size: 13px;
  color: var(--w-mute);
}
.nav-r a:hover { color: var(--w-ink); }
.nav-cta {
  font-size: 13px; font-weight: 500;
  color: var(--w-ink);
  padding: 7px 14px;
  border: 1px solid var(--w-rule);
  border-radius: 6px;
}
.nav-cta:hover { border-color: var(--w-mute); }

@media (max-width: 720px) {
  .nav-r { display: none; }
  .hero { flex-direction: column; text-align: center; gap: 24px; }
  .hero > .col { max-width: 100%; }
  .lede { max-width: 100%; }
  .hero-go { justify-content: center; }
}

/* ── SECTION rhythm ── */
section { position: relative; padding: 0 var(--w-section-px); }
.col { max-width: var(--w-content-max); margin: 0 auto; }

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-mute);
  margin-bottom: 24px;
}

/* ── HERO ── */
.hero {
  padding-top: 140px; padding-bottom: 100px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
  min-height: var(--w-hero-min-h);
}
.hero > .col { position: relative; z-index: 1; max-width: 600px; }
.hero-video-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 80%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 80%);
}
.hero-video-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video-bg .hero-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--w-bg) 100%);
}
.hero-video-bg .play-hint {
  position: absolute; bottom: 24px; right: 24px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s;
}
.hero-video-bg .play-hint:hover { background: rgba(255,255,255,.3); }
.hero-video-bg .play-hint svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 720px;
}
h1 .accent { color: var(--w-accent); }
.lede {
  margin-top: 24px;
  max-width: 560px;
  font-size: 16px;
  color: var(--w-mute);
  line-height: 1.6;
}
.lede b { color: var(--w-ink); font-weight: 500; }
.hero-go {
  margin-top: 36px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.btn--primary {
  background: var(--w-accent);
  color: var(--w-white);
}
.btn--primary:hover { background: color-mix(in srgb, var(--w-accent) 88%, var(--w-white)); }
.btn--ghost {
  color: var(--w-mute);
  border-color: var(--w-rule);
}
.btn--ghost:hover { color: var(--w-ink); border-color: var(--w-mute); }
.btn-arrow { font-size: 16px; line-height: 1; }

.hero-meta {
  margin-top: 28px;
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--w-mute);
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta-item::before {
  content: "\2713";
  color: var(--w-teal); font-weight: 700;
}

/* ── DEMOS ── */
.demos {
  padding-top: var(--w-section-py); padding-bottom: var(--w-section-py);
  border-top: 1px solid var(--w-rule);
}
.demos h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 640px;
}
.demos-sub {
  margin-top: 14px;
  max-width: var(--w-text-max);
  color: var(--w-mute);
  font-size: var(--w-text-md);
}

.slabs {
  margin-top: 48px;
  border-top: 1px solid var(--w-rule);
}
.slab {
  display: grid;
  grid-template-columns: 48px 1fr 200px auto;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--w-rule);
  transition: background 0.15s;
}
.slab:hover { background: color-mix(in srgb, var(--w-ink) 3%, transparent); }
.slab-no {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--w-mute);
  font-variant-numeric: tabular-nums;
}
.slab-name {
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--w-ink);
}
.slab-spec {
  font-size: 13px; color: var(--w-mute);
}
.slab-go {
  font-size: 13px; font-weight: 500;
  color: var(--w-accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.slab-go::after { content: "\2192"; transition: transform 0.15s; }
.slab:hover .slab-go::after { transform: translateX(3px); }

@media (max-width: 720px) {
  .slab { grid-template-columns: 32px 1fr auto; }
  .slab-spec { display: none; }
}

/* ── CAPS ── */
.caps {
  padding-top: var(--w-section-py); padding-bottom: var(--w-section-py);
  border-top: 1px solid var(--w-rule);
}
.caps h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.caps-sub {
  margin-top: 12px; max-width: var(--w-caps-max);
  color: var(--w-mute); font-size: var(--w-text-md);
}
.caps-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--w-grid-gap-y) var(--w-grid-gap-x);
}
.cap-name { font-size: 14.5px; font-weight: 600; color: var(--w-ink); margin-bottom: 6px; }
.cap-text { font-size: 13px; color: var(--w-mute); line-height: 1.55; }
@media (max-width: 980px) { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .caps-grid { grid-template-columns: 1fr; } }

/* ── END CTA ── */
.end {
  padding-top: var(--w-section-py); padding-bottom: 120px;
  border-top: 1px solid var(--w-rule);
}
.end h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 640px;
}
.end p {
  margin-top: 14px; max-width: var(--w-text-max);
  color: var(--w-mute); font-size: var(--w-text-md);
}
.end-go {
  margin-top: 28px;
  display: flex; gap: 12px;
}

/* ── FOOTER ── */
footer {
  padding: 24px var(--w-section-px);
  border-top: 1px solid var(--w-rule);
  font-size: 12px;
  color: var(--w-mute);
}
.footer-inner {
  max-width: var(--w-content-max); margin: 0 auto;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

[data-parallax] { will-change: transform; }
[data-fade] {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--w-fade-duration) ease, transform var(--w-fade-duration) ease;
}
[data-fade].in { opacity: 1; transform: none; }