/* ==========================================================================
   IGNAN — Halaman depan: seksi cerita saat digulir (scroll storytelling)

   Dimuat lewat `$_pagecss` di index.php, jadi hanya halaman depan yang
   mengunduhnya.

   Catatan penting soal berkas ini
   -------------------------------
   Ini berkas `home.css` yang KEDUA. Yang pertama (seksi `hm-story`, "rig
   bertumbuh") dihapus atas permintaan user di sesi 19d karena isinya menyalin
   naskah dan data paket `/price-list` — dua halaman jadi bercerita hal yang
   sama. Cadangannya di BACKUP/home_css_removed_20260803.zip.

   Karena itu seksi di sini bercerita tentang hal yang TIDAK dimiliki halaman
   lain: urutan kerja satu acara, dari telepon pertama sampai alat kembali ke
   gudang. Naskahnya ada di kamus (`home.flow_*`), bukan meminjam `pl.*`, dan
   visualnya digambar CSS — tidak memakai foto acara, supaya tidak ada foto yang
   dipasangkan ke keterangan yang bukan miliknya.

   Mesin geraknya: assets/js/ignan-motion.js
     - `data-sticky-track` menulis `--sp` (0..1) di elemen track
     - `data-sequence="switch"` menukar frame teks (padam dulu, baru nyala)
   ========================================================================== */

.hm-flow {
    --hm-navy: #042c54;
    --hm-navy-deep: #021a33;
    --hm-blue: #109aec;
    --hm-amber: #f08a24;
    padding: 0;
    background-color: var(--hm-navy-deep);
    color: #ffffff;
}

/* Tinggi track = jumlah frame × jatah scroll per frame. 5 frame × 78vh memberi
   waktu baca yang cukup tanpa membuat halaman depan terasa panjang sekali. */
.hm-flow-track {
    height: calc(var(--frames, 5) * 78vh);
}

.hm-flow-panel {
    display: flex;
    align-items: center;
    background:
        radial-gradient(90% 70% at 12% 18%, rgba(16, 154, 236, 0.16) 0%, rgba(2, 26, 51, 0) 62%),
        radial-gradient(80% 60% at 88% 82%, rgba(240, 138, 36, 0.13) 0%, rgba(2, 26, 51, 0) 60%),
        linear-gradient(160deg, #042c54 0%, #021a33 100%);
}

.hm-flow-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

@media (min-width: 992px) {
    .hm-flow-inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 56px;
    }
}

.hm-flow-pre {
    display: block;
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.155em;
    text-transform: uppercase;
    color: #7ccbf9;
    text-shadow: 0 1px 12px rgba(2, 18, 33, 0.75);
}

/* Tumpukan frame teks. Tingginya dipatok agar panel tidak "melompat" tiap kali
   frame berganti: tiap frame absolut di atas frame lainnya, dan wadahnya yang
   memegang tinggi. `min-height` dihitung dari frame terpanjang. */
.hm-flow-steps {
    position: relative;
    min-height: 15.5em;
}

/* `[data-sequence] > *` di ignan-motion.css memasang
   `display: flex; align-items: center; justify-content: center` — itu dirancang
   untuk membingkai SATU gambar di tengah panel. Untuk frame berisi TEKS aturan
   itu harus dibalik: tanpa override, nomor, judul, dan paragraf berbaris ke
   samping (terukur: judul 266px di x=158..425, paragraf 351px di x=425..776)
   dan nomornya tertimpa judul. Dua kelas → (0,2,0), menang atas (0,1,0). */
.hm-flow-steps .hm-flow-step {
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* opacity diatur mesin gerak; nilai awal 0 supaya tidak semua frame terlihat
       sekejap sebelum JS jalan. */
    opacity: 0;
}

/* Tanpa JS (atau saat prefers-reduced-motion), frame pertama tetap terbaca dan
   sisanya mengalir sebagai daftar biasa — halaman tidak boleh jadi kosong
   hanya karena skripnya tidak jalan. */
.no-js .hm-flow-steps,
html:not(.has-motion) .hm-flow-steps {
    min-height: 0;
}

