/* CV. Raya Multindo Berkah — profil perusahaan. Dibangun oleh alat/gaya.py (jangan sunting gaya.css langsung). */
@font-face{font-family:Inter;src:url(font/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --hijau:#0E9D5A;--hijau-tua:#0B8042;--hijau-muda:#E7F5EE;--hijau-garis:#9FD4BF;
  --tinta:#0A1B2F;--teks:#515E78;--teks-muda:#6A7590;--garis:#DADEE7;--biru:#0862EC;
  --abu:#F3F5F9;--putih:#fff;
  --r:calc(min(100vw,1920px)/1024);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5;color:var(--teks);background:var(--putih);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
b{font-weight:600;color:#13243D}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--hijau);outline-offset:3px;border-radius:6px}
.lompat{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:8px}
.lompat:focus{top:12px}
h1,h2,h3{color:var(--tinta)}
h1 span,h2 span{display:block}
.label{display:flex;align-items:center;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--hijau);line-height:1.3}
.label::after{content:"";height:1.5px;background:var(--hijau-garis);flex:none}
.label-polos::after{display:none}
.tombol{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--hijau);color:#fff;font-weight:600;line-height:1;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(14,157,90,.8);transition:background .2s,transform .2s,color .2s}
.tombol svg{flex:none;transition:transform .2s}
.tombol:active{background:var(--hijau-tua);transform:scale(.98)}
.tombol-garis{background:transparent;color:var(--hijau-tua);box-shadow:inset 0 0 0 1.5px var(--hijau)}
.tombol-garis:active{background:var(--hijau-muda)}
.tautan{display:inline-flex;align-items:center;color:var(--biru);font-weight:500}
.tautan svg{transition:transform .2s}
@media (hover:hover){
  .tombol:hover{background:var(--hijau-tua)}
  .tombol:hover svg:last-child,.tautan:hover svg{transform:translateX(4px)}
  .tombol-wa:hover svg{transform:none}
  .tombol-garis:hover{background:var(--hijau);color:#fff}
}
.atas{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .25s,box-shadow .25s}
.atas.gulir{background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--garis),0 8px 24px -18px rgba(10,27,47,.5)}
.merek{display:flex;flex-direction:column;align-items:center;flex:none}
.merek-nama{height:auto}
.menu a{position:relative;display:flex;align-items:center;font-weight:500;color:#223142;white-space:nowrap;transition:color .2s}
.menu a::after{content:"";position:absolute;border-radius:2px;background:var(--hijau);transform:scaleX(0);transition:transform .25s}
.menu a.aktif,.menu a.aktif:hover{color:var(--hijau)}
.menu a.aktif::after{transform:scaleX(1)}
@media (hover:hover){.menu a:hover{color:var(--hijau)}}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#FBFCFE}
.hero-foto picture{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-foto picture.aktif{opacity:1}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-lengkung{position:absolute;pointer-events:none}
.hero h1 em{display:block;font-style:normal;font-weight:700;color:var(--hijau)}
.hero-titik{display:flex}
.hero-titik button{position:relative;flex:none}
.hero-titik button::before{content:"";position:absolute;left:0;top:50%;border-radius:99px;background:#DFE4EC;transition:background .3s}
.hero-titik button.aktif::before,.hero-titik button.aktif:hover::before{background:var(--hijau)}
@media (hover:hover){.hero-titik button:hover::before{background:#B4BFCC}}
.tentang{position:relative}
.ombak-pucat{position:absolute;z-index:-1;pointer-events:none}
.tentang-foto{position:relative;overflow:hidden}
.tentang-foto img{width:100%;height:100%;object-fit:cover}
.tentang-foto::before{content:"";position:absolute;left:-13%;bottom:-66%;width:44%;aspect-ratio:1;border-radius:50%;background:linear-gradient(40deg,rgba(60,170,120,.72),rgba(150,205,190,.5))}
.tentang-foto::after{content:"";position:absolute;right:-12.5%;top:22%;width:23%;height:120%;border-radius:50%;background:linear-gradient(180deg,rgba(176,213,252,.62),rgba(205,228,252,.5))}
.nilai li{display:flex;flex-direction:column;align-items:center;text-align:center}
.nilai svg{color:var(--hijau)}
.nilai h3{font-weight:600;line-height:1.3;color:#060E22}
.nilai p{color:var(--teks-muda)}
.profil{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.profil b{font-weight:550}
.profil-foto{z-index:-1}
.profil-foto img{width:100%;height:100%;object-fit:cover}
.profil-sudut{position:absolute;right:0;bottom:0;pointer-events:none}
.putar{position:absolute;z-index:2;border-radius:50%;background:#fff;color:var(--hijau);display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .25s,box-shadow .25s}
.putar:active{transform:translate(-50%,-50%) scale(.95)}
@media (hover:hover){.putar:hover{transform:translate(-50%,-50%) scale(1.06)}}
.bisnis{position:relative;isolation:isolate;overflow:hidden}
.bisnis-kartu{position:relative;background:var(--abu);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.bisnis-kanan{display:flex;flex-direction:column;align-items:center;text-align:center}
.bisnis-kanan svg{color:#C0C8D6}
.kosong-judul{font-weight:600;color:#1B2B46}
.kosong-teks{color:#727C94}
.ombak-kiri,.ombak-kanan{position:absolute;bottom:0;pointer-events:none}
.ombak-kiri{left:0;z-index:-1}
.ombak-kanan{right:0;z-index:1}
/* ---------- jendela (kontak, video) ---------- */
.jendela{padding:0;border:0;max-width:none;overflow:visible;color:var(--teks)}
.jendela::backdrop{background:rgba(8,20,34,.72)}
.jendela-tutup{position:absolute;right:0;top:-54px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--tinta);display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.jendela-tutup svg{width:22px;height:22px}
.video{width:min(1080px,calc(100vw - 32px));border-radius:16px;background:#000}
.video video{width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;background:#000}
.kontak-daftar li{display:flex;align-items:flex-start;min-width:0}
.kontak-daftar svg{flex:none;border-radius:50%;background:var(--hijau-muda);color:var(--hijau-tua)}
.kontak-daftar div{min-width:0}
.kontak-daftar div>span{display:block;color:var(--teks-muda);line-height:1.4}
.kontak-daftar a{display:inline-block;font-weight:600;color:var(--tinta);line-height:1.4;overflow-wrap:break-word}
.utuh{white-space:nowrap}
@media (hover:hover){.kontak-daftar a:hover{color:var(--hijau-tua)}}
.kontak-foto{overflow:hidden}
.kontak-foto img{width:100%;height:100%;object-fit:cover}
.bawah{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--garis)}
.merek-datar{display:flex;align-items:center}
.bawah p{color:var(--teks-muda)}
/* ---------- muncul saat digulir ---------- */
.js .muncul{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .muncul.tampil{opacity:1;transform:none}
.js .nilai li:nth-child(2){transition-delay:.07s}.js .nilai li:nth-child(3){transition-delay:.14s}.js .nilai li:nth-child(4){transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .muncul{opacity:1;transform:none;transition:none}
  .hero-foto picture{transition:none}
}

/* ===== DESKTOP (>= 800 px): persis referensi ===== */
@media (min-width:800px){
  html{scroll-padding-top:calc(var(--r)*70)}
  .baris{display:block}
  .label{font-size:max(10px,calc(var(--r)*12.15))}
  .label::after{width:calc(var(--r)*36);margin-left:calc(var(--r)*9)}
  .tombol svg{width:calc(var(--r)*20.5);height:calc(var(--r)*20.5);margin-right:calc(var(--r)*-3)}
  /* kepala */
  .atas-baris{display:flex;align-items:center;height:calc(var(--r)*88);padding:0 calc(var(--r)*49) 0 calc(var(--r)*60);transition:height .25s}
  .merek{width:calc(var(--r)*129.5);gap:calc(var(--r)*4);margin-top:calc(var(--r)*9);transition:margin .25s}
  .merek-tanda{position:relative;left:calc(var(--r)*-6.5);width:calc(var(--r)*51.5);height:calc(var(--r)*41.4);transition:width .25s,height .25s}
  .merek-nama{width:calc(var(--r)*129.5);transition:width .25s}
  .menu{display:flex;align-items:stretch;gap:calc(var(--r)*29.2);height:100%;margin-left:calc(var(--r)*95)}
  .menu a{font-size:max(10px,calc(var(--r)*10.4))}
  .menu a::after{left:calc(var(--r)*-5);right:calc(var(--r)*-5);top:calc(50% + calc(var(--r)*17));height:max(1.5px,calc(var(--r)*1.6))}
  .tombol-wa{margin-left:auto;height:calc(var(--r)*32);padding:0 calc(var(--r)*12.5) 0 calc(var(--r)*9.5);gap:calc(var(--r)*6);font-size:max(10px,calc(var(--r)*10.3))}
  .tombol-wa svg{width:calc(var(--r)*17);height:calc(var(--r)*17);margin-right:0}
  .atas.gulir .atas-baris{height:calc(var(--r)*60)}
  .atas.gulir .merek{margin-top:0;gap:calc(var(--r)*3)}
  .atas.gulir .merek-tanda{left:0;width:calc(var(--r)*36);height:calc(var(--r)*29)}
  .atas.gulir .merek-nama{width:calc(var(--r)*100)}
  /* hero */
  .hero{height:calc(var(--r)*488)}
  .hero::before{content:"";position:absolute;z-index:-1;left:calc(var(--r)*-58);top:calc(var(--r)*-36);width:calc(var(--r)*112);height:calc(var(--r)*132);border-radius:50%;background:#E8F1FE}
  .hero-foto{position:absolute;z-index:-2;top:0;right:0;bottom:0;left:27.3%;-webkit-mask-image:radial-gradient(ellipse 47% 112% at 0 0,transparent 12%,rgba(0,0,0,.5) 62%,#000 100%),linear-gradient(90deg,transparent 0,#000 13%);mask-image:radial-gradient(ellipse 47% 112% at 0 0,transparent 12%,rgba(0,0,0,.5) 62%,#000 100%),linear-gradient(90deg,transparent 0,#000 13%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-foto img{object-position:100% 50%;transform:scale(1.06);transform-origin:100% 100%}
  .hero-lengkung{right:0;bottom:0;width:calc(var(--r)*192);height:calc(var(--r)*118)}
  .hero-isi{position:absolute;left:calc(var(--r)*65);top:calc(var(--r)*137.5)}
  .hero h1{margin-top:calc(var(--r)*5);font-size:calc(var(--r)*40.1);line-height:calc(var(--r)*41.5);font-weight:700;letter-spacing:-.03em;white-space:nowrap}
  .hero h1 em{margin-top:calc(var(--r)*-1.2);font-size:calc(var(--r)*54.2);line-height:calc(var(--r)*56);letter-spacing:-.032em}
  .hero-teks{margin-top:calc(var(--r)*7.6);font-size:max(12px,calc(var(--r)*14.65));line-height:calc(21/14.65);white-space:nowrap}
  .hero .tombol{margin-top:calc(var(--r)*19.5);height:calc(var(--r)*37);padding:0 calc(var(--r)*17.5) 0 calc(var(--r)*25);gap:calc(var(--r)*9);font-size:max(11px,calc(var(--r)*11.7))}
  .hero-titik{margin-top:calc(var(--r)*10.5);gap:0}
  .hero-titik button{width:calc(var(--r)*25);height:calc(var(--r)*45)}
  .hero-titik button:first-child{width:calc(var(--r)*26)}
  .hero-titik button::before{width:calc(var(--r)*15);height:max(4px,calc(var(--r)*6));margin-top:min(-2px,calc(var(--r)*-3))}
  .hero-titik button.aktif::before{width:calc(var(--r)*17)}
  /* tentang */
  .tentang{display:grid;grid-template-columns:calc(var(--r)*410) 1fr;column-gap:calc(var(--r)*41);align-items:start;padding:calc(var(--r)*33) 0 0 calc(var(--r)*65)}
  .ombak-pucat{right:0;top:calc(var(--r)*172);width:calc(var(--r)*244);height:calc(var(--r)*245)}
  .tentang-foto{height:calc(var(--r)*204);border-radius:calc(var(--r)*12)}
  .tentang-isi{padding-top:calc(var(--r)*12.4)}
  .tentang-isi .label{margin-left:calc(var(--r)*-2);font-size:max(10px,calc(var(--r)*12.4))}
  .tentang-isi h2{margin-top:calc(var(--r)*6.3);font-size:calc(var(--r)*24.3);line-height:1.2;font-weight:700;letter-spacing:-.022em}
  .tentang-isi .teks{margin-top:calc(var(--r)*10.2);font-size:max(12px,calc(var(--r)*15));line-height:calc(21.8/15)}
  .tautan{margin:calc(var(--r)*6.6) 0 calc(var(--r)*-10);padding:calc(var(--r)*10) 0;gap:calc(var(--r)*9);font-size:max(11.5px,calc(var(--r)*12.4));line-height:calc(var(--r)*20)}
  .tautan svg{width:calc(var(--r)*20.5);height:calc(var(--r)*20.5)}
  /* nilai */
  .nilai{padding:calc(var(--r)*40) calc(var(--r)*33) calc(var(--r)*39.2) calc(var(--r)*34)}
  .nilai ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .nilai li{padding-bottom:calc(var(--r)*6)}
  .nilai li+li{border-left:1px solid var(--garis)}
  .nilai svg{width:calc(var(--r)*56);height:calc(var(--r)*56)}
  .nilai h3{margin-top:calc(var(--r)*12.2);font-size:max(12.5px,calc(var(--r)*13.45))}
  .nilai p{margin-top:calc(var(--r)*8.2);font-size:max(11px,calc(var(--r)*11.4));line-height:calc(17/11.4)}
  /* profil */
  .profil{height:calc(var(--r)*276)}
  .profil-foto{position:absolute;top:0;right:0;bottom:0;left:32%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 14%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 14%,#000 34%)}
  .profil-foto img{object-position:50% 10%}
  .profil-sudut{width:calc(var(--r)*119);height:calc(var(--r)*98)}
  .putar{left:71.34%;top:calc(var(--r)*139.1);width:calc(var(--r)*64);height:calc(var(--r)*64);box-shadow:0 0 0 calc(var(--r)*7) rgba(255,255,255,.34),0 calc(var(--r)*12) calc(var(--r)*26) calc(var(--r)*-10) rgba(10,27,47,.55)}
  .putar svg{width:calc(var(--r)*29);height:calc(var(--r)*29);margin-left:calc(var(--r)*3)}
  .profil-isi{position:absolute;left:calc(var(--r)*68);top:calc(var(--r)*29)}
  .profil-isi .label{font-size:max(10px,calc(var(--r)*13.35))}
  .profil-isi h2{margin-top:calc(var(--r)*8.2);font-size:calc(var(--r)*32.25);line-height:calc(var(--r)*35.5);font-weight:700;letter-spacing:-.026em}
  .profil-isi .teks{margin-top:calc(var(--r)*10.6);font-size:max(12px,calc(var(--r)*13.55));line-height:calc(19/13.55)}
  .profil-isi .tombol{margin-top:calc(var(--r)*16.8);margin-left:calc(var(--r)*-2.5);height:calc(var(--r)*41);padding:0 calc(var(--r)*23) 0 calc(var(--r)*25);gap:calc(var(--r)*12);font-size:max(11px,calc(var(--r)*13.1))}
  /* bisnis */
  .bisnis{padding:calc(var(--r)*27) calc(var(--r)*39) calc(var(--r)*107)}
  .bisnis-kartu{display:grid;grid-template-columns:calc(var(--r)*394) 1fr;border-radius:calc(var(--r)*16)}
  .bisnis-kiri{padding:calc(var(--r)*29.9) 0 calc(var(--r)*27.4) calc(var(--r)*28)}
  .bisnis-kiri .label{font-size:max(10px,calc(var(--r)*14.2))}
  .bisnis-kiri h2{margin-top:calc(var(--r)*7);font-size:calc(var(--r)*28.85);line-height:calc(var(--r)*31);font-weight:700;letter-spacing:-.025em}
  .bisnis-kiri .teks{margin-top:calc(var(--r)*7.8);font-size:max(11.5px,calc(var(--r)*12.35));line-height:calc(17.5/12.35)}
  .bisnis-kanan{position:relative;justify-content:flex-start;padding:calc(var(--r)*22.3) calc(var(--r)*12) 0 0}
  .bisnis-kanan::before{content:"";position:absolute;left:0;top:calc(var(--r)*32);bottom:calc(var(--r)*33);width:1px;background:#E3E7EE}
  .bisnis-kanan svg{width:calc(var(--r)*80);height:calc(var(--r)*100)}
  .kosong-judul{margin-top:calc(var(--r)*-4.7);font-size:max(11.5px,calc(var(--r)*12.35));line-height:1.4}
  .kosong-teks{margin-top:calc(var(--r)*7.6);font-size:max(11px,calc(var(--r)*11.2));line-height:1.4}
  .ombak-kiri{width:calc(var(--r)*290);height:calc(var(--r)*76)}
  .ombak-kanan{width:calc(var(--r)*334);height:calc(var(--r)*206)}
  /* kontak (tidak ada di referensi — gaya & ukurannya mengikuti bagian Tentang, dicerminkan) */
  .kontak{display:grid;grid-template-columns:1fr calc(var(--r)*410);column-gap:calc(var(--r)*41);align-items:center;padding:calc(var(--r)*34) calc(var(--r)*65) calc(var(--r)*46)}
  .kontak .label{font-size:max(10px,calc(var(--r)*12.4))}
  .kontak h2{margin-top:calc(var(--r)*7);font-size:calc(var(--r)*28.85);line-height:calc(var(--r)*31);font-weight:700;letter-spacing:-.025em}
  .kontak-daftar{margin-top:calc(var(--r)*18);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:calc(var(--r)*16) calc(var(--r)*22)}
  .kontak-daftar li{gap:calc(var(--r)*11)}
  .kontak-daftar svg{width:calc(var(--r)*31);height:calc(var(--r)*31);padding:calc(var(--r)*7)}
  .kontak-daftar div>span{font-size:max(10.5px,calc(var(--r)*10.6))}
  .kontak-daftar a{margin-top:calc(var(--r)*1);font-size:max(12px,calc(var(--r)*12.4))}
  .kontak-foto{height:calc(var(--r)*204);border-radius:calc(var(--r)*12)}
  .bawah{gap:calc(var(--r)*10) calc(var(--r)*20);padding:calc(var(--r)*13) calc(var(--r)*65)}
  .merek-datar{gap:calc(var(--r)*9);min-height:calc(var(--r)*32)}
  .merek-datar .merek-tanda{left:0;width:calc(var(--r)*32);height:calc(var(--r)*25.7)}
  .merek-datar .merek-nama{width:calc(var(--r)*118)}
  .bawah p{font-size:max(11px,calc(var(--r)*10.6))}
}

/* ===== RINGKAS (< 800 px, termasuk HP ber-viewport 768): susunan desktop pada kanvas 768 ===== */
@media (max-width:799.98px){
  :root{--r:calc(100vw/768)}
  html{scroll-padding-top:calc(var(--r)*70)}
  .baris{display:block}
  .label{font-size:calc(var(--r)*12.15)}
  .label::after{width:calc(var(--r)*36);margin-left:calc(var(--r)*9)}
  .tombol svg{width:calc(var(--r)*20.5);height:calc(var(--r)*20.5);margin-right:calc(var(--r)*-3)}
  /* kepala */
  .atas-baris{display:flex;align-items:center;height:calc(var(--r)*88);padding:0 calc(var(--r)*49) 0 calc(var(--r)*60);transition:height .25s}
  .merek{width:calc(var(--r)*129.5);gap:calc(var(--r)*4);margin-top:calc(var(--r)*9);transition:margin .25s}
  .merek-tanda{position:relative;left:calc(var(--r)*-6.5);width:calc(var(--r)*51.5);height:calc(var(--r)*41.4);transition:width .25s,height .25s}
  .merek-nama{width:calc(var(--r)*129.5);transition:width .25s}
  .menu{display:flex;align-items:stretch;gap:calc(var(--r)*29.2);height:100%;margin-left:calc(var(--r)*95)}
  .menu a{font-size:calc(var(--r)*10.4)}
  .menu a::after{left:calc(var(--r)*-5);right:calc(var(--r)*-5);top:calc(50% + calc(var(--r)*17));height:calc(var(--r)*1.6)}
  .tombol-wa{margin-left:auto;height:calc(var(--r)*32);padding:0 calc(var(--r)*12.5) 0 calc(var(--r)*9.5);gap:calc(var(--r)*6);font-size:calc(var(--r)*10.3)}
  .tombol-wa svg{width:calc(var(--r)*17);height:calc(var(--r)*17);margin-right:0}
  .atas.gulir .atas-baris{height:calc(var(--r)*60)}
  .atas.gulir .merek{margin-top:0;gap:calc(var(--r)*3)}
  .atas.gulir .merek-tanda{left:0;width:calc(var(--r)*36);height:calc(var(--r)*29)}
  .atas.gulir .merek-nama{width:calc(var(--r)*100)}
  /* hero */
  .hero{height:calc(var(--r)*488)}
  .hero::before{content:"";position:absolute;z-index:-1;left:calc(var(--r)*-58);top:calc(var(--r)*-36);width:calc(var(--r)*112);height:calc(var(--r)*132);border-radius:50%;background:#E8F1FE}
  .hero-foto{position:absolute;z-index:-2;top:0;right:0;bottom:0;left:27.3%;-webkit-mask-image:radial-gradient(ellipse 47% 112% at 0 0,transparent 12%,rgba(0,0,0,.5) 62%,#000 100%),linear-gradient(90deg,transparent 0,#000 13%);mask-image:radial-gradient(ellipse 47% 112% at 0 0,transparent 12%,rgba(0,0,0,.5) 62%,#000 100%),linear-gradient(90deg,transparent 0,#000 13%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-foto img{object-position:100% 50%;transform:scale(1.06);transform-origin:100% 100%}
  .hero-lengkung{right:0;bottom:0;width:calc(var(--r)*192);height:calc(var(--r)*118)}
  .hero-isi{position:absolute;left:calc(var(--r)*65);top:calc(var(--r)*137.5)}
  .hero h1{margin-top:calc(var(--r)*5);font-size:calc(var(--r)*40.1);line-height:calc(var(--r)*41.5);font-weight:700;letter-spacing:-.03em;white-space:nowrap}
  .hero h1 em{margin-top:calc(var(--r)*-1.2);font-size:calc(var(--r)*54.2);line-height:calc(var(--r)*56);letter-spacing:-.032em}
  .hero-teks{margin-top:calc(var(--r)*7.6);font-size:calc(var(--r)*14.65);line-height:calc(21/14.65);white-space:nowrap}
  .hero .tombol{margin-top:calc(var(--r)*19.5);height:calc(var(--r)*37);padding:0 calc(var(--r)*17.5) 0 calc(var(--r)*25);gap:calc(var(--r)*9);font-size:calc(var(--r)*11.7)}
  .hero-titik{margin-top:calc(var(--r)*10.5);gap:0}
  .hero-titik button{width:calc(var(--r)*25);height:calc(var(--r)*45)}
  .hero-titik button:first-child{width:calc(var(--r)*26)}
  .hero-titik button::before{width:calc(var(--r)*15);height:calc(var(--r)*6);margin-top:min(-2px,calc(var(--r)*-3))}
  .hero-titik button.aktif::before{width:calc(var(--r)*17)}
  /* tentang */
  .tentang{display:grid;grid-template-columns:calc(var(--r)*410) 1fr;column-gap:calc(var(--r)*41);align-items:start;padding:calc(var(--r)*33) 0 0 calc(var(--r)*65)}
  .ombak-pucat{right:0;top:calc(var(--r)*172);width:calc(var(--r)*244);height:calc(var(--r)*245)}
  .tentang-foto{height:calc(var(--r)*204);border-radius:calc(var(--r)*12)}
  .tentang-isi{padding-top:calc(var(--r)*12.4)}
  .tentang-isi .label{margin-left:calc(var(--r)*-2);font-size:calc(var(--r)*12.4)}
  .tentang-isi h2{margin-top:calc(var(--r)*6.3);font-size:calc(var(--r)*24.3);line-height:1.2;font-weight:700;letter-spacing:-.022em}
  .tentang-isi .teks{margin-top:calc(var(--r)*10.2);font-size:calc(var(--r)*15);line-height:calc(21.8/15)}
  .tautan{margin:calc(var(--r)*6.6) 0 calc(var(--r)*-10);padding:calc(var(--r)*10) 0;gap:calc(var(--r)*9);font-size:calc(var(--r)*12.4);line-height:calc(var(--r)*20)}
  .tautan svg{width:calc(var(--r)*20.5);height:calc(var(--r)*20.5)}
  /* nilai */
  .nilai{padding:calc(var(--r)*40) calc(var(--r)*33) calc(var(--r)*39.2) calc(var(--r)*34)}
  .nilai ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .nilai li{padding-bottom:calc(var(--r)*6)}
  .nilai li+li{border-left:1px solid var(--garis)}
  .nilai svg{width:calc(var(--r)*56);height:calc(var(--r)*56)}
  .nilai h3{margin-top:calc(var(--r)*12.2);font-size:calc(var(--r)*13.45)}
  .nilai p{margin-top:calc(var(--r)*8.2);font-size:calc(var(--r)*11.4);line-height:calc(17/11.4)}
  /* profil */
  .profil{height:calc(var(--r)*276)}
  .profil-foto{position:absolute;top:0;right:0;bottom:0;left:32%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 14%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 14%,#000 34%)}
  .profil-foto img{object-position:50% 10%}
  .profil-sudut{width:calc(var(--r)*119);height:calc(var(--r)*98)}
  .putar{left:71.34%;top:calc(var(--r)*139.1);width:calc(var(--r)*64);height:calc(var(--r)*64);box-shadow:0 0 0 calc(var(--r)*7) rgba(255,255,255,.34),0 calc(var(--r)*12) calc(var(--r)*26) calc(var(--r)*-10) rgba(10,27,47,.55)}
  .putar svg{width:calc(var(--r)*29);height:calc(var(--r)*29);margin-left:calc(var(--r)*3)}
  .profil-isi{position:absolute;left:calc(var(--r)*68);top:calc(var(--r)*29)}
  .profil-isi .label{font-size:calc(var(--r)*13.35)}
  .profil-isi h2{margin-top:calc(var(--r)*8.2);font-size:calc(var(--r)*32.25);line-height:calc(var(--r)*35.5);font-weight:700;letter-spacing:-.026em}
  .profil-isi .teks{margin-top:calc(var(--r)*10.6);font-size:calc(var(--r)*13.55);line-height:calc(19/13.55)}
  .profil-isi .tombol{margin-top:calc(var(--r)*16.8);margin-left:calc(var(--r)*-2.5);height:calc(var(--r)*41);padding:0 calc(var(--r)*23) 0 calc(var(--r)*25);gap:calc(var(--r)*12);font-size:calc(var(--r)*13.1)}
  /* bisnis */
  .bisnis{padding:calc(var(--r)*27) calc(var(--r)*39) calc(var(--r)*107)}
  .bisnis-kartu{display:grid;grid-template-columns:calc(var(--r)*394) 1fr;border-radius:calc(var(--r)*16)}
  .bisnis-kiri{padding:calc(var(--r)*29.9) 0 calc(var(--r)*27.4) calc(var(--r)*28)}
  .bisnis-kiri .label{font-size:calc(var(--r)*14.2)}
  .bisnis-kiri h2{margin-top:calc(var(--r)*7);font-size:calc(var(--r)*28.85);line-height:calc(var(--r)*31);font-weight:700;letter-spacing:-.025em}
  .bisnis-kiri .teks{margin-top:calc(var(--r)*7.8);font-size:calc(var(--r)*12.35);line-height:calc(17.5/12.35)}
  .bisnis-kanan{position:relative;justify-content:flex-start;padding:calc(var(--r)*22.3) calc(var(--r)*12) 0 0}
  .bisnis-kanan::before{content:"";position:absolute;left:0;top:calc(var(--r)*32);bottom:calc(var(--r)*33);width:1px;background:#E3E7EE}
  .bisnis-kanan svg{width:calc(var(--r)*80);height:calc(var(--r)*100)}
  .kosong-judul{margin-top:calc(var(--r)*-4.7);font-size:calc(var(--r)*12.35);line-height:1.4}
  .kosong-teks{margin-top:calc(var(--r)*7.6);font-size:calc(var(--r)*11.2);line-height:1.4}
  .ombak-kiri{width:calc(var(--r)*290);height:calc(var(--r)*76)}
  .ombak-kanan{width:calc(var(--r)*334);height:calc(var(--r)*206)}
  /* kontak (tidak ada di referensi — gaya & ukurannya mengikuti bagian Tentang, dicerminkan) */
  .kontak{display:grid;grid-template-columns:1fr calc(var(--r)*410);column-gap:calc(var(--r)*41);align-items:center;padding:calc(var(--r)*34) calc(var(--r)*65) calc(var(--r)*46)}
  .kontak .label{font-size:calc(var(--r)*12.4)}
  .kontak h2{margin-top:calc(var(--r)*7);font-size:calc(var(--r)*28.85);line-height:calc(var(--r)*31);font-weight:700;letter-spacing:-.025em}
  .kontak-daftar{margin-top:calc(var(--r)*18);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:calc(var(--r)*16) calc(var(--r)*22)}
  .kontak-daftar li{gap:calc(var(--r)*11)}
  .kontak-daftar svg{width:calc(var(--r)*31);height:calc(var(--r)*31);padding:calc(var(--r)*7)}
  .kontak-daftar div>span{font-size:calc(var(--r)*10.6)}
  .kontak-daftar a{margin-top:calc(var(--r)*1);font-size:calc(var(--r)*12.4)}
  .kontak-foto{height:calc(var(--r)*204);border-radius:calc(var(--r)*12)}
  .bawah{gap:calc(var(--r)*10) calc(var(--r)*20);padding:calc(var(--r)*13) calc(var(--r)*65)}
  .merek-datar{gap:calc(var(--r)*9);min-height:calc(var(--r)*32)}
  .merek-datar .merek-tanda{left:0;width:calc(var(--r)*32);height:calc(var(--r)*25.7)}
  .merek-datar .merek-nama{width:calc(var(--r)*118)}
  .bawah p{font-size:calc(var(--r)*10.6)}
  /* --- penyesuaian lebar untuk kanvas 768 (susunan tetap seperti desktop) --- */
  .atas-baris{padding:0 calc(var(--r)*28) 0 calc(var(--r)*40)}
  .menu{gap:calc(var(--r)*20);margin-left:calc(var(--r)*42)}
  .hero-isi{left:calc(var(--r)*40)}
  .hero-foto{left:36%;-webkit-mask-image:radial-gradient(ellipse 42% 92% at 0 0,transparent 14%,rgba(0,0,0,.5) 64%,#000 100%),linear-gradient(90deg,transparent 0,#000 26%);mask-image:radial-gradient(ellipse 42% 92% at 0 0,transparent 14%,rgba(0,0,0,.5) 64%,#000 100%),linear-gradient(90deg,transparent 0,#000 26%)}
  .hero-foto img{object-position:100% 100%;transform:none}
  .tentang{grid-template-columns:calc(var(--r)*296) 1fr;column-gap:calc(var(--r)*32);padding-left:calc(var(--r)*40)}
  .nilai{padding-left:calc(var(--r)*20);padding-right:calc(var(--r)*20)}
  .profil-foto{left:30%}
  .profil-isi{left:calc(var(--r)*43)}
  .putar{left:72%}
  .bisnis{padding-left:calc(var(--r)*16);padding-right:calc(var(--r)*16)}
  .bisnis-kartu{grid-template-columns:calc(var(--r)*372) 1fr}
  .bisnis-kiri{padding-left:calc(var(--r)*27)}
  .kontak{grid-template-columns:1fr calc(var(--r)*224);column-gap:calc(var(--r)*24);padding-left:calc(var(--r)*40);padding-right:calc(var(--r)*40)}
  .kontak-daftar{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:calc(var(--r)*16) calc(var(--r)*14)}
  .kontak-foto{height:calc(var(--r)*170)}
  .bawah{padding-left:calc(var(--r)*40);padding-right:calc(var(--r)*40)}
}