DAN blok
di dalamnya → hero kembali ke gradient statis .wash biasa.
Seluruh blok CSS ini boleh dibuang tanpa menyentuh bagian lain.
===================================================== */
.hero.wash--flow{
background-color:var(--pm-bg);
background-image:radial-gradient(rgba(255,255,255,.03) .5px, transparent .5px);
background-size:3px 3px;
}
/* matikan lapisan gradient statis bawaan .wash agar tidak dobel */
.hero.wash--flow::before,.hero.wash--flow::after{display:none}
.flow{
position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;
/* saturate memurnikan hue: biru #0246F0 → rgb(0,72,255), komponen
merahnya dibuang sehingga tidak terbaca keabuan.
Catatan: mix-blend-mode:screen sempat dicoba di sini dan dilepas —
di atas latar sepekat #0A0D14 efeknya nyaris nol (chroma 40→41),
hanya menambah beban compositing. Kepekatan warna ditentukan alpha
pada .flow__a / .flow__b di bawah. */
filter:blur(66px) saturate(180%);
}
.flow i{
position:absolute;display:block;
will-change:transform,border-radius;
}
/* massa biru — melintas dari kiri ke kanan */
.flow__a{
left:-10%;top:0;width:52%;height:74%;
background:rgba(2,70,240,.17);
animation:amoebaDriftA 27s ease-in-out infinite alternate,
amoebaMorph 19s ease-in-out infinite;
}
/* massa pink — melintas berlawanan arah */
.flow__b{
left:56%;top:-10%;width:42%;height:58%;
background:rgba(246,85,166,.10);
animation:amoebaDriftB 36s ease-in-out infinite alternate,
amoebaMorph 24s ease-in-out infinite reverse;
}
/* Ekor: delay POSITIF, bukan negatif.
Negatif = animasi seolah sudah berjalan duluan → hantu MENDAHULUI induk.
Positif = fasenya tertinggal → hantu selalu berada di belakang arah
gerak, baik saat melaju ke kanan maupun saat kembali ke kiri. */
.flow__t1{animation-delay:2.6s,1.3s;opacity:.5}
.flow__t2{animation-delay:5.2s,2.6s;opacity:.26}
@keyframes amoebaMorph{
0%,100%{border-radius:60% 40% 48% 52% / 56% 46% 54% 44%}
25% {border-radius:44% 56% 62% 38% / 48% 60% 40% 52%}
50% {border-radius:52% 48% 34% 66% / 64% 36% 58% 42%}
75% {border-radius:38% 62% 56% 44% / 42% 56% 44% 58%}
}
@keyframes amoebaDriftA{
from{transform:translate3d(-14%,4%,0) rotate(0deg) scale(1)}
to {transform:translate3d(118%,-6%,0) rotate(150deg) scale(1.1)}
}
@keyframes amoebaDriftB{
from{transform:translate3d(10%,-2%,0) rotate(0deg) scale(1)}
to {transform:translate3d(-128%,12%,0) rotate(-130deg) scale(.9)}
}
/* =====================================================
Hero — editorial, asimetris
===================================================== */
.hero{
background:var(--pm-bg);
/* 60px = tinggi nav. Nav sekarang fixed (tidak memakan ruang layout),
jadi ruangnya diganti di sini. Total jarak ke judul tetap sama
seperti sebelumnya: 60px + padding-top .hero__grid. */
padding:60px 0 0;
border-bottom:1px solid var(--pm-line);
}
.hero__aurora{display:none}
.hero__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
gap:56px;align-items:end;
padding:clamp(56px,7vw,104px) 0 clamp(44px,5vw,64px);
border-bottom:1px solid var(--pm-line);
}
.hero__copy{max-width:none;text-align:left}
/* Hero sengaja lebih besar dari heading section (36px) agar ada hierarki
jelas antara judul utama dan judul bagian, tanpa terlalu memakan ruang.
Frasa terpanjang "Reputation Analytics" kini menempati barisnya sendiri,
jadi ruang yang tersedia lega. Minimum tetap 33px untuk mobile. */
.hero h1{color:var(--pm-fg);max-width:none;font-size:clamp(33px,4.7vw,68px)}
/* Frasa berganti dengan efek ketik.
Susunan: "Renalar: AI" / [frasa] / "Platform".
Frasa menempati barisnya SENDIRI di semua ukuran layar, sehingga
panjangnya yang berubah-ubah tidak pernah menggeser kata lain dan
tinggi hero tetap konstan sepanjang siklus. */
.type{display:inline}
.type__caret{
display:inline-block;width:.05em;height:.78em;margin-left:.07em;
background:var(--pm-accent);vertical-align:-.04em;
animation:caretBlink 1.05s steps(1,end) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero .lede{margin:24px 0 0;text-align:left;max-width:44ch;font-size:var(--t-lede)}
/* Shot hero tampil selebar wrap — beri kerapatan yang wajar */
@media (min-width:961px){ .hero .shot{font-size:9.4px} }
.hero .btn-row{margin-top:32px;justify-content:flex-start;gap:18px;align-items:center}
.hero__meta,.tagpill,.scrollcue,.hero__strip{display:none}
/* Daftar ringkas di kanan — memberi struktur, bukan hiasan */
.hero__index{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.hero__index li{
display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;
padding:14px 0;border-top:1px solid var(--pm-line);
font-size:13.5px;color:var(--pm-fg-2);line-height:1.5;
}
.hero__index li:last-child{border-bottom:1px solid var(--pm-line)}
.hero__index b{
font-size:var(--t-meta);font-weight:600;letter-spacing:.1em;color:var(--pm-fg-3);
padding-top:.25em;
}
.hero__visual{margin:0;padding:clamp(36px,4.5vw,64px) 0 clamp(48px,6vw,88px)}
/* Shot hero paling besar — beri jeda sedikit dan durasi lebih panjang
supaya masuknya terasa mengendap, bukan menyentak. */
.hero__visual.reveal{transition:opacity .8s ease-out .16s,transform .8s var(--ease-back) .16s}
@media (max-width:900px){
.hero__grid{grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
.hero h1{max-width:none}
}
/* =====================================================
Baris bernomor
===================================================== */
.rows{border-top:1px solid var(--pm-line)}
.rows__item{
display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.15fr);gap:24px;
padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--pm-line);align-items:start;
}
.rows__n{font-size:var(--t-meta);font-weight:600;letter-spacing:.1em;color:var(--pm-fg-3);padding-top:.45em}
.rows__item h3{font-size:var(--t-h3);letter-spacing:-.012em}
.rows__item p{font-size:14.5px;margin:0;color:var(--pm-fg-2)}
@media (max-width:820px){
.rows__item{grid-template-columns:40px minmax(0,1fr);gap:14px}
.rows__item p{grid-column:2;margin-top:6px}
}
/* =====================================================
Kartu — datar, hanya hairline
===================================================== */
.card{
background:transparent;border:1px solid var(--pm-line);border-radius:8px;
box-shadow:none;padding:26px;
transition:background .25s ease,border-color .25s ease;
}
.card::before{display:none}
.card--hover:hover{background:var(--pm-surface);border-color:var(--pm-line-2);transform:none;box-shadow:none}
.card h3{margin-bottom:8px}
.card p{font-size:14px;color:var(--pm-fg-2)}
.card--dark{background:transparent;border-color:var(--pm-line)}
.card--dark p{color:var(--pm-fg-2)}
.card__link{color:var(--pm-fg-2);font-size:13px;font-weight:500;margin-top:18px}
.card--link:hover .card__link,.card__link:hover{color:var(--pm-fg)}
.icon-circle{
width:32px;height:32px;border-radius:6px;margin-bottom:18px;
background:transparent;border:1px solid var(--pm-line);color:var(--pm-fg-2);
}
.icon-circle svg{width:15px;height:15px}
.card--dark .icon-circle{background:transparent;color:var(--pm-fg-2)}
.grid{gap:1px;background:var(--pm-line);border:1px solid var(--pm-line);border-radius:8px;overflow:hidden}
.grid > *{border:0 !important;border-radius:0 !important;background:var(--pm-bg)}
.grid--3 > *,.grid--4 > *{padding:28px}
.grid > *:hover{background:var(--pm-bg-2)}
.section--alt .grid > *{background:var(--pm-bg-2)}
.section--alt .grid > *:hover{background:#11151F}
@media (max-width:640px){.grid{border-radius:8px}}
/* Bento diganti grid rata — lebih tenang */
.bento{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--pm-line);border:1px solid var(--pm-line);border-radius:8px;overflow:hidden;
}
.bento > *{grid-column:auto !important;border:0 !important;border-radius:0 !important;
background:var(--pm-bg);padding:28px;transition:background .25s ease}
.bento > *:hover{background:var(--pm-bg-2)}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}
/* =====================================================
Steps
===================================================== */
.steps{gap:1px;background:var(--pm-line);border:1px solid var(--pm-line);border-radius:8px;overflow:hidden}
.step{
background:var(--pm-bg-2);border:0;border-radius:0;padding:28px;
transition:background .25s ease;
}
.step:hover{background:#11151F;transform:none;box-shadow:none}
.step::before{
background:transparent;border:0;color:var(--pm-fg-3);width:auto;height:auto;
font-family:var(--font-sans);font-size:var(--t-meta);font-weight:600;letter-spacing:.16em;
box-shadow:none;margin-bottom:16px;display:block;
}
.step::before{content:"0" counter(s)}
.step h3{font-size:var(--t-h3)}
.step p{font-size:14px;color:var(--pm-fg-2)}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
/* =====================================================
Tur produk
===================================================== */
.tour__tabs{
background:transparent;border:0;border-top:1px solid var(--pm-line);border-radius:0;
width:100%;padding:0;margin:0 0 clamp(28px,3vw,44px);gap:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.tour__tab{
position:relative;text-align:left;padding:18px 18px 18px 0;border-radius:0;
color:var(--pm-fg-3);font-size:13.5px;font-weight:400;
display:flex;align-items:baseline;gap:10px;white-space:normal;
transition:color .25s ease;
}
.tour__tab::before{
content:attr(data-n);font-size:var(--t-meta);font-weight:600;letter-spacing:.1em;
color:var(--pm-fg-3);transition:color .25s ease;
}
.tour__tab::after{
content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--pm-fg);
transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out);
}
.tour__tab:hover{color:var(--pm-fg-2);background:transparent}
.tour__tab[aria-selected="true"]{background:transparent;color:var(--pm-fg);box-shadow:none;font-weight:500}
.tour__tab[aria-selected="true"]::before{color:var(--pm-fg)}
.tour__tab[aria-selected="true"]::after{transform:scaleX(1)}
@media (max-width:820px){
.tour__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.tour__tab{padding:14px 12px 14px 0;font-size:13px}
}
.tour__panel{gap:clamp(28px,3.5vw,56px)}
@media (min-width:961px){
.tour__panel{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
}
.tour__copy h3{font-size:var(--t-h2);letter-spacing:-.022em;line-height:1.16;margin-bottom:14px;font-weight:500}
.tour__copy p{color:var(--pm-fg-2);font-size:14.5px}
.feature__list{margin-top:20px;gap:0}
.feature__list li{
color:var(--pm-fg-2);font-size:13.5px;padding:11px 0 11px 0;
border-top:1px solid var(--pm-line-2);line-height:1.5;
}
.feature__list li:last-child{border-bottom:1px solid var(--pm-line-2)}
.feature__list li::before{display:none}
/* Link tur — dibedakan dari daftar fitur abu di atasnya: biru brand & lebih tebal. */
.tour__copy .card__link{
display:inline-block;margin-top:24px;
color:var(--pm-accent-2);font-size:14px;font-weight:600;
transition:color .2s ease;
}
.tour__copy .card__link:hover{color:#fff}
/* =====================================================
FAQ
===================================================== */
.faq{border-top:1px solid var(--pm-line)}
.faq details{border-bottom:1px solid var(--pm-line)}
.faq summary{
color:var(--pm-fg);font-size:17.5px;padding:20px 0;font-weight:500;
letter-spacing:-.01em;transition:color .2s ease;
}
.faq summary:hover,.faq details[open] summary{color:var(--pm-fg-2)}
.faq summary::after{color:var(--pm-fg-3);font-size:18px}
.faq details p{color:var(--pm-fg-2);font-size:14.5px;padding-bottom:22px;max-width:70ch}
/* =====================================================
CTA & footer
===================================================== */
.cta-band{
background:transparent;padding:clamp(72px,8vw,120px) 0;
border-top:1px solid var(--pm-line);text-align:left;
}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
gap:40px;align-items:end}
/* 24ch, bukan 20ch. Pada 20ch (414px) baris Indonesia
"Siap mengkalibrasi ulang" berukuran 415px — lebih 1px sehingga
melipat jadi tiga baris. 24ch memberi kelonggaran ±80px agar kedua
bahasa tetap dua baris sesuai pemenggalan yang ditulis di markup. */
.cta-band h2{font-size:var(--t-h2);max-width:24ch;margin:0}
.cta-band p{color:var(--pm-fg-2);margin:16px 0 0;max-width:52ch}
.cta-band .btn-row{margin:0;justify-content:flex-start}
@media (max-width:820px){
.cta-band .wrap{grid-template-columns:1fr;gap:28px;align-items:start}
}
.footer{background:var(--pm-bg);border-top:1px solid var(--pm-line);padding:64px 0 28px}
.footer__brand img{height:26px}
.footer p,.footer__addr{color:var(--pm-fg-3);font-size:12.5px}
.footer h4{color:var(--pm-fg-3);font-size:var(--t-meta);letter-spacing:.16em;font-weight:600}
.footer li a{color:var(--pm-fg-2);font-size:13px}
.footer li a:hover{color:var(--pm-fg)}
.footer__bottom{border-top-color:var(--pm-line);color:var(--pm-fg-3);font-size:11.5px;margin-top:40px}
/* =====================================================
Motion
===================================================== */
/* Bilah progres gulir. position:fixed WAJIB — tanpa itu ia jadi blok statis
setinggi 1px yang memakan ruang layout di puncak halaman (mendorong hero
turun 1px sehingga muncul garis latar polos di atas gradient), sekaligus
membuat indikatornya tidak berfungsi. site.js mengisi scaleX-nya. */
.progress{
position:fixed;top:0;left:0;width:100%;height:1px;z-index:120;
transform:scaleX(0);transform-origin:0 50%;
background:var(--pm-fg);opacity:.5;
}
/* =====================================================
SUBPAGE — dukungan halaman selain homepage
Homepage: penuh gelap, nav fixed (perlu untuk gradient hero).
Subpage: hero gelap + isi terang, dan butuh spacer karena nav fixed.
Aktif untuk yang TIDAK punya kelas .home.
===================================================== */
body:not(.home){padding-top:60px}
/* Hero subpage lebih rapat dari .section biasa: bagian atas sudah dapat
spacer 60px dari nav fixed, jadi padding hero-nya dikurangi agar tidak
terasa jinjang. */
.section--hero{padding:clamp(42px,4.8vw,80px) 0 clamp(54px,6vw,96px)}
/* Di hero, .head adalah satu-satunya isi — margin-bawahnya jadi ruang
mati di bawah lede, jadi dihilangkan. */
.section--hero .head{margin-bottom:0}
/* ── Section terang ──────────────────────────────────
premium.css membuat .section transparan di atas body gelap. Beri
kelas .section--light pada bagian yang harus tampil terang agar
membaca teks panjang tidak melelahkan mata. */
.section--light{
background:var(--lt-bg);color:var(--lt-fg);
border-top:1px solid var(--lt-line);border-bottom:0;
}
.section--light + .section--light{border-top:0}
.section--light.section--alt{background:var(--lt-bg-2)}
.section--light h1,.section--light h2,.section--light h3,
.section--light h4,.section--light h5{color:var(--lt-fg)}
.section--light p,.section--light .lede{color:var(--lt-fg-2)}
.section--light .lede{max-width:60ch}
.section--light .slabel{color:var(--lt-fg-3)}
.section--light .slabel b{color:var(--pm-accent)}
.section--light .eyebrow{color:var(--pm-accent)}
/* Kartu terang */
.section--light .card{
background:var(--lt-surface);border:1px solid var(--lt-line);
box-shadow:0 6px 22px -16px rgba(17,26,54,.22);
}
.section--light .card::before{display:none}
.section--light .card--hover:hover{
background:var(--lt-surface);border-color:var(--lt-line-2);
transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(17,26,54,.28);
}
.section--light .card h3{color:var(--lt-fg)}
.section--light .card p{color:var(--lt-fg-2)}
.section--light .card__link{color:var(--pm-accent)}
.section--light .card--link:hover .card__link,
.section--light .card__link:hover{color:var(--pm-accent-2)}
.section--light .icon-circle{
background:#EEF3FF;border:1px solid #DCE6FE;color:var(--pm-accent);
}
/* Grid berpagar hairline versi terang */
.section--light .grid,.section--light .bento,.section--light .steps{
background:var(--lt-line);border-color:var(--lt-line);
}
.section--light .grid > *,.section--light .bento > *,.section--light .step{background:var(--lt-surface)}
.section--light .grid > *:hover,.section--light .bento > *:hover,.section--light .step:hover{background:#FBFCFE}
/* Steps: kartu gelap bawaan tema perlu dipaksa terang di section terang
agar nomor, judul, dan paragrafnya terbaca. */
.section--light .step::before{color:var(--lt-fg-3)}
.section--light .step h3{color:var(--lt-fg)}
.section--light .step p{color:var(--lt-fg-2)}
/* Daftar fitur terang */
.section--light .feature__list li{color:var(--lt-fg-2);border-top-color:var(--lt-line)}
.section--light .feature__list li:last-child{border-bottom-color:var(--lt-line)}
/* FAQ terang */
.section--light .faq{border-top-color:var(--lt-line)}
.section--light .faq details{border-bottom-color:var(--lt-line)}
.section--light .faq summary{color:var(--lt-fg)}
.section--light .faq summary:hover,.section--light .faq details[open] summary{color:var(--pm-accent)}
.section--light .faq summary::after{color:var(--lt-fg-3)}
.section--light .faq details p{color:var(--lt-fg-2)}
/* Tombol PRIMARY di area terang → biru brand (bukan putih premium yang
akan tak terlihat di atas kartu/section terang). Berlaku juga untuk
kartu form putih di hero gelap (.form-card). */
.section--light .btn--primary,.form-card .btn--primary{
background:var(--pm-accent);color:#fff;box-shadow:0 10px 24px -14px rgba(59,107,255,.7);
}
.section--light .btn--primary:hover,.form-card .btn--primary:hover{background:#2E5AF0;color:#fff}
/* Tombol sekunder di area terang */
.section--light .btn--secondary{
background:var(--lt-surface);color:var(--lt-fg);border-color:var(--lt-line-2);
}
.section--light .btn--secondary:hover{background:#fff;border-color:var(--pm-accent)}
/* Split 2 kolom generik (mis. hero halaman demo) */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start}
@media(max-width:900px){.split-2{grid-template-columns:1fr}}
/* Kartu form putih di atas hero gelap */
.form-card{
background:#fff;border:1px solid var(--lt-line);border-radius:14px;
padding:clamp(24px,3vw,34px);box-shadow:0 26px 60px -30px rgba(0,0,0,.6);
}
.form-card h3{color:var(--lt-fg)}
.form-card > p{color:var(--lt-fg-2)}
/* Note & chips terang */
.section--light .note{border-left-color:var(--lt-line-2);color:var(--lt-fg-2)}
.section--light .note strong{color:var(--lt-fg)}
.section--light .chip{border-top-color:var(--lt-line);color:var(--lt-fg-2)}
/* Tabel terang — teks sel default mewarisi warna body (terang) sehingga
tak terbaca di atas latar putih; di sini dipaksa gelap. */
.section--light .table-wrap{background:var(--lt-surface);border-color:var(--lt-line)}
.section--light table{color:var(--lt-fg-2)}
.section--light th,.section--light td{border-bottom-color:var(--lt-line)}
.section--light thead th{background:var(--lt-bg-2);color:var(--lt-fg-3)}
.section--light td strong{color:var(--lt-fg)}
/* ── Kartu harga (tier) ──────────────────────────────
Grid dengan jarak antar-kartu (bukan hairline nempel), dipakai
halaman Harga. */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.tier{
background:var(--lt-surface);border:1px solid var(--lt-line);border-radius:14px;
padding:28px;display:flex;flex-direction:column;
transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.tier:hover{border-color:var(--lt-line-2);box-shadow:0 16px 34px -20px rgba(17,26,54,.3);transform:translateY(-3px)}
.tier--featured{border-color:var(--pm-accent);box-shadow:0 16px 40px -20px rgba(59,107,255,.45)}
.tier__tag{font-size:var(--t-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-fg-3)}
.tier--featured .tier__tag{color:var(--pm-accent)}
.tier h3{font-size:22px;margin:10px 0 4px;color:var(--lt-fg)}
.tier__price{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--lt-fg);margin-bottom:8px}
.tier > p{font-size:14px;color:var(--lt-fg-2);margin-bottom:18px}
.tier ul{list-style:none;display:grid;gap:11px;margin:0 0 24px}
.tier li{font-size:14px;color:var(--lt-fg-2);padding-left:24px;position:relative;line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;
border-left:2px solid var(--pm-accent);border-bottom:2px solid var(--pm-accent);transform:rotate(-45deg)}
.tier .btn{width:100%;margin-top:auto}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
/* Panel add-on Expert Recommendation.
Kartu PUTIH seperti card terang lain agar menyatu; pink hanya jadi
aksen kecil (pill badge + marker + tombol), bukan latar penuh, supaya
tidak "meledak merah" di tengah tema yang dominan biru/netral. */
.addon{
margin-top:28px;background:var(--lt-surface);border:1px solid var(--lt-line);
border-radius:14px;padding:30px;box-shadow:0 8px 26px -18px rgba(17,26,54,.24);
}
.addon__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
/* eyebrow jadi pill kecil beraksen pink */
.addon .eyebrow{
display:inline-flex;align-items:center;background:var(--pink-100);color:var(--pink-700);
padding:5px 12px 5px 13px;border-radius:999px;letter-spacing:.14em;
}
.addon h3{margin:14px 0 0;color:var(--lt-fg);font-size:22px}
.addon p{margin-top:10px;color:var(--lt-fg-2);max-width:52ch}
/* dua kelas induk agar menang atas .section--light .btn--secondary (0,2,0) */
.addon .addon__cta{margin-top:20px;border-color:var(--pink-300);color:var(--pink-700)}
.addon .addon__cta:hover{background:var(--pink-100);border-color:var(--pink-700);color:var(--pink-700)}
.addon__list{list-style:none;display:grid;gap:11px;margin:0}
.addon__list li{font-size:14px;color:var(--lt-fg-2);padding-left:24px;position:relative;line-height:1.5}
.addon__list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--pink-500)}
@media (max-width:820px){.addon__grid{grid-template-columns:1fr;gap:22px}}
@media (prefers-reduced-motion:reduce){
.js .ln > span{opacity:1 !important;transform:none !important;transition:none}
.reveal{transform:none}
.reveal.stagger > *{opacity:1 !important;transform:none !important;transition:none}
.progress{display:none}
/* Efek ketik dimatikan: frasa pertama tampil diam, caret tidak berkedip */
.type__caret{animation:none;opacity:.55}
/* Bentuk amoeba berhenti bergerak, parkir di posisi tengah yang enak dilihat */
.flow i{animation:none}
.flow__a{transform:translate3d(46%,0,0) rotate(58deg)}
.flow__b{transform:translate3d(-52%,4%,0) rotate(-46deg)}
.flow__t1,.flow__t2{display:none}
}