/* ==========================================================================
   Hero / Site Design — "Silk Route" theme
   Light jade-green palette with sandstone accent, built around the
   transit-corridor subject (Afghanistan ⇄ Kyrgyzstan ⇄ Tajikistan ⇄
   Uzbekistan ⇄ China ⇄ Iran). The recurring visual device is the dashed
   route line — it appears in the hero badge, the routes map, and as the
   scroll-reveal underline — tying the motion language to "vehicles moving".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Color tokens -------------------------------------------------- */
  --bg:            #F6FAF6;   /* page background, near-white with a green cast */
  --bg-soft:       #EAF6EC;   /* soft green section background */
  --surface:       #FFFFFF;   /* cards */
  --green-100:     #D6EEDB;
  --green-300:     #9FD9AE;
  --green-500:     #2F9E63;   /* primary brand green */
  --green-600:     #237E4E;   /* hover / pressed */
  --green-900:     #0E3B26;   /* deep green, dark sections & headlines */
  --sand-300:      #E9CE9C;
  --sand-500:      #C79A46;   /* secondary accent — desert / silk-road gold */
  --ink:           #142019;   /* body text */
  --ink-soft:      #4B5B52;   /* secondary text */
  --line:          #D9E8DC;   /* hairline borders */
  --white:         #FFFFFF;

  /* --- Type ------------------------------------------------------------ */
  --font-display: 'Sora', 'Vazirmatn', system-ui, sans-serif;
  --font-body:    'Inter', 'Vazirmatn', system-ui, sans-serif;

  /* --- Shape / motion ---------------------------------------------------*/
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

html[dir="rtl"] {
  --font-display: 'Vazirmatn', 'Sora', system-ui, sans-serif;
  --font-body:    'Vazirmatn', 'Inter', system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------- */
/* Base                                                                   */
/* --------------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-600);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--sand-500);
  display: inline-block;
  border-radius: 2px;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--green-900); line-height: 1.15; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--ink-soft); line-height: 1.7; }

.section-heading { margin-bottom: 44px; }
.section-intro { max-width: 46ch; color: var(--ink-soft); }

/* Buttons ---------------------------------------------------------------*/

.btn {
  --btn-y: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transform: translateY(var(--btn-y));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover { --btn-y: -3px; }
.btn:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px) scaleX(-1); }
.btn:active { --btn-y: -1px; }

.btn-primary {
  background: var(--green-500);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(14,59,38,.15);
}
.btn-primary:hover { background: var(--green-600); box-shadow: 0 14px 28px -12px rgba(31,122,77,.55); }

.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 60px at var(--mx,50%) 0%, rgba(255,255,255,.35), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.btn-glow:hover::after { opacity: 1; }

.btn-outline {
  background: transparent;
  color: var(--green-600);
  border-color: var(--green-300);
}
.btn-outline:hover { background: var(--green-100); border-color: var(--green-500); }

.btn-sm { padding: 10px 18px; font-size: 0.88rem; }

/* --------------------------------------------------------------------- */
/* HERO                                                                   */
/* --------------------------------------------------------------------- */

.hero-night {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--green-900);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  animation: hero-video-in 6s var(--ease) forwards;
}

@keyframes hero-video-in {
  from { transform: scale(1.12); filter: saturate(1.05) contrast(1.02) brightness(.85); }
  to   { transform: scale(1.02); filter: saturate(1.05) contrast(1.02) brightness(1); }
}

.hero-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,59,38,.15) 0%, rgba(14,59,38,0) 35%, rgba(14,59,38,.55) 100%);
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,38,24,.86) 0%, rgba(9,38,24,.55) 38%, rgba(9,38,24,.25) 65%, rgba(9,38,24,.55) 100%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: 64px; }

.flag-bar {
  display: flex;
  width: 64px;
  height: 5px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 28px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: flag-grow .9s .15s var(--ease) forwards;
}
html[dir="rtl"] .flag-bar { transform-origin: right center; }

@keyframes flag-grow { to { transform: scaleX(1); } }

.flag-stripe { flex: 1; }
.stripe-black { background: #101010; }
.stripe-red   { background: #D22F2F; }
.stripe-green { background: #2F9E63; }

.hero-copy { max-width: 640px; }

.hero-copy .eyebrow { color: var(--sand-300); opacity: 0; animation: rise-in .7s .3s var(--ease) forwards; }
.hero-copy .eyebrow::before { background: var(--sand-300); }

.hero-title {
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  opacity: 0;
  animation: rise-in .8s .45s var(--ease) forwards;
}
.hero-title .accent { color: var(--green-300); }

.hero-tagline {
  color: rgba(255,255,255,.88);
  font-size: 1.1rem;
  max-width: 52ch;
  opacity: 0;
  animation: rise-in .8s .6s var(--ease) forwards;
}
.hero-description {
  color: rgba(255,255,255,.68);
  max-width: 56ch;
  opacity: 0;
  animation: rise-in .8s .72s var(--ease) forwards;
}

.hero-buttons {
  margin-top: 30px;
  opacity: 0;
  animation: rise-in .8s .85s var(--ease) forwards;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  position: absolute;
  z-index: 2;
  bottom: 56px;
  inset-inline-end: 24px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  animation: badge-pulse 3.2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,158,99,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(47,158,99,0); }
}

/* --------------------------------------------------------------------- */
/* Scroll-reveal system (single shared mechanism, driven by JS toggling
   .is-visible — see hero-modern.js)                                     */
/* --------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* --------------------------------------------------------------------- */
/* ABOUT                                                                  */
/* --------------------------------------------------------------------- */

.about { padding-block: 96px; background: var(--bg); }
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }

.about-copy .rich-text { color: var(--ink-soft); }
.about-copy .rich-text p { margin: 0 0 1em; }

.stats-row { display: flex; gap: 40px; margin-top: 36px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green-600);
  line-height: 1;
}
.stat-label { color: var(--ink-soft); font-size: 0.9rem; margin-top: 6px; }

.about-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.about-media img { width: 100%; display: block; transition: transform .6s var(--ease); }
.about-media:hover img { transform: scale(1.04); }
.about-overlay-text {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  background: rgba(14,59,38,.82);
  color: var(--white);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* --------------------------------------------------------------------- */
/* SERVICES                                                               */
/* --------------------------------------------------------------------- */

.services-modern { padding-block: 96px; background: var(--bg-soft); }
.services-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.services-heading .accent { color: var(--green-500); }

.services-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }

.service-lane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-lane:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -20px rgba(14,59,38,.25);
  border-color: var(--green-300);
}

.service-lane-media { aspect-ratio: 4/3; background: var(--green-100); overflow: hidden; }
.service-lane-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.service-lane:hover .service-lane-media img { transform: scale(1.08); }

.service-lane-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.service-lane-icon img { width: 40px; height: 40px; transition: transform .5s var(--ease); }
.service-lane:hover .service-lane-icon img { transform: rotate(-8deg) scale(1.1); }
.icon-fallback { font-size: 1.6rem; color: var(--green-500); }

.service-lane-body { padding: 22px 24px 26px; }
.service-lane-body h3 { margin-bottom: 8px; }
.service-lane-body p { font-size: 0.95rem; margin: 0 0 14px; }

.link-more {
  color: var(--green-600);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-more .arrow { transition: transform .3s var(--ease); }
.link-more:hover .arrow { transform: translateX(5px); }
html[dir="rtl"] .link-more:hover .arrow { transform: translateX(-5px) scaleX(-1); }

@media (max-width: 900px) {
  .services-lanes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- */
/* ROUTES — the signature "moving vehicle" motif                        */
/* --------------------------------------------------------------------- */

.routes { padding-block: 96px; background: var(--green-900); color: var(--white); overflow: hidden; }
.routes-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.routes-copy .eyebrow { color: var(--sand-300); }
.routes-copy .eyebrow::before { background: var(--sand-300); }
.routes-copy h2 { color: var(--white); }
.routes-copy p { color: rgba(255,255,255,.72); }

.routes-map { position: relative; }

.route-line {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 28px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
}

.route-stop { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,.85); }

.route-flag {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
}
.route-flag img { width: 100%; height: 100%; object-fit: cover; }
.flag-emoji { font-size: 1.4rem; }

.flag-wave { animation: flag-wave 2.6s ease-in-out infinite; }
@keyframes flag-wave { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }

.route-arrow {
  color: var(--green-300);
  font-size: 1.2rem;
  position: relative;
  margin-inline: 2px;
}
.route-arrow::after {
  content: "";
  position: absolute;
  inset-inline-start: -18px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--green-300) 0 6px, transparent 6px 10px);
  transform: translateY(-50%);
  animation: dash-move 1.4s linear infinite;
}
@keyframes dash-move { to { background-position: 16px 0; } }

.route-notes { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.route-notes li { color: rgba(255,255,255,.75); font-size: 0.9rem; }

@media (max-width: 860px) {
  .routes-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------- */
/* WHY CHOOSE US                                                         */
/* --------------------------------------------------------------------- */

.why-choose { padding-block: 96px; background: var(--bg); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }

.why-card {
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -20px rgba(14,59,38,.22); }

.icon-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: background .35s ease, transform .35s var(--ease);
}
.why-card:hover .icon-circle { background: var(--green-500); transform: rotate(-6deg); }
.icon-circle img { width: 24px; height: 24px; transition: filter .35s ease; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- */
/* PRODUCTS                                                               */
/* --------------------------------------------------------------------- */

.products { padding-block: 96px; background: var(--bg-soft); }
.products .section-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }

.product-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--green-100);
}
.product-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.product-card:hover img { transform: scale(1.1); }
.product-label {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(14,59,38,.82);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  text-align: center;
  transform: translateY(4px);
  opacity: .92;
  transition: transform .35s var(--ease), background .35s ease;
}
.product-card:hover .product-label { transform: translateY(0); background: var(--green-600); }

@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------- */
/* CTA BANNER                                                             */
/* --------------------------------------------------------------------- */

.cta-banner { position: relative; padding-block: 90px; overflow: hidden; background: var(--green-900); }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(9,38,24,.92), rgba(31,122,77,.75)); }

.cta-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-inner h2 { color: var(--white); margin-bottom: 8px; }
.cta-inner p { color: rgba(255,255,255,.78); margin: 0; }

.cta-actions .btn-primary { background: var(--sand-500); }
.cta-actions .btn-primary:hover { background: #B3872F; }

/* --------------------------------------------------------------------- */
/* Focus states (accessibility)                                          */
/* --------------------------------------------------------------------- */

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 6px;
}