/* ============================================================
   Алексей — digital-дизайнер
   Built from Figma: site (Wne8ZBfUuySDkh1CfyOJho)
   Frames: desktop 1440×1024 · tablet 834×1204 · phone 402×874
   ============================================================ */

@font-face {
  font-family: "FE Hero";
  src: url("FEHero-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-top: #19191A;
  --bg-bottom: #1D2326;
  --ink: #CFD5DD;
  --accent: #F21D1D;
  --ring: rgba(207, 213, 221, 0.10);
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: "FE Hero", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout shell ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;   /* real visible height on mobile (excludes address bar) */
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.frame {
  position: relative;
  container-type: inline-size;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inner {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ---------- Decorative rings ---------- */
.decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--ring);
}

/* ---------- Logo ---------- */
.logo {
  position: absolute;
  z-index: 3;
  color: var(--ink);
  display: block;
  line-height: 0;
}
.logo__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Headline ---------- */
.title {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0;
}
.title__line { display: block; }
.title__accent { color: var(--accent); }
.title__sub { color: var(--accent); }   /* «ДЕЛАЮ БАННЕРЫ … ФИРМЕННЫЙ СТИЛЬ» — красная строка */
.title-2 {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Contacts ---------- */
.contacts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.contact {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.contact__label { color: var(--ink); }
.contact__colon { display: none; }
.contact__rule {
  position: relative;
  flex: 1 1 auto;
  align-self: center;
  height: 1px;
  background: var(--ink);
}
.contact__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.22em;
  height: 0.22em;
  margin-top: -0.11em;          /* center the head on the line */
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: rotate(45deg);
}

/* Line-break hints for the red sub-line (authored breaks per breakpoint) */
.brk { display: none; }
.contact__value {
  color: var(--ink);
  text-decoration: none;
}
.contact__value:hover { color: #ffffff; }

/* ============================================================
   DESKTOP  ≥ 1025px   (frame 1440)
   ============================================================ */
@media (min-width: 1025px) {
  .frame { max-width: 1440px; }
  .inner { padding: 0.76cqi 3.96cqi 2.3cqi; }

  .logo { top: 3.61cqi; right: 3.75cqi; width: 6.46cqi; }

  .hero { padding-top: 0.5cqi; }
  .title { font-size: 13.54cqi; line-height: 0.96; }
  .title__sub {
    font-size: 5.56cqi;
    line-height: 1;
    margin-top: 2.4cqi;
  }
  .title-2 {
    font-size: 8.40cqi;
    line-height: 1;
    margin-top: 1.9cqi;
  }

  .contact { font-size: 6.09cqi; line-height: 1; gap: 1.6cqi; }
  .contact + .contact { margin-top: 0.5cqi; }

  .ring { width: 91.4cqi; height: 91.4cqi; left: 41.46cqi; }
  .ring--1 { top: -6.46cqi; }
  .ring--2 { top: -57.36cqi; }
  .ring--3 { top: 34.03cqi; }
}

/* ============================================================
   TABLET  481–1024px   (frame 834, capped & centered)
   ============================================================ */
@media (min-width: 481px) and (max-width: 1024px) {
  .frame { max-width: 834px; }
  .inner { padding: 2.5cqi 6.83cqi 6.95cqi; }

  .logo { top: 6.24cqi; right: 6.6cqi; width: 11.15cqi; }

  .hero { padding-top: 0; }
  .title { font-size: 17.52cqi; line-height: 1; }
  .title__sub {
    font-size: 8.75cqi;
    line-height: 1;
    margin-top: 2.4cqi;
  }
  .brk--b { display: inline; }     /* break after "…ВИЗУАЛИЗАЦИИ -" */
  .title-2 {
    font-size: 10.87cqi;
    line-height: 1;
    margin-top: auto;              /* flexible gap goes ABOVE «ПОКА…» */
    margin-bottom: 7cqi;           /* «ПОКА…» sits just above the contacts */
  }

  /* «ПОКА…» sits just above the contacts */
  .contacts { margin-top: 0; }
  .contact { font-size: 9.12cqi; line-height: 1; gap: 2.4cqi; }
  .contact + .contact { margin-top: 1.6cqi; }

  .ring { width: 157.8cqi; height: 157.8cqi; left: 20.02cqi; }
  .ring--1 { top: -0.72cqi; }
  .ring--2 { top: -88.61cqi; }
  .ring--3 { top: 69.18cqi; }
}

/* ============================================================
   PHONE  ≤ 480px   (frame 402)
   ============================================================ */
@media (max-width: 480px) {
  .frame { max-width: none; }
  /* fill the visible screen; gaps flex so nothing scrolls */
  .inner {
    padding: 0 7.21cqi 5cqi;
    justify-content: space-between;
  }

  /* logo flows at top-left, inset & aligned with the content's left edge */
  .logo {
    position: static;
    width: 15cqi;
    margin: 6cqi 0 3cqi 7.21cqi;     /* top · — · gap below · left (cqi @402) */
  }

  .title { font-size: 27.36cqi; line-height: 0.955; }
  /* H1 wraps to three lines */
  .title__name,
  .title__accent { display: block; }
  .title__sub {
    font-size: 12.44cqi;
    line-height: 1;
    margin-top: 4.5cqi;
  }
  .brk { display: inline; }        /* break after each " - " (three lines) */
  .title-2 {
    font-size: 12.44cqi;
    line-height: 1;
    margin-top: 0;                  /* spacing comes from space-between */
  }
  .contacts { margin-top: 0; }     /* override the desktop bottom-pin */

  .contact { font-size: 10.7cqi; line-height: 1.1; gap: 1.2cqi; }
  .contact + .contact { margin-top: 2cqi; }
  /* no leader line on phone — colon instead */
  .contact__colon { display: inline; }
  .contact__rule { background: transparent; }
  .contact__rule::after { display: none; }

  .ring { width: 196.8cqi; height: 196.8cqi; left: 25.37cqi; }
  .ring--1 { top: 16.67cqi; }
  .ring--2 { top: -93.03cqi; }
  .ring--3 { top: 103.73cqi; }
}

/* Short phones (e.g. 16:9, or address bar visible on wide-short devices):
   shrink the poster a touch more so it still fills the screen without scrolling. */
@media (max-width: 480px) and (max-height: 745px) {
  .logo { width: 13cqi; margin: 4cqi 0 2cqi 7.21cqi; }
  .title { font-size: 24cqi; line-height: 0.92; }
  .title__sub { font-size: 11cqi; margin-top: 3.5cqi; }
  .title-2 { font-size: 11cqi; }
  .contact { font-size: 9.4cqi; line-height: 1; }
  .contact + .contact { margin-top: 1.4cqi; }
  .inner { padding-bottom: 3cqi; }
}