/* Главная страница: герой с картинкой, счёт, карточки.
   Краски и размеры общие — они в dnevnik.css, этот файл только про главную.
   Картинки вынуты из макета в /static/kartinki/. */

:root{
 --green:#17705D;--deep:#0C2A24;--mint:#DFF1EA;--paper:#F2F6F4;
 --text:#101D1A;--muted:#5A6B66;--line:#DCE7E2;--accent:#5FC2A5;
 --white:#fff;--card:#fff;--radius:15px;--shadow:0 10px 30px rgba(12,42,36,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:"Golos Text",sans-serif}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1320px,calc(100% - 56px));margin:auto}
body.s-geroem .header{background:transparent;position:absolute;top:0;left:0;right:0;z-index:5;color:#fff;padding:11px 0}
.nav{display:flex;align-items:center;gap:28px}
.logo{font-size:35px;font-weight:800;line-height:1;white-space:nowrap}
.logo small{display:block;font:13px "PT Mono";letter-spacing:1px;opacity:.8;margin-top:4px}
.navlinks{display:flex;gap:22px;margin-left:auto;font-size:20px}
.actions{display:flex;gap:8px;align-items:center}
.theme{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;border-radius:22px;padding:7px 12px;white-space:nowrap}
.login{border:0;background:var(--green);color:#fff;border-radius:8px;padding:9px 19px;font-weight:700}
.hero{position:relative;overflow:hidden;min-height:660px;color:#fff;padding:84px 0 36px;background:linear-gradient(90deg,rgba(6,32,27,.92) 0%,rgba(6,32,27,.75) 30%,rgba(6,32,27,.25) 58%,rgba(6,32,27,0) 85%),url("/static/kartinki/shapka-fon.webp") right 20%/cover no-repeat}

.hero-inner{position:relative;z-index:2}
.kicker{font:18px "PT Mono";letter-spacing:2.5px;margin-bottom:10px}
h1{font-size:70px;line-height:1.0;letter-spacing:-1.6px;margin:0;max-width:780px}
h1 span{color:#72d3b1}
.hero-copy{font-size:22px;line-height:1.45;max-width:660px;margin:13px 0}
.hero-cta{display:inline-flex;border:1px solid #fff;border-radius:999px;padding:10px 17px;font-size:20px;gap:12px}
.scribble{position:absolute;right:0;top:105px;font:italic 20px cursive;line-height:1.15;transform:rotate(-7deg);text-align:center;color:#c1eadb}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px}
.path{position:relative;min-height:130px;padding:23px;border:1px solid rgba(255,255,255,.5);border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));backdrop-filter:blur(8px)}
.path b{font-size:26px;display:block;margin-bottom:7px}
.path p{margin:0;max-width:300px;font-size:19px;color:rgba(255,255,255,.8)}
.path .arrow{position:absolute;right:15px;bottom:13px;font-size:35px}
main{padding:30px 0 0}
.section{margin-bottom:34px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:46px;letter-spacing:-1px;margin:0}
.section-title:after{content:"";display:block;width:38px;height:3px;background:var(--accent);border-radius:3px;margin-top:5px}
.section-link{font-size:20px;color:var(--green);font-weight:600}
.posts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.post{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(12,42,36,.05)}
.post-image{height:136px;background-position:center;background-size:cover}
.post-body{padding:14px 15px 15px}
.meta{font:13px "PT Mono";color:var(--muted)}
.tag{background:var(--mint);color:var(--green);padding:2px 5px;border-radius:5px;font-size:12px;margin-left:3px}
.post h3{font-size:22px;line-height:1.22;margin:9px 0 8px}
.post-arrow{text-align:right;color:var(--green);font-size:29px}
.quote{display:grid;grid-template-columns:1fr;min-height:155px;background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}

.quote-art{width:100%;aspect-ratio:1100/456;background-image:url("/static/kartinki/citata-perekrestok.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.quote-main{padding:30px 36px}
.quote-mark{font-size:72px;color:#5eaa94;line-height:.55}
blockquote{font-size:25px;line-height:1.4;font-style:italic;margin:8px 0}
cite{font-size:18px;color:var(--muted);font-style:normal}

.forum{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
/* шесть в ряд на 851-1006 px не влезали — длинное название раздела распирало страницу вбок */
@media(max-width:1100px){.forum{grid-template-columns:repeat(3,1fr)}}
/* На узком экране текст героя доходит до правого края, где затемнения уже нет, а на
   картинке — надпись от руки: белые буквы по светлому небу и по чужим буквам не
   читаются (снимок в повороте, 27.09.2026). Затемняем картинку ровно по всей ширине. */
@media(max-width:1000px){.hero{background:linear-gradient(rgba(6,32,27,.80),rgba(6,32,27,.66)),url("/static/kartinki/shapka-fon.webp") right 20%/cover no-repeat}}
.forum-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:17px 15px;min-height:124px}
.forum-name{font-size:19px;line-height:1.25}
.forum-icon{font-size:35px;color:var(--green);margin:10px 0 5px}
.forum-count{font:18px "PT Mono";color:var(--muted)}
.forum-note{font-size:19px;color:var(--muted);margin:9px 0 0}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.doc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:21px;display:flex;align-items:center;gap:12px}
.doc-icon,.download{color:var(--green);font-size:42px}
.doc-title{font-size:19px;flex:1}
.free{display:inline-block;margin-top:6px;background:var(--mint);color:var(--green);padding:3px 7px;border-radius:5px;font-size:15px;font-weight:700}
.support{position:relative;overflow:hidden;min-height:122px;border-radius:13px;color:#fff;padding:25px 30px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(8,52,43,.96),rgba(13,91,73,.86)),url("/static/kartinki/podderzhka-fon.webp") left bottom/cover no-repeat}
.support h2{font-size:42px;margin:0 0 3px}
.support p{font-size:19px;max-width:470px;margin:0;color:rgba(255,255,255,.82)}
.support-btn{margin-left:auto;border:0;background:var(--card);color:var(--green);font-weight:700;border-radius:999px;padding:12px 25px}
.footer{position:relative;color:#dceae5;padding:25px 0 18px;background:linear-gradient(rgba(8,40,34,.88),rgba(5,31,26,.96)),url("/static/kartinki/podval-fon.webp") center bottom/cover no-repeat}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.footer-logo{font-size:31px;font-weight:800}
.footer small{font-size:13px;color:#9ab0a9}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;font-size:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:16px;padding-top:12px;display:flex;justify-content:space-between;font-size:13px;color:#9ab0a9}
.post:nth-child(1) .post-image{background-image:url("/static/kartinki/zapis-1.jpg")}
.post:nth-child(2) .post-image{background-image:url("/static/kartinki/zapis-2.jpg")}
.post:nth-child(3) .post-image{background-image:url("/static/kartinki/zapis-3.jpg")}
.post:nth-child(4) .post-image{background-image:url("/static/kartinki/zapis-4.jpg")}
.post:nth-child(5) .post-image{background-image:url("/static/kartinki/zapis-5.jpg")}
:focus-visible{outline:3px solid #8ce5ca;outline-offset:3px}
@media(max-width:850px){
 .container{width:calc(100% - 32px)}
 .logo{font-size:24px}
 .posts{grid-template-columns:repeat(2,1fr)} .forum{grid-template-columns:repeat(3,1fr)}
 .quote{grid-template-columns:1fr}.quote-art{height:130px}  
}
@media(max-width:600px){
 h1{font-size:44px;letter-spacing:-1px} .kicker{font-size:14px;letter-spacing:1.5px}
 .hero-copy{font-size:19px} .scribble{display:none}
 .paths{grid-template-columns:1fr} .stats{width:calc(100% - 32px);grid-template-columns:1fr}
 .stat{justify-content:flex-start;padding:9px 0;border-right:0;border-bottom:1px solid var(--line)} .stat:last-child{border-bottom:0}
 .posts,.forum,.docs{grid-template-columns:1fr 1fr} .support{display:block;padding:22px}
 .support-btn{margin-top:15px} .footer-grid{grid-template-columns:1fr} .footer-bottom{display:block}
}
@media(max-width:380px){.posts,.forum,.docs{grid-template-columns:1fr}}

.stats-wrap{width:min(1320px,calc(100% - 56px));margin:-26px auto 0;position:relative;z-index:3}
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--line);
 border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.stat{display:flex;align-items:baseline;gap:9px;justify-content:center;padding:17px 14px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums}
.stat span{font-size:20px;color:var(--muted)}
@media(max-width:600px){.stats-wrap{width:calc(100% - 32px);margin-top:-18px}.stats{grid-template-columns:1fr}
 .stat{justify-content:flex-start;padding:11px 16px;border-right:0;border-bottom:1px solid var(--line)}
 .stat:last-child{border-bottom:0}}

@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]){
  --paper:#0E1614;--card:#16211E;--text:#E9F1EE;--muted:#93A8A2;--line:#25332F;
  --mint:#182C27;--green:#5FC2A5;--accent:#5FC2A5;--shadow:0 10px 30px rgba(0,0,0,.35);
 }
}
:root[data-theme="dark"]{
 --paper:#0E1614;--card:#16211E;--text:#E9F1EE;--muted:#93A8A2;--line:#25332F;
 --mint:#182C27;--green:#5FC2A5;--accent:#5FC2A5;--shadow:0 10px 30px rgba(0,0,0,.35);
}
/* кто пишет: коротко об авторе сразу под первым экраном — доверие в теме «деньги и закон» */
.avtor{margin:34px 0 0;padding:24px 28px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);max-width:900px}
.avtor h2{font:13px "PT Mono",Consolas,monospace;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 10px}
.avtor p{margin:0 0 14px;font-size:20px;line-height:1.55;max-width:70ch}
.avtor-ssylka{color:var(--green);font-weight:600}
.avtor-ssylka:hover{text-decoration:underline}

@media(max-width:600px){
 /* логотип и кнопки — в одну строку (замер на 390 пикселях) */
 .logo{font-size:20px}
 .quote{grid-template-columns:minmax(0,1fr)} .quote-main{padding:22px 20px} blockquote{font-size:21px}
}

/* Меню второй строкой — как в dnevnik.css, здешние правила шапки иначе его перебивают.
   С ним шапка поверх картинки наезжала на заголовок (телефон, он же повёрнутый, планшет —
   27.09.2026), поэтому здесь она обычная, над картинкой. */
@media(max-width:1240px){
 .nav{flex-wrap:wrap;gap:4px 12px}
 .actions{margin-left:auto}
 .navlinks{order:3;width:100%;margin:2px 0 0;font-size:17px;gap:6px 16px;flex-wrap:wrap}
 body.s-geroem .header{position:relative;background:linear-gradient(100deg,#123F35,#0C2A24)}
 .hero{padding-top:26px}
}
@media(max-width:600px){.navlinks{font-size:15px;gap:6px 12px}}