/* Витрина зонтика. Та же семья, что у расширений: Fixel, наши нейтрали,
   концентрические радиусы, двухслойная тень. Акцент зонтика — базовый зелёный
   пипетки: она родоначальник семьи (см. DESIGN-LAWS §«Палитра семьи»). */

@font-face { font-family:"Fixel Text"; src:url(/fonts/FixelText-Regular.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Fixel Text"; src:url(/fonts/FixelText-Medium.woff2) format("woff2");
  font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:"Fixel Text"; src:url(/fonts/FixelText-SemiBold.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:"Fixel Display"; src:url(/fonts/FixelDisplay-SemiBold.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap }

:root{
  --bg:#FBFCFB; --surface:#FFFFFF; --line:#E3E9E5;
  --ink:#161C18; --ink-dim:#5C6862; --ink-faint:#6E7671;
  --accent:#0C875E; --accent-soft:#E7F7F0;
  --r:12px; --r-lg:16px;
  --font:"Fixel Text",ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --display:"Fixel Display","Fixel Text",ui-sans-serif,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E120F; --surface:#161B18; --line:#293230;
    --ink:#E9F0EC; --ink-dim:#93A29A; --ink-faint:#718079;
    --accent:#34D399; --accent-soft:#10291F;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 var(--font);
  padding:0 24px 80px;
}

.top{
  display:flex; align-items:center; gap:12px;
  max-width:720px; margin:0 auto; padding:32px 0 8px;
}
.mark{
  width:22px; height:22px; border-radius:7px;
  background:var(--accent); flex:none;
}
.brand{font:600 18px/1 var(--display); letter-spacing:.01em}

main{max-width:720px; margin:0 auto}

.hero{padding:56px 0 8px}
h1{
  font:600 clamp(30px,5.5vw,44px)/1.15 var(--display);
  margin:0 0 18px; letter-spacing:-.015em;
}
.lede{font-size:19px; color:var(--ink-dim); margin:0; max-width:34em}

/* Шесть плашек: не ссылки — кликать пока некуда, и притворяться не будем.
   Точка каждой в цвете своего продукта из палитры семьи (DESIGN-LAWS). */
.grid{
  display:grid; gap:16px; margin:44px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(22,28,24,.04), 0 6px 16px rgba(22,28,24,.05);
}
.dot{
  display:block; width:10px; height:10px; border-radius:3px;
  background:var(--c); margin-bottom:12px;
}
.card h2{font:600 16.5px/1.3 var(--font); margin:0 0 7px}
.card p{margin:0; font-size:15px; color:var(--ink-dim)}

.note{
  margin:18px 0 0; font-size:14.5px; color:var(--ink-faint);
}

.promise{margin:56px 0 0}
.promise .rows{display:grid; gap:22px; margin-top:6px}
.promise h3{font:600 16.5px/1.3 var(--font); margin:0 0 6px}
.promise p{margin:0; color:var(--ink-dim); max-width:44em}

.contact{margin:48px 0 0}
.contact p{color:var(--ink-dim); margin:0}

.small{font-size:14.5px; color:var(--ink-faint)}

a{color:var(--accent); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

footer{
  max-width:720px; margin:72px auto 0; padding-top:24px;
  border-top:1px solid var(--line);
}
footer nav{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:12px}
footer nav a{font-size:15px}
footer .small{margin:0}

/* Юридические страницы: мелким шрифтом и юстированно, как на phosphoraudio.com
   и tunefoundry.co. Impressum обязателен по закону, но он не витрина — читать
   его приходит тот, кому надо, и он найдёт. */
.legal{padding:48px 0 8px}
.legal h1{font:600 22px/1.3 var(--display); margin:0}
.fine{
  font-size:11.5px; line-height:1.55; color:var(--ink-dim);
  margin-top:14px; text-align:justify; max-width:840px;
}
.fine p{margin:0 0 10px}
.fine a{color:var(--ink-dim); text-decoration:underline}