/**
 * Office Docs — стили шаблонов страниц.
 * Все классы с префиксом .pg- чтобы не конфликтовать с темой.
 * Используют те же CSS-переменные, поэтому dark mode работает автоматически.
 */

/* ===== Кнопки ===== */
.pg-btn {
	font-family: var(--font-head); font-weight: 600; font-size: .95rem;
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .72rem 1.35rem; border-radius: 9px; text-decoration: none;
	cursor: pointer; border: 1px solid transparent; line-height: 1;
	transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.pg-btn:hover { transform: translateY(-1px); }
.pg-btn svg { width: 17px; height: 17px; }
.pg-btn--primary { background: var(--c-h1); color: #fff; }
.pg-btn--primary:hover { background: #003aa0; color: #fff; }
html[data-theme="dark"] .pg-btn--primary { background: #1d4ed8; }
.pg-btn--accent { background: var(--c-accent); color: #fff; }
.pg-btn--accent:hover { background: #a23232; color: #fff; }
.pg-btn--ghost { background: transparent; border-color: var(--c-border); color: var(--c-heading); }
.pg-btn--ghost:hover { border-color: var(--c-h1); color: var(--c-h1); }
html[data-theme="dark"] .pg-btn--ghost { color: var(--c-text); }

/* ===== Секции / заголовки ===== */
.pg-section { padding: clamp(2.6rem, 6vw, 4.8rem) 0; }
.pg-section--tight { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.pg-section__head { max-width: 60ch; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.pg-section__head.is-center { margin-inline: auto; text-align: center; }
.pg-title {
	font-family: var(--font-head); font-weight: 800; color: var(--c-heading);
	font-size: clamp(1.6rem, 3.5vw, 2.25rem); letter-spacing: -.02em;
	line-height: 1.14; margin: .4rem 0 .8rem;
}
.pg-title--blue { color: var(--c-h1); }
.pg-lead { font-size: 1.12rem; color: var(--c-text-muted); margin: 0; }

/* ===== Hero ===== */
.pg-hero { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem); }
.pg-hero__grid {
	display: grid; grid-template-columns: 1.08fr .92fr;
	gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
.pg-hero h1 {
	font-family: var(--font-head); font-weight: 800; color: var(--c-h1);
	font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.07;
	letter-spacing: -.025em; margin: .7rem 0 1rem;
}
.pg-hero h1 .accent { color: var(--c-accent); }
.pg-hero .pg-lead { font-size: 1.2rem; max-width: 52ch; margin-bottom: 1.7rem; }
.pg-hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.pg-hero__note { font-family: var(--font-head); font-size: .82rem; color: var(--c-text-muted); margin-top: 1rem; }
@media (max-width: 900px) { .pg-hero__grid { grid-template-columns: 1fr; } }

/* стеклянная панель «окна кода» в hero */
.pg-window {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
	border-radius: 14px; overflow: hidden;
}
.pg-window__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--glass-border); }
.pg-window__bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.pg-window__bar i:nth-child(1){ background:#e36; } .pg-window__bar i:nth-child(2){ background:#fb5; } .pg-window__bar i:nth-child(3){ background:#3c6; }
.pg-window__bar span { margin-left: .5rem; font-family: var(--font-head); font-size: .78rem; color: var(--c-text-muted); }
.pg-window pre { margin: 0; border: 0; border-radius: 0; background: transparent; }
html[data-theme="dark"] .pg-window pre { background: transparent; }

/* ===== Сетки / карточки ===== */
.pg-grid { display: grid; gap: 1.2rem; }
.pg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pg-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pg-grid--3, .pg-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pg-grid--2, .pg-grid--3, .pg-grid--4 { grid-template-columns: 1fr; } }

.pg-card {
	background: var(--c-surface); border: 1px solid var(--c-border);
	border-radius: 12px; padding: 1.5rem; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pg-card--link:hover { border-color: var(--c-h1); box-shadow: 0 6px 22px rgba(0,23,34,.08); transform: translateY(-2px); }
.pg-card__icon {
	width: 44px; height: 44px; border-radius: 11px; margin-bottom: 1rem;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--c-h1) 10%, transparent); color: var(--c-h1);
}
.pg-card--accent .pg-card__icon { background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); }
.pg-card h3 { font-family: var(--font-head); margin: 0 0 .5rem; font-size: 1.16rem; color: var(--c-heading); border: 0; padding: 0; }
.pg-card p { margin: 0; color: var(--c-text-muted); font-size: .98rem; }
.pg-card a.pg-card__more { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--c-accent); text-decoration: none; display: inline-block; margin-top: .8rem; }
.pg-card a.pg-card__more::after { content: " →"; }

/* ===== Статистика ===== */
.pg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 700px) { .pg-stats { grid-template-columns: repeat(2, 1fr); } }
.pg-stat { padding: 1.2rem 0; }
.pg-stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 2.7rem); color: var(--c-h1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.pg-stat__num .unit { color: var(--c-accent); }
.pg-stat__label { font-family: var(--font-head); font-size: .9rem; color: var(--c-text-muted); margin-top: .4rem; }

/* ===== Тарифы ===== */
.pg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 900px) { .pg-tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.pg-tier { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 1.7rem 1.6rem; }
.pg-tier--featured { border-color: var(--c-h1); box-shadow: 0 12px 36px rgba(0,32,96,.14); position: relative; }
.pg-tier__badge { position: absolute; top: -12px; left: 1.6rem; background: var(--c-h1); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 6px; }
.pg-tier__name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--c-heading); }
.pg-tier__price { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; color: var(--c-heading); letter-spacing: -.02em; margin: .4rem 0 .2rem; }
.pg-tier__price small { font-size: .95rem; font-weight: 500; color: var(--c-text-muted); }
.pg-tier__desc { color: var(--c-text-muted); font-size: .95rem; margin: 0 0 1.2rem; }
.pg-tier ul { list-style: none; padding: 0; margin: 0 0 1.4rem; font-family: var(--font-head); font-size: .93rem; }
.pg-tier li { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem 0; color: var(--c-text); }
.pg-tier li svg { flex: none; color: var(--c-h1); margin-top: 1px; }
.pg-tier .pg-btn { margin-top: auto; justify-content: center; }

