/* ==========================================================================
   Avangard RP · лендинг проекта
   --------------------------------------------------------------------------
   Палитра — один в один из темы форума (css/global.css, блок :root).

   КАРТИНКИ. Все слоты берутся из папки media/ по фиксированным именам —
   достаточно положить файл, разметку менять не нужно:

     media/logo.png          512×512    логотип в шапке и подвале (.png, квадратный)
     media/hero.jpg          1920×1080   фон первого экрана
     media/about.jpg         1200×900    блок «О проекте»
     media/role-police.jpg    800×600    Полиция
     media/role-gangs.jpg     800×600    Банды
     media/role-jobs.jpg      800×600    Работы
     media/role-tuning.jpg    800×600    Авто и тюнинг
     media/step-1.jpg         800×600    шаг 1 — аккаунт
     media/step-2.jpg         800×600    шаг 2 — клиент и подключение
     media/step-3.jpg         800×600    шаг 3 — персонаж
     media/cta.jpg           1920×600    фон финального блока

   Файлы необязательны: если картинки нет, показывается градиент, «битых»
   изображений не будет. Что уже загружено — смотрите в media-check.html.
   ========================================================================== */

:root {
	/* Фоны */
	--ad-bg: #141414;
	--ad-bg-soft: #222222;
	--ad-block: #222222;
	--ad-block-head: #1a1a1a;
	--ad-bar: #161616;
	--ad-hover: #353535;

	/* Границы */
	--ad-border: #1b1b1b;
	--ad-border-soft: #202020;

	/* Текст */
	--ad-text: #dadada;
	--ad-text-strong: #fafafa;
	--ad-muted: #a8a8a8;
	--ad-faint: #797979;

	/* Голубой акцент */
	--ad-link: #57a9f6;
	--ad-link-hover: #8ac9ff;
	--ad-accent: #2c8fe6;
	--ad-accent-dark: #1b6bbd;
	--ad-accent-light: #6bbbff;

	/* Статусы */
	--ad-green: #43b070;
	--ad-red: #e05a5a;
	--ad-amber: #e0a53a;

	/* Геометрия */
	--ad-max: 1200px;
	--ad-radius: 4px;
	--ad-radius-sm: 2px;
	--ad-shadow: 0 2px 8px rgba(0, 0, 0, .40);
	--ad-gradient: linear-gradient(180deg, var(--ad-accent-light) 0%, var(--ad-accent) 50%, var(--ad-accent-dark) 100%);
	--ad-font: 'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;

	/* Только для лендинга */
	--avd-glow: rgba(44, 143, 230, .35);
	--avd-glow-soft: rgba(44, 143, 230, .12);
	--avd-cta: linear-gradient(180deg, var(--ad-accent-dark) 0%, #14507f 100%);
	--avd-mono: 'Consolas', 'SFMono-Regular', 'Menlo', 'Liberation Mono', monospace;
	--avd-radius-lg: 6px;
	--avd-section: 76px;
	--avd-photo: linear-gradient(140deg, #1e1e1e 0%, #101010 100%);

	/* --- Слоты изображений (файлы в media/) --- */
	--img-logo: url('media/logo.png');
	--img-hero: url('media/hero.jpg');
	--img-about: url('media/about.jpg');
	--img-role-police: url('media/role-police.jpg');
	--img-role-gangs: url('media/role-gangs.jpg');
	--img-role-jobs: url('media/role-jobs.jpg');
	--img-role-tuning: url('media/role-tuning.jpg');
	--img-step-1: url('media/step-1.jpg');
	--img-step-2: url('media/step-2.jpg');
	--img-step-3: url('media/step-3.jpg');
	--img-cta: url('media/cta.jpg');
}
/* --- база ---------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--ad-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ad-text);
	background: var(--ad-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--ad-text-strong); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--ad-link); text-decoration: none; }
a:hover { color: var(--ad-link-hover); }
b, strong { color: var(--ad-text-strong); }
code { font: 12px/1.4 var(--avd-mono); }

.wrap { width: 100%; max-width: var(--ad-max); margin: 0 auto; padding: 0 20px; }

.skip { position: absolute; left: -9999px; top: 0; padding: 10px 14px; background: var(--ad-accent); color: #fff; }
.skip:focus { left: 10px; top: 10px; z-index: 100; }
:focus-visible { outline: 2px solid var(--ad-accent-light); outline-offset: 2px; }

/* --- кнопки -------------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px;
	font: 600 13px/1 var(--ad-font);
	color: #fff;
	background: var(--ad-block);
	border: 1px solid var(--ad-border-soft);
	border-radius: var(--ad-radius);
	cursor: pointer;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .30);
	transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); color: #fff; }

.btn-accent {
	background-color: var(--ad-accent-dark);
	background-image: var(--avd-cta);
	border-color: #14507f;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -14px var(--avd-glow);
}

.btn-line { background: transparent; border-color: var(--ad-border-soft); color: var(--ad-text); }
.btn-line:hover { border-color: var(--ad-accent); color: var(--ad-text-strong); }

.btn-glass {
	background: rgba(20, 20, 20, .55);
	border-color: rgba(255, 255, 255, .18);
	color: var(--ad-text-strong);
	backdrop-filter: blur(6px);
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--ad-muted); }
.btn-ghost:hover { color: var(--ad-text-strong); background: var(--ad-hover); }

.btn-lg { padding: 13px 22px; font-size: 14px; }
.btn-xl { padding: 16px 30px; font-size: 15px; letter-spacing: .02em; }
.btn-sm { padding: 8px 14px; font-size: 12px; }
/* --- шапка --------------------------------------------------------------- */

.nav {
	position: sticky; top: 0; z-index: 60;
	background: rgba(20, 20, 20, .5);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: background-color .2s ease, border-color .2s ease;
}
.nav.is-scrolled { background: rgba(20, 20, 20, .95); border-bottom-color: var(--ad-border); }

.nav-inner { display: flex; align-items: center; gap: 22px; height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ad-text-strong); }
.logo:hover { color: var(--ad-text-strong); }

/* Логотип проекта: файл media/logo.png (512×512, квадратный, прозрачный фон).
   Плашка квадратная и без цветной подложки — логотип рисуется сам, фон под ним
   прозрачный. Если файла нет, на месте логотипа остаётся пустое место. */
.logo-mark {
	width: 34px; height: 34px;
	background-image: var(--img-logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.logo-text { font-weight: 700; font-size: 18px; letter-spacing: .07em; }
.logo-text em { font-style: normal; color: var(--ad-accent-light); }

.nav-links { display: flex; align-items: center; gap: 20px; margin-left: 10px; }
.nav-links a { color: var(--ad-text); font-size: 14px; opacity: .85; }
.nav-links a:hover { opacity: 1; color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.burger { display: none; width: 38px; height: 34px; padding: 7px 8px; background: transparent; border: 1px solid var(--ad-border-soft); border-radius: var(--ad-radius); cursor: pointer; }
.burger span { display: block; height: 2px; margin: 4px 0; background: var(--ad-muted); }
.burger[aria-expanded="true"] span { background: var(--ad-accent-light); }

.nav-mobile { display: none; flex-direction: column; padding: 6px 20px 16px; background: rgba(20, 20, 20, .97); border-top: 1px solid var(--ad-border); }
.nav-mobile a { padding: 12px 0; color: var(--ad-text); border-bottom: 1px solid var(--ad-border); }
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile.is-open { display: flex; }
.nav-mobile-cta { color: var(--ad-accent-light) !important; font-weight: 600; }

/* --- первый экран -------------------------------------------------------- */

.hero { position: relative; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--ad-border); }

.hero-bg {
	position: absolute; inset: 0;
	background-color: #101010;
	background-image: var(--img-hero);
	background-size: cover;
	background-position: center 38%;
}

.hero-fade {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(20, 20, 20, .5) 0%, rgba(20, 20, 20, .66) 50%, var(--ad-bg) 100%),
		radial-gradient(95% 80% at 15% 45%, rgba(20, 20, 20, .88) 0%, rgba(20, 20, 20, .25) 72%);
}

.hero-inner { position: relative; z-index: 1; padding: 104px 20px 80px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	margin-bottom: 18px;
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ad-text);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ad-green); box-shadow: 0 0 0 0 rgba(67, 176, 112, .55); animation: pulse 2.4s infinite; }

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(67, 176, 112, .55); }
	70% { box-shadow: 0 0 0 9px rgba(67, 176, 112, 0); }
	100% { box-shadow: 0 0 0 0 rgba(67, 176, 112, 0); }
}

