html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* All canvases base */
.hero-section canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Shared canvas sizing */
.canvas-item {
  width: 100%;
  height: 100%;
  display: block;
}

/* Background gradient canvas */
.hero-gradient {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  z-index: 0;
  pointer-events: none;
  filter: blur(18px) saturate(1.15);
  transform: translateY(-4%) scale(1.02);

  --gradient-color-1: #E8ECF4;
  --gradient-color-2: #D47272;
  --gradient-color-3: #E8C8A8;
  --gradient-color-4: #88A8C8;
}

/* Three.js canvas sits above gradient */
.three-canvas {
  z-index: 1;
}

/* ── Debut text ── */
.debut-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 394px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  mix-blend-mode: multiply;
  z-index: 3;
}

.d-dark  { color: #0d2535; }
.d-blue  { color: #1a44cc; }
.d-arrow { font-size: 0.82em; }
.d-arrow svg {
  width: 130px;
  height: 179px;
  display: block;
  margin-left: 0.1em;
}

span.d-dark.d-arrow {
  margin-top:55px;
}