:root{
  --blue-deep:#1d3d87;
  --blue:#2456b3;
  --blue-bright:#3f7fd6;
  --sky:#dcebfb;
  --sky-soft:#eef5fd;
  --paper:#ffffff;
  --ink:#152744;
  --mute:#5f7290;
  --line:#dbe6f4;
  --radius:4px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{overflow-x:hidden;overflow-x:clip;}
body{font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.eyebrow,.km-tag{font-family:'Oswald',sans-serif;letter-spacing:.02em;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{position:relative;}

.logo-lockup{display:flex;align-items:center;gap:11px;}
.logo-icon{width:40px;height:40px;flex-shrink:0;}
.logo-word{font-family:'Oswald',sans-serif;font-weight:700;line-height:.92;letter-spacing:.01em;transform:skewX(-7deg);color:var(--blue-deep);}
.logo-word .l1,.logo-word .l2{display:block;font-size:1.02rem;}
.on-blue .logo-word{color:#fff;}

.km-tag{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.18em;color:var(--blue);text-transform:uppercase;margin-bottom:14px;font-weight:600;}
.km-tag::before{content:'';width:26px;height:1px;background:var(--blue);}
.section-dark .km-tag{color:var(--sky);}
.section-dark .km-tag::before{background:var(--sky);}

/* ============================================================
   NOMOR SECTION DEKORATIF — angka besar di pojok kanan-atas tiap section
   (mis. "03" untuk Armada), diambil otomatis dari teks km-tag yang sudah
   ada. Teknik umum di situs studio kreatif: nomor section jadi elemen
   TIPOGRAFI VISUAL sendiri, bukan cuma label kecil. Ukurannya besar tapi
   opacity SANGAT rendah supaya tetap "dekoratif" sesuai instruksi halus &
   elegan - tidak boleh bersaing dengan judul/konten asli section.
   ============================================================ */
.section-number-decor{
  position:absolute;top:24px;right:28px;z-index:0;
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:clamp(4rem,11vw,9rem);line-height:1;
  color:var(--blue-deep);opacity:.05;
  pointer-events:none;user-select:none;
}
.section-dark .section-number-decor{color:#fff;opacity:.07;}
@media(max-width:680px){
  .section-number-decor{font-size:clamp(3rem,18vw,5rem);top:14px;right:16px;}
}

header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1180px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
nav ul{display:none;list-style:none;gap:28px;}
@media(min-width:820px){nav ul{display:flex;}}
nav a{color:var(--ink);font-size:.85rem;letter-spacing:.03em;opacity:.78;transition:opacity .2s,color .2s;}
nav a:hover{opacity:1;color:var(--blue);}
.nav-cta{background:var(--blue);color:#fff;padding:9px 18px;font-size:.8rem;font-weight:600;letter-spacing:.03em;border-radius:var(--radius);display:none;transition:background .2s;}
.nav-cta:hover{background:var(--blue-deep);}
@media(min-width:820px){.nav-cta{display:inline-block;}}
.nav-right{display:flex;align-items:center;gap:12px;}

/* Hamburger menu — navigasi untuk layar di bawah 820px (mobile & tablet portrait),
   yang sebelumnya tidak punya cara apapun mengakses menu Tentang/Layanan/dst
   selain men-scroll manual. */
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;border:1px solid var(--line);
  background:#fff;cursor:pointer;flex-shrink:0;padding:0;
  transition:background .2s, border-color .2s;
}
.nav-toggle:hover{background:var(--sky-soft);border-color:var(--blue);}
.nav-toggle svg{width:18px;height:18px;color:var(--blue-deep);}
@media(min-width:820px){.nav-toggle{display:none;}}

.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);z-index:60;
  background:#fff;box-shadow:-12px 0 40px rgba(20,40,90,.18);
  display:flex;flex-direction:column;padding:24px 22px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.mobile-nav-close{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--sky-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blue-deep);padding:0;
}
.mobile-nav-close svg{width:16px;height:16px;}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:4px;}
.mobile-nav a{display:block;padding:13px 4px;font-size:1rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}
.mobile-nav .nav-cta{display:block;text-align:center;margin-top:20px;}
.nav-overlay{
  position:fixed;inset:0;z-index:59;background:rgba(15,28,60,.45);
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;
}
.nav-overlay.open{opacity:1;visibility:visible;}
@media(min-width:820px){.mobile-nav,.nav-overlay{display:none;}}

.hero{background:linear-gradient(170deg,#ffffff 0%, var(--sky-soft) 60%, var(--sky) 100%);color:var(--ink);padding:140px 0 150px;position:relative;overflow:hidden;}
@media(max-width:680px){.hero{padding-bottom:130px;}}
.hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(90deg, transparent 0 78px, rgba(29,61,135,.04) 78px 79px),repeating-linear-gradient(0deg, transparent 0 78px, rgba(29,61,135,.04) 78px 79px);pointer-events:none;}
.hero-grid{position:relative;z-index:2;display:grid;gap:34px;}
.hero .eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;}
@media(max-width:680px){.hero .eyebrow{font-size:.6rem;letter-spacing:.14em;gap:4px 7px;}}
.hero .eyebrow::before{content:'';width:30px;height:2px;background:var(--blue);}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.1rem);line-height:1.04;font-weight:700;max-width:800px;color:var(--blue-deep);}
.hero h1 .hl-accent{color:var(--blue-bright);}

