:root {
  --ink: #f7f3ec;
  --muted: rgba(247, 243, 236, .65);
  --line: rgba(247, 243, 236, .18);
  --aqua: #49b9b1;
  --lava: #ff6b2c;
  --night: #06131c;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
button { font: inherit; }
.skip { position: fixed; z-index: 100; left: 16px; top: -80px; background: #fff; color: #111; padding: 10px 14px; }
.skip:focus { top: 16px; }

.topbar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px clamp(20px, 3vw, 52px);
  font-size: 10px;
  letter-spacing: .14em;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--lava); box-shadow: 0 0 0 4px rgba(255, 107, 44, .12), 0 0 18px var(--lava); }
.topbar__meta { display: flex; gap: 22px; color: var(--muted); }
.topbar__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.topbar__cta { color: #111; background: var(--ink); text-decoration: none; padding: 10px 16px; border-radius: 30px; font-weight: 700; transition: transform 160ms var(--ease-out); }
.sound-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(247, 243, 236, .24);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  background: rgba(4, 18, 27, .54);
  backdrop-filter: blur(16px);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform 160ms var(--ease-out), background 180ms ease, border-color 180ms ease;
}
.sound-toggle i { width: 7px; height: 7px; border-radius: 50%; background: rgba(247, 243, 236, .4); box-shadow: 0 0 0 0 rgba(73, 185, 177, 0); transition: background 180ms ease, box-shadow 300ms var(--ease-out); }
.sound-toggle[aria-pressed="true"] { background: rgba(73, 185, 177, .14); border-color: rgba(73, 185, 177, .62); }
.sound-toggle[aria-pressed="true"] i { background: var(--aqua); box-shadow: 0 0 0 4px rgba(73, 185, 177, .13), 0 0 16px rgba(73, 185, 177, .55); }
.sound-toggle:active { transform: scale(.97); }
.sound-toggle:focus-visible, .topbar__cta:focus-visible, .brand:focus-visible, .button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

.ocean { position: relative; height: 400vh; }
.ocean__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #021019; }
.ocean__ambient { position: absolute; z-index: 0; inset: -12%; background: radial-gradient(circle at 60% 10%, #167a9b 0, #08293b 34%, #020b13 75%); transform: scale(1.15); }
.ocean__poster { position: absolute; z-index: 1; inset: 0; opacity: 1; transition: opacity 180ms var(--ease-out); }
.ocean__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ocean.has-video .ocean__poster { opacity: 0; }
.ocean__descent {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 160ms linear;
}
.ocean__descent.is-painted { opacity: 1; }
.ocean__descent.is-fallback { display: none; }
.ocean__veil { position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg, rgba(1, 8, 13, .91) 0, rgba(1, 8, 13, .6) 22%, rgba(1, 8, 13, .08) 53%, rgba(1, 8, 13, .15) 100%), linear-gradient(0deg, rgba(1, 8, 13, .65), transparent 35%, rgba(1, 8, 13, .25)); pointer-events: none; }
.particles { position: absolute; z-index: 4; inset: 0; overflow: hidden; opacity: .5; pointer-events: none; }
.particle { position: absolute; bottom: -20px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: rise var(--duration) linear infinite; animation-delay: var(--delay); left: var(--x); }
@keyframes rise { to { transform: translate3d(var(--drift), -110vh, 0); opacity: 0; } }
.depth { position: absolute; z-index: 7; right: clamp(22px, 4vw, 60px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 8px; letter-spacing: .18em; color: var(--muted); }
.depth strong { font-size: 20px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.rail { position: absolute; z-index: 6; right: clamp(18px, 2vw, 30px); top: 22%; height: 56%; width: 1px; background: var(--line); }
.rail span { display: block; width: 1px; height: 0; background: linear-gradient(var(--aqua), var(--lava)); box-shadow: 0 0 10px var(--aqua); }

.beat { position: absolute; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; padding: clamp(24px, 4vw, 72px); }
.beat[data-beat="0"] { top: 0; }
.beat[data-beat="1"] { top: 100vh; }
.beat[data-beat="2"] { top: 200vh; }
.beat[data-beat="3"] { top: 300vh; }
.copy { position: relative; z-index: 5; width: min(520px, 42vw); padding-top: 40px; opacity: 0; text-shadow: 0 2px 25px rgba(0, 0, 0, .35); transition: opacity 160ms linear; will-change: opacity; }
.eyebrow { display: block; margin-bottom: 18px; color: #8fd8d2; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.copy h1, .copy h2 { margin: 0; font-family: "Bodoni Moda", serif; font-size: clamp(64px, 6.6vw, 130px); font-weight: 400; line-height: .83; letter-spacing: -.055em; }
.copy p { max-width: 460px; margin: 24px 0 20px; color: rgba(247, 243, 236, .78); font-size: clamp(14px, 1.05vw, 18px); line-height: 1.65; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.scroll-cue { position: absolute; z-index: 7; right: clamp(38px, 6vw, 90px); bottom: 28px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.scroll-cue i { width: 18px; height: 29px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px; }
.scroll-cue i::before { content: ""; display: block; width: 3px; height: 6px; margin: 6px auto; background: var(--lava); border-radius: 3px; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 50% { transform: translateY(8px); opacity: .35; } }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 18px; }
.button { border: 1px solid var(--line); border-radius: 999px; padding: 13px 18px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 700; transition: transform 160ms var(--ease-out); }
.button--primary { background: var(--ink); color: #07141d; }
.copy small { display: block; color: var(--muted); font-size: 9px; line-height: 1.6; }
.endbar { position: relative; z-index: 10; display: flex; justify-content: space-between; padding: 24px clamp(20px, 4vw, 72px); background: #020a10; color: var(--muted); font-size: 10px; }
.endbar a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .sound-toggle:hover { border-color: rgba(73, 185, 177, .62); background: rgba(73, 185, 177, .1); }
  .topbar__cta:hover, .button:hover { transform: translateY(-2px); }
}

@media (max-width: 700px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .topbar__meta { display: none; }
  .topbar__actions { gap: 6px; }
  .topbar__cta { padding: 9px 10px; font-size: 8px; }
  .sound-toggle { min-height: 32px; gap: 6px; padding: 7px 9px; font-size: 8px; letter-spacing: .08em; }
  .brand span { font-size: 8px; letter-spacing: .1em; }
  .brand__islands { display: none; }
  .ocean { height: 400vh; }
  .ocean__poster img, .ocean__descent { object-position: center; }
  .ocean__veil { background: linear-gradient(0deg, rgba(1, 8, 13, .9) 0, rgba(1, 8, 13, .42) 39%, rgba(1, 8, 13, .08) 68%, rgba(1, 8, 13, .23) 100%); }
  .beat { height: 100vh; align-items: flex-end; padding: 22px 20px 38px; }
  .beat[data-beat="1"] { top: 100vh; }
  .beat[data-beat="2"] { top: 200vh; }
  .beat[data-beat="3"] { top: 300vh; }
  .copy { width: 100%; padding: 0; }
  .copy h1, .copy h2 { font-size: clamp(54px, 16.5vw, 76px); line-height: .86; }
  .copy p { font-size: 13px; line-height: 1.55; margin: 16px 0; }
  .eyebrow { margin-bottom: 12px; }
  .depth { display: none; }
  .depth strong { font-size: 14px; }
  .rail { right: 10px; top: 18%; height: 42%; }
  .scroll-cue { left: 20px; right: auto; bottom: 20px; }
  .scroll-cue span { display: none; }
  .chips span { padding: 6px 8px; font-size: 7px; }
  .actions { margin: 18px 0 12px; }
  .button { padding: 12px 15px; font-size: 10px; }
  .endbar { gap: 14px; flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .sound-toggle { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ocean__descent { display: none; }
  .ocean__poster { transition: none; }
  .copy { transition: none; }
  .particle, .scroll-cue i::before { animation: none; }
  .sound-toggle:active, .topbar__cta:hover, .button:hover { transform: none; }
}