.hero-title { max-width: 15ch; font-size: 64px; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 2px 22px rgba(0, 0, 0, .6); }

.hl { background-image: var(--ad-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-lead { max-width: 52ch; margin-top: 20px; font-size: 17px; color: var(--ad-text); text-shadow: 0 1px 8px rgba(0, 0, 0, .75); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.ip-bar {
	display: inline-flex; align-items: center; gap: 12px;
	margin-top: 26px; padding: 9px 12px 9px 16px;
	background: rgba(16, 16, 16, .72);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ad-radius);
	backdrop-filter: blur(6px);
}
.ip-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-muted); }
.ip-bar code { font: 14px/1 var(--avd-mono); color: var(--ad-text-strong); }

.hero-hint { max-width: 64ch; margin-top: 16px; font-size: 13px; color: var(--ad-muted); }
.hero-hint.is-ok { color: var(--ad-green); }
/* --- полоса фактов ------------------------------------------------------- */

.strip { background: var(--ad-bar); border-bottom: 1px solid var(--ad-border); }
.strip-inner { display: flex; flex-wrap: wrap; gap: 10px 40px; padding: 13px 20px; }
.strip-inner p { font-size: 13px; color: var(--ad-text); }
.strip-k { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ad-muted); }

/* --- секции -------------------------------------------------------------- */

