/* ==========================================================================
   base.css: token desain, reset, navigasi, section umum, footer, responsif
   Febsite
   ========================================================================== */

:root{
  --bg:#f6f6f3;--white:#fff;--ink:#111214;--muted:#77787c;
  --line:rgba(17,18,20,.09);--glass:rgba(255,255,255,.68);
  --blue:#6d82ff;--purple:#b18cff;--max:1380px;
  /* Tipografi: SF Pro untuk perangkat Apple, Inter sebagai padanan di
     Windows/Android (SF Pro milik Apple dan tidak boleh didistribusikan lewat
     web, jadi tidak bisa dimuat sebagai webfont). */
  --font-body:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --font-display:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
/* overflow-x:clip (bukan hidden) memangkas luapan mendatar tanpa menjadikan body
   wadah gulir, sehingga position:sticky pada .legal-nav tetap bekerja. Luapan 8px
   berasal dari teknik full-bleed marquee: calc(50% - 50vw) memakai 100vw yang
   termasuk lebar scrollbar, sedangkan area terlihat adalah 100% - scrollbar. */
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);overflow-x:clip}
a{text-decoration:none;color:inherit}
button{font:inherit}
.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden;background:var(--bg)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42}
.glow.a{width:420px;height:420px;background:#dfe7ff;left:-120px;top:10%}
.glow.b{width:380px;height:380px;background:#eee4ff;right:-100px;top:35%}
.glow.c{width:500px;height:300px;background:#fff;left:40%;bottom:-120px}
.grid{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(20,20,20,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
.noise{position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:min(calc(100% - 36px),1180px);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 20px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:rgba(255,255,255,.62);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:0 18px 55px rgba(20,25,40,.08)}
/* Logo huruf kapital: tracking -0.06em terasa terlalu rapat untuk huruf besar,
   jadi dilonggarkan dan ukurannya diturunkan sedikit agar bobotnya seimbang. */
.logo{font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;font-size:19px}
.logo span{opacity:.35}
.nav-links{display:flex;gap:30px;font-size:13px;color:#55565a}
.nav-links a{transition:.25s}.nav-links a:hover{color:#111}
.nav-cta{padding:10px 17px;border-radius:16px;background:#111;color:white;font-size:13px;font-weight:600}
.menu{display:none;border:0;background:none;font-size:22px;cursor:pointer;line-height:1;border-radius:14px}
main{width:min(100% - 40px,var(--max));margin:auto}
/* Hero: konten ditempel ke atas, bukan ditengahkan.
   Dengan align-items:center, blok teks yang pendek di dalam kotak setinggi layar
   menyisakan ruang kosong besar di atasnya. Di 1920x1080 jarak navbar ke judul
   mencapai 282px. align-items:start membuat jarak itu tetap sekitar 46px.

   Hero juga TIDAK dipaksa setinggi layar (min-height:auto). Tinggi paksa 900px
   lebih besar daripada tinggi konten (sekitar 800px), sehingga menyisakan ruang
   kosong yang mendorong section berikutnya jauh ke bawah. Tanpa paksaan itu,
   jarak antar-section jadi tetap di semua ukuran layar. */
.hero{min-height:auto;display:grid;grid-template-columns:.95fr 1.05fr;align-items:start;gap:30px;padding:128px 0 56px}
.hero-copy{position:relative;z-index:2;min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);font-size:12px;color:#555;margin-bottom:28px;box-shadow:0 8px 30px rgba(0,0,0,.03)}
/* Titik pada label hero dibuat berdenyut seperti indikator aktif, bukan sekadar
   titik statis. Dipakai dua gerakan berbarengan supaya tidak terasa kasar:
   - inti titiknya meredup lalu terang kembali (dotBlink)
   - cincin tipis di sekelilingnya membesar sambil memudar (dotRing)

   box-shadow statis yang lama (halo 5px) dihapus karena cincin animasi mengambil
   alih peran itu; bila keduanya dibiarkan, akan tampak dua lingkaran bertumpuk.
   Cincin memakai border, bukan latar penuh, supaya titik di tengahnya tetap terlihat.

   Titik ini hanya muncul satu kali (label hero), jadi tidak ada elemen lain yang
   ikut berdenyut. */
.dot{position:relative;width:7px;height:7px;border-radius:50%;background:#111;animation:dotBlink 2s ease-in-out infinite}
.dot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(17,18,20,.28);animation:dotRing 2s ease-out infinite}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dotRing{0%{transform:scale(.7);opacity:.9}70%,100%{transform:scale(1.45);opacity:0}}
h1{font-family:var(--font-display);font-size:clamp(34px,5vw,72px);line-height:1.06;letter-spacing:-.045em;max-width:820px}
/* Pada 851-1050px tata letak masih dua kolom sehingga kolom teks menyempit
   (sekitar 390px) sementara hero sudah besar. Ukuran headline diturunkan lebih
   dulu agar tetap dua baris, tidak pecah jadi tiga. */
@media(max-width:1050px) and (min-width:851px){h1{font-size:clamp(32px,4.3vw,45px)}}
/* Kata yang ditekankan di judul hero ("dihubungi") memakai gradasi netral
   hitam -> abu, bukan biru/ungu. Tema Febsite monokrom (aksen = hitam #111214
   di semua tombol), dan `em` di section lain juga abu netral
   (.section-head h2 em). Gradasi tetap dipertahankan agar kata itu masih
   terasa "turun" dari hitam pekat, hanya warna hue-nya yang diselaraskan. */
h1 em{font-style:normal;background:linear-gradient(120deg,#111214 5%,#4c4d53 58%,#94959b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-desc{max-width:600px;margin:30px 0 34px;color:#696a6e;font-size:18px;line-height:1.65}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 20px;border-radius:17px;font-size:14px;font-weight:600;transition:.3s}
.btn.dark{background:#111;color:#fff;box-shadow:0 14px 35px rgba(0,0,0,.13)}
.btn.light{background:rgba(255,255,255,.65);border:1px solid var(--line)}
.btn:hover{transform:translateY(-3px)}
.hero-note{margin-top:30px;color:#96979a;font-size:11px;letter-spacing:.03em}
.section{padding:125px 0}
/* Section tepat setelah hero tidak perlu padding atas sebesar section lain:
   hero sudah menyediakan ruang napas di bawahnya. Tanpa ini jarak ke judul
   section pertama menumpuk jadi sekitar 250px. */
#solusi{padding-top:84px}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:45px}
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#8b8c90;margin-bottom:13px}
.section h2{font-family:var(--font-display);font-size:clamp(40px,5vw,70px);letter-spacing:-.07em;line-height:1}
.section-intro{max-width:420px;color:#747579;line-height:1.6;font-size:15px}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.proof-card{padding:30px;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:30px;box-shadow:0 20px 60px rgba(30,35,50,.035)}
.proof-card strong{font-family:var(--font-display);font-size:34px;letter-spacing:-.06em;display:block;margin-bottom:8px}.proof-card p{font-size:13px;color:#777;line-height:1.55}
.businesses{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
/* Kartu Contoh website: satu palet gelap yang sama untuk kelima kartu,
   mengikuti warna kartu Momenta. Mockup (berlatar terang) terbaca sebagai
   "layar" yang menyala di atas latar gelap. */
.business{position:relative;min-height:420px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:36px;background:linear-gradient(145deg,#151515,#292929);color:#fff;box-shadow:0 25px 80px rgba(12,15,28,.18);padding:34px;display:flex;flex-direction:column;justify-content:space-between;transition:.45s}
.business:hover{transform:translateY(-8px);box-shadow:0 35px 95px rgba(12,15,28,.3)}
/* Di perangkat sentuh, :hover menempel setelah diketuk dan membuat kartu
   terangkat terus-menerus. Efek angkat itu dimatikan agar tidak ada keadaan
   menggantung; transisi warna dan bayangan tetap berjalan. */
@media(hover:none){.business:hover{transform:none;box-shadow:0 25px 80px rgba(12,15,28,.18)}}.business.wide{grid-column:span 2;min-height:460px}
.business-copy{position:relative;z-index:2;max-width:390px}.business-num{font-size:11px;color:#b9b9b9;margin-bottom:18px}.business h3{font-family:var(--font-display);font-size:38px;letter-spacing:-.06em;margin-bottom:10px;color:#fff}.business p{font-size:14px;color:#b9b9b9;line-height:1.55;max-width:330px}
/* Tinggi 44px (bukan 22px dari margin saja) supaya nyaman dijangkau jari;
   margin atas dikurangi agar jarak visualnya tetap sama seperti sebelumnya. */
.business-link{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:12px 0;min-height:44px;color:#fff}
/* Lebar mock berbasis persen sedangkan tingginya dulu tetap (265px), sehingga
   rasionya berubah-ubah mengikuti lebar layar dan screenshot ikut terpangkas.
   aspect-ratio:3/2 membuat tinggi mengikuti lebar, jadi rasio selalu sama dengan
   berkas screenshot (1536x1024) dan tidak ada bagian yang terpangkas. */
/* Mockup di atas kartu gelap: diberi sorotan cahaya lembut agar terbaca sebagai
   layar yang menyala, bukan sekadar kotak terang. */
.mock{position:absolute;right:28px;bottom:-55px;width:52%;aspect-ratio:3/2;height:auto;border-radius:28px 28px 0 0;background:linear-gradient(145deg,#fefefe,#ececf0);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07);transform:perspective(700px) rotateY(-12deg) rotateX(5deg);padding:18px;overflow:hidden}
.mock:before{content:"";display:block;width:55%;height:12px;border-radius:10px;background:#ddd;margin-bottom:20px}.mock:after{content:"";display:block;width:75%;height:120px;border-radius:18px;background:linear-gradient(135deg,#e6e9ff,#f4eaff)}

/* Screenshot asli pada kartu "Contoh website". Ditumpuk di atas mockup CSS
   supaya mockup tetap menjadi cadangan bila berkas gambar belum tersedia.
   object-position:top membuat bagian atas website yang terlihat. */
/* Chrome jendela pada kartu Contoh: titik-titik, alamat, dan menu, sama seperti
   hero, tetapi ukurannya disesuaikan untuk kartu yang lebih kecil.
   Tinggi 24px membuat area gambar di bawahnya berubah: dari 3:2 (351x234) menjadi
   351x210 (rasio 1,67). Karena gambar sumber berasio 1,5, object-fit:cover akan
   memangkas sekitar 10% dari BAWAH. Bagian atas (header website) tetap utuh. */
.mock-top{position:absolute;top:0;left:0;right:0;height:24px;display:flex;align-items:center;gap:7px;padding:0 9px;background:rgba(250,250,251,.97);border-bottom:1px solid rgba(20,20,20,.07);z-index:3}
.mock-dots{display:flex;gap:4px;flex:0 0 auto}
.mock-dots i{width:5px;height:5px;border-radius:50%;background:#d8d8da}
.mock-url{flex:1;min-width:0;height:13px;display:flex;align-items:center;padding:0 6px;border-radius:5px;background:rgba(233,233,237,.9);font-size:6px;color:#9a9a9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.mock-menu{font-size:7px;color:#b4b4b8;flex:0 0 auto}

.mock-shot{position:absolute;top:24px;left:0;width:100%;height:calc(100% - 24px);object-fit:cover;object-position:top center;display:block;opacity:0;transition:opacity .55s ease;z-index:2}
.mock-shot.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.mock-shot{transition:none}}
/* Palet kelima kartu kini seragam (lihat .business di atas), jadi tidak ada lagi
   penimpaan warna per kartu seperti sebelumnya. */
/* Marquee kategori: pita tipis bergaris rambut sebagai jeda antar section.
   Sengaja satu baris dengan teks kecil uppercase bertracking lebar, supaya terbaca
   sebagai label dan tidak bersaing dengan judul section. Versi sebelumnya memakai
   balok gelap setinggi 166px dengan huruf sampai 50px; itu terasa terlalu berat
   untuk tema monokrom yang minimal, jadi diganti pendekatan ini (tinggi ~58px).

   Full-bleed: marquee ada di dalam <main> yang lebarnya dibatasi
   min(100% - 40px,1380px), jadi lebar tepi-ke-tepi dicapai lewat margin negatif
   (bukan width:100vw, yang menambah lebar scrollbar dan bisa memicu geser
   horizontal). Karena <main> rata tengah, (50% - 50vw) menarik tepi ke tepi
   viewport.

   Sambungan tanpa putus: tiap baris memuat TIGA salinan daftar yang sama, sehingga
   animasi cukup menggeser tepat satu salinan (-33.3333%) lalu berulang. Ambang aman
   tanpa celah adalah 2 x lebar salinan >= lebar layar. Dengan dua salinan
   (animasi -50%) ambangnya jadi 1 x lebar salinan saja, dan itu gagal di monitor
   lebar. */
.marquee{position:relative;margin:0 calc(50% - 50vw);padding:20px 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.38))}
/* Garis kilau tipis di tepi atas supaya pita tidak terlihat datar. */
.marquee:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.mq-row{overflow:hidden;padding:2px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq-shift 42s linear infinite}
.mq-set{display:flex;align-items:center}
/* Label: huruf kecil, tracking lebar, huruf besar semua. line-height longgar agar
   tidak ada bagian huruf yang terpangkas oleh overflow:hidden milik .mq-row. */
.mq-set em{display:inline-flex;align-items:center;font-style:normal;font-weight:700;font-size:clamp(11px,1vw,13px);line-height:1.5;text-transform:uppercase;letter-spacing:.18em;white-space:nowrap;color:#5f6066}
/* Pemisah berupa titik kecil, dibuat dari elemen semu agar HTML tetap bersih. */
.mq-set em:after{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:rgba(17,18,20,.15);margin:0 1.45em}
/* Kata berselang-seling lebih muda, memberi ritme tanpa terlihat ramai. */
.mq-set em:nth-child(even){color:#b6b7bc}
/* Berhenti sejenak saat kursor mendekat supaya kategori sempat terbaca. */
.marquee:hover .mq-track{animation-play-state:paused}
.process{display:grid;grid-template-columns:1fr 1.5fr;gap:80px}.steps{border-top:1px solid var(--line)}.step{padding:27px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:50px 1fr 20px;gap:20px;align-items:start;cursor:pointer}.step-no{font-size:11px;color:#999}.step h3{font-family:var(--font-display);font-size:21px;letter-spacing:-.04em;margin-bottom:8px}.step p{font-size:13px;color:#777;line-height:1.55;max-width:600px}.step-arrow{font-size:18px}.contact{padding:80px 8%;border-radius:44px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(237,238,255,.7));border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 100px rgba(50,55,100,.09);text-align:center;position:relative;overflow:hidden}.contact:before{content:"";position:absolute;width:350px;height:350px;background:#dfe5ff;filter:blur(100px);border-radius:50%;left:-120px;top:-180px;opacity:.6}.contact h2{position:relative;font-family:var(--font-display);font-size:clamp(45px,7vw,88px);letter-spacing:-.075em;line-height:.95}.contact p{position:relative;color:#777;max-width:500px;margin:24px auto 30px;line-height:1.6}.contact .btn{position:relative}
/* Footer: brand + tiga kolom tautan, lalu baris bawah berisi hak cipta.
   Grid dipakai supaya jarak antar kolom tetap rata walau panjang teksnya berbeda;
   versi sebelumnya memakai flex space-between yang hanya cocok untuk tiga blok
   pendek. */
footer{width:min(100% - 40px,var(--max));margin:0 auto;padding:60px 0 40px;color:#96979b;font-size:12px;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.footer-brand strong{display:block;font-family:var(--font-display);font-size:17px;letter-spacing:-.015em;color:#111;margin-bottom:12px}
.footer-brand p{max-width:330px;line-height:1.65;margin-bottom:20px}
.footer-col{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.footer-col h2{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#7b7b82;margin-bottom:8px}
/* padding vertikal 9px membuat tiap tautan setinggi ~33px: cukup lega untuk jari
   di layar sentuh, tanpa membuat footer jadi terlalu tinggi. */
.footer-col a{padding:9px 0;transition:color .25s ease}
.footer-col a:hover{color:#111}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:45px;padding-top:22px;border-top:1px solid var(--line)}
.footer-top-link{display:inline-flex;align-items:center;gap:8px;color:#7b7b82;transition:color .25s ease}
.footer-top-link:hover{color:#111}
.footer-top-link i{font-size:11px}
/* Animasi reveal hanya aktif bila JavaScript tersedia (kelas .js dipasang oleh
   assets/js/boot.js). Tanpa JS, konten tetap terlihat, bukan halaman kosong. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.show{opacity:1;transform:none}

/* Perpindahan antar halaman: tirai berwarna latar menutup layar sebelum pindah,
   lalu halaman baru muncul dengan pudar halus. Dikendalikan assets/js/pindah.js.

   Kenapa tirai memakai warna --bg dan bukan hitam atau putih: warna latar halaman
   berikutnya sama persis, jadi saat halaman berganti tidak ada kedipan warna
   berbeda dan transisinya terasa menyambung. Ini juga sebabnya transisi ini tidak
   perlu menyimpan keadaan apa pun di peramban (tanpa sessionStorage), sehingga
   tetap sejalan dengan pernyataan di halaman Kebijakan Privasi.

   Hanya opacity yang dianimasikan, tanpa transform, supaya tidak menciptakan
   containing block baru yang akan mengubah acuan position:fixed pada .nav dan
   .atmosphere.

   Tanpa JavaScript, tautan tetap berpindah halaman seperti biasa; hanya tanpa
   animasi. Tidak ada konten yang disembunyikan di sini, jadi aman. */
.page-fade{position:fixed;inset:0;z-index:90;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .3s ease}
.page-fade.is-out{opacity:1}
/* Halaman baru masuk dengan pudar halus. Animasi CSS murni, jadi tetap berjalan
   walau JavaScript mati. Diarahkan ke <main> (bukan <body>) agar tidak ikut
   memudarkan .atmosphere dan .nav yang berada di luar main. */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
main{animation:pageIn .34s ease both}
@keyframes mq-shift{to{transform:translateX(-33.3333%)}}
@media(max-width:850px){
 .nav{top:12px}.nav-links,.nav-cta{display:none}
 /* 44x44px adalah ukuran sasaran sentuh minimum yang disarankan; sebelumnya
    tombol ini hanya 17x23px karena ukurannya semata mengikuti ukuran ikon. */
 .menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-4px -6px -4px 0}

 /* menu mobile dibuka lewat kelas .nav-open (diatur oleh main.js) */
 .nav-links.nav-open,.nav-cta.nav-open{display:flex}
 .nav-links.nav-open{position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:4px;padding:14px;border:1px solid rgba(255,255,255,.9);border-radius:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 25px 60px rgba(20,25,40,.12)}
 .nav-links.nav-open a{padding:11px 12px;border-radius:12px;font-size:15px;color:#33343a}
 .nav-links.nav-open a:hover{background:rgba(0,0,0,.04);color:#111}
 .nav-cta.nav-open{position:absolute;top:0;right:0}

 .hero{grid-template-columns:1fr;padding-top:110px}h1{font-size:clamp(34px,9.5vw,56px)}
 .hero-desc{font-size:16px}.section{padding:85px 0}.section-head{display:block}.section-intro{margin-top:20px}
 .proof{grid-template-columns:1fr}.businesses{grid-template-columns:1fr}.business.wide{grid-column:auto}
 /* Mockup dikembalikan ke alur normal (bukan absolute) supaya tinggi kartu
    mengikuti isi secara otomatis di lebar mana pun. Sebelumnya tinggi kartu
    dipatok angka tetap, dan karena lebar mockup ikut lebar kartu sementara
    tingginya mengikuti aspect-ratio 3/2, teks paragraf menimpa mockup di rentang
    tablet (terukur sampai 108px di 835px).
    position:relative (bukan static) tetap diperlukan agar .mock-top di dalamnya
    punya acuan posisi. Margin kanan dan bawah negatif mempertahankan efek mockup
    yang menyembul keluar tepi kartu seperti pada tata letak desktop; sisanya
    dipangkas oleh overflow:hidden milik .business. */
 .business,.business.wide{min-height:390px}
 .mock{position:relative;right:auto;bottom:auto;width:60%;margin:24px -19px -55px auto}
 .process{grid-template-columns:1fr;gap:35px}.contact{padding:65px 25px}
 /* Footer: dua kolom tautan bersebelahan di layar sempit, brand di atasnya */
 footer{padding:45px 0 32px}.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
 .footer-brand{grid-column:1/-1}
 .footer-bottom{margin-top:35px}
}
@media(max-width:520px){
 main{width:min(100% - 24px,var(--max))}.nav{width:calc(100% - 24px)}
 .hero{padding-top:94px}
 .business{padding:25px;border-radius:28px}.business h3{font-size:31px}
 /* Padding kartu di sini 25px (bukan 34px), jadi margin kanan disesuaikan agar
    jarak mockup ke tepi kartu tetap 15px seperti di rentang lain. */
 .mock{width:75%;margin:22px -10px -55px auto}
 /* pita marquee dirapatkan lagi di layar kecil */
 .marquee{padding:15px 0}.mq-set em{letter-spacing:.14em}
}
/* Untuk pengguna yang meminta gerakan dikurangi, denyut dimatikan dan titik
   dikembalikan ke wujud aslinya (halo statis) supaya tampilannya tidak berubah. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mq-track{animation:none!important}.reveal{transition:none}main{animation:none}.page-fade{transition:none}.dot{animation:none;box-shadow:0 0 0 5px rgba(17,17,17,.06)}.dot:after{animation:none;opacity:0}}