:root { color-scheme: dark; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #101411; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.backdrop { position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,17,13,.93) 0%, rgba(10,17,13,.70) 47%, rgba(10,17,13,.32) 100%), linear-gradient(0deg, rgba(10,17,13,.85), transparent 40%, rgba(10,17,13,.16)), url('/assets/hero-bg-poster.webp') 62% center / cover; }
.shell { min-height: 100svh; max-width: 1800px; margin: 0 auto; padding: 38px 64px 24px; display: grid; grid-template-rows: auto 1fr auto; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mark { width: 42px; height: 36px; object-fit: contain; }
.domain, .footer-brand, .status { font-size: 11px; font-weight: 600; letter-spacing: .15em; }
.domain { color: rgba(255,255,255,.72); }
main { width: min(100%, 780px); align-self: center; padding: 72px 0 90px; }
.wordmark { width: min(100%, 560px); aspect-ratio: 567 / 168; display: block; margin-left: -10px; mix-blend-mode: screen; background-image: url('/assets/krim-time.png'); background-size: 100% auto; background-position: center; background-repeat: no-repeat; }
.wordmark img { width: 100%; height: 100%; object-fit: contain; opacity: 0; }
h1 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.18; font-weight: 500; letter-spacing: -.045em; margin: 32px 0 16px; min-height: 1.18em; }
footer { min-height: 62px; border-top: 1px solid #ffffff24; color: #afb6b0; }
.footer-brand { font-size: 10px; }
.footer-identity { display: flex; align-items: center; gap: 24px; }
.social-link { display: inline-flex; align-items: center; min-height: 44px; color: #c0c5c0; font-size: 12px; text-decoration: none; }
.social-link:hover { color: #c5ff8a; }
.social-link:focus-visible { outline: 2px solid #c5ff8a; outline-offset: 3px; }
.language-control { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.language-control[hidden] { display: none; }
.language-control label { min-width: 60px; text-align: right; opacity: 0; }
select { width: 133px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; color: #e8ece8; font: inherit; font-size: 12px; background: #18201b; cursor: pointer; }
select:hover { border-color: #ffffff50; }
select:focus-visible { outline: 2px solid #c5ff8a; outline-offset: 3px; }
@media (max-width: 600px) {
  .shell { padding: 24px 24px 12px; }
  .backdrop { background: linear-gradient(0deg, #101411 0%, rgba(10,17,13,.78) 48%, rgba(10,17,13,.48) 100%), url('/assets/hero-bg-poster.webp') 66% center / cover; }
  .mark { width: 36px; height: 31px; }
  main { padding: 90px 0 74px; }
  .wordmark { width: 100%; margin-left: -5px; }
  h1 { margin-top: 28px; font-size: 36px; }
  .footer-identity { gap: 12px; }
  footer { flex-wrap: wrap; gap: 0 12px; }
  .language-control { gap: 4px; }
  .language-control label { min-width: 0; }
  select { width: 116px; }
}

.status { color: #c5ff8a; display: flex; align-items: center; gap: 10px; min-height: 24px; margin-bottom: 34px; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #c5ff8a; box-shadow: 0 0 16px #c5ff8a55; flex-shrink: 0; }
main p { font-size: 17px; line-height: 1.6; color: #c0c5c0; margin: 0; min-height: 3.2em; }
@media (max-width: 600px) {
  .status { margin-bottom: 28px; font-size: 10px; letter-spacing: .1em; }
  main p { font-size: 15px; max-width: 29ch; }
}


.wordmark[data-locale="zh-CN"] { background-image: url('/assets/krim-time-zh-CN.png'); }
.wordmark[data-locale="es"] { background-image: url('/assets/krim-time-es.png'); }
.wordmark[data-locale="pt-BR"] { background-image: url('/assets/krim-time-pt-BR.png'); }
.wordmark[data-locale="ja"] { background-image: url('/assets/krim-time-ja.png'); }
.wordmark[data-locale="ko"] { background-image: url('/assets/krim-time-ko.png'); }