.section { padding: var(--avd-section) 0; }
.section-alt { background: var(--ad-bg-soft); border-top: 1px solid var(--ad-border); border-bottom: 1px solid var(--ad-border); }
.section-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 36px; }
.section-head h2 { font-size: 34px; }

.section-num {
	flex: 0 0 auto; padding: 3px 9px;
	font: 12px/1.5 var(--avd-mono);
	color: var(--ad-accent-light);
	background: var(--avd-glow-soft);
	border: 1px solid var(--ad-border-soft);
	border-radius: var(--ad-radius-sm);
}

.section-lead { max-width: 68ch; margin-top: 10px; font-size: 15px; color: var(--ad-muted); }

/* --- о проекте ----------------------------------------------------------- */

.about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: center; }

.about-photo {
	min-height: 380px;
	background-color: #101010;
	background-image: var(--img-about), var(--avd-photo);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--ad-border);
	border-radius: var(--ad-radius-lg);
	box-shadow: var(--ad-shadow);
}

.about-text h2 { margin-top: 12px; font-size: 34px; }
.about-lead { margin-top: 14px; font-size: 16px; color: var(--ad-text); }
.about-text p + p { margin-top: 12px; font-size: 15px; color: var(--ad-muted); }

.about-list { display: grid; gap: 8px; margin-top: 22px; }
.about-list li {
	display: flex; flex-direction: column;
	padding: 12px 14px;
	background: var(--ad-block);
	border: 1px solid var(--ad-border);
	border-left: 2px solid var(--ad-accent);
	border-radius: var(--ad-radius);
}
.about-list b { font-size: 14px; }
.about-list span { font-size: 13px; color: var(--ad-muted); }

/* --- роли и фракции ------------------------------------------------------ */

.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.role {
	display: flex; flex-direction: column;
	background: var(--ad-block-head);
	border: 1px solid var(--ad-border);
	border-radius: var(--ad-radius-lg);
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.role:hover { border-color: var(--ad-accent-dark); transform: translateY(-2px); }

.role-media {
	position: relative;
	min-height: 168px;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--ad-border);
}
.role-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, .04) 45%, rgba(20, 20, 20, .82) 100%);
}

.role-body { position: relative; padding: 15px 18px 18px; }
.role-body h3 { margin: 10px 0 6px; font-size: 19px; }
.role-body p { font-size: 13px; color: var(--ad-muted); }

