/* ASV Digital — shared theme: black liquid metal, chrome, white */
:root {
  --black: #050505;
  --white: #ffffff;
  --text-soft: #cfcfcf;
  --silver: #8a8a8a;
  --border: rgba(255, 255, 255, 0.18);
  --glass: rgba(255, 255, 255, 0.04);
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9d9d9 30%, #8f8f8f 50%, #e6e6e6 70%, #a8a8a8 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--black);
  color: var(--white);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 56px;
  text-align: center;
  overflow-x: hidden;
}

/* Black liquid metal background: dark chrome blobs distorted by the #liquid SVG filter */
.liquid {
  position: fixed;
  inset: -20%;
  z-index: 0;
  filter: url(#liquid) contrast(1.35) brightness(1.05);
  background:
    radial-gradient(22% 14% at 22% 28%, #6e6e6e 0%, #2a2a2a 45%, transparent 75%),
    radial-gradient(28% 18% at 78% 22%, #5a5a5a 0%, #222222 50%, transparent 78%),
    radial-gradient(30% 16% at 62% 78%, #7a7a7a 0%, #2e2e2e 45%, transparent 75%),
    radial-gradient(18% 22% at 28% 82%, #4a4a4a 0%, #1a1a1a 50%, transparent 78%),
    radial-gradient(14% 10% at 48% 52%, #3c3c3c 0%, transparent 70%),
    linear-gradient(135deg, #060606 0%, #121212 45%, #070707 100%);
  animation: drift 22s ease-in-out infinite alternate;
}
.sheen {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.06) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(-4%, 3%) scale(1.08) rotate(6deg); }
}
@keyframes sheen {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}

main { position: relative; z-index: 2; width: 100%; max-width: 620px; }

.logo, .card h1 {
  font-family: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.logo {
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.12));
}
.logo span { font-weight: 300; letter-spacing: 0.22em; }
.logo.small { font-size: clamp(1.8rem, 6vw, 2.4rem); }

.tagline {
  margin-top: 14px;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  color: var(--text-soft);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.badge {
  display: inline-block;
  margin-top: 34px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  background: var(--glass);
  backdrop-filter: blur(6px);
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Glass card used by login / account */
.card {
  margin: 28px auto 0;
  max-width: 400px;
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card h1 { font-size: 1.4rem; font-weight: 600; }
.card p { margin-top: 8px; color: var(--text-soft); font-size: 0.95rem; line-height: 1.5; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--black);
  background: var(--chrome);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255, 255, 255, 0.15); }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn.ghost { color: var(--white); background: var(--glass); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.error { margin-top: 16px; color: #ff8a8a; font-size: 0.9rem; min-height: 1.2em; }
.muted { margin-top: 18px; font-size: 0.8rem; color: var(--silver); }
.muted a { color: var(--text-soft); }

/* Language switch — top right */
.lang {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.lang button {
  padding: 7px 14px;
  border: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--silver);
  background: transparent;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { color: var(--black); background: var(--chrome); }

footer {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 2;
  font-size: 0.8rem;
  color: var(--silver);
}

@media (prefers-reduced-motion: reduce) {
  .liquid, .sheen, .dot { animation: none; }
}