/* =========================================================
   THEME (dark + purple accents)
========================================================= */
:root{
	--maxw: var(--wp--style--global--wide-size, 1200px);
	--gap: 32px;
	--radius: 14px;
	--shadow: 0 10px 30px rgba(0,0,0,.35);

	/* colors */
	--bg: #0f1115;
	--surface: #161a22;   /* header/footer surface */
	--surface-2: #0c0f14; /* cards */
	--text: #e6e8ee;
	--muted: #a8afbf;

	/* purple accents */
	--accent: #BB00FF;
	--accent-hover: #B100FF;
	--accent-glow: rgba(139,92,246,.5);
}

/* =========================================================
   GLOBAL
========================================================= */
html, body{ background: var(--bg); color: var(--text); }
img{ max-width: 100%; height: auto; }

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: none; }

a:focus-visible,
.ch-btn:focus-visible{
	outline: 2px solid #a78bfa;
	outline-offset: 3px;
	border-radius: 12px;
}

.ch-container{
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 16px;
}

/* =========================================================
   HEADER
========================================================= */
.ch-header{
	width: 100%;
	background: var(--surface);
	position: relative;
	box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.ch-header::after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px; height: 3px;
	background: linear-gradient(90deg, #6d28d9, #a78bfa);
	opacity: .9;
}
.ch-header__inner{
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 18px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ch-header__logo img{
	height: 48px; width: auto; display: block;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.4));
}
.ch-header__cta{
	display: inline-block;
	padding: 10px 18px;
	border-radius: 12px;
	background: var(--accent);
	color: #fff;
	font-weight: 800;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
	box-shadow: 0 8px 24px var(--accent-glow);
}
.ch-header__cta:hover{ background: var(--accent-hover); transform: translateY(-1px); }

/* =========================================================
   PAGE TITLE / EXCERPT
========================================================= */
.ch-title{
	margin: 20px 0 16px;
	font-weight: 800;
	font-size: clamp(28px,4vw,44px);
	line-height: 1.15;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.lp-excerpt{ background: transparent; padding: 16px 0 6px; }
.lp-excerpt__inner{ color: var(--muted); font-size: 18px; line-height: 1.6; }

/* =========================================================
   HERO (centered)
========================================================= */
.section-hero{
	margin: 8px auto 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hero-card{
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--surface-2);
	max-width: 100%;
}
.hero-card img{ display: block; width: 100%; height: auto; opacity: .98; }

.hero-cta{
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	display: inline-block;
	padding: 28px 50px;
	border-radius: 16px;
	background: var(--accent);
	color: #fff;
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
	box-shadow: 0 12px 36px var(--accent-glow);
	animation: heroPulse 2.6s ease-in-out infinite;
	transition: background .15s ease, transform .15s ease;
}
.hero-cta:hover{ background: var(--accent-hover); transform: translate(-50%,-51%) scale(1.02); }

@keyframes heroPulse{
	0%{   transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); }
	50%{  transform: translate(-50%,-50%) scale(1.06); box-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(139,92,246,.35); }
	100%{ transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); }
}

/* =========================================================
   PROS / CONS
========================================================= */
.pros-cons{ margin: 28px auto 48px; }
.pros-cons__grid{ display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width:860px){
	.pros-cons__grid{ grid-template-columns: 1fr 1fr; }
}

