:root {
  color-scheme: dark;
  --night: #071523;
  --ink: #effcff;
  --muted: #a7c4cb;
  --aqua: #66f7dc;
  --line: rgba(102, 247, 220, .09);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden; overflow-y: auto; }
body { background: var(--night); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }

.hero { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.grid { position: absolute; inset: -20%; z-index: -3; opacity: .65; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(600px) rotateX(58deg) translateY(18%); transform-origin: center bottom; animation: grid-drift 22s linear infinite; }
.glow { position: absolute; z-index: -2; border-radius: 50%; pointer-events: none; filter: blur(4px); }
.glow-one { width: min(65vw, 720px); aspect-ratio: 1; top: -35%; left: -18%; background: radial-gradient(circle, rgba(23, 205, 179, .18), transparent 68%); }
.glow-two { width: min(55vw, 620px); aspect-ratio: 1; right: -20%; bottom: -38%; background: radial-gradient(circle, rgba(28, 135, 181, .15), transparent 68%); }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.content { width: min(100%, 920px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(.8rem, 2vw, 1.25rem); }
.eyebrow { margin: 0; color: var(--aqua); font-size: .68rem; letter-spacing: .28em; opacity: .8; }
h1 { margin: 0; font-size: clamp(2.7rem, 8vw, 5.7rem); line-height: .95; letter-spacing: -.055em; font-weight: 650; text-shadow: 0 0 28px rgba(102, 247, 220, .22); }
.video-frame { width: min(100%, 800px); aspect-ratio: 16 / 9; border: 1px solid rgba(147, 251, 234, .22); border-radius: clamp(1rem, 3vw, 1.5rem); overflow: hidden; background: #0b2231; box-shadow: 0 24px 80px rgba(0, 0, 0, .4), 0 0 50px rgba(39, 215, 193, .08); }
.video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b2231; }
.video-portrait { display: none; }
.copy h2 { margin: 0; font-size: clamp(1.25rem, 3.2vw, 2rem); font-weight: 520; letter-spacing: -.025em; }
.copy p { margin: .4rem 0 0; color: var(--muted); font-size: clamp(.88rem, 2vw, 1rem); letter-spacing: .08em; }
.sound-toggle { margin-top: .25rem; border: 1px solid rgba(166, 238, 230, .28); border-radius: 999px; padding: .55rem .9rem; color: var(--muted); background: rgba(8, 29, 41, .65); font: inherit; font-size: .78rem; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.sound-toggle:hover, .sound-toggle:focus-visible { color: var(--ink); border-color: var(--aqua); background: rgba(18, 66, 75, .72); outline: none; }
.sound-icon { display: inline-block; margin-right: .35rem; color: var(--aqua); font-size: 1.1em; }
.site-footer { margin-top: .1rem; font-size: .68rem; letter-spacing: .04em; }
.site-footer a { color: rgba(167, 196, 203, .78); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--aqua); text-decoration: underline; outline: none; }

@media (max-width: 600px) and (orientation: portrait) {
  .hero { padding: 1.25rem; }
  .video-frame { width: min(78vw, 390px); aspect-ratio: 9 / 16; }
  .video-landscape { display: none; }
  .video-portrait { display: block; }
  .content { gap: .85rem; }
}

/* Keep the hero fully visible in short desktop browser windows. */
@media (min-width: 601px) and (max-height: 800px) {
  .hero { padding: 1.25rem 2rem; }
  .content { gap: .65rem; }
  h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
  .video-frame { width: min(100%, 640px); }
  .copy h2 { font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
  .sound-toggle { margin-top: 0; padding: .42rem .78rem; }
}

/* Give compact portrait screens enough room for the copy and control. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 780px) {
  .hero { padding: 1rem; }
  .content { gap: .65rem; }
  h1 { font-size: clamp(2.35rem, 12vw, 3.4rem); }
  .video-frame { width: min(66vw, 300px); }
  .sound-toggle { margin-top: 0; padding: .42rem .78rem; }
}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
  .video-frame { width: min(60vw, 280px); }
  .site-footer { font-size: .62rem; }
}

@keyframes grid-drift { to { transform: perspective(600px) rotateX(58deg) translateY(22%); } }
@media (prefers-reduced-motion: reduce) {
  .grid { animation: none; }
  .sound-toggle { transition: none; }
}