/* lavaapp.ru (1.5.1.0, five languages and screenshots since 2026-11-01): the «Студия» design. lavaapp in front, Лавочка the biggest tile.
   Palette and type from the Лавочка brand sheet: plum, lavender, ember, milk; Unbounded for
   lavaapp, Nunito Black for Лавочка, Manrope for text. */
@import url(/fonts/fonts.css);

:root {
  --bg: #F5F3EF; --surface: #FFFFFF; --ink: #1F1A2B; --ink-2: #5C566B; --line: #E7E2DA;
  --plum: #2A2140; --plum-2: #40336A; --lav: #8E7FE0; --lav-2: #B9AEF0; --lav-ink: #6B5CC8;
  --ember: #E8642C; --milk: #FFF4E8; --tg: #2F8FD8;
  --f-um: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-lav: "Nunito", "Manrope", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15111D; --surface: #201A2B; --ink: #F1ECF7; --ink-2: #A9A1BA; --line: #342C42;
    --lav-ink: #B9AEF0;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
p { margin: 0; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; }

/* Navigation */
.nav { display: flex; align-items: center; gap: 24px; padding: 18px var(--pad); flex-wrap: wrap; }
.nav nav { display: flex; gap: 22px; flex: 1; font-size: 15px; flex-wrap: wrap; }
.nav nav a { text-decoration: none; color: var(--ink-2); }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--ink); }
.lg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-um); font-weight: 700; font-size: 22px; letter-spacing: -.02em; text-decoration: none; }
.lg img { width: 18px; height: 23px; }
.cta { padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; background: var(--ink); color: var(--bg); }