.role-tag {
	display: inline-block; padding: 3px 8px;
	font: 600 11px/1.5 var(--ad-font);
	letter-spacing: .06em; text-transform: uppercase;
	border-radius: var(--ad-radius-sm);
	border: 1px solid transparent;
}
.role-tag--gov { color: #9fd0ff; background: rgba(44, 143, 230, .16); border-color: rgba(44, 143, 230, .35); }
.role-tag--crime { color: #ff9c9c; background: rgba(224, 90, 90, .14); border-color: rgba(224, 90, 90, .32); }
.role-tag--work { color: #ffd79a; background: rgba(224, 165, 58, .14); border-color: rgba(224, 165, 58, .32); }
.role-tag--life { color: #a7e6c2; background: rgba(67, 176, 112, .14); border-color: rgba(67, 176, 112, .32); }

/* слоты картинок ролей — файлы в media/ */
.role--police .role-media { background-image: var(--img-role-police), var(--avd-photo); }
.role--gangs .role-media { background-image: var(--img-role-gangs), var(--avd-photo); }
.role--jobs .role-media { background-image: var(--img-role-jobs), var(--avd-photo); }
.role--tuning .role-media { background-image: var(--img-role-tuning), var(--avd-photo); }
/* --- шаги ---------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.step {
	display: flex; flex-direction: column;
	background: var(--ad-block);
	border: 1px solid var(--ad-border);
	border-radius: var(--ad-radius-lg);
	overflow: hidden;
}

.step-media {
	position: relative;
	min-height: 150px;
	background-color: #101010;
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--ad-border);
}
.step-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, .04) 50%, rgba(20, 20, 20, .78) 100%);
}

.step-media--1 { background-image: var(--img-step-1), var(--avd-photo); }
.step-media--2 { background-image: var(--img-step-2), var(--avd-photo); }
.step-media--3 { background-image: var(--img-step-3), var(--avd-photo); }

.step-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.step-num { font: 700 13px/1 var(--avd-mono); letter-spacing: .1em; color: var(--ad-accent-light); }
.step-body h3 { margin: 10px 0 8px; font-size: 19px; }
.step-body p { font-size: 14px; color: var(--ad-muted); }

.step-link { margin-top: auto; padding-top: 14px; font: 600 13px/1.5 var(--ad-font); color: var(--ad-link); }
.step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }

/* --- новости ------------------------------------------------------------- */

.news { display: grid; gap: 10px; }
.news-state { font-size: 13px; color: var(--ad-muted); }
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.news-item {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px 20px;
	background: var(--ad-block);
	border: 1px solid var(--ad-border);
	border-radius: var(--ad-radius);
	transition: border-color .15s ease, background-color .15s ease;
}
.news-item:hover { border-color: var(--ad-accent-dark); background: var(--ad-block-head); }
.news-item h3 { font-size: 16px; font-weight: 600; }
.news-item h3 a { color: var(--ad-text-strong); }
.news-item h3 a:hover { color: var(--ad-link-hover); }
.news-item time { font: 12px/1.4 var(--avd-mono); color: var(--ad-muted); }
.news-item p { font-size: 13px; color: var(--ad-muted); }
.news-actions { margin-top: 18px; }

/* --- правила ------------------------------------------------------------- */

.faq { display: grid; gap: 8px; }
.faq details { background: var(--ad-block); border: 1px solid var(--ad-border); border-radius: var(--ad-radius); }
.faq details[open] { border-color: var(--ad-border-soft); }

.faq summary {
	position: relative;
	padding: 16px 46px 16px 18px;
	font-size: 15px; font-weight: 600; color: var(--ad-text-strong);
	cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font: 18px/1 var(--avd-mono); color: var(--ad-accent-light);
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding: 0 18px 16px; font-size: 14px; color: var(--ad-muted); }

.rules-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* --- финальный блок ------------------------------------------------------ */

.cta { position: relative; overflow: hidden; padding: 74px 0; border-top: 1px solid var(--ad-border); }

.cta-bg {
	position: absolute; inset: 0;
	background-color: #101010;
	background-image: var(--img-cta), var(--avd-photo);
	background-size: cover;
	background-position: center 40%;
}
.cta-bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(16, 16, 16, .93) 0%, rgba(16, 16, 16, .72) 55%, rgba(16, 16, 16, .5) 100%);
}

.cta-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.cta h2 { font-size: 32px; }
.cta p { margin-top: 8px; font-size: 16px; color: var(--ad-text); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- подвал -------------------------------------------------------------- */

.footer { padding: 48px 0 24px; background: var(--ad-bar); border-top: 1px solid var(--ad-border); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
.footer-brand .logo-mark { width: 30px; height: 30px; }
.footer-brand p { margin-top: 14px; font-size: 13px; color: var(--ad-muted); max-width: 46ch; }

.socials { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.socials a { font-size: 13px; color: var(--ad-link); }

.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ad-muted); font-weight: 600; }
.footer-col a { font-size: 14px; color: var(--ad-muted); }
.footer-col a:hover { color: var(--ad-text-strong); }

.footer-bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
	margin-top: 36px; padding-top: 18px;
	border-top: 1px solid var(--ad-border);
}
.footer-bottom p { font-size: 12px; color: var(--ad-muted); max-width: 76ch; }

/* --- адаптив ------------------------------------------------------------- */

@media (max-width: 1080px) {
	.hero-title { font-size: 52px; }
	.about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.about-photo { min-height: 300px; }
	.roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.nav-links { display: none; }
	.burger { display: inline-block; }
	.nav-actions .btn-ghost { display: none; }
	.section { padding: 56px 0; }
	.section-head h2 { font-size: 27px; }
	.hero-title { font-size: 42px; }
	.hero-inner { padding: 72px 20px 60px; }
	.news-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
	body { font-size: 14px; }
	.hero-title { font-size: 34px; }
	.hero-lead { font-size: 15px; }
	.hero-actions .btn { width: 100%; }
	.ip-bar { width: 100%; flex-wrap: wrap; gap: 8px; }
	.roles { grid-template-columns: minmax(0, 1fr); }
	.cta h2 { font-size: 26px; }
	.cta-actions { width: 100%; }
	.cta-actions .btn { width: 100%; }
	.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

	.nav-inner { gap: 12px; padding-left: 14px; padding-right: 14px; height: 60px; }
	.nav-actions { gap: 6px; }
	.nav-actions .btn { padding: 9px 12px; font-size: 12px; }
	.logo-text { font-size: 15px; }
	.logo-mark { width: 28px; height: 28px; }
	.burger { width: 34px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}