/* ============================================================
   Asyl Urpaq — standalone landing pages (Тамыз кеңесі).
   Ported from the supplied design: a phone-width white card centred on a
   soft grey field, logos on top, copy in the middle, actions pinned to the
   bottom. Values are the design's own.
   ============================================================ */

.landing-body {
  margin: 0;
  background: #F4F6F5;
  color: #111111;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.landing-body * { box-sizing: border-box; }
/* No blanket link colour: `.landing-body a` would outrank the single-class button rules below
   and paint the filled button's label teal-on-teal. Each component sets its own colour. */
.landing-body a { text-decoration: none; }

.lp { display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh; }

.lp__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 22px 104px;
  overflow: hidden;
}

/* The two soft brand-coloured washes behind the content. */
.lp__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.lp__glow--teal {
  top: -170px; left: -120px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(5,73,82,0.07), rgba(5,73,82,0) 70%);
}
.lp__glow--gold {
  top: 190px; right: -140px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(199,157,91,0.13), rgba(199,157,91,0) 70%);
}

.lp__lang {
  position: relative;
  align-self: flex-end;
  display: flex;
  gap: 2px;
  margin-top: 18px;
  padding: 3px;
  background: #F3F3F3;
  border-radius: 999px;
}
.lp__lang a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6A7472;
  transition: background 160ms ease, color 160ms ease;
}
.lp__lang a:hover { color: #054952; }
.lp__lang a.is-on { background: #054952; color: #ffffff; }

.lp__logos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 42px 0 28px;
}
.lp__logo { display: block; object-fit: contain; }
.lp__logo--a { width: 150px; height: 75px; }
.lp__logo--b { width: 144px; height: 56px; }
.lp__divider { width: 1px; height: 58px; background: rgba(0,0,0,0.12); }

.lp__rule {
  position: relative;
  display: block;
  width: 34px;
  height: 2px;
  background: #C79D5B;
  margin: 44px auto 20px;
}

.lp__eyebrow {
  position: relative;
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: #6A7472;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}

.lp__title {
  position: relative;
  margin: 0 0 30px;
  text-align: center;
  font-size: 25px;
  line-height: 1.28;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Pinned to the bottom of the card, as in the design. */
.lp__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.lp__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #ffffff;
  color: #054952;
  border: 1.5px solid rgba(5,73,82,0.22);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.lp__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(5,73,82,0.12); border-color: rgba(5,73,82,0.4); }
.lp__btn svg { display: block; flex-shrink: 0; }

/* The first action is the primary one. */
.lp__btn--primary { background: #054952; color: #ffffff; border-color: #054952; }
.lp__btn--primary:hover { box-shadow: 0 12px 28px rgba(5,73,82,0.28); border-color: #054952; }

@media (prefers-reduced-motion: reduce) {
  .lp__btn { transition: none; }
  .lp__btn:hover { transform: none; }
}

@media (max-width: 380px) {
  .lp__card { padding: 0 16px 88px; }
  .lp__logo--a { width: 128px; height: 64px; }
  .lp__logo--b { width: 122px; height: 48px; }
  .lp__title { font-size: 22px; }
}