* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: #fff8ef;
  background:
    radial-gradient(circle at 50% 34%, rgba(207, 184, 154, 0.2), transparent 34%),
    linear-gradient(135deg, #0d0a09 0%, #2b231f 48%, #0d0a09 100%);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.page {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  text-align: center;
}

.page::before {
  position: absolute;
  inset: 22px;
  content: "";
  border: 1px solid rgba(255, 248, 239, 0.15);
  pointer-events: none;
}

.page::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 248, 239, 0.16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px);
  background-size: 34px 34px, 46px 46px;
  mix-blend-mode: soft-light;
}

.background-logo {
  position: absolute;
  width: min(980px, 112vw);
  max-width: none;
  opacity: 0.04;
  filter: blur(1px);
  pointer-events: none;
  animation: backgroundDrift 10s ease-in-out infinite alternate;
}

.language {
  position: fixed;
  right: 26px;
  top: 50%;
  z-index: 3;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}

.lang-btn {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(215, 190, 160, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 248, 239, 0.14), rgba(255, 248, 239, 0.03)),
    rgba(18, 14, 12, 0.62);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 248, 239, 0.18);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lang-btn::after {
  position: absolute;
  inset: 5px;
  content: "";
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: inherit;
  pointer-events: none;
}

.flag {
  display: block;
  width: 28px;
  height: 19px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 248, 239, 0.34),
    0 5px 12px rgba(0, 0, 0, 0.28);
}

.lang-btn:hover,
.lang-btn.active {
  border-color: rgba(215, 190, 160, 0.72);
  background:
    linear-gradient(145deg, rgba(215, 190, 160, 0.24), rgba(255, 248, 239, 0.06)),
    rgba(18, 14, 12, 0.74);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.36),
    0 0 0 4px rgba(215, 190, 160, 0.1),
    inset 0 1px 0 rgba(255, 248, 239, 0.22);
  transform: scale(1.06);
}

.content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(760px, 100%);
  padding-inline: 70px;
}

.brand-block {
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: clamp(24px, 5vw, 44px);
  animation: logoPulse 3.6s ease-in-out infinite;
}

.logo {
  display: block;
  width: min(360px, 74vw);
  height: auto;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.44));
}

.brand-name {
  margin: -18px 0 0;
  color: rgba(255, 248, 239, 0.86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 4.8vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
  animation: textBreath 4s ease-in-out infinite;
}

.kicker,
h1,
.lead,
.loader {
  animation: textBreath 4s ease-in-out infinite;
}

.kicker {
  margin: 0 0 18px;
  color: #d7bea0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1.8;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 8vw, 94px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.lead {
  max-width: 520px;
  margin: 24px 0 0;
  color: rgba(255, 248, 239, 0.74);
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
  text-wrap: pretty;
}

.maker-link {
  display: inline-block;
  margin-top: 12px;
  color: rgba(215, 190, 160, 0.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.6;
  max-width: min(520px, 100%);
  text-decoration: none;
  text-transform: uppercase;
  animation: textBreath 4s ease-in-out infinite;
  transition: color 180ms ease, transform 180ms ease;
}

.maker-link:hover {
  color: #fff8ef;
  transform: translateY(-2px);
}

.loader {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 11px;
  margin-top: 26px;
  padding: 0;
  border: 0;
  color: #d7bea0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 5px;
  line-height: 1.5;
  text-transform: uppercase;
}

.loader-label {
  position: relative;
  z-index: 1;
  order: 1;
  display: inline-block;
  opacity: 0.92;
  text-shadow: 0 0 14px rgba(215, 190, 160, 0.18);
}

.loading-icon {
  display: block;
  order: 2;
  width: 42px;
  height: 42px;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(215, 190, 160, 0.42));
  animation: loadingSpin 1.1s linear infinite;
}

.loading-track,
.loading-ring {
  fill: none;
  stroke-width: 4;
}

.loading-track {
  stroke: rgba(255, 248, 239, 0.18);
}

.loading-ring {
  stroke: #d7bea0;
  stroke-linecap: round;
  stroke-dasharray: 68 140;
}

.loading-dot {
  fill: #fff8ef;
  filter: drop-shadow(0 0 8px rgba(215, 190, 160, 0.9));
  transform-origin: 32px 32px;
  animation: loadingPulse 1.1s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,
  100% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.018);
  }
}

