*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #0b0d10;
  --bg-accent: #11151b;
  --card: #14181FE6;
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #f3f5f7;
  --muted: #a3acb8;
  --input-bg: #121720;
  --input-border: #2a3240;
  --input-border-hover: #364152;
  --input-border-focus: #5b8cff;
  --button-bg: #f3f5f7;
  --button-text: #0b0d10;
  --button-bg-hover: #ffffff;
  --error-bg: rgba(120, 20, 32, 0.22);
  --error-border: rgba(255, 120, 140, 0.28);
  --error-text: #ffb8c4;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* Shared column width / horizontal inset (header inner, footer, legal) */
  --layout-max-width: 1400px;
  --layout-bar-scale: 1.15;
  --layout-pad-x-base: clamp(1rem, 4vw + 0.75rem, 4.5rem);
  --layout-pad-x: calc(var(--layout-pad-x-base) * var(--layout-bar-scale));
  --layout-inner-max: min(var(--layout-max-width), 100%);

  --inner-width: calc(
    min(var(--layout-max-width), 100vw) - (2 * var(--layout-pad-x))
  );
  --iw: calc(var(--inner-width) / 100);

  /*
    Rough header + footer block height. The old body grid gave main a 1fr row of ~100dvh minus these,
    so hero min-height: 100% matched that band; min-height: 100dvh alone centers ~½(header+footer) lower.
  */
  --layout-shell-y: calc(
    clamp(3.1rem, 5.5vw, 4.6rem) + clamp(4.75rem, 12vw, 8.5rem)
  );
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* Column flex keeps header → main → footer in document order (grid + 1fr caused fragile row sizing) */
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at top, rgba(28, 58, 77, 0.16), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(28, 42, 31, 0.10), transparent 24%),
    linear-gradient(180deg, var(--bg-accent), var(--bg));
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

.site-header,
.site-footer {
  flex-shrink: 0;
}

.page-main {
  min-width: 0;
  min-height: 0;
  flex: 1 0 auto;
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: 520px;
  margin: 72px auto;
  padding: 0 20px;
}

.card {
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.muted {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

label {
  display: block;
  font-size: 13px;
  color: #d7dde6;
  margin: 16px 0 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

input::placeholder {
  color: #7f8896;
}

input:hover {
  border-color: var(--input-border-hover);
}

input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.16);
  background: #151b25;
}

button {
  width: 100%;
  margin-top: 22px;
  padding: 13px 16px;
  font-size: 15px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
}

button:hover {
  background: var(--button-bg-hover);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.banner {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: none;
  font-size: 14px;
}

.banner.error {
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error-text);
}