.no-js .hm-flow-steps .hm-flow-step,
html:not(.has-motion) .hm-flow-steps .hm-flow-step {
    position: static;
    margin-bottom: 26px;
    opacity: 1;
}

.hm-flow-num {
    display: block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--hm-amber);
}

.hm-flow-step h3 {
    margin: 0 0 14px;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.014em;
    color: #ffffff;
}

.hm-flow-step p {
    max-width: 34em;
    margin: 0;
    font-size: 1rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------------------ Visual */

.hm-flow-art {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: center;
}

/* Lingkaran ikon: satu frame per langkah, ditukar bersamaan dengan teksnya. */
.hm-flow-icons {
    position: relative;
    width: clamp(140px, 22vw, 210px);
    aspect-ratio: 1;
}

.hm-flow-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(124, 203, 249, 0.34);
    border-radius: 50%;
    background:
        radial-gradient(70% 70% at 50% 30%, rgba(16, 154, 236, 0.28) 0%, rgba(2, 26, 51, 0.1) 70%);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: #9ad8fb;
    opacity: 0;
}

html:not(.has-motion) .hm-flow-icons,
.no-js .hm-flow-icons {
    display: none;   /* tanpa gerak, ikonnya kehilangan maknanya */
}

/* Penggaris kemajuan: terisi mengikuti --sp dari data-sticky-track. */
.hm-flow-rail {
    position: relative;
    width: min(320px, 78%);
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
}

.hm-flow-rail > span {
    display: block;
    width: calc(var(--sp, 0) * 100%);
    height: 100%;
    background: linear-gradient(90deg, var(--hm-blue), var(--hm-amber));
}

/* Titik penanda langkah di atas penggaris. */
.hm-flow-dots {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-flow-dots li {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.26);
}

@media (max-width: 991px) {
    /* Di ponsel panel dibuat lebih rapat dan visualnya pindah ke bawah teks —
       ikon selebar 210px di atas teks akan memakan hampir seluruh layar. */
    .hm-flow-track {
        height: calc(var(--frames, 5) * 88vh);
    }

    .hm-flow-panel {
        align-items: flex-start;
        padding-top: 108px;
    }

    .hm-flow-steps {
        min-height: 17.5em;
    }

    .hm-flow-art {
        gap: 18px;
    }

    .hm-flow-icons {
        width: 118px;
    }
}

/* ==========================================================================
   Alasan untuk percaya (#hm-trust)

   Rangkuman sembilan "tambahan informasi" dari DOCS/sgt_20260804.md. Sasaran
   yang diminta user: pengunjung yang baru pertama membuka situs langsung
   merasa "ini bisnis profesional" — jadi seksi ini sengaja dibuat tenang dan
   padat, bukan ramai. Yang membuatnya terbaca mahal: latar biru tua satu
   warna, garis tipis, jarak lega, dan angka/klaim yang pendek.
   ========================================================================== */

.hm-trust {
    position: relative;
    padding: 104px 0 108px;
    background:
        radial-gradient(120% 90% at 12% 0%, rgba(16, 154, 236, 0.22) 0%, rgba(16, 154, 236, 0) 62%),
        linear-gradient(168deg, #042c54 0%, #021a33 100%);
    color: #ffffff;
    overflow: hidden;
}

/* Garis aksen setipis mungkin di tepi atas — penanda bahwa seksi ini bagian
   yang "resmi", bukan sekadar blok gelap lain. */
.hm-trust::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #109aec, #f08a24 68%, rgba(240, 138, 36, 0));
}

.hm-trust-head {
    max-width: 46em;
    margin-bottom: 54px;
}

.hm-trust-pre {
    display: block;
    margin-bottom: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.7;
    text-transform: uppercase;
    color: #6cc4f7;
}

.hm-trust-head h2 {
    margin: 0 0 18px;
    font-size: clamp(1.7rem, 3.1vw, 2.6rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: #ffffff;
}

.hm-trust-head p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
}

/* `minmax(0, …)` wajib: kolom yang berisi teks panjang tanpa itu memakai lebar
   kata terpanjang sebagai lebar minimum dan barisnya meluber di layar sempit
   (jebakan grid blowout yang sudah dua kali muncul di project ini). */