/* ===== Логотипы клиентов ===== */
.pg-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
@media (max-width: 800px) { .pg-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .pg-logos { grid-template-columns: repeat(2, 1fr); } }
.pg-logo { background: var(--c-surface); display: grid; place-items: center; padding: 1.7rem 1rem; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--c-text-muted); letter-spacing: -.01em; }

/* ===== Отзывы ===== */
.pg-quote { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: 12px; padding: 1.6rem; }
.pg-quote p { font-family: var(--font-body); font-style: italic; font-size: 1.06rem; color: var(--c-text); margin: 0 0 1rem; }
.pg-quote__author { display: flex; align-items: center; gap: .7rem; }
.pg-quote__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--c-h1), #003aa0); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; flex: none; }
.pg-quote__name { font-family: var(--font-head); font-weight: 600; color: var(--c-heading); font-size: .95rem; }
.pg-quote__role { font-family: var(--font-head); font-size: .82rem; color: var(--c-text-muted); }

/* ===== Команда ===== */
.pg-team-card { text-align: center; }
.pg-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto .9rem; background: linear-gradient(135deg, var(--c-h1), #003aa0); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; }
.pg-team-card h3 { font-family: var(--font-head); margin: 0 0 .15rem; font-size: 1.08rem; color: var(--c-heading); border: 0; padding: 0; }
.pg-team-card .role { font-family: var(--font-head); font-size: .86rem; color: var(--c-accent); }

/* ===== Таймлайн ===== */
.pg-timeline { border-left: 2px solid var(--c-border); padding-left: 1.6rem; margin-left: .4rem; }
.pg-timeline__item { position: relative; padding-bottom: 1.7rem; }
.pg-timeline__item:last-child { padding-bottom: 0; }
.pg-timeline__item::before { content: ""; position: absolute; left: calc(-1.6rem - 7px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-bg); border: 3px solid var(--c-h1); }
.pg-timeline__year { font-family: var(--font-head); font-weight: 800; color: var(--c-accent); font-size: 1rem; }
.pg-timeline__item h3 { font-family: var(--font-head); margin: .2rem 0 .3rem; font-size: 1.08rem; color: var(--c-heading); border: 0; padding: 0; }
.pg-timeline__item p { margin: 0; color: var(--c-text-muted); }

/* ===== Список с галочками ===== */
.pg-checklist { list-style: none; padding: 0; margin: 0; font-family: var(--font-head); }
.pg-checklist li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; color: var(--c-text); }
.pg-checklist li svg { flex: none; color: var(--c-h1); margin-top: 2px; }