.quote-card{
	background: var(--surface-2);
	border-radius: 16px;
	padding: 18px 18px 20px;
	box-shadow: var(--shadow);
	border: 1px solid rgba(255,255,255,.06);
	position: relative;
}
.quote-card::before{
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	border-radius: 16px 0 0 16px;
	background: linear-gradient(180deg, #6d28d9, #a78bfa);
}
.quote-card__title{ margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #fff; }
.quote-card__content{ color: var(--muted); line-height: 1.7; }

.pc-list{
	margin: 0; padding-left: 0;
	list-style: none;
	display: grid; gap: 8px;
}
.pc-list li{ position: relative; padding-left: 22px; }
.pc-list li::before{
	content: "";
	position: absolute; left: 0; top: 0.6em; transform: translateY(-50%);
	width: 10px; height: 10px; border-radius: 50%;
	background: linear-gradient(180deg, #6d28d9, #a78bfa);
	box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
}

/* =========================================================
   DEMO EMBED (iframe + blurred poster with clear CTA)
========================================================= */
.demo-embed{ margin: 32px auto; }
.demo-embed__inner{ max-width: var(--maxw); margin: 0 auto; }

.demo-embed__frame-wrap{
	width: 100%;
	aspect-ratio: 16/9;
	background: #0b0e13;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.06);
}
.demo-embed__iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* Poster state */
.demo-embed__frame-wrap.is-poster{ position: relative; isolation: isolate; }
.demo-embed__poster{ position: relative; width: 100%; height: 100%; }

.demo-embed__poster-img,
.demo-embed__poster-fallback{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	filter: blur(8px);
	transform: scale(1.06);                /* скрываем края блюра */
	z-index: 0;
}
.demo-embed__poster-fallback{
	background: linear-gradient(135deg, #151922 0%, #0c0f14 100%);
}

/* overlay for readability under CTA */
.demo-embed__poster::after{
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,.55));
	pointer-events: none;
	z-index: 1;
}

/* CTA on top (same style as hero) */
.demo-embed .hero-cta.demo-cta{
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	filter: none !important;
	will-change: transform;
}
.demo-embed .hero-cta.demo-cta:hover{
	transform: translate(-50%,-51%) scale(1.02);
}

/* =========================================================
   AUTHOR BLOCK
========================================================= */
.author-block{ margin: 52px auto 0; }
.author-block__grid{
	background: var(--surface-2);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width:860px){
	.author-block__grid{ grid-template-columns: 1fr 3fr; gap: 24px; }
}
.author-block__left{
	display: flex; flex-direction: column;
	align-items: center; text-align: center; gap: 10px;
}
.author-block__photo{
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
	border: 2px solid rgba(255,255,255,.08);
}
.author-block__name{ font-weight: 900; font-size: 18px; color: #fff; }
.author-block__job{ color: var(--muted); font-size: 14px; }
.author-block__right{ color: var(--muted); line-height: 1.7; }

/* =========================================================
   FOOTER (5 columns layout)
========================================================= */
.ch-footer{
	margin-top: 48px;
	padding: 24px 16px;
	background: var(--surface);
	position: relative;
	border-top: 1px solid rgba(255,255,255,.06);
	box-shadow: 0 -8px 20px rgba(0,0,0,.35);
}
.ch-footer::before{
	content: "";
	position: absolute; left: 0; right: 0; top: -2px; height: 3px;
	background: linear-gradient(90deg, #a78bfa, #6d28d9);
	opacity: .9;
}
.ch-footer__inner{
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* 1/5 | 2/5 | 3/5 | 4/5 | 5/5 */
	align-items: start;
	column-gap: 24px; /* горизонтальные отступы */
	row-gap: 0;       /* нулевой вертикальный зазор между строками */
}
.ch-footer__inner > div:empty{ display: none; }

/* 1/5 — большой логотип */
.ch-footer__logo{ grid-column: 1; justify-self: start; align-self: start; }
.ch-footer__logo img{
	height: 192px; max-width: 100%; width: auto; object-fit: contain; filter: none;
}

/* делаем детей .ch-footer__center частью грида-родителя */
.ch-footer__center{ display: contents; }

/* 2–4/5 — кнопка → логотипы → мета */
.ch-footer__center .ch-btn{
	grid-column: 2 / span 3;
	grid-row: 1;
	justify-self: center;
	padding: 20px 36px;
	font-size: 20px;
	border-radius: 16px;
}

/* Лента логотипов под кнопкой */
.ch-footer__logos{
	grid-column: 2 / span 3;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	position: relative;
	padding-top: 14px;
	padding-bottom: 14px;
}
.ch-footer__logo-item{
	height: 56px; width: auto; opacity: 1; filter: none;
	transition: transform .15s ease, opacity .15s ease;
}
.ch-footer__logo-item:hover{ transform: translateY(-1px); opacity: 1; }

/* Декоративные полосы у блока логотипов */
.ch-footer__logos::before,
.ch-footer__logos::after{
	content: "";
	position: absolute; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, #a78bfa, #6d28d9);
	opacity: .9; pointer-events: none;
}
.ch-footer__logos::before{ top: 0; }
.ch-footer__logos::after{ bottom: 0; }

/* Мета-блок под логотипами */
.ch-footer__meta{
	grid-column: 2 / span 3;
	grid-row: 3;
	margin-top: 12px;
	font-size: 14px;
	color: var(--muted);
	text-align: center;
}

/* 5/5 — меню ссылок */
.ch-footer__menu{
	grid-column: 5;
	grid-row: 1 / span 3;
	align-self: start;
	justify-self: start;
}
.ch-footer__menu-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.ch-footer__menu a{
	color: var(--accent);
	text-decoration: none;
	font-weight: 800;
	transition: color .15s ease, transform .15s ease;
}
.ch-footer__menu a:hover{ color: var(--accent-hover); transform: translateX(2px); }

/* Responsive footer */
@media (max-width:1080px){
	.ch-footer__inner{
		grid-template-columns: 1fr;
		gap: 18px;
		text-align: center;
	}
	.ch-footer__logo{ justify-self: center; }
	.ch-footer__logo img{ height: 140px; }
	.ch-footer__center .ch-btn,
	.ch-footer__logos,
	.ch-footer__meta,
	.ch-footer__menu{
		grid-column: 1;
		grid-row: auto;
		justify-self: center;
		text-align: center;
	}
	.ch-footer__logos{ justify-content: center; }
	.ch-footer__menu-list{ justify-items: center; }
}
@media (max-width:560px){
	.ch-footer__logo img{ height: 110px; }
	.ch-footer__logo-item{ height: 44px; }
	.ch-footer__center .ch-btn{ font-size: 18px; padding: 16px 28px; }
}

/* =========================================================
   BUTTONS (unified)
========================================================= */
.ch-btn,
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
a.button{
	background: var(--accent) !important;
	color: #fff !important;
	border-radius: 12px;
	border: none;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
	box-shadow: 0 8px 24px var(--accent-glow);
}
.ch-btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover{
	background: var(--accent-hover) !important;
	transform: translateY(-1px);
}

/* =========================================================
   TABLES (global, dark + purple)
========================================================= */
.ch-container table,
.entry-content table,
article table,
.wp-block-table table,
table.ch-table,
table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	margin: 24px 0 32px;
}

/* Ячейки */
.ch-container table th, .ch-container table td,
.entry-content table th, .entry-content table td,
article table th, article table td,
.wp-block-table table th, .wp-block-table table td,
table.ch-table th, table.ch-table td,
table th, table td{
	padding: 14px 16px;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Заголовки через <thead> */
.ch-container table thead th,
.entry-content table thead th,
article table thead th,
.wp-block-table table thead th,
table.ch-table thead th,
table thead th{
	background: linear-gradient(90deg, #6d28d9, #a78bfa);
	color: #fff;
	font-weight: 800;
	letter-spacing: .02em;
	border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Если thead отсутствует — красим первую строку tbody как заголовок */
.ch-container table:not(:has(thead)) tbody tr:first-child td,
.entry-content table:not(:has(thead)) tbody tr:first-child td,
article table:not(:has(thead)) tbody tr:first-child td,
.wp-block-table table:not(:has(thead)) tbody tr:first-child td,
table.ch-table:not(:has(thead)) tbody tr:first-child td,
table:not(:has(thead)) tbody tr:first-child td,
.ch-container table:has(thead:empty) tbody tr:first-child td,
.entry-content table:has(thead:empty) tbody tr:first-child td,
article table:has(thead:empty) tbody tr:first-child td,
.wp-block-table table:has(thead:empty) tbody tr:first-child td,
table.ch-table:has(thead:empty) tbody tr:first-child td,
table:has(thead:empty) tbody tr:first-child td{
	background: linear-gradient(90deg, #6d28d9, #a78bfa);
	color: #fff;
	font-weight: 800;
	letter-spacing: .02em;
	border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Если thead реально есть и не пуст — НЕ красим первую строку tbody */
.ch-container table:has(thead:not(:empty)) tbody tr:first-child td,
.entry-content table:has(thead:not(:empty)) tbody tr:first-child td,
article table:has(thead:not(:empty)) tbody tr:first-child td,
.wp-block-table table:has(thead:not(:empty)) tbody tr:first-child td,
table.ch-table:has(thead:not(:empty)) tbody tr:first-child td,
table:has(thead:not(:empty)) tbody tr:first-child td{
	background: transparent;
	color: var(--text);
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Зебра + hover */
.ch-container table tbody tr:nth-child(even) td,
.entry-content table tbody tr:nth-child(even) td,
article table tbody tr:nth-child(even) td,
.wp-block-table table tbody tr:nth-child(even) td,
table.ch-table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) td{ background: rgba(255,255,255,.02); }

.ch-container table tbody tr:hover td,
.entry-content table tbody tr:hover td,
article table tbody tr:hover td,
.wp-block-table table tbody tr:hover td,
table.ch-table tbody tr:hover td,
table tbody tr:hover td{ background: rgba(187,0,255,.08); }

/* У последней строки убираем нижнюю границу */
.ch-container table tbody tr:last-child td,
.entry-content table tbody tr:last-child td,
article table tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td,
table.ch-table tbody tr:last-child td,
table tbody tr:last-child td{ border-bottom: none; }

/* Подпись к таблице (WP) */
.wp-block-table figcaption{
	padding: 10px 16px 14px;
	color: var(--muted);
	text-align: left;
	border-top: 1px dashed var(--accent);
}

/* Адаптивный горизонтальный скролл */
@media (max-width: 720px){
	.ch-container table,
	.entry-content table,
	article table,
	.wp-block-table table,
	table.ch-table,
	table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 12px;
		margin: 18px -8px 26px;
	}
	.ch-container table th, .ch-container table td,
	.entry-content table th, .entry-content table td,
	article table th, article table td,
	.wp-block-table table th, .wp-block-table table td,
	table.ch-table th, table.ch-table td,
	table th, table td{
		padding: 12px 14px;
		font-size: 14px;
	}
}