/* TIGA kolom yang dipatok, bukan `auto-fit`. Isinya enam kartu: dengan
   `auto-fit minmax(260px)` lebar desktop menghasilkan EMPAT kolom, jadi barisnya
   jadi 4 + 2 dan dua sel terakhir kosong — terlihat sebagai balok kosong di
   kanan (jebakan yang sama sudah muncul di `.pg-values` /partners, progress.md
   §2y). Tiga kolom membuat 6 kartu jatuh rata 3 + 3. */
.hm-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.14);
    list-style: none;
    overflow: hidden;
}

/* Kartu dipisah oleh celah 1px pada latar terang di atas — hasilnya garis
   pemisah rapi tanpa perlu menghitung border mana yang harus dibuang di tiap
   ujung baris (masalah klasik grid + border). */
.hm-trust-grid li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 30px 28px 32px;
    background-color: #052f59;
    transition: background-color 0.3s ease;
}

.hm-trust-grid li:hover {
    background-color: #063a6d;
}

.hm-trust-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 13px;
    background: linear-gradient(140deg, rgba(16, 154, 236, 0.9), rgba(16, 154, 236, 0.35));
    font-size: 1.05rem;
    color: #ffffff;
}

.hm-trust-grid strong {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}

.hm-trust-txt {
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.74);
}

.hm-trust-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    margin: 44px 0 0;
}

/* Varian `:link`/`:visited` wajib ikut ditulis — main.css mewarnai semua
   tautan lewat `a:link:not(.btn)` yang bernilai (0,2,1) dan akan menang atas
   selektor satu kelas, membuat tombol ini biru tua di atas latar biru tua.
   ⚠️ Induk `.hm-trust` juga WAJIB: `.hm-trust-cta:link` sendiri hanya (0,2,0),
   masih kalah dari (0,2,1) itu — terukur, warna terhitung kedua tautan di
   bawah adalah navy tema, bukan yang ditulis di sini, sehingga "Kenali
   perusahaannya" (navy di atas navy) tidak terlihat sama sekali. Dengan
   induknya nilainya (0,3,0) dan menang tanpa !important. */
.hm-trust .hm-trust-cta,
.hm-trust .hm-trust-cta:link,
.hm-trust .hm-trust-cta:visited {
    display: inline-flex;
    align-items: center;
    padding: 15px 32px;
    border-radius: 999px;
    background-color: #f08a24;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.hm-trust .hm-trust-cta:hover,
.hm-trust .hm-trust-cta:focus {
    background-color: #d9761a;
    color: #ffffff;
    transform: translateY(-2px);
}

.hm-trust .hm-trust-link,
.hm-trust .hm-trust-link:link,
.hm-trust .hm-trust-link:visited {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #9fd4f7;
    border-bottom: 1px solid rgba(159, 212, 247, 0.4);
    padding-bottom: 2px;
}

.hm-trust .hm-trust-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Tablet: 6 kartu jadi 2 × 3, tetap tanpa sel kosong. */
@media (max-width: 991px) {
    .hm-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hm-trust {
        padding: 72px 0 76px;
    }

    .hm-trust-head {
        margin-bottom: 36px;
    }

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

    .hm-trust-grid li {
        padding: 26px 22px 28px;
    }
}

/* ==========================================================================
   Beranda — "Yang Kami Kerjakan" (#hm-what), DOCS/new.md §7

   Yang dikerjakan bagian ini bukan hiasan, tapi HIERARKI. §4 melarang ketiga
   kategori jasa diberi bobot visual yang sama, dan kisi tiga kolom sejajar akan
   melanggarnya tanpa satu kata pun berubah — pengunjung membaca luas kotak
   sebelum membaca isinya. Karena itu kartu inti (sewa sound) mengambil satu
   kolom penuh setinggi dua baris DAN berlatar navy.

   DIRAPATKAN 2026-08-13 atas permintaan user: "biar cukup satu screen ketika
   scroll". Versi pertama 1.502px di 1440×900 = 1,67 layar. Tiga hal yang
   memakan ruang paling banyak, dan cara masing-masing dipangkas:

     1. Daftar butir bergaris — 3 baris × ±42px = 126px per kartu. Diubah
        menjadi chip yang membungkus, jadi ±56px untuk tiga butir yang sama.
        Ini penghematan terbesar dan satu-satunya yang bersifat struktural.
     2. Nomor & label bertumpuk — dijadikan sebaris (`.hm-what-meta`).
     3. Padding seksi, jarak kepala, dan tinggi baris teks dikencangkan.

   Ukurannya sekarang terikat pada janji itu: **kalau menambah butir, naskah
   yang lebih panjang, atau padding, ukur ulang** — seksinya harus tetap
   <= 1,0 tinggi viewport di 1024px ke atas. Di bawah itu kartunya menumpuk dan
   satu layar memang tidak mungkin.
   ========================================================================== */

.hm-what {
    --hm-navy: #042c54;
    --hm-blue: #109aec;
    /* Sama dengan --pg-blue-text di page.css: #109aec hanya 3,06:1 di atas
       putih, gagal untuk teks kecil. Jangan dipakai untuk huruf. */
    --hm-blue-text: #0d74b3;
    --hm-ink: #10202f;
    --hm-muted: #5b6b7c;
    --hm-line: #e3eaf2;
    padding: 44px 0 26px;
    background-color: #ffffff;
}

.hm-what-head {
    max-width: 44em;
    margin-bottom: 18px;
}

.hm-what-pre {
    display: block;
    margin-bottom: 9px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--hm-blue-text);
}

