/* ===== tokens ===== */
:root{
  --brand:#29296b;
  --bg:#e9edf5;
  --text:#121212;
  --white:#fff;

  --radius-xl:25px;
  --shadow:0 20px 60px rgba(0,0,0,.12);

  --fz-h1:clamp(28px,5.2vw,44px);
  --fz-body:clamp(14px,1.15vw,16px);
}

/* ===== base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:var(--fz-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== outer centering ===== */
.uc-container{
  min-height:100%;
  display:flex;
  align-items:center;      /* вертикально по центру экрана */
  justify-content:center;  /* горизонтально по центру экрана */
  padding:24px;
}

/* ===== white card (everything inside centered) ===== */
.uc-content{
  width:min(760px, 96vw);
  background:var(--white);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:48px clamp(22px, 4vw, 56px);

  display:flex;            /* центрируем содержимое плашки */
  flex-direction:column;
  align-items:center;      /* по центру по горизонтали */
  justify-content:center;  /* по центру по вертикали */
  text-align:center;       /* текст по центру */
  gap:20px;                /* одинаковые промежутки между элементами */
}

/* ===== content ===== */
.uc-logo{
  height:48px;
  width:auto;
}

.uc-content h1{
  font-size:var(--fz-h1);
  font-weight:900;
  color:var(--brand);
  line-height:1.15;
  letter-spacing:.2px;
}

.uc-content p{
  color:#414141;
  line-height:1.7;
  max-width:560px;
}

/* button */
.uc-button{
  display:inline-block;
  padding:16px 28px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border-radius:20px;
  border:2px solid var(--brand);
  color:var(--brand);
  transition:background .25s ease, color .25s ease, transform .06s ease;
}
.uc-button:hover{ background:var(--brand); color:#fff }
.uc-button:active{ transform:translateY(1px) }

/* ===== responsive tweaks ===== */
@media (max-width:520px){
  .uc-content{ padding:34px 18px; gap:16px }
  .uc-logo{ height:40px }
}