/* Buttons */
.dl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 14px; font-weight: 700; font-size: 15px; text-decoration: none; border: 0; }
.btn.ember { background: var(--ember); color: #FFFFFF; }
.btn.ghost { background: rgba(255,255,255,.1); color: var(--milk); }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.soft { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn small { font-weight: 600; opacity: .8; }
.soon { font-size: 13px; opacity: .7; }
.kick { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.kick svg, .kick img { width: 28px; height: 28px; }

/* Studio hero */
.hero { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px,6vw,72px) var(--pad) 20px; }
.hero h1 { font-family: var(--f-um); font-weight: 700; font-size: clamp(30px,5.4vw,62px); letter-spacing: -.03em; line-height: 1.05; max-width: 900px; }
.hero p { font-size: 18px; color: var(--ink-2); max-width: 560px; }

/* Product grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding: 0 var(--pad) clamp(28px,5vw,56px); }
.cell { border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.flagship { grid-column: span 2; grid-row: span 2; background: var(--plum); color: var(--milk); border: 0; position: relative; overflow: hidden; }
.flagship h2 { font-family: var(--f-lav); font-weight: 900; font-size: clamp(26px,3.4vw,40px); line-height: 1.1; }
.flagship p { color: #CFC6E0; }
.flagship .kick { color: var(--lav-2); }
.flagship .more { color: var(--lav-2); font-weight: 700; font-size: 14px; }
.flagship .mini { margin-top: 8px; display: flex; justify-content: flex-end; }
.biz { grid-column: span 2; }
.biz .kick { color: var(--lav-ink); }
.cell h3 { font-family: var(--f-lav); font-weight: 900; font-size: 24px; line-height: 1.15; }
.cell .btn { align-self: flex-start; }
.stat b { font-family: var(--f-um); font-size: 56px; line-height: 1; }
.stat span { font-size: 14px; color: var(--ink-2); }
.stat.ember { background: var(--ember); color: #FFFFFF; border: 0; }
.stat.ember span { color: #FFE9DE; }
.next { opacity: .7; border-style: dashed; grid-column: span 4; }

/* Bands */
.band { padding: clamp(28px,5vw,56px) var(--pad); display: flex; flex-direction: column; gap: 24px; }
.band h2 { font-family: var(--f-lav); font-weight: 900; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; }
.band .lead { font-size: 18px; color: var(--ink-2); max-width: 640px; }
.fts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.ft { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.ft h4 { font-family: var(--f-lav); font-weight: 900; font-size: 19px; line-height: 1.2; }
.ft p { font-size: 15px; color: var(--ink-2); }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.tier { padding: 20px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); }
.tier b { font-family: var(--f-lav); font-weight: 900; font-size: 20px; }
.tier .pr { font-size: 13px; color: var(--ink-2); }
.tier p { font-size: 14px; }
.tier.now { border: 2px solid var(--ember); }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--ember); color: #FFFFFF; }

/* Lavochka page hero */
.lav-hero { background: var(--plum); color: var(--milk); }
.lav-hero .inner { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 32px; align-items: center; padding: clamp(28px,6vw,72px) var(--pad); }
.lav-hero h1 { font-family: var(--f-lav); font-weight: 900; font-size: clamp(36px, 6.4vw, 72px); line-height: 1.02; }
.lav-hero p { font-size: 19px; color: #CFC6E0; max-width: 480px; }
.lav-hero .kick { color: var(--lav-2); }
.lav-hero .txt { display: flex; flex-direction: column; gap: 20px; }
.lav-hero .hv { display: flex; justify-content: center; }
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup b { font-family: var(--f-lav); font-weight: 900; font-size: 30px; line-height: 1; }
.lockup span { font-family: var(--f-um); font-size: 12px; opacity: .7; align-self: flex-end; padding-bottom: 3px; }
.lockup img { width: 44px; height: 44px; }

/* Download page */
.plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.plat { padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.plat h3 { font-family: var(--f-lav); font-weight: 900; font-size: 22px; }
.plat .ver { font-size: 13px; color: var(--ink-2); }
.news { padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.news h3 { font-family: var(--f-lav); font-weight: 900; font-size: 20px; }
.news ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.news li { font-size: 15px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; max-width: 680px; }

/* Footer */
footer { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding: 26px var(--pad); font-size: 13px; border-top: 1px solid var(--line); color: var(--ink-2); }
footer a { text-decoration: none; }
footer .lg { font-size: 18px; color: var(--ink); }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .flagship, .biz, .next { grid-column: span 2; grid-row: auto; }
  .lav-hero .inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav nav { order: 3; flex: 1 1 100%; gap: 16px; font-size: 14px; }
  .nav { justify-content: space-between; gap: 12px; }
  .grid { grid-template-columns: 1fr; }
  .flagship, .biz, .next { grid-column: auto; }
  .flagship .mini { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Language switcher */
.langs { position: relative; font-size: 13px; font-weight: 700; }
.langs summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.langs[open] summary { color: var(--ink); }
.langs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; display: flex; flex-direction: column; min-width: 96px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(20,10,40,.14); }
.langs-menu a { padding: 7px 12px; border-radius: 9px; text-decoration: none; color: var(--ink-2); }
.langs-menu a:hover { background: var(--bg); color: var(--ink); }
.langs-menu a[aria-current] { color: var(--ink); background: var(--bg); }
footer .flangs { display: flex; gap: 14px; }

/* Screenshots: phone-shaped, a row that scrolls sideways on small screens */
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; margin: 0 -4px; scrollbar-width: thin; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; }
.shot img, .hero-shot, .theme img { width: 100%; height: auto; border-radius: 26px; box-shadow: 0 18px 40px rgba(20,10,40,.16); border: 1px solid var(--line); background: #FFFFFF; }
.shot figcaption { font-size: 14px; font-weight: 700; text-align: center; }
.note { font-size: 13px; color: var(--ink-2); }
.hero-shot { width: 280px; max-width: 100%; border: 0; box-shadow: 0 30px 50px rgba(20,10,40,.35); }
.flagship .mini .hero-shot { width: 240px; margin-bottom: -60px; }
.themes { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .themes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.theme { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.theme img { border-radius: 18px; aspect-ratio: 390 / 600; object-fit: cover; object-position: top; }
.theme figcaption { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.theme figcaption span { color: var(--ink-2); }
@media (max-width: 860px) { .shots { grid-auto-columns: 210px; } }
@media (max-width: 560px) { .langs { order: 2; } .shots { grid-auto-columns: 62vw; } .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }