body{
    margin:0;
    font-family: Vollkorn, "Arial", serif;
    background:#0f1116;
    color:#8f99a7; /*#e6e6e6;*/
    line-height:1.6;
}

/* Центральная колонка */
.wrapper{
    max-width:820px;
    margin:auto;
    padding:15px;
}

/* Баннер */
.banner{
    height:300px;
    background:url("images/banner.jpg") center/cover no-repeat;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.15);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    position:relative;
    overflow:hidden;
}

/* Лёгкое затемнение, чтобы текст читался (можешь убрать, если не надо) */
.banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.30),
        rgba(0,0,0,0.20)
    );
    pointer-events:none;
}

/* Текст поверх затемнения */
.banner h1,
.banner p{
    position:relative;
    z-index:1;
}

.banner h1{
    margin:0;
    font-size:38px;
    letter-spacing:1px;
/*    color:#ffffff;*/color: #f2f4f8;
	font-weight:normal;
	line-height:1.05;
    /* лёгкое свечение вместо обводки 
    text-shadow:
        0 2px 6px rgba(0,0,0,0.9),
        0 0 12px rgba(0,0,0,0.6);*/
}

.banner p{
    margin:4px 0 0;
    color:#f0f0f0;
    font-weight:normal;
	font-size:18px;
	line-height:1.05;
    /*text-shadow:
        0 1px 4px rgba(0,0,0,0.85);*/
}

/* Меню */
.menu{
    display:flex;
    gap:10px;
    margin-top:15px;
    flex-wrap:wrap;
}

.menu a{
    padding:1px 11px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    text-decoration:none;
    color:#ddd;
	transition: all 0.2s ease;
    background:#151922;
}

.menu a:hover{
	border-color: rgba(160,190,255,0.6);
    background: rgba(120,150,220,0.08);
    color: #cfe1ff;
/*    background:#1d2430;*/
}

.menu a.active{
    background:#243041;
    border-color:#6e8fbf;
    color:#ffffff;
    box-shadow:0 0 6px rgba(110,143,191,.6);
}

/* Карточки */
.card{
    margin-top:15px;
    padding:20px;
	background:#141822;
    border-radius:6px;
    border:1px solid rgba(140, 170, 220, 0.15);
}

.card h2{
    margin-top:0;
    font-weight:normal;
	color: #b5c1d6;
	text-shadow: 0 0 6px rgba(199,176,138,0.08);
}

/* Истории / блоки */
/*.story{
    margin:12px 0;
    padding:10px;
    border-left:3px solid #6e8fbf;
}*/
.story{
    position:relative;
    margin:14px 0;
    padding:6px 10px 6px 22px;
}

.story strong{
    color:#b5c1d6;        /* заголовок — чуть светлее */
    font-weight:bold;
}

.story br + text,
.story span{
    color:#8f99a7;
}
.story a{
    color:#8e949d;
    text-decoration:none;
    font-size:18px;
}

.story a:hover{
    text-decoration:underline;
}
.story::before{
    content:"•";
    position:absolute;
    left:6px;
    top:10px;
    color:#b5c1d6;      /* цвет точки */
    font-size:18px;
    line-height:1;
}

/* Картинки */
img{
    max-width:100%;
    border-radius:10px;
    margin:12px 0;
}

.muted{
    color:#b7bfd0;
}

/* Мобильная версия */
@media(max-width:600px){
    .banner{
        height:auto;
        padding:35px 15px;
        min-height:180px;   /* одинаковый минимум для всех страниц */
    }
    .banner h1{
        font-size:28px;
    }
	.banner p{
        font-size:16px;
        margin-top:2px;
    }
}

html{
    overflow-y: scroll;
	scroll-behavior:smooth;
}

.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:999;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}

/* --- Особенности: читаемая типографика --- */
.card.features .story{
    margin:5px 0;
    padding:10px 14px 10px 30px;

    font-size:18px;          /* было мелко */
    line-height:1.7;         /* книжная читаемость */
}

.card.features .story::before{
    left:12px;
    top:15px;
}

.card.features .story strong{
    display:block;
    margin:0 0 8px 0;

    font-size:18px;          /* делает акцент */
    font-weight:500;         /* Vollkorn лучше выглядит на 600 */
/*    letter-spacing:0.2px;*/

    color:#b5c1d6;
}

.card.features .story span{
    display:block;

    font-size:17px;          /* ↑ читаемость */
    color:#8f99a7;           /* чуть светлее, меньше «грязи» */
    line-height:1.3;         /* эффект книжной строки */

    max-width:65ch;          /* комфортная длина строки */
}

@font-face {
    font-family: 'Vollkorn';
    src: url('/fonts/Vollkorn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('/fonts/Vollkorn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('/fonts/Vollkorn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.card ul{
    margin: 6px 0 14px 22px;
    padding: 0;
}

.card li{
    margin: 4px 0;
    color:#8f99a7;
}

.quicknav{
    padding:14px 18px;
}

.quicklinks{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
}

.quicklinks a{
    padding:1px 3px;
    border:1px solid rgba(140,170,220,0.25);
    border-radius:4px;
    text-decoration:none;
    color:#b5c1d6;
    background:#151922;
    transition:all .2s ease;
    font-size:14px;
}

.quicklinks a:hover{
    border-color:rgba(160,190,255,.6);
    color:#e6edf7;
    background:rgba(120,150,220,.08);
}

a{
    color:#9fb4d6;              /* мягкий, "встроенный" в гамму цвет */
    text-decoration:none;
    transition:color 0.2s ease;
}

a:hover{
    color:#cfe1ff;
    text-decoration:underline;
}