/* Transfer baseline: existing villeroyboch.ru Taplink, captured 2026-10-28.
   These are Taplink colours/components, not a replacement v-b.ru design system. */
:root {
  color-scheme: light;
  --ink: #1a4788;
  --button: #8da4c3;
  --surface: #fff;
  font: 16px/1.5 Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #a8e0f7;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; background: url("background.jpg") center top / cover fixed; }
.page { width: 100%; max-width: 600px; margin: 0 auto; padding: 28px 14px 40px; }
.panel { padding: 15px 14px; border-radius: 12px; background: var(--surface); margin-bottom: 14px; text-align: center; }
.brand { padding-top: 15px; padding-bottom: 15px; }
.brand img { display: block; border-radius: 50%; margin: 0 auto 14px; object-fit: contain; }
h1 { font-size: 24px; line-height: 1.3; margin: 0 0 4px; font-weight: 700; text-wrap: balance; }
h2 { font-size: 16px; line-height: 1.5; margin: 0 0 12px; font-weight: 700; text-wrap: balance; }
p { font-size: 14px; line-height: 21px; margin: 0 0 14px; }
.brand p { margin-bottom: 0; }
.link { min-height: 60px; position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 18px; margin: 14px 0 0; border-radius: 40px; text-decoration: none; font-size: 16px; line-height: 1.3; font-weight: 700; text-transform: uppercase; color: white; background: var(--button); overflow-wrap: anywhere; }
.link:has(.link-icon) { padding-left: 64px; padding-right: 64px; }
.link:first-child { margin-top: 0; }
.link-subtitle { display: block; font-size: 14px; line-height: 1.4; font-weight: 400; text-transform: none; margin-top: 4px; }
.link-icon { position: absolute; top: 50%; left: 9px; transform: translateY(-50%); border-radius: 50%; object-fit: cover; }
.primary { background: var(--ink); }
.link:hover { background: #1a4788; }
.primary:hover { background: #12366b; }
.link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.separator { display: flex; justify-content: center; align-items: center; gap: 14px; height: 28px; margin: 0 0 14px; }
.separator::before, .separator::after { content: ""; height: 1px; width: 48px; background: #9ba6aa; }
.separator span { width: 11px; height: 11px; border: solid #344b57; border-width: 0 1px 1px 0; transform: translateY(-3px) rotate(45deg); }
.skip { position: absolute; left: 14px; top: -100px; background: white; color: var(--ink); padding: 8px 12px; z-index: 1; }
.skip:focus { top: 0; }
@media (max-width: 360px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .panel { padding-left: 12px; padding-right: 12px; }
  .link { font-size: 14px; }
  h1 { font-size: 22px; }
}