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

  :root {
    --bg-deep:   #05080f;
    --bg-mid:    #080d1a;
    --accent:    #c8a96e;
    --accent2:   #4a7fd4;
    --text-dim:  rgba(200,210,230,0.45);
    --text-main: rgba(220,228,245,0.92);
    --card-w:    clamp(260px, 32vw, 460px);
    --card-h:    calc(var(--card-w) * 0.65);
  }


  /* ── Stage ── */
  .stage {
    /*position: fixed; */
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
    perspective-origin: 55% 48%;
  }

  /* ── Card stack origin ── */
  .stack-origin {
    position: relative;
    transform-style: preserve-3d;
    width: var(--card-w);
    height: var(--card-h);
  }

  /* ── Individual card ── */
  .depth-card {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    transform-origin: center center;
    transform: skew(0deg, -8deg);
    /*box-shadow:
      0 30px 80px rgba(0,0,0,0.6),
      0 2px 0 rgba(255,255,255,0.04) inset;*/
  }

  .depth-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
  }

  /* Gloss sheen */
  /*.depth-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255,255,255,0.08) 0%,
      transparent 50%,
      rgba(0,0,0,0.15) 100%
    );
    border-radius: inherit;
    pointer-events: none;
  }

  /* Counter */
  .counter {
    position: fixed;
    top: clamp(24px, 4vw, 48px);
    right: clamp(24px, 4vw, 48px);
    font-family: 'Syncopate', sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .counter-current {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    font-family: 'Cormorant Garamond', serif;
    line-height: 1;
  }

  /* Progress dots */
  .progress-dots {
    position: fixed;
    bottom: clamp(24px, 4vw, 48px);
    right: clamp(24px, 4vw, 48px);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(200,210,230,0.2);
    transition: background 0.3s ease;
  }

  .dot.active {
    background: var(--accent);
    box-shadow: 0 0 6px rgba(200,169,110,0.6);
  }