/*
 * Welcome — welcome.html
 * Figma: pjwDXRe86lAKHSpDI6ib5f
 * • 263:86444 — Launch screen (mobile, <768px)
 * • 263:86530 — Launch screen768+ (tablet)
 * • 263:86604 — Launch screen1280+ (desktop)
 */

:root {
  --color-text: #2c3038;
  --color-bg-mobile: #defff0;
  --color-bg-tablet: #e2faed;
  --color-bg-desktop: #defff0;
  --color-button: #108b88;

  --font-family: "Inter", system-ui, sans-serif;

  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  --content-mobile: 343px;
  --content-tablet: 736px;
  --content-desktop: 502px;
  --radius-button: 8px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg-mobile);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
p {
  margin: 0;
}

/* —— Welcome screen — mobile (263:86444) —— */

.launch {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-16) var(--space-40);
  background: var(--color-bg-mobile);
}

.launch__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-mobile);
  min-height: 100dvh;
}

/* mobile: logo + content снизу, gap 40px по макету (263:86443) */
.launch__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
  margin-top: auto;
}

.launch__logo {
  width: 220px;
  height: auto;
  aspect-ratio: 1092 / 1159;
  object-fit: contain;
  flex-shrink: 0;
}

.launch__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
}

.launch__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}

.launch__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.launch__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  max-width: 100%;
}

.launch__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn--primary {
  background: var(--color-button);
  color: #fff;
}

.btn--text {
  background: transparent;
  color: var(--color-button);
  padding-inline: 19px 20px;
}

.launch__signin {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.launch__signin-link {
  font-weight: 600;
}

.launch__signin-link:hover {
  color: var(--color-button);
}

/* —— Tablet — 768px+ (263:86530) —— */

@media (min-width: 768px) {
  body,
  .launch {
    background: var(--color-bg-tablet);
  }

  .launch {
    align-items: center;
    justify-content: center;
    padding: var(--space-40) var(--space-16);
  }

  .launch__inner {
    min-height: auto;
    max-width: var(--content-tablet);
    padding-top: 0;
    justify-content: center;
  }

  .launch__body {
    margin-top: 0;
    gap: var(--space-40);
  }
}

/* —— Desktop — 1280px+ (263:86604) —— */

@media (min-width: 1280px) {
  body,
  .launch {
    background: var(--color-bg-desktop);
  }

  .launch__inner {
    max-width: var(--content-desktop);
  }

  .launch__body {
    gap: var(--space-24);
  }
}