/* =====================================================================
   GZIRI — Homepage (2026)  ·  Lightweight edition
   Flat surfaces, standard elements, generous spacing.
   Motion is handled by animate.css (scroll-reveal via .gz-reveal).
   All .gz-* so it never fights the rest of the site.
   ===================================================================== */

:root {
	--gz-orange:      #F26522;
	--gz-orange-dark: #D9541A;
	--gz-orange-soft: #FFF1E8;
	--gz-navy:        #1B2540;
	--gz-ink:         #1F2733;
	--gz-muted:       #6B7280;
	--gz-line:        #E7EAF0;
	--gz-bg:          #F5F7FA;
	--gz-white:       #FFFFFF;
	--gz-radius:      14px;
	--gz-radius-sm:   10px;
	--gz-shadow:      0 6px 20px -12px rgba(27, 37, 64, .25);

	--gz-gap:         24px;
	--gz-section:     84px;   /* vertical rhythm between sections */
}

/* ----- base ----------------------------------------------------------- */
.gz-main,
body.gz-home { background: var(--gz-bg); color: var(--gz-ink); }
.gz-main * { box-sizing: border-box; }

.gz-container {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 24px;
}

.gz-section-head { text-align: center; margin-bottom: 48px; }
.gz-section-title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	margin: 0;
	color: var(--gz-ink);
}
.gz-section-title span { color: var(--gz-orange); }
.gz-section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--gz-orange);
	margin: 16px auto 0;
}
.gz-section-sub { color: var(--gz-muted); margin: 14px 0 0; font-size: 15px; }

/* ----- scroll reveal (animate.css) ------------------------------------ */
.gz-reveal { opacity: 0; }
.gz-reveal.animate__animated { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.gz-reveal { opacity: 1 !important; }
	.animate__animated { animation: none !important; }
}

/* ----- buttons -------------------------------------------------------- */
.gz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--gz-radius-sm);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}
.gz-btn--primary { background: var(--gz-orange); color: #fff; }
.gz-btn--primary:hover,
.gz-btn--primary:focus,
.gz-btn--primary:visited { background: var(--gz-orange-dark); color: #fff; }
.gz-btn--ghost { background: #fff; color: var(--gz-ink); border-color: var(--gz-line); }
.gz-btn--ghost:hover,
.gz-btn--ghost:focus,
.gz-btn--ghost:visited { color: var(--gz-orange); border-color: var(--gz-orange); }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
header.gz-header {
	background: #fff;
	border-bottom: 1px solid var(--gz-line);
	position: sticky;
	top: 0;
	z-index: 900;
}
.gz-nav { display: flex; align-items: center; gap: 24px; height: 74px; }
.gz-nav__logo img { height: 38px; width: auto; display: block; }

.gz-nav__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
.gz-nav__menu a {
	position: relative;
	font-weight: 500;
	font-size: 15px;
	color: var(--gz-ink);
	padding: 6px 0;
	text-decoration: none;
	white-space: nowrap;
}
.gz-nav__menu a:hover,
.gz-nav__menu a.is-active { color: var(--gz-orange); }
.gz-nav__menu a.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 2px;
	background: var(--gz-orange);
}

.gz-nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.gz-nav__status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: var(--gz-radius-sm);
	background: #fff;
	border: 1px solid var(--gz-line);
	font-weight: 600;
	font-size: 14px;
	color: var(--gz-ink);
}
.gz-nav__status i { color: var(--gz-orange); }
.gz-nav__status:hover { color: var(--gz-orange); border-color: var(--gz-orange); }

.gz-nav__lang {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--gz-line);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
}
.gz-nav__lang img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

.gz-nav__burger { display: none; font-size: 22px; color: var(--gz-ink); cursor: pointer; background: none; border: 0; }
.gz-nav__customer { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--gz-ink); }
.gz-nav__customer .customer-img { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; }

/* =====================================================================
   HERO
   ===================================================================== */
.gz-hero {
	padding: var(--gz-section) 0;
	background:
		radial-gradient(900px 420px at 88% 8%, rgba(242,101,34,.10), rgba(242,101,34,0) 60%),
		linear-gradient(165deg, #FFF4EC 0%, #F7F9FC 55%, var(--gz-bg) 100%);
	border-bottom: 1px solid var(--gz-line);
}
.gz-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.gz-hero__title {
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.18;
	font-weight: 700;
	margin: 0 0 20px;
}
.gz-hero__title span { display: block; }
.gz-hero__title-accent { color: var(--gz-orange); }
.gz-hero__tags { color: var(--gz-muted); font-weight: 500; font-size: 16px; margin: 0 0 32px; }

.gz-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.gz-feature { display: flex; align-items: center; gap: 14px; }
.gz-feature__icon {
	width: 48px; height: 48px;
	border-radius: var(--gz-radius-sm);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--gz-orange-soft);
	color: var(--gz-orange);
	font-size: 19px;
	flex: 0 0 auto;
}
.gz-feature__t { font-weight: 600; font-size: 16px; line-height: 1.2; }
.gz-feature__s { color: var(--gz-muted); font-size: 13px; }

/* ----- Features strip (moved out of hero) ----- */
.gz-features { padding: var(--gz-section) 0; }
.gz-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gz-gap); }
.gz-features .gz-feature {
	background: #fff;
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius);
	padding: 26px 28px;
	transition: border-color .18s ease;
}
.gz-features .gz-feature:hover { border-color: var(--gz-orange); }

.gz-hero__right { position: relative; }
.gz-hero__photo {
	height: 380px;
	border-radius: var(--gz-radius);
	background:
		linear-gradient(150deg, rgba(27,37,64,.12), rgba(242,101,34,.12)),
		url('/includes/assets/images/home-hero-bg.jpg') center/cover no-repeat;
	border: 1px solid var(--gz-line);
	/* Drop a real courier/van photo here to match the mockup. */
}
.gz-track {
	margin-top: 20px;
	background: #fff;
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius);
	padding: 20px 22px;
	box-shadow: var(--gz-shadow);
}
.gz-track h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.gz-track__form { display: flex; gap: 10px; }
.gz-track__form input[type="text"] {
	flex: 1;
	padding: 13px 14px;
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius-sm);
	font-size: 14px;
}
.gz-track__form input[type="text"]:focus { outline: none; border-color: var(--gz-orange); }
.gz-track__form button {
	width: 52px;
	border: 0;
	border-radius: var(--gz-radius-sm);
	background: var(--gz-orange);
	color: #fff;
	cursor: pointer;
}
.gz-track__form button:hover { background: var(--gz-orange-dark); }
.gz-track__form button img { width: 18px; filter: brightness(0) invert(1); }
.gz-track .tracking-response { margin-top: 14px; background: var(--gz-bg); border-radius: var(--gz-radius-sm); padding: 12px; font-size: 13px; }
.gz-track table { width: 100%; }
.gz-track .tracking-response-table-head td { font-weight: 600; padding: 4px 6px; }
.gz-track .tracking-response-table-cell td { padding: 4px 6px; }
.gz-track .tracking-response-bar span { font-size: 12px; color: var(--gz-muted); }

/* =====================================================================
   TARIFFS + WAREHOUSING  (flat cards)
   ===================================================================== */
.gz-band { padding: var(--gz-section) 0; }
.gz-band__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--gz-gap); }

.gz-tariffs {
	background: var(--gz-navy);
	border-radius: var(--gz-radius);
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}
.gz-tariffs__head { color: #fff; display: flex; flex-direction: column; justify-content: center; }
.gz-tariffs__head h3 { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.gz-tariffs__head p { color: #AEB7CC; margin: 0; font-size: 14px; }

.gz-price-card {
	background: #fff;
	border-radius: var(--gz-radius-sm);
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gz-price-card__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.gz-price-card__label i { color: var(--gz-orange); }
.gz-price-card__sub { color: var(--gz-muted); font-size: 12px; margin: 0 0 8px 26px; }
.gz-price-card__value { margin-top: auto; font-size: 40px; font-weight: 700; color: var(--gz-navy); line-height: 1; }
.gz-price-card__value .cur { color: var(--gz-orange); font-size: 26px; }
.gz-price-card--accent .gz-price-card__value { color: var(--gz-orange); }

.gz-warehouse {
	background: var(--gz-navy);
	border-radius: var(--gz-radius);
	padding: 32px;
	color: #fff;
	display: flex;
	flex-direction: column;
}
.gz-warehouse h3 { font-size: 21px; font-weight: 700; margin: 0 0 12px; }
.gz-warehouse p { color: #C4CBDB; font-size: 14px; margin: 0 0 24px; max-width: 30ch; }
.gz-warehouse .gz-btn { align-self: flex-start; margin-top: auto; }

/* =====================================================================
   SERVICES
   ===================================================================== */
.gz-services { padding: var(--gz-section) 0; background: #fff; border-top: 1px solid var(--gz-line); border-bottom: 1px solid var(--gz-line); }
.gz-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gz-gap); }
.gz-service {
	background: #fff;
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius);
	padding: 32px 24px;
	text-align: center;
	transition: border-color .18s ease, transform .18s ease;
}
.gz-service:hover { border-color: var(--gz-orange); transform: translateY(-4px); }
.gz-service__icon {
	width: 60px; height: 60px;
	margin: 0 auto 18px;
	border-radius: var(--gz-radius);
	display: flex; align-items: center; justify-content: center;
	background: var(--gz-orange-soft);
	color: var(--gz-orange);
	font-size: 24px;
}
.gz-service__t { font-weight: 600; font-size: 16px; margin: 0 0 8px; }
.gz-service__s { color: var(--gz-muted); font-size: 13px; margin: 0; line-height: 1.5; }

/* =====================================================================
   STATS
   ===================================================================== */
.gz-stats { padding: var(--gz-section) 0; }
.gz-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gz-gap);
}
.gz-stat {
	background: #fff;
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius);
	padding: 28px 20px;
	text-align: center;
}
.gz-stat__icon { display: block; font-size: 24px; color: var(--gz-orange); margin-bottom: 12px; }
.gz-stat__num { font-size: 34px; font-weight: 700; color: var(--gz-ink); line-height: 1; display: block; }
.gz-stat__label { font-size: 13px; color: var(--gz-muted); margin-top: 8px; display: block; }

/* =====================================================================
   CALCULATOR
   ===================================================================== */
.gz-calc { padding: 0 0 var(--gz-section); }
.gz-calc__box { background: #fff; border: 1px solid var(--gz-line); border-radius: var(--gz-radius); padding: 36px; }
.gz-calc__box h3 { font-size: 21px; font-weight: 700; margin: 0 0 24px; }
.gz-calc__box h3 i { color: var(--gz-orange); margin-right: 8px; }
.gz-calc__grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: center; }
.gz-calc__grid select {
	width: 100%;
	padding: 14px;
	border-radius: var(--gz-radius-sm);
	border: 1px solid var(--gz-line);
	background: #fff;
	font-size: 14px;
}
.gz-calc__grid select:focus { outline: none; border-color: var(--gz-orange); }
.gz-calc__grid button {
	padding: 15px 36px;
	border: 0;
	border-radius: var(--gz-radius-sm);
	background: var(--gz-orange);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.gz-calc__grid button:hover { background: var(--gz-orange-dark); }

/* =====================================================================
   LOGIN / REGISTRATION MODAL  (scoped to #loginBox)
   ===================================================================== */
#loginBox .modal-dialog { max-width: 440px; }
#loginBox .modal-content { background: none; border: 0; }
#loginBox .modal-header { background: #fff; border-radius: var(--gz-radius) var(--gz-radius) 0 0; padding: 8px 16px 0; }
#loginBox .modal-body { background: #fff; border-radius: 0 0 var(--gz-radius) var(--gz-radius); padding: 0 26px 26px; box-shadow: var(--gz-shadow); }

#loginBox .auth-box-header h5,
#loginBox .reg-box-header h5 {
	font-size: 16px; font-weight: 600; padding: 12px 5px;
	color: var(--gz-ink); border-bottom: 3px solid var(--gz-orange); border-radius: 0;
}

#loginBox .input-small-label {
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius-sm);
	padding: 8px 14px;
	margin-bottom: 14px;
	background: #fff;
	transition: border-color .15s ease;
}
#loginBox .input-small-label:focus-within { border-color: var(--gz-orange); }
#loginBox .input-small-label label { display: block; font-size: 11px; font-weight: 600; color: var(--gz-muted); margin: 0; }
#loginBox .input-small-label input,
#loginBox .input-small-label input:focus {
	width: 100%; border: 0; outline: none; padding: 2px 0 0;
	font-size: 15px; color: var(--gz-ink); background: transparent; border-radius: 0;
}

#loginBox select,
#loginBox select:focus {
	width: 100%; padding: 13px 14px;
	border: 1px solid var(--gz-line); border-radius: var(--gz-radius-sm);
	background: #fff; color: var(--gz-ink); font-size: 15px; outline: none;
}
#loginBox select:focus { border-color: var(--gz-orange); }

#loginBox .auth-box a,
#loginBox .auth-box a:hover,
#loginBox .auth-box a:visited { color: var(--gz-orange); font-size: 13px; font-weight: 600; }

#loginBox .auth-button button {
	width: 100%; padding: 15px 0; margin: 24px 0 6px;
	border: 0; border-radius: var(--gz-radius-sm);
	background: var(--gz-orange); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
	transition: background .18s ease;
}
#loginBox .auth-button button:hover { background: var(--gz-orange-dark); }

#loginBox input[type="radio"],
#loginBox input[type="checkbox"] { accent-color: var(--gz-orange); width: 16px; height: 16px; vertical-align: -2px; }
#loginBox .reg-box label,
#loginBox .auth-box label[for] { font-size: 14px; color: var(--gz-ink); }
#loginBox .error { color: #E23D3D; font-size: 12px; margin: -8px 0 8px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer { background: var(--gz-navy); color: #C4CBDB; padding-top: 44px; }
footer .social-icons ul { padding: 0; }
footer .footer-call h5 a,
footer a { color: #fff; }
footer .footer-about p,
footer .credits span { color: #9AA3B8; }
footer .credits { border-top: 1px solid rgba(255,255,255,.1); }
footer .langSwitch { cursor: pointer; }

/* =====================================================================
   RESPONSIVE  ·  mobile-first cleanup
   ===================================================================== */
@media (max-width: 992px) {
	:root { --gz-section: 60px; }
	.gz-nav__menu, .gz-nav__status { display: none; }
	.gz-nav__burger { display: inline-flex; order: -1; }
	.gz-nav { height: 66px; }

	.gz-hero__grid { grid-template-columns: 1fr; gap: 36px; }
	.gz-hero__photo { height: 300px; }

	.gz-band__grid { grid-template-columns: 1fr; }
		.gz-features__grid { grid-template-columns: repeat(3, 1fr); }
	.gz-services__grid { grid-template-columns: repeat(2, 1fr); }
	.gz-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.gz-container { padding: 0 18px; }

	.gz-hero { text-align: center; }
	.gz-hero__tags { font-size: 15px; }
	.gz-hero__cta { justify-content: center; }
	.gz-btn { width: 100%; }               /* full-width, thumb-friendly */
	.gz-features__grid { grid-template-columns: 1fr; }

	.gz-tariffs { grid-template-columns: 1fr; padding: 24px; }
	.gz-services__grid { grid-template-columns: 1fr; }
	.gz-stats__grid { grid-template-columns: 1fr 1fr; }

	.gz-calc__box { padding: 24px; }
	.gz-calc__grid { grid-template-columns: 1fr; }
	.gz-calc__grid button { width: 100%; }

	.gz-section-head { margin-bottom: 32px; }
}
@media (max-width: 380px) {
	.gz-stats__grid { grid-template-columns: 1fr; }
}