@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Montserrat:wght@600;700&display=swap');

:root {
  --gold: #d4be9c;
  --ink: #0a0a0c;
  --blue-a: #29a9eb;
  --blue-b: #239fdb;
  --desktop-width: 1512px;
  --desktop-height: 982px;
  --mobile-width: 390px;
  --mobile-height: 844px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #08080c; }

body { overflow-x: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }

.site {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  place-items: start center;
  background: #08080c;
  overflow: hidden;
}

.desktop-stage,
.mobile-stage {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.desktop-stage {
  width: var(--desktop-width);
  height: var(--desktop-height);
  zoom: var(--desktop-scale, 1);
}

.mobile-stage {
  width: var(--mobile-width);
  height: var(--mobile-height);
  zoom: var(--mobile-scale, 1);
}

.desktop-bg,
.mobile-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.desktop-bg { background-image: url('./public/assets/bg-desktop.png'); }
.mobile-bg { background-image: url('./public/assets/bg-mobile.png'); }

.desktop-grid,
.mobile-grid {
  position: absolute;
  pointer-events: none;
}

.desktop-grid { display: none; }

.mobile-grid {
  left: 12px;
  top: 0;
  width: 367px;
  height: 844px;
  opacity: .15;
}

.mobile-grid i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fffdfa;
}

.mobile-grid i:nth-child(1) { left: 0; }
.mobile-grid i:nth-child(2) { left: 122px; }
.mobile-grid i:nth-child(3) { left: 243px; }
.mobile-grid i:nth-child(4) { left: 366px; }

.desktop-logo,
.mobile-logo,
.desktop-currencies,
.mobile-currencies,
.desktop-cards {
  position: absolute;
  display: block;
  object-fit: fill;
}

.desktop-logo { left: 570px; top: 59px; width: 371.5px; height: 231px; }
.mobile-logo { left: 49px; top: 41px; width: 291px; height: 181px; }

h1, p { margin: 0; }

.desktop-title,
.mobile-title {
  position: absolute;
  color: var(--gold);
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.desktop-title { left: 422px; top: 284px; width: 667px; height: 118px; font-size: 48px; }
.mobile-title { left: 28px; top: 235px; width: 334px; height: 117px; font-size: 32px; }

.service-list {
  position: absolute;
  display: grid;
  width: 287px;
  gap: 10px;
}

.desktop-services { left: 612px; top: 435px; }
.mobile-services { left: 52px; top: 397px; }

.service-list button,
.service-list a,
.facts-row span {
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--gold);
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.service-list button {
  width: 287px;
  height: 56px;
  padding: 0;
  cursor: pointer;
}

.service-list a {
  display: grid;
  place-items: center;
  width: 287px;
  height: 56px;
  color: var(--gold);
  text-decoration: none;
}

.service-list button:focus-visible,
.service-list a:focus-visible,
.telegram-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.service-list button:hover,
.service-list a:hover { background: #101014; }

.facts-row {
  position: absolute;
  left: 402px;
  top: 656px;
  display: grid;
  grid-template-columns: 217px 217px 217px;
  column-gap: 28px;
}

.facts-row span {
  display: grid;
  place-items: center;
  width: 217px;
  height: 38px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  white-space: nowrap;
}

.desktop-currencies { left: 660px; top: 745px; width: 199px; height: 27px; }
.mobile-currencies { left: 96px; top: 653px; width: 199px; height: 27px; }
.desktop-cards { left: 529px; top: 898px; width: 483.5px; height: 137.5px; }

.telegram-block { position: absolute; text-align: center; }

.desktop-telegram { left: 609px; top: 801px; width: 294px; height: 68px; }
.mobile-telegram { left: 48px; top: 704px; width: 294px; height: 70px; }

.telegram-block p {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.telegram-button {
  position: absolute;
  top: 26px;
  left: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 237px;
  height: 42px;
  border-radius: 50px;
  background: linear-gradient(180deg, var(--blue-a), var(--blue-b));
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.mobile-telegram .telegram-button {
  left: 57px;
  width: 180px;
}

.telegram-button:hover { filter: brightness(1.06); }

.telegram-icon,
.telegram-icon svg { display: block; width: 31px; height: 31px; }

@media (max-width: 767px) {
  .site { min-height: calc(var(--mobile-height) * var(--mobile-scale, 1)); }
  .desktop-stage { display: none; }
  .mobile-stage { display: block; }
}

@media (min-width: 768px) {
  .mobile-stage { display: none; }
  .site { min-height: calc(var(--desktop-height) * var(--desktop-scale, 1)); }
}