/* === Skala landing page (ukur dari screenshot rovemc asli) === */
.hero{padding:100px 16px 0}
.logo-ph{width:162px;height:80px}
.hero p{max-width:360px;margin-top:8px;font-size:11px;line-height:1.6;color:#8b91a3}
.pills{gap:10px;margin-top:18px}.pill{height:26px;padding:0 11px;font-size:10px;border-radius:26px;gap:6px}
.btns{flex-direction:column;align-items:center;gap:9px;margin-top:19px}.btn{height:34px;padding:0 19px;font-size:10.5px;border-radius:8px;gap:7px}.btn svg{width:14px;height:14px}
.sec{min-height:420px;padding:0 19px;align-items:center!important}
.sec h2{font-size:56px}.sec p{margin-top:14px;font-size:13px;line-height:1.65}.sec>div{max-width:310px}
.wl{font-size:9px;gap:12px;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.06);background:rgba(7,11,24,.85);letter-spacing:.05em}.wl i{width:5px;height:5px}
.ip i{height:2px;background:linear-gradient(90deg,#1d3a78,#2f5db0)}
@media(max-width:767px){
nav{padding:12px 19px}.rt{gap:8px}.ib.hb{width:34px;height:34px;border-radius:8px}.ib.sn{width:32px;height:26px;border-radius:8px}.ib svg{width:13px;height:13px}.ib.hb svg{width:15px;height:15px}
.ip{font-size:10px;height:26px;padding:0 13px;border-radius:8px;gap:9px}.ip i{width:37px}
nav.open .tabs{left:19px;right:19px;margin-top:19px;padding:10px;gap:7px;border-radius:14px}
nav.open .tab{height:32px;display:flex;align-items:center;justify-content:center;padding:0;font-size:10.5px;border-radius:8px}
}
@media(min-width:768px){
nav{padding:14px max(24px,calc((100% - 1000px)/2 + 12px))}.rt{gap:10px}.tabs{gap:8px}.tab{height:33px;padding:0 17px;font-size:11px;letter-spacing:.06em;border-radius:6px;display:inline-flex;align-items:center}
.sn{display:grid!important}.cbt{display:none!important}.ib.sn{width:43px;height:33px;border-radius:6px}.ip{font-size:11.5px;height:33px;padding:0 14px;border-radius:6px;gap:10px}.ip i{width:50px}
.hero{padding:88px 24px 48px}.logo-ph{width:262px;height:133px}.hero p{max-width:480px;margin-top:14px;font-size:13.5px;line-height:1.7}
.pills{gap:12px;margin-top:24px}.pill{height:33px;padding:0 14px;font-size:12px;border-radius:33px;gap:8px}.pill b{width:6px;height:6px}
.btns{flex-direction:row;gap:13px;margin-top:24px}.btn{height:44px;padding:0 30px;font-size:14px;gap:8px}.btn svg{width:16px;height:16px}
.sec{min-height:0;aspect-ratio:16/9;padding:0 24px}.sec h2{font-size:clamp(56px,9vw,112px)}.sec p{margin-top:24px;font-size:16px;line-height:1.7}.sec>div{max-width:448px}
.wl{font-size:10.5px;padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px))}
}
.logo-img{display:block;width:162px;height:auto}
@media(min-width:768px){.logo-img{width:262px}}
.im{background:var(--img,none) center/contain no-repeat,radial-gradient(circle,#141c33,#0c1224 70%)}
.rl2[style*="url"] span,.im[style*="url"] span{display:none}.rl2[style*="url"],.im[style*="url"]{border-color:transparent}
.utag.d{color:#38bdf8;background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.45)}

/* === Skala mobile mengikuti lebar layar ===
   Angka di bawah = ukuran (px) pada layar selebar 393px, dikalikan --u.
   Hasilnya proporsi sama dengan rovemc di HP lebar berapa pun. Desktop tidak berubah. */
@media(max-width:767px){
:root{--k:1.12;--u0:calc(min(100vw,480px)/393);--u:calc(var(--u0)*var(--k))}/* --k = pembesar untuk nav, logo, teks & tombol di beranda (section "live the city" dkk memakai --u0 = tanpa pembesar). */
nav{padding:calc(12*var(--u)) calc(19*var(--u))}.rt{gap:calc(8*var(--u))}
.ib.hb{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:calc(8*var(--u))}
.ib.sn{width:calc(32*var(--u));height:calc(26*var(--u));border-radius:calc(8*var(--u))}
.ib svg{width:calc(13*var(--u));height:calc(13*var(--u))}.ib.hb svg{width:calc(15*var(--u));height:calc(15*var(--u))}
.ip{font-size:calc(10*var(--u));height:calc(26*var(--u));padding:0 calc(13*var(--u));border-radius:calc(8*var(--u));gap:calc(9*var(--u))}
.ip i{width:calc(37*var(--u));height:calc(2*var(--u))}
nav.open .tabs{left:calc(19*var(--u));right:calc(19*var(--u));margin-top:calc(19*var(--u));padding:calc(10*var(--u));gap:calc(7*var(--u));border-radius:calc(14*var(--u))}
nav.open .tab{height:calc(32*var(--u));font-size:calc(10.5*var(--u));border-radius:calc(8*var(--u))}
.hero{padding:calc(100*var(--u)) calc(16*var(--u)) 0}
.logo-ph{width:calc(162*var(--u));height:calc(80*var(--u))}.logo-img{width:calc(162*var(--u))}
.hero p{max-width:calc(360*var(--u));margin-top:calc(8*var(--u));font-size:calc(11*var(--u))}
.pills{gap:calc(10*var(--u));margin-top:calc(18*var(--u))}
.pill{height:calc(26*var(--u));padding:0 calc(11*var(--u));font-size:calc(10*var(--u));border-radius:calc(26*var(--u));gap:calc(6*var(--u))}
.pill b{width:calc(5*var(--u));height:calc(5*var(--u))}
.btns{gap:calc(9*var(--u));margin-top:calc(19*var(--u))}
.btn{height:calc(34*var(--u));padding:0 calc(19*var(--u));font-size:calc(10.5*var(--u));border-radius:calc(8*var(--u));gap:calc(7*var(--u))}
.btn svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.sec{min-height:calc(420*var(--u0));padding:0 calc(19*var(--u0))}
.sec h2{font-size:calc(56*var(--u0))}.sec p{margin-top:calc(14*var(--u0));font-size:calc(13*var(--u0))}.sec>div{max-width:calc(310*var(--u0))}
.wl{font-size:calc(9*var(--u));gap:calc(12*var(--u));padding:calc(14*var(--u)) 0 calc(14*var(--u) + env(safe-area-inset-bottom,0px))}
}

/* === Semua bagian mengikuti kolom tengah (lebar 1000px) seperti nav & Rove, + footer lebih besar === */
@media(min-width:768px){
:root{--cx:max(24px,calc((100% - 1000px)/2 + 12px))}
.sec{padding:0 var(--cx)}
.nw{padding:100px var(--cx) 60px}.posts,.lb{max-width:none}
.sp{max-width:1000px}
.f1{padding:17px var(--cx)}
.copy{height:42px;align-items:center;padding:0 20px;gap:16px;font-size:14px;letter-spacing:.03em;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.14)}
.copy span+span{border-left:1px solid rgba(255,255,255,.3);padding-left:16px}.copy .cpd{font-size:11px}
.soc{gap:12px}.soc a{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.2)}.soc svg{width:20px;height:20px}
.f2{padding:0 var(--cx);min-height:47px;align-items:center;gap:16px;font-size:12px}
.f2 #credit{font-size:14px;font-weight:700;color:#fff}
}
@media(max-width:767px){
.f1{padding:calc(14*var(--u)) calc(19*var(--u))}
.copy{font-size:calc(10*var(--u));padding:calc(8*var(--u)) calc(11*var(--u));gap:calc(12*var(--u));border-radius:calc(7*var(--u));align-items:center}
.copy span+span{border-left:1px solid rgba(255,255,255,.3);padding-left:calc(12*var(--u))}.copy .cpd{font-size:calc(9*var(--u))}
.soc{gap:calc(7*var(--u))}.soc a{width:calc(30*var(--u));height:calc(30*var(--u));border-radius:calc(7*var(--u))}.soc svg{width:calc(16*var(--u));height:calc(16*var(--u))}
.f2{padding:calc(11*var(--u)) calc(19*var(--u));font-size:calc(9.5*var(--u));gap:calc(8*var(--u))}
.f2 #credit{font-size:calc(11*var(--u));font-weight:700;color:#fff}
.f2 #dot{display:none!important}
}
/* ruang di bawah footer supaya baris terakhir tidak tertutup bar "Under development" */
footer>div:last-child{height:calc(46px + env(safe-area-inset-bottom,0px))!important;background:var(--bg)}