/* Сайт компании YATOV Lab. Визуальный язык — лендинга приложения (site/page.html): серый фон,
   белые панели, тёмно-синий акцент, заголовки Source Serif 4, текст Golos Text. Шрифты — свои,
   /fonts/fonts.css. Тёмная тема — по системной. */

:root{
  --ground:#ECEEF3; --panel:#FFFFFF; --panel-2:#F5F6FA;
  --ink:#14161A; --ink-2:#44474F; --ink-3:#6E7280;
  --rule:#C9CCD6; --rule-soft:#DCDFE7;
  --accent:#1B3A6B; --accent-soft:#D8E2FF; --on-accent:#FFFFFF;
  --invert-bg:#14181F; --invert-ink:#E7E9EE; --invert-ink-2:#A8AEBB;
  --shadow:0 1px 2px rgba(20,22,26,.06), 0 12px 32px rgba(20,22,26,.08);
  --shadow-phone:0 2px 6px rgba(20,22,26,.10), 0 26px 60px rgba(20,22,26,.22);
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#0D0E11; --panel:#17181C; --panel-2:#1D1F24;
  --ink:#E6E7EB; --ink-2:#C0C3CC; --ink-3:#8E9099;
  --rule:#31343B; --rule-soft:#25272D;
  --accent:#AEC6FF; --accent-soft:#22304D; --on-accent:#002E69;
  --invert-bg:#1D1F24; --invert-ink:#E6E7EB; --invert-ink-2:#A8AEBB;
  --shadow:none; --shadow-phone:0 2px 6px rgba(0,0,0,.5), 0 26px 60px rgba(0,0,0,.65);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.07;letter-spacing:-.015em}
h2{font-size:clamp(25px,3.2vw,34px);line-height:1.15;letter-spacing:-.01em}
h3{font-size:20px;line-height:1.25}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
@media (min-width:600px){.wrap{padding-inline:28px}}

/* ─── шапка ─── */
.top{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.brand{flex-grow:1;font:600 23px/1 var(--serif);letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.langs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--panel-2);border:1px solid var(--rule-soft)}
.langs a{padding:6px 12px;border-radius:7px;color:var(--ink-3);text-decoration:none;font-size:14px;font-weight:500}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}

/* ─── первый экран ─── */
.hero{padding-block:64px 72px}
.hero-grid{display:grid;gap:48px;align-items:center}
@media (min-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:64px}}
.kicker{font-size:15px;color:var(--ink-3);margin-bottom:14px}
.pill + h1{margin-top:18px}
.hero-icon{display:block;margin-bottom:20px}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin-top:20px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:500}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:8px;
  font:600 16px/1 var(--sans);text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:20px;height:20px}

/* ─── разделы ─── */
.band{border-top:1px solid var(--rule);padding-block:64px}
.band h2 + .lede{margin-top:12px}
.band-head{margin-bottom:32px}
.panel{background:var(--panel);border:1px solid var(--rule-soft);border-radius:16px;box-shadow:var(--shadow)}
.cols{display:grid;gap:20px}
@media (min-width:760px){.cols{grid-template-columns:1fr 1fr}}
.info{padding:28px}
.info h3{margin-bottom:14px}
.info p + p{margin-top:6px}
.muted{color:var(--ink-3)}

/* карточка продукта */
.product{display:grid;gap:20px;padding:28px;color:var(--ink);text-decoration:none;align-items:center;
  transition:border-color .15s}
.product:hover{border-color:var(--accent)}
@media (min-width:640px){.product{grid-template-columns:auto 1fr auto;gap:24px}}
.app-icon{width:72px;height:72px;border-radius:17px;box-shadow:0 6px 16px rgba(27,58,107,.28)}
.product h3{font-size:24px}
.product p{color:var(--ink-2);margin-top:6px}
.product .go{font-weight:600;color:var(--accent);white-space:nowrap}

/* возможности */
.features{display:grid;gap:16px}
@media (min-width:640px){.features{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{padding:24px}
.feature .ico{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:16px}
.feature .ico svg{width:24px;height:24px}
.feature h3{margin-bottom:8px}
.feature p{color:var(--ink-2);font-size:16px}

/* тёмная полоса с призывом */
.invert{background:var(--invert-bg);color:var(--invert-ink);border-radius:20px;padding:40px 28px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.invert p{color:var(--invert-ink-2);margin-top:8px}
.invert .btn-primary{background:#fff;color:#14161A}

/* ─── iPhone на первом экране: рамка и условный экран без слов ─── */
.iphone{width:280px;height:572px;margin:0 auto;border-radius:46px;background:#0A0B0D;padding:10px;
  box-shadow:var(--shadow-phone);position:relative}
.iphone .screen{height:100%;border-radius:37px;background:#F2F2F7;overflow:hidden;position:relative;
  padding:58px 16px 16px}
.iphone .island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:86px;height:26px;
  border-radius:14px;background:#0A0B0D}
.iphone .title{height:22px;width:52%;border-radius:6px;background:#1C1C1E;margin-bottom:16px}
.iphone .search{height:34px;border-radius:10px;background:#E3E3E8;margin-bottom:16px}
.iphone .group{background:#fff;border-radius:12px;padding:4px 0;margin-bottom:14px}
.iphone .row{display:flex;align-items:center;gap:10px;padding:10px 12px}
.iphone .row + .row{border-top:1px solid #E5E5EA}
.iphone .dot{width:30px;height:30px;border-radius:8px;flex:none}
.iphone .c0{background:#D8E2FF}.iphone .c1{background:#C9EBD8}.iphone .c2{background:#F9D8FE}
.iphone .c3{background:#DAE2F9}.iphone .c4{background:#FFE2B8}
.iphone .lines{flex:1}
.iphone .l1{height:10px;border-radius:5px;background:#3A3A3C;width:80%}
.iphone .l2{height:8px;border-radius:4px;background:#C7C7CC;width:55%;margin-top:7px}
.iphone .tab{position:absolute;left:16px;right:16px;bottom:16px;height:56px;border-radius:28px;
  background:rgba(255,255,255,.92);box-shadow:0 4px 18px rgba(0,0,0,.12);display:flex;
  align-items:center;justify-content:space-around;padding:0 10px}
.iphone .tab i{width:22px;height:22px;border-radius:6px;background:#C7C7CC}
.iphone .tab i.on{background:#1B3A6B}
.iphone .tab b{width:40px;height:40px;border-radius:50%;background:#1B3A6B}

/* ─── политика ─── */
.doc{padding:28px;margin-block:40px 64px;max-width:820px}
@media (min-width:600px){.doc{padding:44px 48px}}
.doc h1{font-size:clamp(30px,4.4vw,44px)}
.doc .date{color:var(--ink-3);margin:10px 0 28px}
.doc h2{font-size:22px;margin:32px 0 12px}
.doc p{margin-bottom:10px;color:var(--ink-2)}
.doc ul{margin:0 0 12px;padding-left:22px;color:var(--ink-2)}
.doc li{margin:4px 0}
.doc dl{margin:0;display:grid;gap:2px 24px}
@media (min-width:600px){.doc dl{grid-template-columns:minmax(180px,auto) 1fr}}
.doc dt{color:var(--ink-3);font-size:15px;margin-top:10px}
.doc dd{margin:0;overflow-wrap:anywhere}
@media (min-width:600px){.doc dd{margin-top:10px}}

/* ─── подвал ─── */
footer{border-top:1px solid var(--rule);padding:28px 0 40px;display:flex;flex-wrap:wrap;gap:12px 24px;
  justify-content:space-between;color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-2)}