/* =========================================================
   Forex Tools — premium.css (Quiet Luxury v1).
   Подключается последним (deps ft-trade): перебивает base/buttons/trade.
   1) Inter вместо Comfortaa/Roboto через переопределение переменных;
   2) JetBrains Mono + tabular-nums для всех ключевых цифр;
   3) noise-слой (feTurbulence) на тёмных секциях — матовость;
   4) hero edge light под изображением;
   5) overshoot-hover кнопок cubic-bezier с отрицательной фазой;
   6) стили sparkline и flat-чипов MT4/MT5 (крупные глифы 56px);
   7) guard-deal-1.png прижат к правому краю экрана в секции .cta;
      текст секции остаётся по центру; при пересечении с текстом
      картинку скрывает JS (trade.js, collision-check).
   ========================================================= */

/* ---------- 4. Типографика: Inter, контраст весов ---------- */
:root {
	--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.hero-title,
.section-title,
.software-title,
.ft-trust-title,
.cta-title,
.page-hero-title {
	font-weight: 800;
	letter-spacing: -.03em;
}

.hero-subtitle,
.section-lead,
.feature-text,
.service-text {
	font-weight: 400;
	letter-spacing: 0;
}

/* ---------- 5. Табличные цифры: метрики, статистика, итоги ---------- */
.product-metric-value,
.stat-value,
.ft-vd-value,
.ft-mp-card-value,
.cart-total,
.cart-price,
.price-current,
.product-card-price {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

/* ---------- 3. Noise-слой: матовость тёмных полотен ---------- */
.site-header::after,
.ft-trust::after,
.stats-section::after,
.hero-full::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

.site-header::after {
	z-index: -1;
}

.hero-full::before {
	z-index: -1;
}

/* ---------- 7. Hero edge light: световая линия под роботом ---------- */
.hero-visual::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -4%;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(71, 186, 198, .55) 30%, rgba(255, 255, 255, .7) 50%, rgba(71, 186, 198, .55) 70%, transparent);
	filter: blur(2px);
	opacity: .85;
	pointer-events: none;
}

/* ---------- 6. Overshoot-hover: кнопка слегка «дышит» ---------- */
.btn,
.product-demo-btn,
.ft-sticky-cta-btn,
.header-actions .btn {
	transition:
		transform .28s cubic-bezier(.34, -.4, .64, 1.4),
		background-color .25s ease,
		color .25s ease,
		border-color .25s ease,
		box-shadow .28s ease;
}

.btn:hover,
.product-demo-btn:hover,
.ft-sticky-cta-btn:hover {
	transform: translateY(-2px) scale(1.015);
}

.header-actions .btn:hover,
.header-actions .btn:focus-visible {
	transform: scale(1.04);
}

/* ---------- 2. Flat-чипы MT4/MT5: колонка иконка+подпись ---------- */
.hero-floating-icons .floating-icon {
	flex-direction: column;
	gap: 8px;
	width: auto;
	height: auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(71, 186, 198, .6);
}

.hero-floating-icons .floating-icon svg {
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}

@media (max-width: 600px) {
	.hero-floating-icons .floating-icon {
		font-size: 10px;
		gap: 6px;
	}

	.hero-floating-icons .floating-icon svg {
		width: 36px;
		height: 36px;
	}
}

/* ---------- 1. SVG-иконки в features/trust: единый размер ---------- */
.feature-icon svg,
.ft-trust-icon svg {
	width: 30px;
	height: 30px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ft-trust-icon {
	color: #47BAC6;
}

/* ---------- 8. Trust-подписи: крупнее и воздушнее ---------- */
.ft-trust-item p {
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- 9. Sparkline в bento-метриках ---------- */
.metric-spark {
	display: block;
	width: 100%;
	height: 14px;
	margin-top: 4px;
	overflow: visible;
}

.metric-spark polyline {
	fill: none;
	stroke: #17808B;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Guard-deal: иллюстрация у правого края экрана в .cta ---------- */
/* Секция во всю ширину, поэтому right:0 = край вьюпорта.
   Текст секции НЕ сдвигаем: центровка контейнера нетронута.
   Пересечение с текстом гасит картинку через JS (trade.js). */
.cta {
	position: relative;
	overflow: hidden;
}

.cta-side-image {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(380px, 32vw);
	height: auto;
	z-index: 0;
	pointer-events: none;
	filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .25));
}

.cta .container {
	position: relative;
	z-index: 1;
}

/* Мобильный/планшет: иллюстрация в потоке под шагами, прижата вправо.
   В потоке она не пересекает текстовый блок, JS её не скрывает. */
@media (max-width: 1024px) {
	.cta-side-image {
		position: static;
		display: block;
		width: min(320px, 80vw);
		margin: 32px 0 0 auto;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.product-demo-btn,
	.ft-sticky-cta-btn,
	.header-actions .btn {
		transition: none !important;
	}
	.btn:hover,
	.product-demo-btn:hover,
	.ft-sticky-cta-btn:hover,
	.header-actions .btn:hover {
		transform: none !important;
	}
}