.hm-what-head h2 {
    margin: 0 0 10px;
    font-size: clamp(1.44rem, 2.2vw, 1.92rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--hm-ink);
}

.hm-what-head p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.62;
    color: var(--hm-muted);
}

/* `minmax(0, …)` wajib — tanpa itu kolom berisi teks panjang memakai kata
   terpanjang sebagai lebar minimum dan barisnya meluber di layar sempit
   (jebakan grid blowout yang sudah berulang di project ini). */
.hm-what-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.hm-what-card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 20px;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    background-color: #ffffff;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.hm-what-card:hover {
    border-color: #c8d8e8;
    transform: translateY(-3px);
}

/* Nomor & label sebaris — lihat catatan butir 2 di kepala berkas. */
.hm-what-meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.hm-what-num {
    font-family: var(--h1-font);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--hm-blue-text);
}

.hm-what-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hm-muted);
}

.hm-what-card h3 {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.26;
    color: var(--hm-ink);
}

.hm-what-card p {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--hm-muted);
}

/* Chip yang membungkus, BUKAN daftar bergaris bertumpuk — penghematan ruang
   terbesar di seksi ini (butir 1 di kepala berkas). */
.hm-what-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.hm-what-list li {
    padding: 5px 11px;
    border: 1px solid var(--hm-line);
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--hm-ink);
}

/* `margin-top: auto` mendorong CTA ke dasar kartu, jadi ketiga tombol sejajar
   walau panjang naskah di atasnya berbeda. */
.hm-what-cta,
.hm-what-cta:link,
.hm-what-cta:visited {
    margin-top: auto;
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--hm-blue);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hm-blue-text);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.hm-what-cta:hover,
.hm-what-cta:focus {
    color: var(--hm-ink);
    border-bottom-color: var(--hm-ink);
}

/* --------------------------------------------------- Kartu inti (sound) */

/* SATU BARIS PENUH, bukan `grid-row: span 2`.
   Versi pertama membuat kartu ini setinggi kedua kartu di kolom kanan
   sekaligus, dan itu meninggalkan ±300px RONGGA KOSONG di tengahnya: kolom
   kanan punya dua kali kelengkapan kartu (padding, judul, CTA), jadi selalu
   lebih tinggi daripada satu kartu yang isinya sepadan. Menambah naskah supaya
   penuh bukan pilihan — §33 melarang mengarang isi.

   Dominasinya sekarang datang dari LEBAR PENUH + latar navy + huruf yang lebih
   besar, bukan dari tinggi. Efeknya ke §4 sama (kartu ini jelas paling berat),
   seksinya justru lebih pendek, dan tidak ada rongga. Jangan dikembalikan ke
   `span 2` tanpa menambah isi yang bisa dipertanggungjawabkan. */