/* ===== CTA-полоса ===== */
.pg-cta { background: linear-gradient(135deg, #002873, var(--c-h1) 55%, #001235); border-radius: 18px; padding: clamp(2rem, 5vw, 3.6rem); text-align: center; color: #fff; position: relative; overflow: hidden; }
.pg-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 240px at 80% -20%, rgba(184,58,58,.35), transparent 60%); pointer-events: none; }
.pg-cta h2 { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.3rem); border: 0; padding: 0; margin: 0 0 .7rem; position: relative; }
.pg-cta p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 1.6rem; position: relative; }
.pg-cta .pg-btn--primary { background: #fff; color: var(--c-h1); position: relative; }
.pg-cta .pg-btn--primary:hover { background: #eef2fb; color: var(--c-h1); }
.pg-cta .pg-btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; position: relative; }
.pg-cta .pg-btn--ghost:hover { border-color: #fff; color: #fff; }

/* ===== Контакты ===== */
.pg-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 850px) { .pg-contact-grid { grid-template-columns: 1fr; } }
.pg-field { margin-bottom: 1rem; }
.pg-field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--c-heading); margin-bottom: .35rem; }
.pg-field input, .pg-field textarea {
	width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--c-text);
	padding: .7rem .85rem; border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-bg);
}
.pg-field input:focus, .pg-field textarea:focus { outline: 2px solid var(--c-h1); outline-offset: 1px; border-color: var(--c-h1); }
.pg-field textarea { min-height: 130px; resize: vertical; }
.pg-hp { position: absolute; left: -9999px; }
.pg-info-card { display: flex; gap: .9rem; align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.pg-info-card .pg-card__icon { margin: 0; flex: none; }
.pg-info-card h3 { font-family: var(--font-head); margin: 0 0 .15rem; font-size: 1rem; color: var(--c-heading); border: 0; padding: 0; }
.pg-info-card p, .pg-info-card a { margin: 0; font-family: var(--font-head); font-size: .95rem; color: var(--c-text-muted); text-decoration: none; }
.pg-info-card a:hover { color: var(--c-link-hover); }
.pg-map { margin-top: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-border); }
.pg-map iframe { display: block; width: 100%; height: 300px; border: 0; }
html[data-theme="dark"] .pg-map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7); }

/* ===== Уведомления формы ===== */
.pg-notice { font-family: var(--font-head); font-size: .95rem; padding: .8rem 1rem; border-radius: 9px; margin-bottom: 1.2rem; border: 1px solid; }
.pg-notice--ok { background: color-mix(in srgb, #2c7 14%, var(--c-bg)); border-color: #2c7; color: #1a6; }
.pg-notice--err { background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg)); border-color: var(--c-accent); color: var(--c-accent); }

/* ===== База знаний (документация) ===== */
.pg-kb-search { display: flex; gap: .5rem; max-width: 540px; margin-top: 1.4rem; }
.pg-kb-search input { flex: 1; font-family: var(--font-body); font-size: 1rem; padding: .8rem 1rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); color: var(--c-text); }
.pg-kb-cat { display: flex; gap: .9rem; align-items: flex-start; }
.pg-kb-cat .pg-card__icon { flex: none; }
.pg-kb-cat__links { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.pg-kb-cat__links a { font-family: var(--font-head); font-size: .92rem; text-decoration: none; color: var(--c-text); }
.pg-kb-cat__links a:hover { color: var(--c-link-hover); }
.pg-kb-cat__links a::before { content: "› "; color: var(--c-accent); }

/* ===== Шапка внутренней страницы ===== */
.pg-pagehead { padding: clamp(1.8rem, 5vw, 3rem) 0 0; }
.pg-pagehead .eyebrow { margin-bottom: .6rem; }
.pg-pagehead h1 { font-family: var(--font-head); font-weight: 800; color: var(--c-h1); font-size: clamp(2rem, 4.5vw, 2.9rem); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .8rem; }
.pg-pagehead .pg-lead { max-width: 60ch; }

/* появление */
@media (prefers-reduced-motion: no-preference) {
	.pg-reveal { opacity: 0; transform: translateY(14px); animation: pg-in .6s ease forwards; }
	.pg-reveal[style*="--d:1"]{ animation-delay:.06s } .pg-reveal[style*="--d:2"]{ animation-delay:.12s }
	.pg-reveal[style*="--d:3"]{ animation-delay:.18s } .pg-reveal[style*="--d:4"]{ animation-delay:.24s }
	@keyframes pg-in { to { opacity: 1; transform: none; } }
}