/* ============================================================
   MGM Glass - Apple Liquid Glass
   Слои: фон-свет -> стекло -> контент
   ============================================================ */

:root {
	--ink: #0a0a0c;
	--ink-soft: rgba(10, 10, 12, .62);
	--ink-faint: rgba(10, 10, 12, .40);
	--paper: #eef1f6;

	--glass-bg: rgba(255, 255, 255, .55);
	--glass-bg-strong: rgba(255, 255, 255, .72);
	--glass-edge: rgba(255, 255, 255, .85);
	--glass-shade: rgba(120, 130, 155, .18);
	--glass-blur: 28px;

	--accent: #0a84ff;
	--accent-2: #bf5af2;
	--accent-3: #30d5c8;

	--r-lg: 30px;
	--r-md: 22px;
	--r-sm: 14px;

	--shadow-soft: 0 1px 1px rgba(16, 20, 40, .04), 0 8px 24px rgba(16, 20, 40, .07), 0 30px 60px rgba(16, 20, 40, .06);
	--shadow-lift: 0 2px 2px rgba(16, 20, 40, .05), 0 16px 40px rgba(16, 20, 40, .12), 0 50px 90px rgba(16, 20, 40, .10);

	--wrap: 1180px;
	--gutter: 24px;

	--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;

	--ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink: #f4f5f9;
		--ink-soft: rgba(244, 245, 249, .68);
		--ink-faint: rgba(244, 245, 249, .44);
		--paper: #07070b;

		--glass-bg: rgba(28, 30, 42, .52);
		--glass-bg-strong: rgba(30, 32, 46, .72);
		--glass-edge: rgba(255, 255, 255, .16);
		--glass-shade: rgba(0, 0, 0, .35);

		--shadow-soft: 0 1px 1px rgba(0, 0, 0, .34), 0 10px 30px rgba(0, 0, 0, .40);
		--shadow-lift: 0 2px 3px rgba(0, 0, 0, .40), 0 20px 50px rgba(0, 0, 0, .50);
	}
}

:root[data-theme="dark"] {
	--ink: #f4f5f9;
	--ink-soft: rgba(244, 245, 249, .68);
	--ink-faint: rgba(244, 245, 249, .44);
	--paper: #07070b;

	--glass-bg: rgba(28, 30, 42, .52);
	--glass-bg-strong: rgba(30, 32, 46, .72);
	--glass-edge: rgba(255, 255, 255, .16);
	--glass-shade: rgba(0, 0, 0, .35);

	--shadow-soft: 0 1px 1px rgba(0, 0, 0, .34), 0 10px 30px rgba(0, 0, 0, .40);
	--shadow-lift: 0 2px 3px rgba(0, 0, 0, .40), 0 20px 50px rgba(0, 0, 0, .50);
}

/* ---------- база ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* световые пятна, ради которых стекло вообще имеет смысл */
.aurora {
	position: fixed;
	inset: -20vh -10vw;
	z-index: -2;
	pointer-events: none;
	filter: blur(70px) saturate(130%);
	opacity: .85;
}

.aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	mix-blend-mode: normal;
	animation: drift 26s var(--ease) infinite alternate;
}

.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: 2vh;  background: radial-gradient(circle at 30% 30%, rgba(10,132,255,.55), transparent 68%); }
.aurora span:nth-child(2) { width: 40vw; height: 40vw; right: -4vw; top: 12vh; background: radial-gradient(circle at 60% 40%, rgba(191,90,242,.45), transparent 68%); animation-delay: -8s; }
.aurora span:nth-child(3) { width: 38vw; height: 38vw; left: 28vw; bottom: -6vh; background: radial-gradient(circle at 50% 50%, rgba(48,213,200,.40), transparent 68%); animation-delay: -15s; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .aurora { opacity: .55; }
}
:root[data-theme="dark"] .aurora { opacity: .55; }

@keyframes drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(4vw, 6vh, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.aurora span { animation: none; }
	html { scroll-behavior: auto; }
}

/* зернистость: без неё стекло выглядит пластиком */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .26;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- стекло ---------- */

.glass {
	position: relative;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge);
	backdrop-filter: blur(var(--glass-blur)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}

