:root {
	--bg: #f5f6fb;
	--bg-alt: #ffffff;
	--text-main: #1f2430;
	--text-muted: #6a7280;
	--accent: #ff9a3c;
	--accent-strong: #ff7e5f;
	--accent-soft: #ffe3c7;
	--border-soft: #e0e4f0;
	--radius-lg: 18px;
	--radius-xl: 26px;
	--shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
	--max-width: 1120px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: radial-gradient(circle at top, #fdfbfb 0, #f5f6fb 60%, #edf0f8 100%);
	color: var(--text-main);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

/* NAVBAR */

.navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background: linear-gradient(to bottom, rgba(245, 246, 251, 0.96), rgba(245, 246, 251, 0.88));
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.logo-svg {
	width: 40px;
	height: 40px;
}

.logo-text-main {
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 14px;
	text-transform: uppercase;
}

.logo-text-sub {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-muted);
}

.nav-links {
	display: flex;
	gap: 18px;
	margin-left: 24px;
}

.nav-link {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-muted);
	position: relative;
	padding-bottom: 4px;
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent-strong), var(--accent));
	transition: width 0.22s ease;
}

.nav-link:hover::after {
	width: 100%;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 999px;
    cursor: pointer;
}

.nav-toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #475569;
    margin: 3px 0;
}

/* небольшая анимация при активном меню */
.navbar.nav-open .nav-toggle-line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.navbar.nav-open .nav-toggle-line:nth-child(2) {
    opacity: 0;
}
.navbar.nav-open .nav-toggle-line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.lang-switch {
	display: inline-flex;
	padding: 3px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.lang-btn {
	border: none;
	background: transparent;
	padding: 5px 10px;
	font-size: 12px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lang-btn--active {
	background: linear-gradient(135deg, var(--accent-strong), var(--accent));
	color: #fff;
	box-shadow: 0 4px 10px rgba(255, 126, 95, 0.34);
}

.nav-cta {
	display: none;
}

/* HERO */

.hero {
	padding: 1.5rem 0 60px;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
	gap: 36px;
	align-items: center;
}

.eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent-strong);
	background: rgba(255, 206, 153, 0.3);
	padding: 6px 11px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, #fff2c7 0, var(--accent-strong) 60%);
}

.hero-title {
	margin: 18px 0 10px;
	font-size: clamp(30px, 4vw, 38px);
	line-height: 1.1;
}

.hero-gradient {
	background: linear-gradient(120deg, #ff7e5f, #ffb347, #f3a43b);
	-webkit-background-clip: text;
	color: transparent;
}

.hero-text {
	font-size: 15px;
	color: var(--text-muted);
	max-width: 460px;
}

.hero-badges {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.badge {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(224, 228, 240, 0.9);
	color: var(--text-muted);
}

.badge strong {
	color: var(--text-main);
}

.hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
	align-items: center;
}

.btn-primary {
	border-radius: 999px;
	border: none;
	padding: 11px 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: radial-gradient(circle at 10% 20%, #ffe3c7 0, #ff9a3c 35%, #ff7e5f 80%);
	color: #2b1810;
	box-shadow: 0 14px 34px rgba(255, 137, 92, 0.5);
	transform: translateY(0);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 40px rgba(255, 137, 92, 0.6);
}

.btn-secondary {
	border-radius: 999px;
	padding: 10px 20px;
	border: 1px solid var(--border-soft);
	background: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--text-main);
}

.btn-secondary span.dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--accent-strong);
}

.hero-meta {
	margin-top: 16px;
	font-size: 12px;
	color: var(--text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.hero-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hero-meta span::before {
	content: "•";
	font-size: 15px;
	color: var(--accent-strong);
}

.hero-meta span:first-child::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: var(--accent-strong);
}

.hero-visual {
	position: relative;
}

.hero-card {
	border-radius: var(--radius-xl);
	background: linear-gradient(140deg, #ffffff, #fff8f0);
	box-shadow: var(--shadow-soft);
	padding: 18px;
	position: relative;
	overflow: hidden;
}

.hero-card-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
}

.hero-truck {
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, #e2ebf0, #fdfbfb);
	min-height: 160px;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	flex: 1 1 100%;
    width: 100%;
    min-height: 270px;
}

.hero-truck::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("./images/truck.png");
	background-size: cover;
	background-position: center;
	opacity: 0.78;
	mix-blend-mode: multiply;
}

.hero-truck-overlay {
	position: relative;
	color: #ffffff;
	max-width: 60%;
	text-shadow: 0 8px 18px rgba(15, 23, 42, 0.7);
}

.hero-truck-overlay h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.hero-truck-overlay p {
	margin: 0;
	font-size: 12px;
}