.hm-what-card.is-core {
    grid-column: 1 / -1;
    padding: 26px 30px 24px;
    border-color: var(--hm-navy);
    background:
        radial-gradient(120% 140% at 6% 0%, rgba(16, 154, 236, 0.26) 0%, rgba(16, 154, 236, 0) 58%),
        linear-gradient(112deg, #042c54 0%, #021a33 100%);
}

/* Naskah kartu inti dibatasi lebarnya. Tanpa ini paragraf membentang ±1.180px
   di layar lebar — satu baris teks selebar itu susah diikuti mata, dan justru
   membuat kartunya terbaca seperti spanduk, bukan kartu layanan. */
.hm-what-card.is-core h3,
.hm-what-card.is-core p {
    max-width: 40em;
}

.hm-what-card.is-core:hover {
    border-color: var(--hm-blue);
}

.hm-what-card.is-core .hm-what-num,
.hm-what-card.is-core .hm-what-tag {
    color: #6cc4f7;
}

.hm-what-card.is-core h3 {
    font-size: clamp(1.3rem, 1.9vw, 1.62rem);
    color: #ffffff;
}

.hm-what-card.is-core p {
    font-size: 0.97rem;
    color: rgba(255, 255, 255, 0.8);
}

.hm-what-card.is-core .hm-what-list li {
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
}

.hm-what-card.is-core .hm-what-cta,
.hm-what-card.is-core .hm-what-cta:link,
.hm-what-card.is-core .hm-what-cta:visited {
    color: #ffffff;
    border-bottom-color: var(--hm-blue);
}

.hm-what-card.is-core .hm-what-cta:hover,
.hm-what-card.is-core .hm-what-cta:focus {
    color: #6cc4f7;
    border-bottom-color: #6cc4f7;
}

@media (max-width: 991px) {
    .hm-what {
        padding: 44px 0 48px;
    }

    /* Satu kolom. Di lebar ini ketiga kartu menumpuk, jadi janji "satu layar"
       memang tidak berlaku — lihat catatan di kepala berkas. */
    .hm-what-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hm-what-card.is-core {
        padding: 24px 22px 22px;
    }

    .hm-what-card.is-core h3,
    .hm-what-card.is-core p {
        max-width: none;
    }

    .hm-what-card {
        padding: 20px 20px 18px;
    }
}

/* ==========================================================================
   Beranda — dua jalur portofolio (#services .hm-paths), DOCS/new.md §8

   Acara dan project dipisahkan di sini. Sebelumnya satu-satunya jalan masuk ke
   /project dari beranda adalah tautan footer, sehingga pengunjung yang datang
   mencari pekerjaan instalasi tidak punya pintu di halaman utama.

   Kedua kartu dibuat SAMA lebar dengan sengaja: portofolio acara jauh lebih
   banyak isinya, dan membesarkan kartu project akan menyatakan sebaliknya.
   ========================================================================== */

.hm-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
}

.hm-path,
.hm-path:link,
.hm-path:visited {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid #e3eaf2;
    border-radius: 16px;
    background-color: #ffffff;
    color: #10202f;
    text-align: left;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.hm-path:hover,
.hm-path:focus {
    border-color: #109aec;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(4, 44, 84, 0.1);
    color: #10202f;
}

.hm-path-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 12px;
    background-color: rgba(16, 154, 236, 0.1);
    color: #0d74b3;
    font-size: 1.16rem;
}

.hm-path strong {
    margin-bottom: 10px;
    font-family: var(--h1-font);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.hm-path-txt {
    margin-bottom: 22px;
    font-size: 0.95rem;
    line-height: 1.76;
    color: #5b6b7c;
}

.hm-path-cta {
    margin-top: auto;
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 2px solid #109aec;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0d74b3;
}

.hm-path:hover .hm-path-cta {
    color: #042c54;
    border-bottom-color: #042c54;
}

@media (max-width: 767px) {
    .hm-paths {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
    }
}