/* ==========================================================================
   Лендинг «Создать презентацию» (tools/7-create-presentation, модель Gamma)
   Палитра и типографика — сайтовые: переменные из main.css, font-family: inherit.
   Соседствует с template/common/catalog/gamma.tpl (та же модель, id=89),
   но фокус узкий — только формат «презентация», без переключателя форматов.
   Префикс классов .pres-
   ========================================================================== */

.pres-page {
	--pres-yellow: var(--zheltyy, #fffc0d);
	--pres-red: var(--krasnyy, #e30613);
	--pres-bg: var(--chernyy, #1a1a1a);
	--pres-panel: var(--svetlyy-chernyy, #313131);
	--pres-border: var(--temnyy-seryy, #464646);
	--pres-text: var(--belyy, #fff);
	--pres-text-2: var(--seryy, #e5e5e5);
	--pres-text-3: rgba(255, 255, 255, 0.62);
	--pres-radius: 16px;

	font-family: inherit;
	color: var(--pres-text);
	background: var(--pres-bg);
	width: 100%;
	overflow: hidden;
}
.pres-page *,
.pres-page *::before,
.pres-page *::after { box-sizing: border-box; }
.pres-page svg { display: block; }
.pres-page p { margin: 0; }

.pres-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 15px; }

/* ---------- Типографика ---------- */
.pres-h1 { margin: 0 0 18px; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.1; font-weight: 700; text-wrap: balance; color: var(--pres-text); }
.pres-h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.pres-h2--center { max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; }
.pres-lead { max-width: 640px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--pres-text-2); }
.pres-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 252, 13, 0.1);
	color: var(--pres-yellow);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pres-section { padding: 72px 0; scroll-margin-top: 96px; }
.pres-section--panel { background: rgba(255, 255, 255, 0.025); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pres-section__lead { max-width: 680px; margin-bottom: 40px !important; font-size: 16px; line-height: 1.6; color: var(--pres-text-3); }

/* ---------- Кнопки ---------- */
.pres-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pres-btn:hover { text-decoration: none; transform: translateY(-2px); }
.pres-btn:focus-visible { outline: 2px solid var(--pres-yellow) !important; outline-offset: 3px; }
.pres-btn--primary { background: var(--pres-yellow); color: #1a1a1a; }
.pres-btn--primary:hover { background: #ffff5c; color: #1a1a1a; }
.pres-btn--ghost { background: transparent; border-color: var(--pres-border); color: var(--pres-text); }
.pres-btn--ghost:hover { border-color: var(--pres-yellow); color: var(--pres-yellow); }
.pres-btn--sm { padding: 11px 20px; font-size: 15px; }
.pres-btn--block { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.pres-hero { position: relative; padding: 30px 0 64px; }
.pres-hero::before {
	content: '';
	position: absolute;
	top: -120px;
	left: 50%;
	width: 1100px;
	height: 520px;
	margin-left: -550px;
	background:
		radial-gradient(45% 55% at 30% 40%, rgba(255, 252, 13, 0.14), transparent 70%),
		radial-gradient(45% 55% at 72% 30%, rgba(227, 6, 19, 0.18), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.pres-hero > .pres-wrap { position: relative; z-index: 1; }
.pres-page .breadcrumbs { margin-bottom: 26px; }

.pres-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	column-gap: 56px;
	row-gap: 36px;
	align-items: start;
}
.pres-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pres-hero__note { margin-top: 16px !important; font-size: 13px; line-height: 1.5; color: var(--pres-text-3); }

.pres-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pres-fact { display: flex; align-items: baseline; gap: 7px; }
.pres-fact b { font-size: 20px; font-weight: 700; color: var(--pres-text); }
.pres-fact span { font-size: 13.5px; color: var(--pres-text-3); }

/* --- демо: тема → структура → слайды (реальный механизм Gamma, не абстрактная анимация) --- */
.pres-demo {
	padding: 26px;
	background: var(--pres-panel);
	border: 1px solid var(--pres-border);
	border-radius: var(--pres-radius);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pres-demo__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pres-text-3); }
.pres-demo__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--pres-border);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.25);
	color: var(--pres-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
}
.pres-demo__input::placeholder { color: rgba(255, 255, 255, 0.38); }
.pres-demo__input:focus { border-color: var(--pres-yellow); }

/* стрелка-разделитель между полем и превью структуры */
.pres-demo__arrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pres-text-3); }
.pres-demo__arrow svg { width: 16px; height: 16px; color: var(--pres-yellow); }

/* структура, «печатающаяся» строка за строкой */
.pres-outline { display: flex; flex-direction: column; gap: 9px; }
.pres-outline__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--pres-border);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	opacity: 0.32;
	transform: translateX(-4px);
	transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.pres-outline__item.is-lit { opacity: 1; transform: none; border-color: rgba(255, 252, 13, 0.4); background: rgba(255, 252, 13, 0.06); }
.pres-outline__num { flex: 0 0 auto; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--pres-yellow); }
.pres-outline__text { font-size: 14px; color: var(--pres-text-2); line-height: 1.4; }

/* сцена: стопка слайдов появляется после того, как структура «дописалась» */
.pres-stage {
	position: relative;
	min-height: 226px;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.pres-stage.is-visible { opacity: 1; transform: none; }
.pres-deck { position: relative; width: 100%; max-width: 380px; }
.pres-slide { border: 1px solid var(--pres-border); border-radius: 14px; background: linear-gradient(155deg, #2f2f2f, #232323); }
.pres-slide--far, .pres-slide--mid { position: absolute; inset: 0; display: block; z-index: 0; }
.pres-slide--far { transform: translate(22px, 20px) scale(0.94); opacity: 0.35; }
.pres-slide--mid { transform: translate(11px, 10px) scale(0.97); opacity: 0.6; }
.pres-slide--front {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	aspect-ratio: 16 / 9;
	padding: 20px 22px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.pres-slide__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pres-yellow); }
.pres-slide__title { margin: 7px 0 14px; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; line-height: 1.2; }
.pres-slide__body { display: flex; flex: 1; gap: 14px; min-height: 0; }
.pres-slide__text { display: flex; flex: 1; flex-direction: column; gap: 8px; padding-top: 2px; }
.pres-slide__text i { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.pres-slide__text i.is-short { width: 55%; }
.pres-slide__media { flex: 0 0 36%; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(150deg, rgba(255, 252, 13, 0.22), rgba(227, 6, 19, 0.4)); }
.pres-slide__media span { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.pres-deck__count { display: block; margin-top: 16px; font-size: 12px; color: var(--pres-text-3); }
.pres-deck__count b { color: var(--pres-yellow); }

/* ==========================================================================
   ШАГИ
   ========================================================================== */
.pres-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: pres-step; }
.pres-step { padding: 28px 26px; border: 1px solid var(--pres-border); border-radius: var(--pres-radius); background: var(--pres-panel); }
.pres-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(255, 252, 13, 0.12);
	color: var(--pres-yellow);
	font-weight: 700;
	font-size: 15px;
}
.pres-step__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.pres-step p { font-size: 15px; line-height: 1.6; color: var(--pres-text-3); }

/* ==========================================================================
   КАРТОЧКИ ВОЗМОЖНОСТЕЙ
   ========================================================================== */
.pres-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pres-card { padding: 26px; border: 1px solid var(--pres-border); border-radius: var(--pres-radius); background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s ease, transform 0.2s ease; }
.pres-card:hover { border-color: rgba(255, 252, 13, 0.4); transform: translateY(-3px); }
.pres-card__icon { width: 40px; height: 40px; margin-bottom: 16px; padding: 9px; border-radius: 11px; background: rgba(227, 6, 19, 0.12); color: var(--pres-red); }
.pres-card__title { font-size: 18px; font-weight: 700; margin: 0 0 9px; }
.pres-card p { font-size: 14.5px; line-height: 1.6; color: var(--pres-text-3); }

/* ==========================================================================
   ГАЛЕРЕЯ ОФОРМЛЕНИЙ
   ========================================================================== */
.pres-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.pres-tpl { margin: 0; }
.pres-tpl__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--pres-border); background: var(--pres-panel); }
.pres-tpl figcaption { margin-top: 8px; font-size: 12.5px; color: var(--pres-text-3); text-align: center; }

/* ==========================================================================
   КОМУ ПРИГОДИТСЯ
   ========================================================================== */
.pres-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pres-case { padding: 20px; border: 1px solid var(--pres-border); border-radius: 14px; background: var(--pres-panel); transition: border-color 0.2s ease; }
.pres-case:hover { border-color: rgba(255, 252, 13, 0.4); }
.pres-case__who { font-size: 15.5px; font-weight: 700; margin: 0 0 7px; }
.pres-case__what { font-size: 13.5px; line-height: 1.55; color: var(--pres-text-3); }

/* ==========================================================================
   КАЛЬКУЛЯТОР
   ========================================================================== */
.pres-calc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; border: 1px solid var(--pres-border); border-radius: var(--pres-radius); overflow: hidden; }
.pres-calc__controls { padding: 30px; background: var(--pres-panel); display: flex; flex-direction: column; gap: 26px; }
.pres-calc__row { display: flex; flex-direction: column; gap: 10px; }
.pres-calc__label { font-size: 14px; font-weight: 600; color: var(--pres-text-2); }
.pres-calc__label b { color: var(--pres-yellow); }
.pres-calc__options { display: flex; flex-wrap: wrap; gap: 10px; }
.pres-chip {
	padding: 9px 16px;
	border: 1px solid var(--pres-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--pres-text-2);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pres-chip:hover { border-color: rgba(255, 252, 13, 0.5); }
.pres-chip.is-active { border-color: var(--pres-yellow); background: rgba(255, 252, 13, 0.14); color: var(--pres-yellow); }
.pres-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 100px; background: var(--pres-border); outline: none; }
.pres-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pres-yellow); border: 3px solid var(--pres-bg); cursor: pointer; box-shadow: 0 0 0 1px var(--pres-yellow); }
.pres-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pres-yellow); border: 3px solid var(--pres-bg); cursor: pointer; box-shadow: 0 0 0 1px var(--pres-yellow); }
.pres-calc__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--pres-text-3); }

