/* belumen.ru: a one-screen brand page. Tokens are the Lumen brand ones (same values as the cabinet and the studio). */
@font-face{font-family:'Montserrat';font-weight:100 900;font-display:swap;src:url('/fonts/montserrat-cyrillic.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:'Montserrat';font-weight:100 900;font-display:swap;src:url('/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122}
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url('/fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url('/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122}

:root{
  color-scheme:dark;
  --c-night:#18130F; --c-coal:#221A14; --c-wax:#F7EEE0; --c-sand:#B2A192;
  --c-flame:#EB5C16; --c-amber:#FF9246; --c-ink:#1A120C;
  --edge:rgba(247,238,224,.06);
  --g-embers:radial-gradient(60% 55% at 88% 90%, rgba(235,92,22,.42), rgba(139,67,27,.22) 45%, transparent 75%);
  --font-head:'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-1:14.5px; --fs-2:18px; --fs-display:clamp(40px, 8vw, 88px);
  --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-pill:999px; --r-lg:22px;
  --d-fast:200ms; --e-out:cubic-bezier(.33,1,.68,1);
}

*{box-sizing:border-box;margin:0}
html{background:var(--c-night);color:var(--c-wax);font:400 var(--fs-2)/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--g-embers) 0 0/100% 100% no-repeat;
  padding:max(var(--s-5), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-5), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left))}
:focus-visible{outline:2px solid var(--c-amber);outline-offset:3px}

.wrap{width:100%;max-width:880px;margin:0 auto}
.brand{display:flex;align-items:center;gap:var(--s-3);font:500 var(--fs-2)/1 var(--font-head);letter-spacing:.02em;color:var(--c-wax);text-decoration:none}
.brand svg{width:28px;height:28px}

main{flex:1;display:flex;align-items:center;padding:var(--s-8) 0}
h1{font:300 var(--fs-display)/1.04 var(--font-head);letter-spacing:-.035em;max-width:14ch}
.lead{margin-top:var(--s-5);max-width:34em;color:var(--c-sand)}
.points{list-style:none;padding:0;margin-top:var(--s-6);display:grid;gap:var(--s-3);max-width:34em}
.points li{padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:var(--c-coal);box-shadow:inset 0 0 0 1px var(--edge)}

.button{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-7);padding:var(--s-4) var(--s-6);border-radius:var(--r-pill);
  background:var(--c-flame);color:var(--c-ink);font:600 var(--fs-2)/1 var(--font-body);text-decoration:none;
  transition:transform var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out)}
.button:hover{opacity:.92}
.button:active{transform:scale(.97)}
.button svg{width:20px;height:20px}

footer{color:var(--c-sand);font-size:var(--fs-1)}

@media (prefers-reduced-motion:reduce){.button{transition:none}}