/* блик по верхней кромке */
.glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(160deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 28%, transparent 60%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .glass::before { background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 30%, transparent 62%); }
}
:root[data-theme="dark"] .glass::before { background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 30%, transparent 62%); }

/* запасной вид там, где размытия нет */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass { background: var(--glass-bg-strong); }
	.aurora { filter: blur(90px); opacity: .5; }
}

/* ---------- раскладка ---------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: clamp(48px, 8vw, 104px); }

/* ---------- шапка ---------- */

.site-header {
	position: sticky;
	top: 12px;
	z-index: 50;
	margin: 12px auto 0;
	width: calc(100% - 2 * var(--gutter));
	max-width: var(--wrap);
	border-radius: 999px;
	padding: 10px 12px 10px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: box-shadow .4s var(--ease), background .4s var(--ease);
}

.site-header.is-stuck { box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge); }

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.brand__mark {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	flex: none;
	background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
	box-shadow: 0 4px 14px rgba(10, 132, 255, .38), inset 0 1px 0 rgba(255,255,255,.6);
}

.brand__text { font-size: 16px; }
.brand__tag { display: block; font-size: 11px; font-weight: 450; color: var(--ink-faint); letter-spacing: .02em; }

.nav { margin-left: auto; }

.nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	transition: color .25s var(--ease), background .25s var(--ease);
}

.nav a:hover { color: var(--ink); background: var(--glass-shade); }
.nav .current-menu-item > a { color: var(--ink); background: var(--glass-shade); }

/* переключатель языка */
.lang {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--glass-shade);
	list-style: none;
	margin: 0;
}

.lang li { margin: 0; }

.lang a, .lang span {
	display: block;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-faint);
	transition: all .25s var(--ease);
}

.lang a:hover { color: var(--ink); }

.lang .is-current span,
.lang .current-lang a {
	color: var(--ink);
	background: var(--glass-bg-strong);
	box-shadow: 0 1px 4px rgba(16,20,40,.10);
}

/* кнопка схемы */
.scheme {
	flex: none;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: var(--glass-shade);
	color: var(--ink-soft);
	transition: color .25s var(--ease), transform .25s var(--ease);
}

.scheme:hover { color: var(--ink); transform: scale(1.06); }
.scheme svg { width: 17px; height: 17px; }
.scheme .icon-sun { display: none; }
:root[data-theme="dark"] .scheme .icon-sun { display: block; }
:root[data-theme="dark"] .scheme .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .scheme .icon-sun { display: block; }
	:root:not([data-theme="light"]) .scheme .icon-moon { display: none; }
}

/* бургер */
.burger { display: none; }

@media (max-width: 860px) {
	.site-header { padding-left: 18px; flex-wrap: wrap; }
	.burger {
		display: grid;
		place-items: center;
		margin-left: auto;
		width: 36px; height: 36px;
		border: 0; border-radius: 999px;
		background: var(--glass-shade);
		color: var(--ink);
		cursor: pointer;
	}
	.nav {
		order: 10;
		width: 100%;
		margin-left: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height .45s var(--ease);
	}
	.nav.is-open { max-height: 70vh; }
	.nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 0 6px; }
	.nav a { padding: 11px 14px; font-size: 16px; }
}

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

.hero { padding-block: clamp(56px, 11vw, 132px) clamp(32px, 6vw, 72px); }

.hero__panel {
	padding: clamp(32px, 6vw, 72px);
	text-align: center;
	overflow: hidden;
}