.pres-calc__result {
	padding: 30px;
	background: linear-gradient(170deg, rgba(255, 252, 13, 0.06), rgba(227, 6, 19, 0.08)), rgba(255, 255, 255, 0.02);
	border-left: 1px solid var(--pres-border);
	display: flex;
	flex-direction: column;
}
.pres-calc__result-label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pres-text-3); }
.pres-calc__price { margin: 10px 0 4px; font-size: 34px; font-weight: 700; color: var(--pres-text); }
.pres-calc__tokens { font-size: 13.5px; color: var(--pres-text-3); margin-bottom: 14px; }
.pres-calc__note { font-size: 13px; line-height: 1.55; color: var(--pres-text-3); margin-bottom: 20px !important; }
.pres-calc__result .pres-btn { margin-top: auto; }

/* ==========================================================================
   ПАКЕТЫ ТОКЕНОВ
   ========================================================================== */
.pres-tokens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pres-token { padding: 22px 18px; border: 1px solid var(--pres-border); border-radius: 14px; background: var(--pres-panel); text-align: center; transition: border-color 0.2s ease, transform 0.2s ease; }
.pres-token:hover { border-color: rgba(255, 252, 13, 0.4); transform: translateY(-2px); }
.pres-token__amount { font-size: 19px; font-weight: 700; color: var(--pres-text); }
.pres-token__price { margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--pres-yellow); }
.pres-token__hint { margin-top: 8px; font-size: 12.5px; color: var(--pres-text-3); }

