/* =========================================================
   Forex Tools — Hero: две колонки. Фон ограничен первым
   экраном. Картинки крупные, масштабируются clamp()/vh.
   Правая картинка (.hero-image) — автомасштаб через
   max-width: min(100%, Nvw, Npx), высота auto сохраняет пропорции.
   ========================================================= */

.hero {
	position: relative;
	height: calc(100vh - var(--header-height));
	height: calc(100dvh - var(--header-height));
	display: flex;
	align-items: center;
	overflow: hidden;
	overflow: clip;
	background: #0A1F41;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 30%, rgba(71,186,198,.22) 0%, transparent 42%),
		radial-gradient(circle at 82% 68%, rgba(23,128,139,.28) 0%, transparent 46%),
		url('https://forex-tools.ru/wp-content/uploads/bg-header.jpg') center / cover no-repeat;
	z-index: 0;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10,31,65,.88) 0%, rgba(10,31,65,.6) 48%, rgba(10,31,65,.3) 100%);
	z-index: 1;
}
.hero-full { width: 100%; max-width: none; margin: 0; padding: 0 clamp(20px, 4vw, 72px); position: relative; z-index: 2; max-height: 100%; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 88px); align-items: center; width: 100%; max-height: 100%; padding: clamp(16px, 2.4vh, 44px) 0; }
.hero-left { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-height: 100%; }
.hero-visual-left { margin-bottom: clamp(12px, 1.8vh, 24px); align-self: flex-start; width: 100%; }
.hero-image-left { width: 100%; max-width: clamp(320px, 86%, 600px); max-height: clamp(150px, 30vh, 360px); height: auto; object-fit: contain; object-position: left center; filter: drop-shadow(0 16px 32px rgba(0,0,0,.4)); opacity: 0; animation: ftSlideInLeft .9s .2s cubic-bezier(.4,0,.2,1) forwards, ftDriftX 7s 1.2s ease-in-out infinite; }
@keyframes ftSlideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ftDriftX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(16px); } 50% { transform: translateX(0); } 75% { transform: translateX(-16px); } }
.hero-content { text-align: left; width: 100%; }
.hero-title { font-size: clamp(30px, 4vw, 62px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: #47BAC6; color: var(--color-p1); margin: 0 0 clamp(12px, 1.4vh, 22px); text-shadow: 2px 2px 0 rgba(0,0,0,.45); opacity: 0; animation: ftFadeUp .8s .1s cubic-bezier(.4,0,.2,1) forwards; }
.hero-subtitle { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 clamp(20px, 2.2vh, 36px); max-width: 52ch; font-weight: 400; opacity: 0; animation: ftFadeUp .8s .3s cubic-bezier(.4,0,.2,1) forwards; }
.hero-actions { display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 18px); opacity: 0; animation: ftFadeUp .8s .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes ftFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; max-height: 100%; width: 100%; }

/* Правая картинка: width:100% заполняет контейнер, max-width через
   min() ограничивает долю вьюпорта и свой абсолютный максимум.
   height:auto сохраняет пропорции без «ступенек» в размерах. */
.hero-image {
	width: 100%;
	max-width: min(100%, 62vw, 880px);
	max-height: 74vh;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
	will-change: transform;
	transition: transform .3s ease-out;
	opacity: 0;
	animation: ftSlideInRight 1s .4s cubic-bezier(.4,0,.2,1) forwards, ftFloatRobot 7s 1.4s ease-in-out infinite;
}
@keyframes ftSlideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ftFloatRobot { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-8px) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(0deg); } 75% { transform: translateY(-6px) rotate(1deg); } }
.hero-floating-icons { position: absolute; inset: -2%; pointer-events: none; z-index: 3; }
.floating-icon { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: clamp(42px, 3.5vw, 62px); height: clamp(42px, 3.5vw, 62px); border-radius: 50%; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); color: #ffffff; color: var(--color-p9); font-family: var(--font-heading); font-weight: 700; font-size: clamp(11px, .95vw, 14px); letter-spacing: .5px; animation: ftFloatIcon 8s ease-in-out infinite; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.floating-icon.fi-1 { top: 2%; left: 2%; animation-delay: 0s; }
.floating-icon.fi-2 { top: 16%; right: 0; animation-delay: 1.5s; background: rgba(71,186,198,.25); }
.floating-icon.fi-3 { bottom: 10%; left: 0; animation-delay: 3s; }
.floating-icon.fi-4 { bottom: 0; right: 8%; animation-delay: 4.5s; background: rgba(255,127,0,.25); }
@keyframes ftFloatIcon { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-10px) rotate(-3deg); } 66% { transform: translateY(-5px) rotate(2deg); } }
.hero-visual-fallback { background: linear-gradient(135deg, rgba(71,186,198,.15), rgba(23,128,139,.15)); border-radius: var(--radius-lg); min-height: clamp(300px, 60vh, 600px); width: 100%; }
@supports (height: 100dvh) { .hero { min-height: calc(100dvh - var(--header-height)); } }
@media (max-width: 1024px) {
	.hero { height: auto; min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); padding: 24px 0; }
	.hero-full { padding: 0 clamp(16px, 4vw, 40px); max-height: none; }
	.hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; max-height: none; }
	.hero-left { order: 2; align-items: center; max-height: none; }
	.hero-visual-left { align-self: center; margin-bottom: 16px; width: auto; }
	.hero-image-left { max-width: clamp(280px, 72vw, 500px); max-height: clamp(140px, 22vh, 260px); object-position: center; }
	.hero-content { text-align: center; }
	.hero-subtitle { margin-left: auto; margin-right: auto; max-width: 56ch; }
	.hero-actions { justify-content: center; width: auto; }
	.hero-visual { order: 1; min-height: 240px; max-height: none; }
	.hero-image { max-width: min(100%, 86vw, 700px); max-height: 72vh; }
	.floating-icon { width: 40px; height: 40px; font-size: 11px; }
}
@media (max-width: 600px) {
	.hero-full { padding: 0 16px; }
	.hero-title { font-size: clamp(28px, 7.8vw, 36px); }
	.hero-subtitle { font-size: 15px; }
	.hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
	.hero-actions .btn { width: 100%; }
	.hero-image { max-width: min(100%, 96vw, 540px); max-height: 70vh; }
	.hero-visual { min-height: 220px; }
	.hero-image-left { max-width: min(94vw, 440px); max-height: clamp(120px, 20vh, 220px); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-image, .hero-image-left, .floating-icon, .hero-title, .hero-subtitle, .hero-actions { animation: none; opacity: 1; transform: none; }
}