@keyframes textBreath {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.018);
  }
}

@keyframes backgroundDrift {
  from {
    transform: translate3d(-10px, -2%, 0) scale(1);
  }

  to {
    transform: translate3d(10px, -4%, 0) scale(1.035);
  }
}

@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loadingPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@media (max-width: 640px) {
  body {
    overflow: hidden;
  }

  .page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .page::before {
    inset: 10px;
  }

  .background-logo {
    width: 145vw;
    opacity: 0.04;
  }

  .language {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    display: flex;
    gap: 9px;
    transform: none;
  }

  .lang-btn {
    width: 42px;
    height: 42px;
  }

  .flag {
    width: 24px;
    height: 16px;
  }

  .logo {
    width: min(240px, 66vw);
  }

  .brand-name {
    margin-top: -10px;
    font-size: clamp(20px, 6.8vw, 34px);
  }

  .content {
    width: min(100%, 460px);
    padding: 44px 0 0;
  }

  .kicker {
    max-width: 300px;
    font-size: 10px;
    margin-bottom: 12px;
    letter-spacing: 3px;
  }

  h1 {
    font-size: clamp(38px, 12.5vw, 58px);
  }

  .lead {
    max-width: 330px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
  }

  .maker-link {
    max-width: 300px;
    margin-top: 8px;
    font-size: 8.5px;
    letter-spacing: 1.4px;
  }

  .loader {
    gap: 10px;
    margin-top: 16px;
    font-size: 9px;
    letter-spacing: 3.4px;
  }

  .loading-icon {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .content {
    width: min(720px, 88vw);
    padding-inline: 72px;
  }

  .logo {
    width: min(390px, 58vw);
  }
}

@media (max-height: 760px) and (min-width: 641px) {
  .brand-block {
    margin-bottom: 22px;
  }

  .logo {
    width: min(340px, 44vw);
  }

  h1 {
    font-size: clamp(42px, 6vw, 74px);
  }

  .lead {
    margin-top: 16px;
  }

  .loader {
    margin-top: 22px;
  }
}

@media (max-height: 680px) and (max-width: 640px) {
  .content {
    padding-top: 34px;
  }

  .brand-block {
    margin-bottom: 14px;
  }

  .logo {
    width: min(170px, 48vw);
  }

  .brand-name {
    margin-top: -8px;
    font-size: clamp(18px, 5.8vw, 28px);
  }

  .kicker {
    margin-bottom: 8px;
    font-size: 9px;
    line-height: 1.45;
  }

  h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .lead {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
  }

  .maker-link {
    margin-top: 6px;
    font-size: 8px;
    line-height: 1.35;
  }

  .loader {
    margin-top: 12px;
    font-size: 9px;
  }
}

@media (max-height: 590px) and (max-width: 640px) {
  .logo {
    width: min(145px, 42vw);
  }

  .brand-name {
    font-size: clamp(16px, 5vw, 24px);
  }

  .kicker {
    font-size: 8px;
  }

  h1 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .lead {
    font-size: 12px;
  }

  .loader {
    margin-top: 10px;
  }
}

@media (max-width: 380px) {
  .content {
    padding-top: 38px;
  }

  .logo {
    width: min(200px, 62vw);
  }

  .brand-name {
    font-size: clamp(18px, 6vw, 28px);
  }

  .lead {
    max-width: 285px;
  }

  .maker-link {
    max-width: 270px;
  }
}