/* ==========================================================================
   SEO-ТЕКСТ
   ========================================================================== */
.pres-article h2 { font-size: 26px; font-weight: 700; margin: 0 0 14px; }
.pres-article h3 { font-size: 20px; font-weight: 700; margin: 30px 0 12px; }
.pres-article p { font-size: 15.5px; line-height: 1.72; color: var(--pres-text-2); margin: 0 0 14px !important; }
.pres-article ul { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.pres-article ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.55; color: var(--pres-text-2); }
.pres-article ul li::before { content: '→'; position: absolute; left: 0; color: var(--pres-yellow); font-weight: 700; }
.pres-article strong { color: var(--pres-text); }
.pres-article hr { border: 0; border-top: 1px solid var(--pres-border); margin: 30px 0; }
.pres-article__updated { color: var(--pres-text-3); }

/* ==========================================================================
   FAQ (использует общий компонент new__faq сайта)
   ========================================================================== */
.pres-page .new__faq-list { max-width: 880px; margin: 0 auto; }

/* ==========================================================================
   ФИНАЛЬНЫЙ CTA
   ========================================================================== */
.pres-final {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: 60px 44px;
	text-align: center;
	background: radial-gradient(600px 300px at 50% 0%, rgba(255, 252, 13, 0.16), transparent 60%), linear-gradient(180deg, #242424, #1a1a1a);
	border: 1px solid var(--pres-border);
}
.pres-final__title { font-size: clamp(26px, 4vw, 42px); font-weight: 700; margin: 0 0 14px; text-wrap: balance; }
.pres-final__sub { font-size: 17px; color: var(--pres-text-3); max-width: 560px; margin: 0 auto 26px !important; text-align: center; line-height: 1.6; }
.pres-final__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pres-final__note { margin: 20px 0 0 !important; font-size: 13px; color: var(--pres-text-3); }

/* ==========================================================================
   STICKY CTA
   ========================================================================== */
.pres-sticky {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 140%);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 20px;
	background: var(--pres-panel);
	border: 1px solid var(--pres-border);
	border-radius: 999px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	z-index: 40;
	transition: transform 0.3s ease;
}
.pres-sticky.is-visible { transform: translate(-50%, 0); }
.pres-sticky__text { font-size: 14px; font-weight: 600; color: var(--pres-text-2); }
.pres-sticky__close { border: 0; background: transparent; color: var(--pres-text-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1080px) {
	.pres-cards { grid-template-columns: repeat(2, 1fr); }
	.pres-cases { grid-template-columns: repeat(2, 1fr); }
	.pres-gallery { grid-template-columns: repeat(4, 1fr); }
	.pres-tokens { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
	.pres-hero__grid { grid-template-columns: 1fr; }
	.pres-calc { grid-template-columns: 1fr; }
	.pres-calc__result { border-left: 0; border-top: 1px solid var(--pres-border); }
	.pres-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pres-section { padding: 52px 0; }
	.pres-cards { grid-template-columns: 1fr; }
	.pres-cases { grid-template-columns: 1fr; }
	.pres-gallery { grid-template-columns: repeat(2, 1fr); }
	.pres-tokens { grid-template-columns: repeat(2, 1fr); }
	.pres-final { padding: 40px 20px; }
	.pres-hero__cta .pres-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pres-page *, .pres-page *::before, .pres-page *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}