/* ============================================================
   WORD REVEAL — judul Hero (& eyebrow) muncul KATA DEMI KATA secara
   bertahap saat halaman pertama dimuat, bukan langsung tampil sekaligus.
   Setiap .word-reveal punya delay berbeda lewat custom property --i
   (index urutan kata, di-set inline oleh JS), dikalikan STAGGER_DELAY di
   bawah. Teknik umum dipakai situs studio kreatif untuk kesan judul yang
   "muncul" secara sinematik, bukan statis.
   ============================================================ */
.word-reveal-wrap{overflow:visible;}
.word-reveal{
  display:inline-block;opacity:0;transform:translateY(.5em);
  animation:wordRevealIn .7s cubic-bezier(.2,.7,.25,1) forwards;
  animation-delay:calc(var(--i, 0) * 0.07s + .15s);
}
.word-reveal.no-anim{animation:none;opacity:1;transform:none;}
@keyframes wordRevealIn{
  to{opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce){
  .word-reveal{animation:none;opacity:1;transform:none;}
}

.hero p.lead{margin-top:22px;font-size:clamp(1rem,2vw,1.18rem);line-height:1.65;color:#3a4f6e;max-width:580px;}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{padding:14px 26px;font-size:.88rem;font-weight:600;letter-spacing:.02em;border-radius:var(--radius);cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;transition:transform .2s, box-shadow .2s, background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{box-shadow:0 10px 24px rgba(36,86,179,.32);background:var(--blue-deep);}
.btn-ghost{background:transparent;color:var(--blue-deep);border:1.5px solid var(--blue);}
.btn-ghost:hover{background:var(--blue);color:#fff;}

.stat-strip{position:relative;z-index:2;margin-top:50px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(min-width:780px){.stat-strip{grid-template-columns:repeat(4,1fr);}}
.stat{border-top:2px solid var(--blue);padding-top:14px;}
.stat .num{font-family:'JetBrains Mono',monospace;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--blue-deep);}
.stat .label{font-size:.78rem;color:var(--mute);margin-top:4px;letter-spacing:.02em;}

.section{padding:96px 0;position:relative;overflow:hidden;}
.section-light{background:var(--paper);}
.section-soft{background:var(--sky-soft);}
.section-dark{background:var(--blue-deep);color:#fff;}
h2.headline{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;line-height:1.15;max-width:700px;margin-bottom:18px;color:var(--blue-deep);}
.section-dark h2.headline{color:#fff;}
.lede{font-size:1.02rem;color:var(--mute);max-width:620px;line-height:1.7;}
.section-dark .lede{color:#c5d8f2;}

/* ============================================================
   PARALLAX — layer dekoratif HALUS di setiap section (Hero +
   section-light/soft/dark), digerakkan via JS (transform:translateY,
   BUKAN background-attachment:fixed yang terkenal tidak berfungsi di
   iOS Safari) dengan kecepatan berbeda dari konten saat discroll, untuk
   kesan kedalaman yang umum dikenal sebagai "efek parallax". Sengaja
   dibuat sangat halus (gerakan kecil, opacity rendah) sesuai instruksi -
   elemen dekoratif, BUKAN pusat perhatian. position:absolute & ukuran
   besar supaya tetap mengisi area saat bergeser, tidak meninggalkan
   celah kosong di tepi section.
   ============================================================ */
.parallax-layer{
  position:absolute;pointer-events:none;z-index:0;
  will-change:transform;
}
.parallax-orb{
  border-radius:50%;
  filter:blur(40px);
  opacity:.5;
}
/* Orb pada latar terang (Hero, section-light, section-soft) pakai warna biru
   tema yang sudah ada, redup supaya tidak mengganggu keterbacaan teks. */
.section-light .parallax-orb, .section-soft .parallax-orb, .hero .parallax-orb{
  background:radial-gradient(circle, rgba(63,127,214,.16) 0%, transparent 70%);
}
/* Orb pada latar gelap (section-dark) pakai warna terang supaya tetap
   terlihat sebagai elemen dekoratif, bukan menyatu hilang ke background. */
.section-dark .parallax-orb{
  background:radial-gradient(circle, rgba(125,211,252,.14) 0%, transparent 70%);
}
.parallax-line{
  background:repeating-linear-gradient(135deg, rgba(63,127,214,.06) 0 1px, transparent 1px 26px);
  opacity:.6;
}
.section-dark .parallax-line{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
}
/* Konten section harus di atas layer parallax (z-index lebih tinggi) -
   .wrap sudah position:relative secara default dari styling lain, di sini
   dipastikan eksplisit supaya urutan tumpukan selalu benar walau CSS lain
   berubah di masa depan. */
.section > .wrap, .hero > .wrap{position:relative;z-index:2;}

@media(prefers-reduced-motion:reduce){
  .parallax-layer{transform:none !important;}
}

/* ============================================================
   HERO CITYSCAPE — kota hidup + jalan raya animasi mengisi Hero
   Tiga lapis gedung (parallax beda kecepatan), awan berarak, jendela
   berkedip, lampu jalan menyala, dan lalu lintas dua arah: truk & mobil
   dengan roda berputar, bodi bergoyang halus, dan lampu depan menyala.
   Scene sengaja TINGGI (menindih area teks) namun tetap di bawah konten
   (hero-grid z-index:2) sehingga headline/statistik selalu terbaca.
   ============================================================ */
.hc-scene{
  position:absolute;inset:0;
  z-index:0;pointer-events:none;user-select:none;overflow:hidden;
  color:var(--blue-deep);
}
.hc-layer{left:0;right:0;bottom:34px;height:100%;}
.hc-layer svg{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  min-width:1440px;width:100%;height:auto;overflow:visible;
}
/* --- LANGIT TIMELAPSE: siklus 60 detik pagi -> siang -> senja -> malam --- */
.hc-sky{position:absolute;inset:0;opacity:0;animation-duration:90s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:opacity;}
.hc-sky-dawn{background:linear-gradient(180deg,#fdf3e7 0%,#f7e2cb 42%,#e9eefa 100%);animation-name:hc-ph-dawn;}
.hc-sky-day{background:linear-gradient(170deg,#ffffff 0%,#eef5fd 60%,#dcebfb 100%);animation-name:hc-ph-day;}
.hc-sky-dusk{background:linear-gradient(180deg,#f4e2d6 0%,#e3d2e2 45%,#c8d3ec 100%);animation-name:hc-ph-dusk;}
.hc-sky-night{background:linear-gradient(180deg,#aebade 0%,#bcc6e6 55%,#cfd7ee 100%);animation-name:hc-ph-night;}
@keyframes hc-ph-dawn{0%,16%{opacity:1;}24%,90%{opacity:0;}98%,100%{opacity:1;}}
@keyframes hc-ph-day{0%,16%{opacity:0;}24%,40%{opacity:1;}48%,100%{opacity:0;}}
@keyframes hc-ph-dusk{0%,40%{opacity:0;}48%,58%{opacity:1;}66%,100%{opacity:0;}}
@keyframes hc-ph-night{0%,58%{opacity:0;}66%,88%{opacity:1;}96%,100%{opacity:0;}}

/* Matahari & bulan melintasi busur langit mengikuti fasenya */
.hc-sun,.hc-moon{position:absolute;top:150px;left:0;border-radius:50%;opacity:0;animation-duration:90s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity;}
.hc-sun{
  width:34px;height:34px;
  background:radial-gradient(circle at 40% 40%, #fff4dd, #f2c67f 62%, rgba(242,198,127,0) 78%);
  box-shadow:0 0 64px 28px rgba(242,198,127,.26), 0 0 20px 6px rgba(255,236,200,.5);
  animation-name:hc-sun;
}
.hc-moon{
  width:28px;height:28px;
  background:radial-gradient(circle at 62% 36%, #fbfdff 50%, #dde5f4 100%);
  box-shadow:0 0 36px 14px rgba(230,238,252,.45);
  animation-name:hc-moon;
}
@keyframes hc-sun{
  0%{transform:translate(4vw,120px) scale(1.16);opacity:0;}
  7%{opacity:1;}
  15%{transform:translate(25vw,18px) scale(1.06);}
  24%{transform:translate(44vw,-26px) scale(1);}
  33%{transform:translate(63vw,14px) scale(1.06);}
  42%{opacity:1;}
  50%{transform:translate(88vw,120px) scale(1.16);opacity:0;}
  100%{transform:translate(88vw,120px) scale(1.16);opacity:0;}
}
@keyframes hc-moon{
  0%,52%{transform:translate(6vw,120px) scale(1.12);opacity:0;}
  60%{opacity:.95;}
  67%{transform:translate(27vw,16px) scale(1.04);}
  76%{transform:translate(46vw,-16px) scale(1);}
  85%{transform:translate(68vw,14px) scale(1.04);}
  90%{opacity:.95;}
  98%{transform:translate(90vw,120px) scale(1.12);opacity:0;}
  100%{transform:translate(90vw,120px) scale(1.12);opacity:0;}
}

/* Cahaya horizon terarah: fajar dari kiri, senja dari kanan */
.hc-horizon{position:absolute;left:0;right:0;bottom:34px;height:46%;opacity:0;pointer-events:none;
  animation-duration:90s;animation-timing-function:linear;animation-iteration-count:infinite;}
.hc-horizon-dawn{background:radial-gradient(58% 88% at 18% 100%, rgba(250,203,148,.5), rgba(250,203,148,0) 70%);animation-name:hc-hz-dawn;}
.hc-horizon-dusk{background:radial-gradient(58% 88% at 82% 100%, rgba(238,168,138,.46), rgba(238,168,138,0) 70%);animation-name:hc-hz-dusk;}
@keyframes hc-hz-dawn{0%{opacity:.8;}9%{opacity:.5;}19%{opacity:0;}94%{opacity:0;}100%{opacity:.8;}}
@keyframes hc-hz-dusk{0%,40%{opacity:0;}47%{opacity:.75;}57%{opacity:.55;}66%{opacity:0;}100%{opacity:0;}}

/* Kabut atmosferik permanen: lapisan jauh memudar ke arah horizon */
.hc-haze{position:absolute;left:0;right:0;bottom:34px;height:240px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 55%, rgba(255,255,255,.4) 100%);}

/* Bintang: hanya tampak di jendela fase malam */
.hc-stars{position:absolute;top:0;left:0;width:100%;height:52%;opacity:0;animation:hc-stars 90s linear infinite;}
@keyframes hc-stars{0%,60%{opacity:0;}70%,86%{opacity:.85;}96%,100%{opacity:0;}}
.hc-tw1{animation:hc-tw 3.4s ease-in-out infinite alternate;}
.hc-tw2{animation:hc-tw 2.6s ease-in-out 1.1s infinite alternate;}
@keyframes hc-tw{from{opacity:1;}to{opacity:.55;}}

/* Selubung malam: menggelapkan panorama sangat halus di fase malam */
.hc-nightveil{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(35,50,92,.04), rgba(35,50,92,.16));
  animation:hc-ph-night 90s linear infinite;}

.hc-mid .hc-winv{fill:#fff;opacity:.4;}
.hc-near .hc-win{fill:#fff;opacity:.5;}
.hc-lit{fill:#d9e6f8;animation:hc-lit 7s ease-in-out infinite;}
.hc-canopy{fill:var(--blue);opacity:.3;}
.hc-mid .hc-canopy{opacity:.18;}
.hc-trunk{fill:var(--blue-deep);opacity:.28;}
.hc-mid .hc-trunk{opacity:.15;}
.hc-pole{fill:var(--blue-deep);opacity:.3;}
.hc-glow{fill:#7db6f2;animation:hc-glow 6s ease-in-out infinite;}
.hc-lamp{fill:#e8b45c;}

/* Awan stratus realistis: pita tipis memanjang dengan blur lembut,
   lobus atas tipis via ::after - bukan gumpalan bulat kartun */
.hc-cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(7px);animation:hc-cloud linear infinite;}
.hc-cloud::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.5);}
.hc-cloud-1{width:300px;height:20px;top:66px;animation-duration:160s;animation-delay:-44s;}
.hc-cloud-1::after{left:16%;top:-9px;width:56%;height:14px;}
.hc-cloud-2{width:210px;height:15px;top:132px;opacity:.75;animation-duration:200s;animation-delay:-120s;}
.hc-cloud-2::after{left:24%;top:-7px;width:48%;height:11px;}
.hc-cloud-3{width:250px;height:17px;top:26px;opacity:.6;animation-duration:180s;animation-delay:-70s;}
.hc-cloud-3::after{left:30%;top:-8px;width:44%;height:12px;}
@keyframes hc-cloud{from{transform:translateX(-340px);}to{transform:translateX(calc(100vw + 340px));}}

/* Jalan raya: aspal lebih pekat + marka tengah putus-putus */
.hc-road{
  position:absolute;left:0;right:0;bottom:0;height:34px;z-index:2;
  background:linear-gradient(180deg, rgba(21,39,68,.16), rgba(21,39,68,.26));
  border-top:2px solid rgba(21,39,68,.18);
}
.hc-road-line{
  position:absolute;left:0;right:0;top:50%;height:2.4px;margin-top:-1.2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 34px, transparent 34px 72px);
  opacity:.42;
}

/* Kendaraan: berjalan tanpa henti + roda berputar + goyangan bodi halus.
   Lajur atas (jauh) ke KIRI - lebih kecil & redup; lajur bawah ke KANAN. */
.hc-veh{
  position:absolute;left:0;
  animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform;
}
.hc-veh svg{
  width:100%;height:auto;overflow:visible;
  animation:hc-bounce calc(var(--spin, .7s) * 1.15) ease-in-out infinite alternate;
}
.hc-veh .hc-body{fill:var(--vehc, #1d3d87);}
.hc-glass{fill:#cfe4fa;}
.hc-trim{fill:#fff;opacity:.4;}
.hc-chassis{fill:#10203f;opacity:.85;}
.hc-tire{fill:#10203f;}
.hc-rim{fill:#26364f;}
.hc-spoke{stroke:#54677f;stroke-width:1;fill:none;}
.hc-hubdot{fill:#7e8fa6;}
.hc-spin{
  animation:hc-spin var(--spin, .7s) linear infinite;
  transform-box:fill-box;transform-origin:center;
}
/* Branding di box truk: glyph mengikuti warna bodi, wordmark Oswald putih.
   Untuk truk lajur kiri (badan di-mirror scaleX(-1)), grup brand di-flip
   balik supaya logo & tulisan tetap terbaca normal dari sisi pembaca. */
.hc-brandg{fill:var(--vehc, #1d3d87);}
.hc-brand text{font-family:'Oswald',sans-serif;font-weight:700;fill:#fff;}
.hc-brand-t1{font-size:7.6px;letter-spacing:.4px;}
.hc-brand-t2{font-size:3.5px;letter-spacing:1.15px;opacity:.9;}
.hc-l .hc-brand{transform:scaleX(-1);transform-box:fill-box;transform-origin:center;}
.hc-r{bottom:2px;opacity:.92;animation-name:hc-drive-r;}
.hc-l{bottom:17px;opacity:.62;animation-name:hc-drive-l;}
.hc-r.hc-truck{width:104px;}
.hc-r.hc-car{width:64px;}
.hc-l.hc-truck{width:78px;}
.hc-l.hc-car{width:48px;}
@keyframes hc-drive-r{
  from{transform:translateX(-160px);}
  to{transform:translateX(calc(100vw + 160px));}
}
@keyframes hc-drive-l{
  from{transform:translateX(calc(100vw + 160px)) scaleX(-1);}
  to{transform:translateX(-160px) scaleX(-1);}
}
@keyframes hc-spin{to{transform:rotate(360deg);}}
@keyframes hc-bounce{from{transform:translateY(0);}to{transform:translateY(-.5px);}}
@keyframes hc-lit{0%,100%{opacity:.45;}50%{opacity:.8;}}
@keyframes hc-glow{0%,100%{opacity:.12;}50%{opacity:.22;}}

@media(max-width:680px){
  .hc-layer{bottom:24px;}
  .hc-sun{width:34px;height:34px;}
  .hc-moon{width:28px;height:28px;}
  .hc-sun,.hc-moon{top:90px;}
  .hc-haze{height:140px;bottom:24px;}
  .hc-horizon{bottom:24px;}
  .hc-road{height:24px;}
  .hc-road-line{height:2px;background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 20px, transparent 20px 44px);}
  .hc-l{bottom:12px;}
  .hc-r.hc-truck{width:74px;}
  .hc-r.hc-car{width:46px;}
  .hc-l.hc-truck{width:56px;}
  .hc-l.hc-car{width:35px;}
  .hc-cloud-2{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .hc-veh,.hc-cloud,.hc-sun,.hc-moon,.hc-stars,.hc-nightveil,.hc-horizon{display:none;}
  .hc-sky{animation:none;opacity:0;} /* fallback: gradien siang bawaan .hero */
  .hc-lit,.hc-glow{animation:none;}
}

.about-grid{display:grid;gap:44px;margin-top:46px;}
@media(min-width:880px){.about-grid{grid-template-columns:1.1fr .9fr;align-items:start;}}
.about-text p{margin-bottom:16px;color:#3a4f6e;line-height:1.75;font-size:.98rem;}
.about-text strong{color:var(--blue-deep);}
.about-panel{background:var(--blue-deep);color:#fff;padding:32px;border-radius:var(--radius);border-left:4px solid var(--blue-bright);box-shadow:0 14px 40px rgba(29,61,135,.18);}
.about-panel h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:18px;}
.about-panel ul{list-style:none;}
.about-panel li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem;}
.about-panel li:last-child{border-bottom:none;}
.about-panel li span:first-child{color:#c5d8f2;}
.about-panel li span:last-child{font-family:'JetBrains Mono',monospace;color:#fff;font-weight:600;text-align:right;}

.svc-grid{display:grid;gap:22px;margin-top:48px;grid-template-columns:1fr;}
@media(min-width:680px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1020px){.svc-grid{grid-template-columns:repeat(3,1fr);}}
.svc-card{background:#fff;border:1px solid var(--line);padding:28px 24px;border-radius:var(--radius);transition:border-color .25s, transform .25s, box-shadow .25s;}
.svc-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 30px rgba(36,86,179,.12);}
.svc-icon{width:42px;height:42px;margin-bottom:18px;color:var(--blue);}
.svc-card h3{font-size:1.05rem;font-weight:600;margin-bottom:10px;letter-spacing:.01em;color:var(--blue-deep);}
.svc-card p{font-size:.88rem;color:var(--mute);line-height:1.6;}

.fleet-grid{display:grid;gap:20px;margin-top:48px;grid-template-columns:1fr;}
@media(min-width:680px){.fleet-grid{grid-template-columns:repeat(2,1fr);}}
.fleet-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:26px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
.fleet-card .ficon{width:74px;height:74px;flex-shrink:0;}
.fleet-card h3{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:6px;}
.fleet-card p{font-size:.85rem;color:#c5d8f2;line-height:1.55;}
.fleet-card .tag{display:inline-block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#fff;border:1px solid var(--blue-bright);background:rgba(63,127,214,.25);padding:3px 9px;border-radius:20px;}
.fleet-total{margin-top:34px;text-align:center;font-family:'JetBrains Mono',monospace;color:#c5d8f2;font-size:.85rem;}
.fleet-total b{color:#fff;font-size:1.3rem;}

/* ============================================================
   GALERI ARMADA — slideshow ukuran PROPORSIONAL (dibatasi max-width &
   aspect-ratio tetap), SENGAJA TIDAK full-width/full-viewport seperti
   hero banner pada umumnya - cukup sebagai galeri dokumentasi yang pas
   dilihat tanpa mendominasi seluruh layar.
   ============================================================ */
.gallery-frame{
  position:relative;margin:0 auto;max-width:760px;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 50px rgba(20,40,90,.16);
  background:#0d1b3d;
}
.gallery-track{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;}
/* Slide dasar: fade + sedikit gerak transform, arah ditentukan oleh kelas
   slide-in-left/slide-in-right yang ditambahkan JS sesuai tombol yang
   ditekan (next -> masuk dari kanan, prev -> masuk dari kiri), supaya
   transisi terasa "bergeser" alih-alih sekadar fade datar di tempat. */
.gallery-slide{
  position:absolute;inset:0;opacity:0;
  transform:translateX(0);
  transition:opacity .55s ease, transform .55s cubic-bezier(.25,.8,.3,1);
  will-change:opacity, transform;
}
.gallery-slide.active{opacity:1;transform:translateX(0);z-index:2;}
.gallery-slide.slide-in-right{transform:translateX(28px);}
.gallery-slide.slide-in-left{transform:translateX(-28px);}
.gallery-slide.slide-out-left{opacity:0;transform:translateX(-28px);z-index:1;}
.gallery-slide.slide-out-right{opacity:0;transform:translateX(28px);z-index:1;}
.gallery-slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* Ken Burns: zoom sangat lambat & halus HANYA pada slide yang sedang aktif,
   memberi kesan foto "hidup" walau pengunjung sedang diam melihatnya -
   durasi sengaja jauh lebih panjang (8.5s) daripada interval autoplay (6s)
   supaya gerakannya nyaris tak terlihat sebagai "animasi", lebih terasa
   seperti kualitas foto yang halus. Direset ke skala awal saat slide
   tidak aktif lagi, supaya saat giliran tampil berikutnya zoom dimulai
   dari awal lagi (bukan melompat dari skala besar sebelumnya). */
.gallery-slide.active img{animation:galleryKenBurns 8.5s ease-out forwards;}
@keyframes galleryKenBurns{
  from{transform:scale(1);}
  to{transform:scale(1.06);}
}
@media(prefers-reduced-motion:reduce){
  .gallery-slide{transition:opacity .3s ease;transform:none !important;}
  .gallery-slide.active img{animation:none;}
}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(10,20,45,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.gallery-nav:hover{background:rgba(10,20,45,.8);}
.gallery-nav svg{width:18px;height:18px;}
.gallery-nav.prev{left:14px;}
.gallery-nav.next{right:14px;}
.gallery-dots{position:absolute;bottom:14px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:7px;}
.gallery-dot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.45);transition:background .2s, transform .2s;padding:0;}
.gallery-dot.active{background:#fff;transform:scale(1.25);}
@media(max-width:680px){
  .gallery-frame{max-width:100%;border-radius:10px;}
  .gallery-track{aspect-ratio:4/3;}
  .gallery-nav{width:32px;height:32px;}
}

.flow{margin-top:54px;position:relative;}
.flow-line{position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(to bottom, var(--blue) 0 10px, transparent 10px 20px);}
@media(min-width:780px){.flow-line{display:none;}}
.flow-steps{display:grid;gap:0;grid-template-columns:1fr;}
@media(min-width:780px){.flow-steps{grid-template-columns:repeat(4,1fr);gap:18px;}}
.flow-step{position:relative;padding:0 0 38px 52px;}
@media(min-width:780px){.flow-step{padding:38px 0 0 0;border-top:2px dashed var(--line);}}
.flow-step .km{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;border:2px solid var(--blue);}
@media(min-width:780px){.flow-step .km{position:static;width:40px;height:40px;margin-bottom:16px;}}
.flow-step h3{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--blue-deep);}
.flow-step p{font-size:.86rem;color:var(--mute);line-height:1.6;}

.cov-wrap{display:grid;gap:40px;margin-top:48px;}
@media(min-width:880px){.cov-wrap{grid-template-columns:1fr 1fr;align-items:center;}}
.cov-list{display:grid;gap:14px;}
.cov-item{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:18px 20px;border-radius:var(--radius);}
.cov-item .pin{width:36px;height:36px;flex-shrink:0;color:var(--sky);}
.cov-item h4{font-size:1rem;font-weight:600;color:#fff;}
.cov-item span{font-size:.8rem;color:#c5d8f2;}
.cov-map{display:flex;justify-content:center;}
.java-map{position:relative;width:100%;max-width:560px;}
.java-map>img{width:100%;display:block;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.25));}
.mp{position:absolute;transform:translate(-50%,-100%);width:20px;height:20px;pointer-events:none;}
.mp .pin-ic{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.mp .lbl{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:3px;font-family:'Oswald',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.04em;color:#fff;background:rgba(29,61,135,.92);padding:2px 7px;border-radius:20px;white-space:nowrap;border:1px solid rgba(255,255,255,.25);}
.mp.below .lbl{bottom:auto;top:100%;margin-bottom:0;margin-top:3px;}
@media(max-width:520px){.mp .lbl{font-size:.52rem;padding:1px 5px;}.mp .pin-ic{width:16px;height:16px;}}

.client-strip{margin-top:48px;}
.client-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
@media(min-width:680px){.client-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:980px){.client-grid{grid-template-columns:repeat(4,1fr);}}
.client-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:108px;transition:border-color .2s, transform .2s, box-shadow .2s;}
.client-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 10px 24px rgba(36,86,179,.12);}
.client-card .ci{width:30px;height:30px;color:var(--blue);margin-bottom:10px;}
.client-card .ci-logo{max-width:64px;max-height:36px;width:auto;height:auto;object-fit:contain;margin-bottom:10px;}
.client-card span{font-size:.78rem;font-weight:600;line-height:1.35;color:var(--ink);}

.contact-wrap{display:grid;gap:40px;margin-top:48px;}
@media(min-width:880px){.contact-wrap{grid-template-columns:1fr 1fr;}}
.contact-info{display:grid;gap:18px;align-content:start;}
.contact-item{display:flex;gap:16px;align-items:flex-start;}
.contact-item .ic{width:22px;height:22px;color:var(--sky);flex-shrink:0;margin-top:2px;}
.contact-item h4{font-size:.92rem;font-weight:600;color:#fff;margin-bottom:3px;}
.contact-item p{font-size:.86rem;color:#c5d8f2;line-height:1.5;}
.contact-form{background:#fff;border:1px solid var(--line);padding:28px;border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.14);}
.contact-form .frow{margin-bottom:16px;}
.contact-form label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:7px;}
.contact-form input, .contact-form select, .contact-form textarea{width:100%;background:var(--sky-soft);border:1px solid var(--line);color:var(--ink);padding:11px 13px;border-radius:var(--radius);font-family:'Work Sans',sans-serif;font-size:16px;}
.contact-form textarea{resize:vertical;min-height:90px;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:1.5px solid var(--blue);background:#fff;}

footer{background:var(--blue-deep);border-top:4px solid var(--blue-bright);padding:36px 0;color:#c5d8f2;}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:.8rem;align-items:center;}
.foot-admin-link{color:#8aa6d9;font-size:.72rem;opacity:.7;transition:opacity .2s;}
.foot-admin-link:hover{opacity:1;color:#fff;}

::selection{background:var(--blue);color:#fff;}

/* ============================================================
   BOOT LOADER — layar pembuka singkat saat website pertama dibuka.
   Satu momen yang diorkestrasi (logo muncul, garis progres mengisi,
   lalu fade-out halus) alih-alih sekadar bar tipis di pojok atas.
   ============================================================ */
.boot-loader{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(170deg,#0d1b3d 0%, var(--blue-deep) 55%, var(--blue) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease, visibility .55s ease;
}
.boot-loader.boot-hide{opacity:0;visibility:hidden;pointer-events:none;}
.boot-loader-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;}
.boot-logo{
  width:56px;height:56px;
  opacity:0;transform:scale(.7);
  animation:bootLogoIn .6s cubic-bezier(.2,.8,.2,1) .1s forwards;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.35));
}
@keyframes bootLogoIn{to{opacity:1;transform:scale(1);}}
.boot-word{
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.14em;
  font-size:.92rem;color:#fff;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  animation:bootWordIn .5s ease .35s forwards;
}
.boot-word span{display:block;color:#9cc2f5;font-size:.68rem;letter-spacing:.22em;margin-top:3px;}
@keyframes bootWordIn{to{opacity:1;transform:translateY(0);}}
.boot-track{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;opacity:0;animation:bootWordIn .5s ease .5s forwards;}
.boot-fill{width:0%;height:100%;background:linear-gradient(90deg,#3f7fd6,#9cc2f5);border-radius:3px;transition:width .25s ease;}
/* Grid halus bergerak pelan di latar — kesan "futuristik" tanpa ramai */
.boot-grid{
  position:absolute;inset:-10% -10%;z-index:1;opacity:.35;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
  animation:bootGridDrift 14s linear infinite;
}
@keyframes bootGridDrift{from{transform:translate(0,0);}to{transform:translate(64px,64px);}}

@media(prefers-reduced-motion:reduce){
  .boot-logo,.boot-word,.boot-track{animation:none !important;opacity:1 !important;transform:none !important;}
  .boot-grid{animation:none !important;}
}

/* ============================================================
   TRANSISI MASUK KONTEN — setelah boot loader hilang, konten utama
   fade+rise masuk dengan halus alih-alih muncul mendadak.
   ============================================================ */
header, main, footer{opacity:0;transform:translateY(10px);}
body.page-ready header,
body.page-ready main,
body.page-ready footer{
  opacity:1;transform:translateY(0);
  transition:opacity .6s ease, transform .6s ease;
}
body.page-ready main{transition-delay:.05s;}
body.page-ready footer{transition-delay:.1s;}

/* ============================================================
   SCROLL REVEAL — setiap section masuk dengan fade+rise halus saat
   pertama kali terlihat ketika di-scroll, dipicu via IntersectionObserver
   di app.js (kelas .in-view ditambahkan sekali, tidak berulang).
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}
/* Anak-anak kartu/grid item diberi jeda kecil antar elemen agar terasa "mengalir" */
.reveal .svc-card, .reveal .fleet-card, .reveal .flow-step, .reveal .client-card, .reveal .cov-item, .reveal .contact-item, .reveal .stat{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.in-view .svc-card, .reveal.in-view .fleet-card, .reveal.in-view .flow-step,
.reveal.in-view .client-card, .reveal.in-view .cov-item, .reveal.in-view .contact-item, .reveal.in-view .stat{
  opacity:1;transform:translateY(0);
}
.reveal.in-view .svc-card:nth-child(1),.reveal.in-view .fleet-card:nth-child(1),.reveal.in-view .flow-step:nth-child(1),.reveal.in-view .client-card:nth-child(1),.reveal.in-view .stat:nth-child(1){transition-delay:.03s;}
.reveal.in-view .svc-card:nth-child(2),.reveal.in-view .fleet-card:nth-child(2),.reveal.in-view .flow-step:nth-child(2),.reveal.in-view .client-card:nth-child(2),.reveal.in-view .stat:nth-child(2){transition-delay:.09s;}
.reveal.in-view .svc-card:nth-child(3),.reveal.in-view .fleet-card:nth-child(3),.reveal.in-view .flow-step:nth-child(3),.reveal.in-view .client-card:nth-child(3),.reveal.in-view .stat:nth-child(3){transition-delay:.15s;}
.reveal.in-view .svc-card:nth-child(4),.reveal.in-view .fleet-card:nth-child(4),.reveal.in-view .flow-step:nth-child(4),.reveal.in-view .client-card:nth-child(4),.reveal.in-view .stat:nth-child(4){transition-delay:.21s;}
.reveal.in-view .svc-card:nth-child(5),.reveal.in-view .client-card:nth-child(5){transition-delay:.27s;}
.reveal.in-view .svc-card:nth-child(6),.reveal.in-view .client-card:nth-child(6){transition-delay:.33s;}
.reveal.in-view .client-card:nth-child(7){transition-delay:.39s;}

@media(prefers-reduced-motion:reduce){
  header,main,footer{opacity:1 !important;transform:none !important;}
  .reveal,.reveal *{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ============================================================
   MICRO-INTERACTIONS — transisi halus untuk elemen interaktif yang
   sebelumnya berubah "kasar" tanpa transisi sama sekali.
   ============================================================ */
nav a{position:relative;}
nav a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
nav a:hover::after{transform:scaleX(1);}
.svc-card,.fleet-card,.client-card{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;}
.btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;}
header{transition:background .3s ease, box-shadow .3s ease, transform .6s ease;}
header.scrolled{box-shadow:0 6px 24px rgba(20,40,90,.1);}
img{transition:opacity .3s ease;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}