:root { color-scheme: dark; --cyan: #00e5ff; --green: #00d978; --text: #edebff; --muted: #b4b8cb; }
* { box-sizing: border-box; }
html, body { min-width: 280px; min-height: 100%; }
body { margin: 0; overflow: hidden; background: #05070a; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.carousel { position: relative; width: 100%; height: 100svh; min-height: 280px; isolation: isolate; }
.slides, .slide { position: absolute; inset: 0; }
.slide { display: block; opacity: 0; pointer-events: none; transition: opacity 700ms ease; color: inherit; background: #05070a; text-decoration: none; }
.slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.slide::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(3,5,8,.94)); }
.caption { position: absolute; z-index: 2; right: clamp(1rem, 4vw, 2rem); bottom: clamp(4.2rem, 12vw, 5.8rem); left: clamp(1rem, 4vw, 2rem); display: grid; gap: .25rem; text-shadow: 0 2px 14px #000; }
.caption strong { font-size: clamp(1.35rem, 5vw, 2.4rem); line-height: 1; letter-spacing: -.03em; }
.caption span { color: var(--muted); font-size: clamp(.82rem, 2vw, 1rem); }
.controls { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: center; gap: .55rem; }
button { min-width: 42px; min-height: 42px; border: 1px solid rgba(0,229,255,.55); border-radius: 999px; color: var(--text); background: rgba(4,9,14,.78); font: 700 .85rem/1 system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
button:hover, button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }
.dots { display: flex; flex: 1; justify-content: center; gap: .45rem; }
.dot { min-width: 12px; min-height: 12px; padding: 0; border-color: rgba(237,235,255,.55); }
.dot[aria-current="true"] { border-color: var(--cyan); background: linear-gradient(135deg, var(--cyan), var(--green)); }
.toggle { padding: 0 .85rem; }

@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }