:root {
  --navy: #0B2545;
  --navy-2: #14264d;
  --blue: #13315C;
  --orange: #F26B1D;
  --orange-2: #FF8F4D;
  --light: #F3F5F8;
  --text: #24304a;
  --muted: #6b7690;
  --white: #fff;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(11, 37, 69, 0.12);
  --road-speed: .5s; /* time for road lines to move one 90px period */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.accent { color: var(--orange); }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 200; }
#scrollBar {
  height: 100%; width: 0; position: relative;
  transition: opacity .3s, background .6s;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
}
#scrollBar[data-mode="air"] { background: linear-gradient(90deg, var(--orange), #9fd3ff); }
#scrollBar[data-mode="sea"] { background: linear-gradient(90deg, var(--orange), #3d7bd9); }
.scroll-vehicle {
  position: absolute; right: 0; top: 0; transform: translateX(55%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.scroll-vehicle svg { display: block; height: auto; }
.scroll-vehicle .v-road svg { width: 42px; animation: svRoad .3s ease-in-out infinite alternate; }
.scroll-vehicle .v-air svg { width: 58px; transform: rotate(-8deg); animation: svAir 1.6s ease-in-out infinite alternate; }
.scroll-vehicle .v-sea svg { width: 54px; transform-origin: 50% 80%; animation: svSea 2s ease-in-out infinite; }
@keyframes svRoad { to { transform: translateY(-1px); } }
@keyframes svAir { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(-4deg) translateY(4px); } }
@keyframes svSea { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* swap animation when the vehicle changes */
.scroll-vehicle .swap-in { display: block; animation: svIn .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes svIn {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.scroll-vehicle .puff {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  animation: svPuff .5s ease-out forwards; pointer-events: none;
}
@keyframes svPuff { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: var(--white);
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(242, 107, 29, .35);
  transition: transform .25s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transition: left .6s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(242, 107, 29, .5); }
.btn:hover::after { left: 120%; }
.btn-outline { background: transparent; border: 2px solid rgba(255,255,255,.7); box-shadow: none; }
.btn-outline:hover { background: rgba(255,255,255,.1); box-shadow: none; }
.btn-small { padding: 9px 22px; font-size: .9rem; }
.btn-full { width: 100%; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 0;
  transition: background .35s, padding .35s, box-shadow .35s, transform .9s cubic-bezier(.2,.8,.2,1) .35s;
}
.navbar.scrolled { background: rgba(11, 37, 69, .95); backdrop-filter: blur(10px); padding: 12px 0; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { color: var(--white); font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.logo-icon { color: var(--orange); display: inline-block; animation: spin 6s linear infinite; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a:not(.btn) { color: rgba(255,255,255,.85); font-weight: 500; position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--orange); transition: width .3s;
}
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 14px; }

/* Language switch */
.lang-switch {
  position: relative; display: flex; background: rgba(255,255,255,.12);
  border-radius: 50px; padding: 4px; border: 1px solid rgba(255,255,255,.2);
}
.lang-switch button {
  position: relative; z-index: 1; background: none; border: none; color: #fff; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .85rem; width: 42px; height: 30px; border-radius: 50px;
  transition: color .3s;
}
.lang-pill {
  position: absolute; top: 4px; left: 4px; width: 42px; height: 30px; border-radius: 50px;
  background: var(--orange); transition: transform .4s cubic-bezier(.6,-0.3,.3,1.4);
  box-shadow: 0 4px 12px rgba(242, 107, 29,.5);
}
.lang-switch[data-active="tr"] .lang-pill { transform: translateX(42px); }

/* Fade out/in when language changes */
body.lang-flash [data-i18n], body.lang-flash [data-i18n-html], body.lang-flash .marquee-track span {
  animation: langFade .45s ease;
}
@keyframes langFade { from { opacity: 0; filter: blur(4px); } }

.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 101; }
.hamburger span { width: 26px; height: 3px; background: var(--white); border-radius: 3px; transition: .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(170deg, #0a1633 0%, var(--blue) 60%, #3b6cc0 100%);
  color: var(--white);
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: 100px;
  z-index: 1;
}
.sky { position: absolute; inset: 0; pointer-events: none; }
.sun {
  position: absolute; top: 12%; right: 10%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, #ffd49a 0%, #ff9a3d 45%, rgba(242, 107, 29,0) 70%);
  animation: glow 4s ease-in-out infinite alternate;
}
@keyframes glow { to { transform: scale(1.15); opacity: .8; } }
.parallax { position: absolute; inset: 0; transition: transform .3s ease-out; }
.cloud {
  position: absolute; background: rgba(255,255,255,.09); border-radius: 100px;
  animation: drift linear infinite;
}
.cloud::before { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud.c1 { width: 180px; height: 50px; top: 18%; animation-duration: 55s; }
.cloud.c1::before { width: 80px; height: 80px; top: -40px; left: 30px; }
.cloud.c2 { width: 260px; height: 64px; top: 38%; animation-duration: 40s; animation-delay: -20s; background: rgba(255,255,255,.12); }
.cloud.c2::before { width: 120px; height: 120px; top: -60px; left: 60px; }
.cloud.c3 { width: 140px; height: 40px; top: 8%; animation-duration: 70s; animation-delay: -35s; }
.cloud.c3::before { width: 60px; height: 60px; top: -30px; left: 25px; }
.cloud.c4 { width: 200px; height: 54px; top: 26%; animation-duration: 45s; animation-delay: -5s; background: rgba(255,255,255,.12); }
.cloud.c4::before { width: 90px; height: 90px; top: -45px; left: 50px; }
@keyframes drift { from { transform: translateX(-320px); } to { transform: translateX(110vw); } }

/* Big plane: takes off from the bottom-left and climbs across */
.plane-big {
  position: absolute; left: 0; top: 0; width: 240px;
  animation: climb 14s linear infinite;
  z-index: 1;
}
.plane-big svg { width: 100%; display: block; position: relative; }
.contrail {
  position: absolute; right: 88%; top: 66%; height: 5px; width: 45vw;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55));
  border-radius: 5px; filter: blur(1px);
}
@keyframes climb {
  0%   { transform: translate(-300px, 70vh) rotate(-14deg); }
  50%  { transform: translate(45vw, 30vh) rotate(-9deg); }
  100% { transform: translate(115vw, 2vh) rotate(-5deg); }
}
.plane-far {
  position: absolute; left: 0; top: 0; width: 90px; opacity: .55;
  animation: farFly 24s linear infinite; animation-delay: -6s;
}
.plane-far svg { width: 100%; display: block; position: relative; transform: scaleX(-1); }
.plane-far .contrail { right: auto; left: 88%; width: 25vw; background: linear-gradient(270deg, rgba(255,255,255,0), rgba(255,255,255,.4)); height: 3px; }
@keyframes farFly {
  from { transform: translate(110vw, 12vh); }
  to   { transform: translate(-40vw, 20vh); }
}

.hero-content { position: relative; z-index: 2; padding-bottom: 270px; }
.hero-panel {
  width: fit-content; max-width: 100%;
  padding: 32px 40px 36px;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
@media (max-width: 640px) { .hero-panel { padding: 22px 20px 26px; border-radius: 18px; } }
.eyebrow { color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: .85rem; margin-bottom: 12px; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.15; font-weight: 800; margin-bottom: 20px; min-height: 2.3em; }
.typed { color: var(--orange); }
.cursor { color: var(--orange); animation: blink .8s infinite; font-weight: 400; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { max-width: 560px; color: rgba(255,255,255,.82); font-size: 1.1rem; margin-bottom: 34px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Road scene ---------- */
.scene { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; pointer-events: none; }
.hills {
  position: absolute; bottom: 100px; left: 0; width: calc(100% + 600px); height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='80'%3E%3Cpath d='M0 80 L0 60 Q75 10 150 45 T300 40 T450 30 T600 60 L600 80Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E") repeat-x bottom left / 600px 80px;
  animation: slide600 40s linear infinite;
}
.city {
  position: absolute; bottom: 100px; left: 0; width: calc(100% + 420px); height: 110px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='110'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Crect x='0' y='40' width='60' height='70'/%3E%3Crect x='70' y='10' width='40' height='100'/%3E%3Crect x='120' y='55' width='70' height='55'/%3E%3Crect x='200' y='20' width='50' height='90'/%3E%3Crect x='260' y='45' width='90' height='65'/%3E%3Crect x='360' y='30' width='45' height='80'/%3E%3C/g%3E%3Cg fill='%23ffd27a' fill-opacity='0.35'%3E%3Crect x='78' y='20' width='6' height='6'/%3E%3Crect x='94' y='40' width='6' height='6'/%3E%3Crect x='210' y='30' width='6' height='6'/%3E%3Crect x='228' y='60' width='6' height='6'/%3E%3Crect x='370' y='45' width='6' height='6'/%3E%3Crect x='280' y='60' width='6' height='6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 420px 110px;
  animation: slide420 12s linear infinite;
}
.lamps {
  position: absolute; bottom: 100px; left: 0; width: calc(100% + 260px); height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='90'%3E%3Crect x='20' y='10' width='4' height='80' fill='%2330467a'/%3E%3Crect x='20' y='9' width='22' height='3' fill='%2330467a'/%3E%3Ccircle cx='42' cy='14' r='4' fill='%23ffd27a'/%3E%3C/svg%3E") repeat-x bottom left / 260px 90px;
  animation: slide260 1.45s linear infinite;
}
@keyframes slide600 { to { transform: translateX(-600px); } }
@keyframes slide420 { to { transform: translateX(-420px); } }
@keyframes slide260 { to { transform: translateX(-260px); } }

.asphalt { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(#0f1c3d, #08112a); overflow: hidden; border-top: 3px solid #2a3b66; }
.lines {
  position: absolute; left: 0; width: calc(100% + 90px); height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 40px, transparent 40px 90px);
  animation: roadMove var(--road-speed) linear infinite;
}
.lines.l1 { top: 30%; }
.lines.l2 { top: 66%; opacity: .5; }
@keyframes roadMove { to { transform: translateX(-90px); } }

/* Vehicles */
.vehicle svg, .truck-main svg { width: 100%; display: block; }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin .45s linear infinite; }

.truck-main {
  position: absolute; bottom: 34px; width: 230px; left: 50%; z-index: 3;
  animation: truckIn 2.5s cubic-bezier(.2,.8,.3,1) 1.3s both, truckBob .35s ease-in-out 3.8s infinite alternate;
}
@keyframes truckIn { from { left: -280px; transform: translateX(0); } to { left: 50%; transform: translateX(-50%); } }
@keyframes truckBob { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-2px); } }

.oncoming { position: absolute; bottom: 62px; width: 140px; z-index: 2; opacity: .85; animation: oncoming 6s linear infinite; }
.oncoming.o2 { animation-duration: 8s; animation-delay: -4s; width: 150px; }
@keyframes oncoming { from { left: 110%; } to { left: -40%; } }

.overtake { position: absolute; bottom: 2px; width: 120px; z-index: 4; animation: overtake 12s ease-in-out infinite; animation-delay: 4s; left: -30%; }
@keyframes overtake {
  0% { left: -30%; }
  55% { left: 115%; }
  100% { left: 115%; }
}

.smoke { position: absolute; left: -6px; bottom: 22px; }
.smoke span {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.35);
  animation: puff 1.1s ease-out infinite;
}
.smoke span:nth-child(2) { animation-delay: .37s; }
.smoke span:nth-child(3) { animation-delay: .74s; }
@keyframes puff { from { transform: translate(0,0) scale(.5); opacity: .8; } to { transform: translate(-60px,-28px) scale(2.4); opacity: 0; } }
.headlight { animation: flicker 2s ease-in-out infinite alternate; }
@keyframes flicker { to { opacity: .55; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Stats ---------- */
.stats { padding: 0; position: relative; z-index: 3; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 40px; margin-top: -50px;
}
.stat { text-align: center; }
.stat-num, .stat-plus { font-size: 2.6rem; font-weight: 800; color: var(--navy); }
.stat-plus { color: var(--orange); }
.stat p { color: var(--muted); font-weight: 500; }

/* ---------- Sections ---------- */
section { padding: 100px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section-head h2, .tracking h2, .contact h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--navy); line-height: 1.25; font-weight: 700; }
.section-sub { color: var(--muted); margin-top: 12px; }

/* Services */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  background: var(--white); padding: 34px; border-radius: var(--radius);
  border: 1px solid #e7ecf5; position: relative; overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-2)); transition: width .4s;
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { width: 100%; }
.card-icon {
  font-size: 2.2rem; width: 70px; height: 70px; display: grid; place-items: center;
  background: var(--light); border-radius: 18px; margin-bottom: 20px; overflow: hidden;
  transition: transform .4s, background .4s;
}
.card:hover .card-icon { transform: scale(1.1); background: #ffe9d8; }
.card-icon span { display: inline-block; }
.anim-drive { animation: drive 2.4s ease-in-out infinite; }
@keyframes drive { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px) translateY(-1px); } }
.anim-bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(2px) rotate(-5deg); } 50% { transform: translateY(-3px) rotate(5deg); } }
.anim-fly { animation: flyIcon 2.2s ease-in-out infinite; }
@keyframes flyIcon { 0% { transform: translate(-40px, 30px); opacity: 0; } 25%, 75% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(40px, -30px); opacity: 0; } }
.anim-pulse { animation: pulseIcon 2s ease-in-out infinite; }
@keyframes pulseIcon { 50% { transform: scale(1.15); } }
.anim-swing { transform-origin: top center; animation: swing 2.4s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.anim-spin { animation: spin 6s linear infinite; }
.card h3 { color: var(--navy); margin-bottom: 10px; font-size: 1.2rem; }
.card p { color: var(--muted); }

/* Network map */
.network { background: linear-gradient(180deg, #fff 0%, var(--light) 100%); }
.map-card {
  background: radial-gradient(ellipse at 52% 30%, #1d3670 0%, var(--navy) 70%);
  border-radius: 24px; padding: 24px; box-shadow: var(--shadow); overflow: hidden;
}
.network-map { width: 100%; height: auto; display: block; }
.route { fill: none; stroke-width: 1.4; stroke-dasharray: 4 5; animation: flow 1.2s linear infinite; opacity: .85; }
.route.air { stroke: var(--orange-2); }
.route.sea { stroke: #4fc3f7; }
.route.road { stroke: #7ee0a1; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.node .dot { fill: #fff; }
.node .ring { fill: none; stroke: var(--orange); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.2s ease-out infinite; }
.node.hub .dot { fill: var(--orange); }
.node.hub .r2 { animation-delay: 1.1s; }
@keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.node text { fill: #dfe7f7; font-size: 9px; font-family: "Poppins", sans-serif; font-weight: 500; }
.node text:not([text-anchor]) { text-anchor: middle; }
.node.hub text { fill: #fff; font-size: 11px; font-weight: 700; }
.legend { display: flex; justify-content: center; gap: 26px; margin-top: 14px; color: #dfe7f7; font-size: .9rem; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend b { font-weight: 500; }
.lg { width: 22px; height: 0; border-top: 3px dashed; display: inline-block; }
.lg.air { border-color: var(--orange-2); }
.lg.sea { border-color: #4fc3f7; }
.lg.road { border-color: #7ee0a1; }

/* Process */
.process { background: var(--light); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.timeline-line { position: absolute; top: 30px; left: 12.5%; right: 12.5%; height: 4px; background: #dce3ef; border-radius: 4px; }
.timeline-line span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-radius: 4px; transition: width 1.8s ease; position: relative; }
.timeline-line span::after {
  content: "🚚"; position: absolute; right: -14px; top: -26px; font-size: 22px; transform: scaleX(-1);
}
.step { text-align: center; position: relative; z-index: 1; }
.step-dot {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 700; font-size: 1.4rem;
  display: grid; place-items: center; border: 5px solid var(--light);
}
.step.visible .step-dot { animation: pulse 2s infinite; }
.step:nth-child(3).visible .step-dot { animation-delay: .5s; }
.step:nth-child(4).visible .step-dot { animation-delay: 1s; }
.step:nth-child(5).visible .step-dot { animation-delay: 1.5s; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 107, 29,.6); } 70% { box-shadow: 0 0 0 18px rgba(242, 107, 29,0); } 100% { box-shadow: 0 0 0 0 rgba(242, 107, 29,0); } }
.step h4 { color: var(--navy); font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .95rem; }

/* ---------- Sea scene ---------- */
.sea-scene {
  position: relative; height: 300px; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #7fb6f0 0%, #bfe0ff 55%, #2a6fb8 56%, #133d78 100%);
}
.sea-text {
  position: absolute; top: 34px; left: 0; right: 0; text-align: center;
  color: var(--navy); font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.7rem); padding: 0 16px;
}
.sea-plane { position: absolute; top: 90px; left: 0; width: 110px; animation: seaPlane 16s linear infinite; }
.sea-plane svg { width: 100%; display: block; }
@keyframes seaPlane { from { transform: translate(-150px, 30px) rotate(-4deg); } to { transform: translate(110vw, -40px) rotate(-4deg); } }
.gulls { position: absolute; top: 110px; right: 18%; color: #29467d; font-size: 18px; animation: gulls 6s ease-in-out infinite alternate; }
.gulls span { display: inline-block; margin-right: 14px; }
.gulls span:nth-child(2) { transform: translateY(-12px) scale(.8); }
@keyframes gulls { to { transform: translate(-60px, 10px); } }
.ship { position: absolute; bottom: 70px; left: 0; width: 300px; z-index: 2; animation: sail 32s linear infinite; }
.ship svg { width: 100%; display: block; animation: rock 3s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes sail { from { transform: translateX(-340px); } to { transform: translateX(110vw); } }
@keyframes rock { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(4px); } }
.wave { position: absolute; left: 0; width: calc(100% + 400px); background-repeat: repeat-x; background-position: bottom left; background-size: 400px 100%; }
.wave.back {
  bottom: 80px; height: 50px; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='50' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q50 5 100 25 T200 25 T300 25 T400 25 V50 H0Z' fill='%233a83cc'/%3E%3C/svg%3E");
  animation: slide400 9s linear infinite;
}
.wave.front {
  bottom: 0; height: 110px; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='110' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q50 10 100 30 T200 30 T300 30 T400 30 V110 H0Z' fill='%23184a8c'/%3E%3C/svg%3E");
  animation: slide400 6s linear infinite reverse;
}
@keyframes slide400 { to { transform: translateX(-400px); } }

/* Tracking */
.tracking-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.tracking-text p { color: var(--muted); margin: 14px 0 24px; }
.track-form { display: flex; gap: 10px; }
.track-form input {
  flex: 1; min-width: 0; padding: 14px 20px; border-radius: 50px; border: 2px solid #e1e7f2;
  font-family: inherit; font-size: 1rem; outline: none; transition: border-color .3s;
}
.track-form input:focus { border-color: var(--orange); }
.tracking-text .track-msg { min-height: 24px; font-weight: 500; margin: 12px 0 0; }
.track-msg.error { color: #d93636; }
.track-msg.ok { color: #1a9e5c; }
.track-card { background: var(--navy); color: var(--white); border-radius: 24px; padding: 40px; box-shadow: var(--shadow); }
.track-route { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.track-city { display: flex; flex-direction: column; align-items: center; font-size: .9rem; min-width: 64px; }
.track-city span { font-size: 1.5rem; }
.track-bar { flex: 1; height: 8px; background: rgba(255,255,255,.15); border-radius: 8px; position: relative; }
.track-progress { height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-radius: 8px; transition: width 2.5s ease; }
.track-vehicle { position: absolute; top: -32px; left: 0; font-size: 1.6rem; transition: left 2.5s ease; }
.track-vehicle.road { transform: translateX(-50%) scaleX(-1); }
.track-vehicle.air { transform: translateX(-50%) rotate(45deg); }
.track-vehicle.moving { animation: vehicleBounce .3s ease-in-out infinite alternate; }
@keyframes vehicleBounce { to { margin-top: -3px; } }
.track-steps { list-style: none; }
.track-steps li { padding: 10px 0 10px 34px; position: relative; color: rgba(255,255,255,.45); transition: color .4s; }
.track-steps li::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35); transition: .4s;
}
.track-steps li.done { color: var(--white); }
.track-steps li.done::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 12px var(--orange); }

/* Marquee */
.marquee { background: var(--orange); padding: 22px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 25s linear infinite; }
.marquee-track span { color: var(--white); font-weight: 700; font-size: 1.3rem; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Contact */
.contact { background: var(--light); }
.contact-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.contact-info p { color: var(--muted); margin: 14px 0 24px; }
.contact-info ul { list-style: none; display: grid; gap: 14px; font-weight: 500; }
.contact-form { background: var(--white); padding: 40px; border-radius: 24px; box-shadow: var(--shadow); }
.field { position: relative; margin-bottom: 22px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 16px 18px; border: 2px solid #e1e7f2; border-radius: 12px;
  font-family: inherit; font-size: 1rem; background: var(--white); color: var(--text); outline: none; resize: vertical;
  transition: border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--orange); }
.field label {
  position: absolute; left: 16px; top: 16px; color: var(--muted); pointer-events: none;
  background: var(--white); padding: 0 6px; transition: .25s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: -11px; font-size: .8rem; color: var(--orange);
}
.form-msg { text-align: center; margin-top: 14px; font-weight: 500; color: #1a9e5c; min-height: 24px; }

/* Footer */
.footer { background: var(--navy); color: rgba(255,255,255,.7); text-align: center; padding: 28px 0; }

/* Back to top */
#toTop {
  position: fixed; right: 24px; bottom: 24px; width: 50px; height: 50px; border-radius: 50%;
  background: var(--orange); color: var(--white); border: none; font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 8px 24px rgba(242, 107, 29,.4); opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: .35s; z-index: 50;
}
#toTop.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .nav-links { gap: 18px; }
}
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tracking-inner, .contact-inner { grid-template-columns: 1fr; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: -100%; height: 100vh; width: min(320px, 80%);
    background: var(--navy); flex-direction: column; justify-content: center; gap: 30px;
    transition: right .4s ease; box-shadow: -10px 0 30px rgba(0,0,0,.3);
  }
  .nav-links.open { right: 0; }
}
@media (max-width: 640px) {
  .cards, .timeline { grid-template-columns: 1fr; }
  .timeline-line { display: none; }
  .stats-grid { padding: 28px 16px; }
  .stat-num, .stat-plus { font-size: 2rem; }
  .truck-main { width: 170px; }
  .oncoming { width: 100px; }
  .oncoming.o2 { width: 110px; }
  .overtake { width: 90px; }
  .plane-big { width: 160px; }
  .ship { width: 220px; }
  .track-form { flex-direction: column; }
  .track-card, .contact-form { padding: 28px 20px; }
  .logo { font-size: 1.15rem; }
  section { padding: 70px 0; }
  .sea-scene { padding: 0; }
}

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

/* ---------- Brand logos ---------- */
.logo-mark {
  width: 42px; height: 42px; border-radius: 12px; object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); margin-right: 4px;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }
.navbar.scrolled .logo-mark { width: 36px; height: 36px; }
.contact-logo {
  display: block; width: min(240px, 70%); border-radius: 24px; margin-bottom: 24px;
  box-shadow: var(--shadow); animation: floatLogo 5s ease-in-out infinite;
}
@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 640px) { .logo-mark { width: 34px; height: 34px; } }
.scroll-vehicle > span:not(.puff) { display: block; }

/* =========================================================
   Scroll story — "the container's journey"
   A tall section whose inner stage stays pinned while the
   scroll position scrubs the animation (see script.js).
   ========================================================= */
.journey { position: relative; height: 650vh; padding: 0; background: #fbfcfe; }
.journey-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; align-items: center;
}
.journey-glow { position: absolute; inset: -10%; pointer-events: none; }
.journey-glow.warm { background: radial-gradient(ellipse 55% 55% at 68% 55%, #ffe6d1 0%, rgba(255, 230, 209, 0) 70%), linear-gradient(180deg, #fbfcfe, #fff6ee); }
.journey-glow.cool { background: radial-gradient(ellipse 55% 55% at 68% 55%, #d6e9ff 0%, rgba(214, 233, 255, 0) 70%), linear-gradient(180deg, #f6faff, #e9f3ff); opacity: 0; }

.journey-text { position: relative; z-index: 2; padding-left: max(16px, calc((100vw - 1180px) / 2)); padding-right: 24px; }
.j-chapters { position: relative; height: 330px; }
.j-chapter { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.j-eyebrow { color: var(--orange); font-weight: 600; font-size: .8rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; }
.j-chapter h3 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.7rem); line-height: 1.08; color: var(--navy); margin-bottom: 20px;
}
.j-chapter h3 em { font-style: italic; color: var(--orange); }
.j-body { color: var(--muted); max-width: 380px; font-size: 1.02rem; }

.j-progress { display: flex; gap: 8px; margin-top: 18px; }
.j-progress span { width: 38px; height: 4px; border-radius: 4px; background: #dce3ef; overflow: hidden; }
.j-progress i { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 4px; }

.journey-stage { position: relative; z-index: 1; height: 100vh; display: flex; align-items: center; justify-content: center; }
#jStage { width: 100%; height: auto; max-height: 92vh; overflow: visible; }
.j-hint {
  position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: .9rem; letter-spacing: 1px; white-space: nowrap; transition: opacity .4s;
}
.j-hint b { display: inline-block; color: var(--orange); animation: hintBounce 1.2s ease-in-out infinite; }
@keyframes hintBounce { 50% { transform: translateY(5px); } }

@media (max-width: 900px) {
  .journey-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .journey-text { padding: 96px 20px 0; }
  .j-chapters { height: 210px; }
  .j-chapter h3 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 10px; }
  .j-body { font-size: .95rem; }
  .journey-stage { height: auto; align-self: center; }
  .j-hint { bottom: -4vh; }
}

/* =========================================================
   Intro loader — container doors swing open to reveal the site
   ========================================================= */
#loader { position: fixed; inset: 0; z-index: 9999; perspective: 1800px; }
#loader.done { display: none; }
.ld-door {
  position: absolute; top: 0; bottom: 0; width: 50.2%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #102350, #0a1633);
  transition: transform 1.15s cubic-bezier(.7, 0, .2, 1);
  backface-visibility: hidden;
}
.ld-left { left: 0; transform-origin: left center; box-shadow: inset -2px 0 0 #070f26; }
.ld-right { right: 0; transform-origin: right center; box-shadow: inset 2px 0 0 #070f26; }
.ld-rods {
  position: absolute; top: 0; bottom: 0; width: 56px;
  background: linear-gradient(90deg, transparent 0 6px, #22386c 6px 14px, transparent 14px 40px, #22386c 40px 48px, transparent 48px);
}
.ld-left .ld-rods { right: 34px; }
.ld-right .ld-rods { left: 34px; }
.ld-rods::before, .ld-rods::after {
  content: ""; position: absolute; top: 84%; width: 16px; height: 38px;
  border-radius: 4px; background: #F26B1D; opacity: .85; box-shadow: 0 0 10px rgba(242, 107, 29, .35);
}
.ld-rods::before { left: 0; }
.ld-rods::after { left: 34px; }
.ld-left .ld-rods::before, .ld-left .ld-rods::after, .ld-right .ld-rods::before, .ld-right .ld-rods::after { margin-left: -1px; }
#loader.open .ld-left { transform: rotateY(-100deg); }
#loader.open .ld-right { transform: rotateY(100deg); }

.ld-content {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 0 16px;
  transition: opacity .4s ease, transform .5s ease;
}
#loader.leaving .ld-content { opacity: 0; transform: scale(.9); }

.ld-logo { position: relative; width: 176px; height: 176px; display: grid; place-items: center; margin-bottom: 8px; animation: ldPop .8s cubic-bezier(.3, 1.5, .5, 1) both; }
.ld-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.ld-ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.ld-ring-draw {
  fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: center; transform-box: fill-box;
  animation: ldDraw 1.8s .2s ease-in-out forwards;
}
.ld-orbit { position: absolute; inset: 4px; animation: spin 2.2s linear infinite; }
.ld-orbit span {
  position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--orange-2); box-shadow: 0 0 12px 4px rgba(242, 107, 29, .7);
}
.ld-mark {
  width: 112px; height: 112px; border-radius: 26px; object-fit: cover;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  animation: ldMark 1s .15s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes ldDraw { to { stroke-dashoffset: 0; } }
@keyframes ldPop { from { transform: scale(.6); opacity: 0; } }
@keyframes ldMark { from { transform: scale(0) rotate(-200deg); opacity: 0; } }

.ld-name { display: flex; color: #fff; font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: .1em; perspective: 400px; }
.ld-name span { display: inline-block; opacity: 0; transform: translateY(30px) rotateX(-90deg); animation: ldLetter .7s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ldLetter { to { opacity: 1; transform: none; } }
.ld-sub {
  color: rgba(255,255,255,.7); font-size: .8rem; font-weight: 600; letter-spacing: .9em; padding-left: .9em;
  margin-top: -8px; opacity: 0; animation: ldSub 1.1s 1s ease forwards;
}
@keyframes ldSub { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; letter-spacing: .9em; } }

.ld-track { position: relative; width: min(320px, 78vw); height: 4px; margin-top: 36px; border-radius: 4px; background: rgba(255,255,255,.12); }
.ld-fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); box-shadow: 0 0 12px rgba(242, 107, 29, .6); }
.ld-vehicle { position: absolute; bottom: 5px; left: 0; transform: translateX(-50%); }
.ld-vehicle svg { display: block; width: 46px; height: auto; animation: svRoad .3s ease-in-out infinite alternate; }
.ld-vehicle.takeoff svg { width: 60px; animation: ldTakeoff .8s ease-in forwards; }
@keyframes ldTakeoff { from { transform: translate(0, 0) rotate(0); } to { transform: translate(90px, -70px) rotate(-22deg); opacity: 0; } }
.ld-meta { width: min(320px, 78vw); display: flex; justify-content: space-between; color: rgba(255,255,255,.6); font-size: .85rem; }
.ld-meta b { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Entrance choreography (waits for the loader) ---------- */
body:not(.is-loaded) { overflow: hidden; }
body:not(.is-loaded) .hero *, body:not(.is-loaded) .hero *::before, body:not(.is-loaded) .hero *::after { animation-play-state: paused !important; }
body:not(.is-loaded) .hero .reveal { opacity: 0; transform: translateY(40px); }
body:not(.is-loaded) .navbar { transform: translateY(-120%); }
.scene { transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) .25s; }
body:not(.is-loaded) .scene { transform: translateY(100%); }
.hero-panel { transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .1s; clip-path: inset(0 0 0 0 round 24px); }
body:not(.is-loaded) .hero-panel { clip-path: inset(0 100% 0 0 round 24px); }

/* Word-by-word heading reveal */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.reveal.visible .split .w > span, body.is-loaded .hero .split .w > span { transform: none; }
body:not(.is-loaded) .hero .split .w > span { transform: translateY(110%) !important; }

/* Button ripple + card tilt glare */
.btn .ripple {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: rgba(255,255,255,.55); pointer-events: none; animation: ripple .7s ease-out forwards;
}
@keyframes ripple { to { transform: scale(18); opacity: 0; } }
.card .glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
}
.card:hover .glare { opacity: 1; }

.contact-info a { border-bottom: 1px dashed currentColor; transition: color .25s; } .contact-info a:hover { color: var(--orange); }

/* ---------- New brand logo (Rotanova Logistics) ---------- */
.logo-img { height: 46px; width: auto; display: block; transition: height .35s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.logo:hover .logo-img { transform: translateY(-2px) scale(1.03); }
.navbar.scrolled .logo-img { height: 38px; }
@media (max-width: 640px) { .logo-img { height: 36px; } .navbar.scrolled .logo-img { height: 32px; } }
.ld-logo::before {
  content: ""; position: absolute; inset: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1b3f73, #13315C 60%, #0B2545);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.ld-mark { position: relative; width: 64px; height: auto; border-radius: 0; object-fit: contain; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.contact-logo { width: min(300px, 80%); border-radius: 0; box-shadow: none; }
.footer-logo { height: 40px; width: auto; margin: 6px auto 14px; display: block; opacity: .9; }
/* contact form: honeypot (hidden from people) + error message */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg.error { color: #d93636; }
/* keep menu labels on one line; tighten spacing on mid-size screens */
.nav-links a { white-space: nowrap; }
.logo { flex-shrink: 0; }
.contact-logo { height: auto; }
@media (max-width: 1200px) { .nav-links { gap: 18px; } .nav-links a:not(.btn) { font-size: .95rem; } }