/* 03 Works tunnel (works.js) — the one dark block: brand navy, title in the centre */
.works { position: relative; z-index: 1; height: 760vh; background: #051727; }
.works-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.works-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.works-note { position: absolute; left: clamp(20px, 7vw, 150px); bottom: clamp(20px, 3vw, 40px); margin: 0; font: 500 clamp(12px, .85vw, 15px)/1.3 Inter, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(208, 232, 255, .6); }
.works-note span { color: #d0e8ff; }
.works-copy { position: absolute; left: 50%; top: 50%; width: min(92vw, 1100px); translate: -50% -50%; text-align: center; pointer-events: none; opacity: 0; will-change: opacity, transform; }
.works-copy :is(.works-title, .works-sub) { background: radial-gradient(76% 95% at 0% 100%, #fff 0%, #d0e8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.works-title { margin: 0; font: 700 clamp(52px, 6.4vw, 130px)/.92 Antonio, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; text-wrap: balance; }
.works-sub { margin: 22px 0 0; font: 400 clamp(14px, 1.3vw, 20px)/1.2 Inter, "Segoe UI", sans-serif; opacity: .75; }
.works-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; padding: 20px 32px 19px; border-radius: 14px; color: #fff; font: 500 16px/1 Inter, "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(135deg, #1f52f6 0%, #3b0de7 100%); box-shadow: 0 14px 34px rgba(31, 82, 246, .28); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, filter .3s; }
.works-btn .ico { width: 18px; height: 18px; }
.works-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(31, 82, 246, .45); filter: brightness(1.06); }
.works-dots { position: absolute; right: clamp(14px, 2.4vw, 36px); top: 50%; translate: 0 -50%; display: grid; gap: 18px; }
.works-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(208, 232, 255, .33); cursor: pointer; transition: background .3s, box-shadow .3s; }
.works-dots button.on { background: #d0e8ff; box-shadow: 0 0 0 5px rgba(208, 232, 255, .13); }
@media (max-width: 800px) {
  .works-btn { padding: 16px 24px 15px; font-size: 14px; margin-top: 26px; }
  .works-sub { margin-top: 14px; }
}