.hero-pills {
	position: absolute;
	right: 18px;
	top: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-pill {
	background: rgba(255, 255, 255, 0.96);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 10px 20px rgba(148, 163, 184, 0.3);
}

.hero-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: radial-gradient(circle at 20% 20%, #fefce8 0, #22c55e 60%);
}

.hero-card-footer {
	margin-top: 14px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.hero-small {
	flex: 1;
	min-width: 150px;
	border-radius: 16px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px dashed rgba(248, 180, 80, 0.6);
	font-size: 11px;
	color: var(--text-muted);
}

.hero-small strong {
	display: block;
	font-size: 13px;
	color: var(--text-main);
}

.hero-float {
	position: absolute;
	left: -20px;
	bottom: -18px;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), rgba(255, 193, 113, 0.2));
    opacity: 0.4;
    pointer-events: none;
    filter: blur(8px);
}

/* SECTIONS */

section {
	padding: 40px 0;
}

.section-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 22px;
}

.section-title {
	font-size: 22px;
	margin: 0;
}

.section-subtitle {
	font-size: 13px;
	color: var(--text-muted);
	max-width: 420px;
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.card {
	background: var(--bg-alt);
	border-radius: var(--radius-lg);
	padding: 16px;
	box-shadow: 0 12px 28px rgba(148, 163, 184, 0.18);
	border: 1px solid rgba(226, 232, 240, 0.85);
	position: relative;
	overflow: hidden;
}

.card-icon {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--accent-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.card-title {
	font-size: 15px;
	margin: 0 0 6px;
}

.card-text {
	font-size: 13px;
	color: var(--text-muted);
}

.card-tag {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.03);
	color: var(--text-muted);
}

.geo-grid {
	display: grid;
	grid-template-columns: 1.1fr 1.2fr;
	gap: 22px;
}

.geo-map {
	border-radius: var(--radius-xl);
	background: linear-gradient(135deg, #ffffff, #edf2ff);
	padding: 18px;
	box-shadow: var(--shadow-soft);
	position: relative;
	overflow: hidden;
}

.geo-pill {
	position: absolute;
	padding: 6px 10px;
	font-size: 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 14px 28px rgba(148, 163, 184, 0.4);
}

.geo-pill--left {
	left: 12%;
	top: 18%;
}

.geo-pill--right {
	right: 8%;
	bottom: 20%;
}

.geo-list {
	display: grid;
	gap: 8px;
	font-size: 13px;
	color: var(--text-muted);
}

.geo-list span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.geo-list span::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.7);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.geo-list span:nth-child(1)::before {
	content: "EU";
	font-size: 9px;
	color: var(--text-muted);
}

.geo-list span:nth-child(2)::before {
	content: "AM";
	font-size: 9px;
}

.geo-list span:nth-child(3)::before {
	content: "GE";
	font-size: 9px;
}

.geo-list span:nth-child(4)::before {
	content: "+";
	font-size: 11px;
}

.advantages-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.adv-card {
	background: rgba(255, 255, 255, 0.96);
	border-radius: 16px;
	padding: 12px 12px 14px;
	border: 1px solid rgba(226, 232, 240, 0.85);
	font-size: 12px;
}

.adv-number {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent-strong);
	margin-bottom: 4px;
}

.adv-title {
	font-size: 14px;
	margin-bottom: 4px;
}

.fleet-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
	gap: 22px;
}

.fleet-photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, #e2ebf0, #fdfbfb);
	min-height: 200px;
}

.fleet-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("./images/trucks.png");
	background-size: cover;
	background-position: center;
	opacity: 0.78;
	mix-blend-mode: multiply;
}

.fleet-photo-caption {
	position: absolute;
	left: 20px;
	bottom: 18px;
	color: #fff;
	text-shadow: 0 8px 20px rgba(15, 23, 42, 0.9);
	font-size: 13px;
}

.fleet-list {
	font-size: 13px;
	color: var(--text-muted);
	display: grid;
	gap: 6px;
}

.fleet-list strong {
	color: var(--text-main);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.step {
	background: var(--bg-alt);
	border-radius: 16px;
	padding: 12px;
	border: 1px dashed rgba(203, 213, 225, 0.9);
	font-size: 12px;
}

.step-number {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--accent-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	margin-bottom: 6px;
}

.step-title {
	font-size: 13px;
	margin-bottom: 4px;
}

/* CONTACTS */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
	gap: 22px;
}

.contact-card {
	background: var(--bg-alt);
	border-radius: var(--radius-xl);
	padding: 20px;
	box-shadow: var(--shadow-soft);
	border: 1px solid rgba(226, 232, 240, 0.9);
}

