:root { color-scheme: dark; --dark: #18181e; --muted: #999aa2; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; background: var(--dark); }
.layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.visual { position: relative; overflow: hidden; background: #d1d3d2; }
.visual img { position: absolute; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
.brand { min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; background: var(--dark); padding: 60px 32px 100px; }
.brand-center { width: 100%; display: flex; align-items: center; justify-content: center; }
.brand-logo { display: block; width: min(50%, 340px); height: auto; mix-blend-mode: normal; }
.footer { position: absolute; left: calc(50% + 22px); right: 22px; bottom: 30px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.8; font-weight: 400; }
.footer a { color: #d7d7dd; text-decoration: none; transition: color .2s ease; }
.footer a:hover, .footer a:focus-visible { color: #57c3c3; text-decoration: underline; }
@media (min-width: 1025px) { .brand-logo { width: min(45.5%, 340px); } }
@media (max-width: 1024px) {
  .layout { display: grid; grid-template-columns: 1fr; grid-template-rows: 20dvh 80dvh; min-height: 100dvh; }
  .brand { grid-row: 1; min-height: 0; padding: 10px 24px; }
  .visual { grid-row: 2; min-height: 0; }
  .visual img { object-position: center 46%; }
  .brand-logo { max-width: 295px; width: min(50%, 295px); }
  .footer { left: 20px; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); font-size: 11px; color: #fff; text-shadow: none; }
  .footer a { color: #fff; }
}