/* БАЗА: корневые переменные и сброс */
    :root{
		--bg:#0f1222;
		--bg-2:#151834;
		--panel:#1b1f3f;
		--accent:#ff5f6d;
		--accent-2:#30cfd0;
		--text:#eef2ff;
		--muted:#bbc3ff;
		--shadow:0 10px 24px rgba(0,0,0,.25);
		--radius:16px;
		--gap:20px;
		--section-gap:28px;
		--maxw:1200px;
    }
	
    *{box-sizing:border-box}
	html,body{margin:0;padding:0;background:linear-gradient(135deg,#0e1020,#1a1f44);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
	img{max-width:100%;height:auto;display:block}
	a{color:inherit;text-decoration:none}
	.wrap{max-width:var(--maxw);margin:0 auto;padding:10px 16px 64px}

/* ШАПКА, ЛОГО, ФИКС-МЕНЮ */
    .site-header{
		position:sticky; top:0; z-index:1000;
		background:rgba(21,24,52,.85);
		backdrop-filter: blur(8px);
		border-bottom:1px solid rgba(255,255,255,.08);
    }
    .site-header__inner{
		max-width:var(--maxw); margin:0 auto;
		display:flex; align-items:center; gap:16px;
		padding:10px 16px;
    }
    .brand{
		display:flex; align-items:center; gap:12px; min-width:0;
    }
    .brand__logo{
      width: 50px;
      height: 50px;
      border-radius: 25%;
      background-image: url('logo.jpg');
      background-size: cover;   /* масштабируем картинку по размеру блока */
      background-position: center; /* центрируем изображение внутри блока */
      box-shadow: 0 4px 12px rgba(255, 95, 109, .4),
               inset 0 0 12px rgba(48, 207, 208, .5);    
    flex: 0 0 50px;
    }
    .brand__name{
		font-size:25px; letter-spacing:.3px; white-space:nowrap;
    }
    .nav{
		margin-left:auto; display:flex; align-items:center; gap:8px;
    }
    .nav__list{display:flex; gap:8px; list-style:none; margin:0; padding:0;}
    .nav__link{
		display:block; padding:10px 14px; border-radius:999px;
		background:transparent; color:var(--text);
		transition:.2s ease;
    }
    .nav__link:hover{background:rgba(255,255,255,.08)}
    .nav__link--primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0f22}
    .nav__toggle{display:none; background:none; border:0; color:var(--text); font-size:20px; padding:8px 10px; border-radius:8px}
    .nav__toggle:focus{outline:2px solid var(--accent-2); outline-offset:2px}
    @media (max-width:800px){
		.nav__list{display:none; position:absolute; right:16px; top:60px; flex-direction:column; background:var(--bg-2); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px; box-shadow:var(--shadow)}
		.nav__list.is-open{display:flex}
		.nav__toggle{display:block}
    }

/* ОБЩИЙ КОНТЕЙНЕР ДЛЯ ВЕРТИКАЛЬНЫХ БЛОКОВ */
    .stack{display:flex; flex-direction:column; gap:var(--section-gap)}
    .block{
		background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
		border:1px solid rgba(255,255,255,.08);
		border-radius:var(--radius);
		box-shadow:var(--shadow);
		overflow:hidden;
    }
    .block__inner{padding:24px}
    .block h2{margin:0 0 12px; font-size:28px; line-height:1.2}
    .block p{margin:0; color:var(--muted)}

    /* 1) Заголовок + картинка, вертикально, центр */
    .b1 .block__inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
	.b1 .hero-img{width:min(900px,100%); border-radius:12px; overflow:hidden}
    .b1 .hero-img img{width:100%; height:auto}

    /* 2) Заголовок + короткий текст по всей ширине, центр */
    .b2 .block__inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
    .b2 p{width:100%;}

    /* 3) Заголовок+текст слева, вертикально; картинка справа; выравнивание по левому краю; вертикаль — верх */
    .b3 .block__inner{display:flex; align-items:flex-start; gap:20px}
    .b3 .col-text{flex:1 1 65%; min-width:260px}
    .b3 .col-media{flex:1 1 35%; min-width:10px; display:flex; justify-content:flex-end}
    .b3 .col-media img{border-radius:12px}
    .b3 h2, .b3 p{text-align:left}

    /* 4) Заголовок + короткий текст, вертикально, по левому краю, на всю ширину */
    .b4 .block__inner{display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:12px}
    .b4 p{width:100%; text-align:left}

    /* 5) Заголовок+текст справа вертикально; картинка слева; выравнивание по правому краю блока; текст выровнен по левому краю; вертикаль — верх */
    .b5 .block__inner{display:flex; align-items:flex-start; gap:20px; justify-content:space-between}
    .b5 .col-media{flex:1 1 50%; min-width:260px; display:flex; justify-content:flex-start}
    .b5 .col-media img{max-width:520px; border-radius:12px}
    .b5 .col-text{flex:1 1 50%; min-width:260px; display:flex; flex-direction:column; align-items:flex-end; text-align:right}
    .b5 .col-text .content{max-width:40ch; text-align:left}
    .b5 h2{margin-bottom:8px}
    @media (max-width:900px){
		.b3 .block__inner, .b5 .block__inner, .b9 .block__inner{flex-direction:column}
		.b5 .col-text{align-items:flex-start; text-align:left}
    }

    /* 6) Грид баннеров-ccылок, фиксированная ширина, перенос */
    .b6 .block__inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
    .ads-grid{
		display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
		width:100%;
    }
    .ad-card{
		display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
		width:calc((min(100%, var(--maxw)) - 2*16px - 2*16px)/3); /* примерно 3 в ряд на широком экране */
		max-width:340px; min-width:220px;
		background:rgba(255,255,255,.04);
		border:1px solid rgba(255,255,255,.08);
		border-radius:12px; padding:14px; gap:10px;
		transition: transform .15s ease, background .2s ease, border-color .2s ease;
    }
    .ad-card:hover{transform:translateY(-3px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}
    .ad-card img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px}

    /* 7) Контакты: три вертикальных блока, слева круглый аватар */
    .b7 .block__inner{display:flex; flex-direction:column; gap:14px}
    .contact{
		display:flex; align-items:flex-start; gap:14px; text-align:left;
		background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.08);
		border-radius:12px; padding:12px;
    }
    .contact__avatar{
		width:56px; height:56px; border-radius:50%; overflow:hidden; flex:0 0 56px; border:2px solid rgba(255,255,255,.2)
    }
    .contact__body{display:flex; flex-direction:column; gap:4px}
    .contact__name{font-weight:700}
    .contact__meta{color:var(--muted); font-size:14px}

    /* 8) Ненумерованный список с произвольным маркером (*) */
    .b8 .block__inner{display:flex; flex-direction:column; gap:10px}
    .fancy-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
    .fancy-list li{display:flex; align-items:flex-start; gap:8px}
    .fancy-list li::before{content:"✦"; color:var(--accent-2); font-weight:800; margin-top:0}

    /* 9) Заголовок+текст слева, блок картинок справа, 50/50, 2×2 картинки */
    .b9 .block__inner{display:flex; align-items:flex-start; gap:20px}
    .b9 .col-text, .b9 .col-gallery{flex:1 1 50%; min-width:260px}
    .gallery-2x2{
		display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:10px;
    }
    .gallery-2x2 img{
		width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
    }

    /* 10) Картинка на всю ширину, поверх — белый текст */
    .b10 .block__inner{padding:0; position:relative}
    .b10 .banner{
		position:relative; width:100%; min-height:100px; background:#000; display:block;
    }
    .b10 .banner img{width:100%; height:100%; object-fit:cover; display:block; opacity:.9}
    .b10 .banner__text{
		position:absolute; inset:auto 0 0 0; padding:24px;
		color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6);
		font-size:28px; font-weight:800;
		background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.65) 100%);
    }

    /* Декоративные детали */
    .tag{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; color:#0b0f22; background:linear-gradient(135deg,var(--accent),var(--accent-2));}
    .muted{color:var(--muted)}