.contact-item {
	font-size: 13px;
	margin-bottom: 10px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* .contact-label { */
	/* width: 90px; */
	/* font-size: 12px; */
	/* text-transform: uppercase; */
	/* letter-spacing: 0.16em; */
	/* color: var(--text-muted); */
/* } */

.contact-label {
    width: 120px;                  /* было 90px — немного расширяем колонку */
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;        /* чуть меньше разрежаем, чтобы текст короче был */
    color: var(--text-muted);
    word-wrap: break-word;
    overflow-wrap: break-word;     /* разрешаем перенос внутри длинных слов */
}

@media (max-width: 480px) {
    .contact-item {
        flex-direction: column;   /* метка сверху, значение снизу */
        align-items: flex-start;
        gap: 2px;
    }

    .contact-label {
        width: auto;             /* свободная ширина */
    }
}

.contact-value {
	font-size: 13px;
}

.contact-highlight {
	font-size: 12px;
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(255, 247, 237, 0.9);
	color: #7c2d12;
}

.contact-form {
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius-xl);
	padding: 18px;
	border: 1px solid rgba(226, 232, 240, 0.9);
}

.form-row {
	display: flex;
	gap: 10px;
}

.form-group {
	margin-bottom: 10px;
	flex: 1;
}

label {
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
	color: var(--text-muted);
}

input, textarea {
	width: 100%;
	border-radius: 12px;
	border: 1px solid rgba(203, 213, 225, 0.9);
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	outline: none;
	background: #fdfdfd;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input:focus, textarea:focus {
	border-color: rgba(248, 180, 80, 0.9);
	box-shadow: 0 0 0 1px rgba(255, 152, 100, 0.35);
	background: #ffffff;
}

textarea {
	resize: vertical;
	min-height: 80px;
}

.form-note {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 6px;
}

.footer {
	padding: 18px 0 24px;
	font-size: 11px;
	color: var(--text-muted);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.footer span {
	opacity: 0.9;
}

/* ANIMATIONS */

.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .hero-grid,
    .geo-grid,
    .fleet-grid,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero {
        padding-top: 26px;
    }

    .hero-visual {
        order: -1;
    }

    .hero-card-footer {
        flex-direction: column;
    }

    /* ---- ШАПКА НА МОБИЛЕ ---- */

    .navbar-inner {
        padding: 8px 0;
    }

    .logo-wrap {
        gap: 8px;
    }

    .nav-right {
        margin-left: auto;
    }

    /* показываем бургер */
    .nav-toggle {
        display: inline;
    }
	
	.lang-switch--desktop {
        display: none!important;
    }
	
	.top-cta-inner {
        justify-content: space-between!important;
        align-items: center;
    }

    .lang-switch--mobile {
        display: inline-flex!important;        /* показываем мобильные языки */
    }

    .top-cta-btn {
        padding-inline: 16px;
        font-size: 13px;
    }

    /* меню по умолчанию спрятано и выезжает ниже шапки */
    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: rgba(245, 246, 251, 0.98);
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 8px 16px 10px;
        z-index: 19;
    }

    .navbar.nav-open .nav-links {
        display: flex;
    }

    .nav-link {
        font-size: 12px;
        letter-spacing: 0.1em;
        padding: 4px 0;
    }
}

@media (max-width: 640px) {
	.cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.advantages-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero-card {
		padding: 14px;
	}

	.hero-truck {
		min-height: 140px;
	}

	.hero-float {
		display: none;
	}

	.contact-card, .contact-form {
		padding: 14px;
	}

	.form-row {
		flex-direction: column;
	}

	.navbar-inner {
		padding: 8px 0;
	}
}

.top-cta {
    background: transparent;          /* фон можно менять/убрать */
    padding-top: 8px;
	padding-bottom: 1.5rem;
}

.top-cta-inner {
    display: flex;
    justify-content: flex-end;   /* на десктопе только кнопка справа */
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.lang-switch--mobile {
    display: none;
}

.lang-switch--desktop {
    display: inline-flex;
}

.top-cta-btn {
    padding-inline: 20px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .top-cta-inner {
        justify-content: center;
    }

    .top-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal-backdrop.open {
    display: flex;
}

.modal-window {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    max-width: 360px;
    width: 90%;
    font-size: 14px;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.modal-title {
    margin: 0;
    font-size: 16px;
}

.modal-text {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.modal-btn {
    width: 100%;
    justify-content: center;
}

.modal-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #fee2c5;
    border-top-color: var(--accent-strong);
    animation: modal-spin 0.6s linear infinite;
}

.modal-spinner.hidden {
    display: none;
}

@keyframes modal-spin {
    to {
        transform: rotate(360deg);
    }
}