/* ver.2.0 — общая база: токены, фон страницы, рамка первого экрана, шапка (логотип, Steam), текст первого экрана.
   Модули — в modules/<имя>.css и .js, у каждого свой файл. */
:root {
  --lime: #c9ff3d;
  --ink: #11182f;
  --glass: rgba(255, 255, 255, .1);
  --font: Onest, system-ui, sans-serif;
  --font-ui: "Golos Text", Onest, system-ui, sans-serif;
  --font-wide: "Big Shoulders Display", Impact, sans-serif;
  --sq: 1;   /* углы «как у Apple»: сглаживание 90 % ≈ squircle с радиусом ×1,9 */
}
@supports (corner-shape: squircle) { :root { --sq: 1.9; } }
* { box-sizing: border-box; }
html, body { margin: 0; }
/* фон страницы — светлое небо, как на сайте, но светлее, с мягкими переливами (просьба владельца) */
body {
  font-family: var(--font); color: #fff; -webkit-font-smoothing: antialiased; min-height: 100vh;
  background:
    radial-gradient(700px 420px at 12% 18%, rgba(255, 214, 240, .45), transparent 70%),
    radial-gradient(760px 460px at 88% 30%, rgba(206, 196, 255, .45), transparent 70%),
    radial-gradient(820px 480px at 30% 85%, rgba(196, 244, 236, .4), transparent 70%),
    radial-gradient(700px 420px at 80% 90%, rgba(255, 236, 214, .35), transparent 70%),
    linear-gradient(180deg, #e3f0ff 0%, #f0f7ff 50%, #f8fbff 100%);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.trim { text-box: trim-both cap alphabetic; }

.hero { height: 100vh; min-height: 700px; padding: 32px; display: flex; }
.frame {
  position: relative; flex: 1; overflow: hidden; border-radius: calc(48px * var(--sq)); corner-shape: squircle; background: #6a6ae0;
  display: flex; flex-direction: column; gap: 10px; padding: 60px;   /* по макету — 60 со всех сторон */
}

/* Шапка */
.top { position: relative; display: flex; align-items: center; gap: 10px; }
.top .spacer { flex: 1; }
.logo { display: block; width: 239.257px; height: 57px; }
.logo img { display: block; width: 239.257px; height: 57px; }

.steam {
  position: relative; flex: none; display: flex; align-items: flex-start; width: 230px; height: 80px; padding: 8px;
  border-radius: calc(16px * var(--sq)); corner-shape: squircle; overflow: hidden;
  background: linear-gradient(168.34deg, #14284d 17.99%, #046da0 81.38%);
}
.steam .g1 { position: absolute; left: -102px; top: -74px; width: 204px; height: 204px; }
.steam .g2 { position: absolute; left: 113px; top: -33px; width: 222px; height: 222px; }
.steam .dot { position: relative; width: 12px; height: 12px; flex: none; }
.steam span { position: relative; flex: 1; align-self: center; text-align: center; font: 700 16px/normal var(--font); }
.steam .icon { position: relative; height: 100%; aspect-ratio: 1; border-radius: calc(8px * var(--sq)); corner-shape: squircle; object-fit: cover; }

/* Нижний ряд */
.main { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.intro { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.intro-text { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; padding: 60px 0 36px; }
.intro h1 { margin: 0; font: 600 48px/.8 var(--font); white-space: nowrap; }
.intro-copy { display: flex; flex-direction: column; gap: 16px; font: 400 18px/1.2 var(--font); }
.intro-copy .hello { color: var(--lime); max-width: 502px; }
.intro-copy .desc { max-width: 527px; }

/* общая стеклянная карточка первого экрана («Новости», «Призмана») и подпись-надпись на ней */
.card {
  position: relative; flex: none; overflow: hidden; border-radius: calc(20px * var(--sq)); corner-shape: squircle;
  background: var(--glass); backdrop-filter: blur(4.1px);
}
.tag { position: absolute; font: 700 71.111px/.9 var(--font-wide); color: rgba(255, 255, 255, .6); white-space: nowrap; }

/* до 760 (Figma «hero 720»): карточки «Новости» и «Призмана» убираем, текст и поиск — на всю ширину */
@media (max-width: 760px) {
  .card.news, .card.prismana { display: none; }
  .intro-copy .hello, .intro-copy .desc { max-width: none; }
}
@media (max-width: 600px) {
  .hero { padding: 16px; }
  .intro h1 { font-size: 34px; white-space: normal; line-height: .95; }
  .intro-copy { font-size: 16px; }
}

/* поля и скругление рамки первого экрана: 1920 — 60 и 48, до 1440 — 40 и 38, до 720 — 20 и 26 (слово владельца 31.10) */
@media (max-width: 1440px) { .frame { padding: 40px; border-radius: calc(38px * var(--sq)); } }
@media (max-width: 720px) { .frame { padding: 20px; border-radius: calc(26px * var(--sq)); } }