:root {
  color-scheme: dark;
  color: #f4f6fc;
  background: #080a10;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Hebrew", Arial, sans-serif;
  font-synthesis: none;
}
body { background: #080a10; }
button:focus-visible, a:focus-visible { outline-color: #a6b8ff; }
.skip-link { background: #eef1ff; color: #101624; }

.topbar {
  min-height: 76px;
  background: rgba(8,10,16,.90);
  border-bottom: 1px solid #252c3b;
  padding-block: .4rem;
}
.wordmark { gap: .85rem; }
.site-logo { width: 83px; height: 62px; object-fit: contain; }
.wordmark-label { color: #b8c0d2; font-size: .85rem; }
.main-nav a { color: #e4e8f5; }
.main-nav a:hover { color: #aebcff; }
.review-tag { border-color: #46527b; background: #141b31; color: #c5cff2; }

.hero {
  max-width: 1700px;
  min-height: 790px;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem,5vw,6rem);
  padding-block: clamp(3.5rem,7vw,7rem) 6rem;
}
.hero-copy { position: relative; z-index: 1; }
.hero-logo { display: block; width: 134px; height: auto; margin-block-end: 1.6rem; }
.eyebrow { color: #aabaff; letter-spacing: 0; font-weight: 750; }
.hero h1 { color: #f9faff; font-size: clamp(3.6rem,6.7vw,7.4rem); letter-spacing: -.07em; }
.hero h1 em { color: #a4b5ff; }
.hero-description { color: #b4bed2; max-width: 34rem; }
.button-primary {
  background: #3152df;
  color: #fff;
  box-shadow: 0 8px 30px rgba(34,66,220,.18);
}
.button-primary:hover { background: #4868f3; }
.button-text { color: #e7ebfa; border-color: #66728e; }
.hero-facts { gap: 1.7rem; border-top: 1px solid #30384b; padding-block-start: 1.45rem; color: #9da8bd; }
.hero-facts strong { color: #fff; }
.hero-art { min-height: 640px; }
.hero-art::before {
  content: "";
  position: absolute;
  inset-block-start: 6%;
  inset-inline-start: 1%;
  width: 86%;
  height: 82%;
  background: #15265b;
  border: 1px solid #294495;
  transform: rotate(-5deg);
}
.hero-feature { background: #111827; box-shadow: 0 28px 70px rgba(0,0,0,.48); }
.hero-feature:hover { box-shadow: 0 34px 85px rgba(0,0,0,.57); }
.hero-feature-main { width: 69%; height: 95%; inset-inline-start: 8%; border-radius: 12px; }
.hero-feature-side { width: 41%; height: 65%; inset-inline-end: 0; border: 7px solid #080a10; border-radius: 12px; }
.hero-feature-shade { background: linear-gradient(180deg,transparent 36%,rgba(2,5,15,.9) 100%); }
.hero-feature-copy small { color: #d0d9ff; }
.hero-art-label { color: #8290b5; inset-inline-start: 0; }

#video { background: #10141f; }
.section-shell { scroll-margin-top: 6rem; padding-block: clamp(4rem,8vw,7.5rem); }
.section-head { border-color: #30384a; }
.section-head h2 { color: #f8faff; }
.section-description { color: #b1bbcf; }
.section-count { color: #6f7c98; }
.filters { padding-block: 2rem 1.6rem; }
.filter { background: #1b2231; border-color: #3b475b; color: #d7deed; }
.filter:hover { border-color: #879cff; background: #222c41; }
.filter.is-active { background: #3152df; border-color: #3152df; color: #fff; }
.video-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; }
.video-poster { background: #202534; border-radius: 9px; aspect-ratio: 9/15; }
.video-link:hover .video-poster img { transform: scale(1.035); }
.video-overlay { background: linear-gradient(to bottom,transparent 60%,rgba(1,4,11,.44)); }
.video-play { background: #f2f4ff; color: #101728; }
.video-badge { background: rgba(8,13,27,.82); border: 1px solid rgba(213,224,255,.23); color: #f5f7ff; }
.video-info { padding-block-start: .75rem; }
.video-info h3 { color: #f3f5fc; }
.video-meta { color: #aab5cd; }
.audio-warning { color: #ffc993; }

.stills-section { padding-block-start: 5rem; }
.photo-button img { background: #1c2130; border-radius: 7px; }
.photo-button:hover img { filter: brightness(1.08); }
.photo-caption { color: #a3aec3; }

.footer { border-color: #2c3446; gap: 2rem; color: #acb6cc; padding-block: 2.8rem 3.8rem; }
.footer-brand { display: grid; place-items: center; width: 103px; min-width: 103px; height: 83px; background: #f6f8ff; border-radius: 5px; padding: .35rem; }
.footer-brand img { width: 100%; height: 100%; object-fit: contain; }
.footer p { max-width: 42rem; }
.footer a { color: #e4e9ff; }

dialog { background: #141924; color: #f4f6fc; border: 1px solid #384257; }
dialog::backdrop { background: rgba(0,2,9,.84); }
.dialog-kicker { color: #adc0ff; }
.icon-button, .photo-arrow { background: #283145; color: #fff; }
.icon-button:hover, .photo-arrow:hover { background: #3c4a6a; }
.dialog-note { color: #b9c3d6; }
.photo-stage { background: #0c1019; }

@media (min-width:761px) and (max-width:1100px) {
  .video-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .topbar { min-height: 66px; padding-block: .25rem; }
  .site-logo { width: 65px; height: 52px; }
  .main-nav { gap: .7rem; }
  .main-nav a { font-size: .72rem; }
  .hero { display: grid; grid-template-columns: 1fr; min-height: 0; gap: 1.4rem; padding-block: 2.7rem 4rem; }
  .hero-logo { width: 96px; margin-block-end: 1.1rem; }
  .hero h1 { font-size: clamp(3.1rem,11vw,5rem); }
  .hero-art { min-height: 415px; order: -1; }
  .hero-art::before { width: 87%; height: 78%; inset-block-start: 7%; }
  .hero-feature-main { width: 65%; height: 98%; inset-inline-start: 9%; }
  .hero-feature-side { width: 45%; height: 57%; inset-inline-end: 1%; border-width: 5px; }
  .hero-facts { gap: 1.2rem; }
  .section-shell { padding-block: 3.6rem; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
  .video-info h3 { font-size: .86rem; }
  .footer { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; padding-inline: 1.1rem; }
  .footer-brand { width: 84px; min-width: 84px; height: 67px; }
  .footer p { flex-basis: calc(100% - 100px); margin: 0; }
  .footer a { margin-inline-start: 100px; }
}
@media (max-width:360px) {
  .main-nav a { font-size: .66rem; }
}
@media (prefers-reduced-transparency:reduce) {
  .topbar { background: #080a10; }
}
@media (prefers-contrast:more) {
  .section-description, .photo-caption, .dialog-note, .video-meta { color: #e5e9f5; }
  .filter { border-color: #b1c0dc; }
}