/* kc3d.css — layering + fallbacks for the 2.0 WebGL layers */
.kc3d-mount {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.kc3d-mount .kc3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* graceful static depth when WebGL won't animate (no-webgl / reduced-motion) */
.kc3d-mount.kc3d-fallback {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0, 212, 255, 0.10), transparent 60%),
    radial-gradient(circle at 72% 66%, rgba(0, 128, 255, 0.08), transparent 55%);
}
@media (prefers-reduced-motion: reduce) {
  /* engine already renders a single static frame; nothing extra to disable */
  .kc3d-canvas { will-change: auto; }
}

/* ===== G004 — gas navigator 3D atom stage (in-flow band) ===== */
.kc3d-gas-stage {
  position: relative;
  width: 100%;
  height: 220px;
  margin: 8px auto 0;
  overflow: visible;
  pointer-events: none;
}
.kc3d-gas-stage .kc3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.kc3d-gas-stage.kc3d-fallback {
  background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.12), transparent 60%);
}
@media (max-width: 640px) {
  .kc3d-gas-stage { height: 160px; }
}

/* ===== G004 — product card cursor glare (paired with product-tilt.js) ===== */
.product-card, .gas-card-v2 { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s; }
.product-card::after, .gas-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(0, 229, 255, 0.14),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}
.product-card.kc-tilting::after, .gas-card-v2.kc-tilting::after { opacity: 1; }
.product-card.kc-tilting, .gas-card-v2.kc-tilting { will-change: transform; }

/* ===== G006 — reduced-motion reveal-visibility safety =====
   The page's base stylesheet already ships the universal reduced-motion reset
   (animation/transition durations -> ~0, scroll-behavior auto, decorative
   particles display:none). This block only adds the missing guarantee that
   scroll-reveal content is never left hidden when its reveal transition is
   neutralised. kc3d WebGL scenes handle reduced-motion separately in JS. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .bx-reveal,
  .gas-card-v2,
  .temp-journey-step {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== 2.0 hero layout (robust — independent of the precompiled Tailwind build) ===== */
.kc-hero-eyebrow {
  font-family: "JetBrains Mono", monospace;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 11px;
}
.kc-hero-eyebrow .est { color: rgba(56, 189, 248, 0.9); letter-spacing: 0.25em; }
.kc-hero-eyebrow .rule { width: 1.75rem; height: 1px; background: rgba(56, 189, 248, 0.4); }
.kc-hero-eyebrow .tag { color: rgba(186, 222, 240, 0.82); letter-spacing: 0.04em; }

.kc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: 3.25rem;
  row-gap: 1.25rem;
  text-align: center;
}
.kc-hero-stats .n { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.1; }
.kc-hero-stats .l {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 194, 221, 0.7);
  margin-top: 0.45rem;
}
@media (max-width: 640px) {
  .kc-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 18rem;
    margin-inline: auto;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }
}

.kc-hero-vac {
  font-family: "JetBrains Mono", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 11px;
  color: rgba(120, 170, 200, 0.6);
}
.kc-hero-vac .label { letter-spacing: 0.22em; text-transform: uppercase; color: rgba(120, 170, 200, 0.5); }
.kc-hero-vac .rule { width: 1.25rem; height: 1px; background: rgba(56, 189, 248, 0.3); }

/* ===== 2.0 unified section eyebrow (editorial — replaces uppercase-pill labels) ===== */
.kc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(86, 190, 240, 0.82);
}
.kc-eyebrow::before,
.kc-eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: rgba(86, 190, 240, 0.38);
}

/* ===== 2.0 about stats — divider strip (replaces the glassmorphism card grid) ===== */
.kc-about-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.kc-about-stats > div {
  position: relative;
  padding: 0.25rem 2rem;
  text-align: center;
}
.kc-about-stats > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2.3rem;
  width: 1px;
  background: rgba(120, 180, 220, 0.16);
}
.kc-about-stats .n { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1; }
.kc-about-stats .l {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 194, 221, 0.65);
  margin-top: 0.55rem;
}
@media (max-width: 560px) {
  .kc-about-stats > div { padding: 0.6rem 1.15rem; }
  .kc-about-stats > div + div::before { display: none; }
}

/* ===== 2.0 hero vignette — calms the centre behind the text so the headline
   and the black hole read as composed layers, not competing ones ===== */
.kc-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 5; /* above the WebGL canvas (z3), below the content (z10) */
  pointer-events: none;
  background:
    radial-gradient(60% 58% at 50% 45%, rgba(3, 8, 20, 0.62) 0%, rgba(3, 8, 20, 0.34) 42%, transparent 74%);
}