.eyebrow {
	display: inline-block;
	padding: 7px 15px;
	margin-bottom: 26px;
	border-radius: 999px;
	background: var(--glass-shade);
	border: 1px solid var(--glass-edge);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

h1, .h1 {
	margin: 0;
	font-size: clamp(38px, 7.2vw, 78px);
	line-height: 1.03;
	font-weight: 680;
	letter-spacing: -.035em;
}

.hero__lead {
	margin: 24px auto 0;
	max-width: 42ch;
	font-size: clamp(17px, 2.1vw, 21px);
	line-height: 1.5;
	color: var(--ink-soft);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 34px;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 550;
	text-decoration: none;
	cursor: pointer;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

.btn--primary {
	color: #fff;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 6px 20px rgba(10, 132, 255, .35), inset 0 1px 0 rgba(255,255,255,.35);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10, 132, 255, .42), inset 0 1px 0 rgba(255,255,255,.4); }

.btn--ghost {
	color: var(--ink);
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-edge);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

/* ---------- сетка карточек ---------- */

.grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card {
	padding: 30px;
	border-radius: var(--r-md);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge); }

.card__icon {
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, rgba(10,132,255,.22), rgba(191,90,242,.18));
	border: 1px solid var(--glass-edge);
	font-size: 21px;
}

.card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 620; letter-spacing: -.015em; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

.card--post { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.card--post .card__thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.card--post .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card--post:hover .card__thumb img { transform: scale(1.04); }
.card--post .card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card--post h3 a { color: inherit; text-decoration: none; }
.card--post .meta { margin-top: auto; font-size: 13px; color: var(--ink-faint); }

/* ---------- заголовки секций ---------- */

.section__head { max-width: 62ch; margin-bottom: 38px; }
.section__head h2 { margin: 0 0 12px; font-size: clamp(27px, 4vw, 42px); line-height: 1.12; font-weight: 660; letter-spacing: -.03em; }
.section__head p { margin: 0; color: var(--ink-soft); font-size: 17px; }

/* ---------- содержимое записи ---------- */

.entry {
	padding: clamp(28px, 5vw, 60px);
	border-radius: var(--r-lg);
}

.entry__header { margin-bottom: 30px; }
.entry__header h1 { font-size: clamp(30px, 5vw, 52px); }
.entry__meta { margin-top: 14px; font-size: 14px; color: var(--ink-faint); }

.entry__content { font-size: 17.5px; line-height: 1.72; }
.entry__content > * + * { margin-top: 1.15em; }
.entry__content h2 { font-size: clamp(23px, 3.4vw, 32px); font-weight: 640; letter-spacing: -.024em; margin-top: 1.8em; }
.entry__content h3 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 620; letter-spacing: -.018em; margin-top: 1.5em; }
.entry__content a { color: var(--accent); text-underline-offset: 3px; }
.entry__content img { max-width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.entry__content blockquote {
	margin: 1.6em 0;
	padding: 20px 26px;
	border-left: 3px solid var(--accent);
	border-radius: var(--r-sm);
	background: var(--glass-shade);
	font-size: 18px;
}
.entry__content pre {
	padding: 20px;
	border-radius: var(--r-sm);
	overflow-x: auto;
	background: var(--glass-shade);
	font-size: 14px;
}
.entry__content code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: .92em; }
.entry__content ul, .entry__content ol { padding-left: 1.3em; }
.entry__content li + li { margin-top: .4em; }
.entry__content table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.entry__content th, .entry__content td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--glass-shade); }

.wp-caption-text, figcaption { font-size: 13.5px; color: var(--ink-faint); text-align: center; margin-top: 8px; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- страничная навигация ---------- */

.pager { display: flex; gap: 10px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.pager .page-numbers {
	display: grid; place-items: center;
	min-width: 42px; height: 42px; padding: 0 14px;
	border-radius: 999px;
	text-decoration: none; font-size: 15px; font-weight: 550;
	color: var(--ink-soft);
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: all .25s var(--ease);
}
.pager .page-numbers:hover { color: var(--ink); transform: translateY(-2px); }
.pager .page-numbers.current { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }

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

.site-footer { margin: 60px auto 26px; }

.footer__panel {
	padding: clamp(28px, 4.5vw, 46px);
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: center;
	justify-content: space-between;
}

.footer__brand { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.footer__nav a { padding: 7px 13px; border-radius: 999px; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; transition: all .25s var(--ease); }
.footer__nav a:hover { color: var(--ink); background: var(--glass-shade); }
.footer__legal { width: 100%; padding-top: 22px; border-top: 1px solid var(--glass-shade); font-size: 13.5px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------- появление при скролле ---------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- прочее ---------- */

.searchform { display: flex; gap: 8px; }
.searchform input[type="search"] {
	flex: 1;
	padding: 12px 18px;
	border-radius: 999px;
	border: 1px solid var(--glass-edge);
	background: var(--glass-bg);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.searchform input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.notice { padding: 34px; border-radius: var(--r-md); text-align: center; color: var(--ink-soft); }

/* админ-панель WordPress не должна прятать шапку */
.admin-bar .site-header { top: 44px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 58px; } }