/* Страница «Сайты» (kodulehed/ и ru/saity/): вступление, четыре преимущества и пример сайта. */
.sites-intro{padding-bottom:30px}
.sites-intro h1{max-width:15em}
.sites-intro .lead{font-size:18px;line-height:1.75;color:var(--muted);max-width:40em;margin:0}

/* Иконки преимуществ — в том же стиле, что и в блоке «Как я проверяю выводы» */
.sv-ic{display:block;width:64px;height:48px;overflow:visible}
.sv-ic .lt{fill:#cfe9d4}
.sv-ic .md{fill:#8fc29b}
.sv-ic .dk{fill:var(--green)}
.sv-ic .ln{fill:none;stroke:#8fc29b;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sv-ic .txt{font:700 13px/1 Onest,Arial,sans-serif;fill:#fff}

/* Пример сайта */
.site-example{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.site-example h2{margin-top:14px}
.site-example p{font-size:16px;line-height:1.75;color:var(--muted);margin:18px 0 0;max-width:30em}
.site-example .note{font-size:13px;margin-top:16px}
.site-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.site-tags span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#fff}

/* Мини-превью: окно браузера с упрощённой первой страницей примера */
.mock-link{display:block;border-radius:22px;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 18px 44px #4d8c5718}
.mock-link:hover{transform:translateY(-4px);box-shadow:0 26px 56px #4d8c5726}
.mock-link:focus-visible{outline:3px solid var(--green);outline-offset:6px}
.mock{border-radius:22px;overflow:hidden;background:#fffaf3;border:1px solid #f1e3d2}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f6ece0}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#e7cdb2}
.mock-bar span{margin-left:10px;flex:1;max-width:220px;background:#fffaf3;border-radius:999px;font-size:11px;color:#8b7362;padding:3px 12px}
.mock-page{position:relative;padding:16px 22px 0;background:radial-gradient(55% 70% at 80% 30%,#ffe0bd 0%,#ffe0bd00 70%),#fffaf3;color:#3f2d22}
.mock-head{display:flex;align-items:center;gap:8px}
.mock-logo{width:24px;height:24px;display:grid;place-items:center;background:linear-gradient(145deg,#fbb24f,#d9701f);border-radius:52% 48% 46% 54%/56% 50% 50% 44%}
.mock-logo svg{width:13px;height:13px;fill:#fff}
.mock-head b{font:italic 600 15px/1 Georgia,serif}
.mock-nav{margin-left:auto;display:flex;gap:6px}
.mock-nav i{width:30px;height:8px;border-radius:999px;background:#f3dcc4}
.mock-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center;padding:18px 0 4px}
.mock-pill{display:inline-block;width:92px;height:12px;border-radius:999px;background:#fff;box-shadow:0 4px 10px -6px #965a2880}
.mock-copy strong{display:block;font:italic 600 clamp(17px,2.1vw,25px)/1.12 Georgia,serif;margin:10px 0 6px}
.mock-copy em{display:block;font-style:normal;font-size:11px;color:#8b7362}
.mock-btns{display:flex;gap:6px;margin-top:12px}
.mock-btns i{width:58px;height:18px;border-radius:999px;background:linear-gradient(140deg,#fbb24f,#d9701f)}
.mock-btns i+i{background:#fffdf9;box-shadow:0 4px 10px -6px #965a2880}
.mock-blob{aspect-ratio:1;max-width:190px;justify-self:end;width:100%;display:grid;place-items:end center;overflow:hidden;background:linear-gradient(150deg,#ffd2a3,#ffbf7d);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.mock-blob svg{width:78%;height:auto;fill:#fffaf3}
.mock-grass{display:block;width:calc(100% + 44px);height:42px;margin:0 -22px}
.mock-grass .hill{fill:#fcefe0}
.mock-grass .b1{fill:#bdd398}
.mock-grass .b2{fill:#93b26a}

/* Движение — только когда app.js включил .anim (в системе не отключена анимация) */
@keyframes mock-morph{0%,100%{border-radius:58% 42% 52% 48%/48% 56% 44% 52%}33%{border-radius:44% 56% 40% 60%/58% 44% 56% 42%}66%{border-radius:52% 48% 62% 38%/42% 60% 40% 58%}}
.anim .mock-blob{animation:mock-morph 14s ease-in-out infinite}

@media(max-width:900px){.site-example{grid-template-columns:1fr;gap:32px}}
@media(max-width:640px){.sites-intro .lead{font-size:16px}.mock-page{padding:12px 14px 0}.mock-grass{width:calc(100% + 28px);margin:0 -14px}.mock-nav i{width:18px}}
@media(prefers-reduced-motion:reduce){.mock-link{transition:none}.mock-link:hover{transform:none}}