/* One visual focus: the product, a short promise, and a clear next step. */
.header { height: 88px; border-bottom: 0; }
.brand { gap: 10px; flex-shrink: 0; font-size: 23px; letter-spacing: -.7px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; }
.brand b { color: inherit; }
.header nav { gap: 30px; }
.header-right { gap: 18px; }
.header-cta { padding: 10px 16px; border: 1px solid #e2eee736; border-radius: 7px; gap: 15px; background: #0b172f22; }
.hero { height: 100svh; min-height: 680px; max-height: 1120px; }
.hero-media video { object-position: center; opacity: 1; filter: saturate(.82); }
.hero-media:after { background: linear-gradient(180deg, #08131c66 0%, #07111b26 21%, #07111b55 45%, #07111b14 70%, #08131c 100%), radial-gradient(ellipse at 50% 39%, #07111b5c 0%, #07111b1a 56%, transparent 80%); }
.hero-layout { display: flex; align-items: center; justify-content: center; gap: 0; padding: 118px 0 135px; width: 92%; max-width: 1480px; }
.hero-copy { width: 100%; max-width: none; text-align: center; transform: none; }
.hero h1 { width: auto; margin: 0; font-size: clamp(27px, 5.1vw, 78px); line-height: 1.28; font-weight: 500; letter-spacing: -.045em; text-shadow: 0 2px 28px #06111a24; }
.hero h1 em { color: #f2f5f2; font-weight: inherit; }
html[lang="en"] .hero h1 { font-size: clamp(25px, 5vw, 76px); letter-spacing: -.05em; }
.hero-description, html[lang="en"] .hero-description { margin: 27px auto 0; max-width: 670px; color: #d9e4e5; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.8; text-wrap: balance; }
.hero-actions { justify-content: center; gap: 30px; margin-top: 35px; flex-wrap: nowrap; }
.hero-actions .button { min-width: 156px; justify-content: center; gap: 22px; padding: 15px 23px; border-radius: 7px; background: #f1f6f2; color: #122421; }
.hero-actions .text-link { color: #e3ebe8; min-height: 48px; margin: 0; flex-basis: auto; width: auto; font-size: 14px; }
.hero-foot { position: absolute; bottom: 22px; left: 6%; right: 6%; width: auto; height: 52px; border-top: 0; margin: 0; }
.hero-foot > a { color: #bbc9cd; }
.hero-foot .opc-film-shot { min-height: 44px; }
footer .brand-logo { width: 34px; height: 34px; }
@media (max-width: 1050px) {
  .header { width: 90%; }
  .header nav { gap: 22px; }
  .hero { min-height: 640px; }
}
@media (max-width: 760px) {
  .header { height: 76px; }
  .brand { font-size: 20px; gap: 7px; }
  .brand-logo { width: 34px; height: 34px; }
  .header-right { gap: 5px; }
  .header-right button { padding: 12px 10px; }
  .header-cta { padding: 8px 10px; font-size: 11px; gap: 8px; }
  .header-cta > span:last-child { font-size: 18px; }
  .hero { height: 100svh; min-height: 570px; max-height: 950px; }
  .hero-layout { padding: 105px 0 158px; width: 92%; gap: 0; }
  .hero h1 { font-size: clamp(23px, 5.55vw, 42px); letter-spacing: -.05em; }
  html[lang="en"] .hero h1 { font-size: clamp(21px, 5.3vw, 40px); letter-spacing: -.055em; }
  .hero-description, html[lang="en"] .hero-description { margin-top: 23px; max-width: 350px; padding: 0 12px; font-size: 14px; line-height: 1.9; }
  .hero-actions { margin-top: 30px; gap: 22px; }
  .hero-actions .button { min-width: 128px; padding: 13px 16px; font-size: 13px; gap: 15px; }
  .hero-actions .text-link { font-size: 12px; gap: 8px; }
  .hero-foot { bottom: 22px; left: 5%; right: 5%; }
  .hero-foot > a > span:first-child { display: none; }
  .hero-media video { object-position: 59% center; }
}
@media (max-width: 370px) {
  .hero-foot { bottom: 65px; }
  .brand { font-size: 17px; gap: 5px; }
  .brand-logo { width: 30px; height: 30px; }
  .header-cta { font-size: 10px; padding: 8px; gap: 5px; }
  .header-right button { padding: 12px 7px; }
  .hero-actions { gap: 15px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .hero { min-height: 540px; }
  .hero-layout { padding: 105px 0 95px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: cover-arrive 1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes cover-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}

/* Explicit vector icons avoid platform-dependent emoji glyphs in controls. */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  line-height: 1;
  vertical-align: middle;
}
.ui-icon svg { display: block; width: 100%; height: 100%; }
.header-cta, .hero-actions .button, .hero-actions .text-link {
  min-height: 44px;
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 500;
}
.header-cta .ui-icon, .hero-actions .ui-icon { color: currentColor; }
.hero-actions .button { min-height: 48px; }
.footer-intro { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .hero-actions .button { padding: 12px 18px; gap: 12px; }
  .header .header-cta { font-size: 12px; padding: 10px 12px; gap: 8px; }
  .hero-actions .text-link { font-size: 12px; gap: 8px; }
  .header-cta .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (max-width: 370px) {
  .header .header-cta { padding-inline: 9px; gap: 6px; }
  .hero-actions { gap: 14px; }
}

/* The portrait film is already reframed shot by shot; do not pan it again. */
@media (max-width: 760px) and (orientation: portrait) {
  .hero-media video { object-position: center; transform: none; }
}