:root{--fs-h2:clamp(1.75rem,1.5rem + 1.2vw,2.5rem)}
.lead{max-width:960px;margin:0 auto 48px;text-align:center;font-size:var(--fs-md);color:var(--muted)}
.navr{justify-self:end;display:flex;align-items:center;gap:8px}
.navr .btn{padding:10px 22px;font-size:.9375rem;white-space:nowrap}
.navr .theme-toggle{margin-right:4px}
.theme-toggle .sun{display:none}
.totop.show{opacity:1;visibility:visible;transform:none}
[data-theme=dark] .theme-toggle .sun{display:block}
[data-theme=dark] .theme-toggle .moon{display:none}
[data-theme=dark] .btn:hover{background:#AB2A1C;border-color:#AB2A1C;color:#FAFBFC}
[data-theme=dark] .soc a:hover{background:#AB2A1C;border-color:#AB2A1C;color:#FAFBFC}
[data-theme=dark] .theme-toggle:hover{background:#AB2A1C;border-color:#AB2A1C;color:#FAFBFC}
[data-theme=dark] .totop:hover{background:#AB2A1C;border-color:#AB2A1C;color:#FAFBFC}
.about{background:var(--band);color:#FAFBFC}
.cta{background:var(--tint)}
.cta .btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;width:max-content;max-width:100%;margin-inline:auto}
.cta .btns .btn{text-align:center}
.hero2{min-height:calc(100svh - 60px);display:flex;align-items:center;padding:120px 0;background:var(--paper) url(https://abcreavity.id/image/background-putih-hero-abcreavity.jpg) center/cover no-repeat;text-align:center}
html[data-theme=dark] .hero2{background:var(--paper) url(https://abcreavity.id/image/background-hitam-hero-abcreavity.jpg) center/cover no-repeat}
.hero-center{display:flex;flex-direction:column;align-items:center;width:100%}
.hero-svg{display:block;width:min(1000px,92%);height:auto;margin-bottom:48px;color:var(--ink);overflow:visible}
html[data-theme=dark] .hero-svg{color:#FAFBFC}
.hero-svg path{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.5);animation:heroPath 1.6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i)*160ms)}
.hero-center p{max-width:720px;font-size:var(--fs-md);color:var(--muted);margin-bottom:32px}
.siapa{padding:120px 0}
.siapa h2{font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:700;text-align:center;margin-bottom:24px}
.siapa .lead{max-width:720px;margin:0 auto 72px;text-align:center;font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;line-height:1.5;color:#FAFBFC}
.siapa-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.siapa-text{display:grid;gap:18px;font-size:var(--fs-md);color:#e9e4e4}
.siapa .video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.siapa .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nilai{background:var(--paper);padding:120px 0}
.nilai-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.nilai-intro{text-align:left}
.nilai-intro h2{text-align:left}
.nilai-intro p{text-align:left}
.nilai .eyebrow{font-size:var(--fs-sm);color:var(--muted);margin-bottom:16px}
.nilai h2{font-size:clamp(1.75rem,2.6vw,2.4rem);font-weight:700;line-height:1.2;margin-bottom:24px}
.nilai-sub{font-size:var(--fs-md);color:var(--muted)}
.nilai-track{position:relative;min-height:400px}
.nilai-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .4s ease;padding:24px}
.nilai-card.on{opacity:1;pointer-events:auto}
.nilai-badge{width:200px;height:200px;display:grid;place-items:center;margin:0 auto 28px}
.nilai-badge img{display:block;width:200px;height:200px;object-fit:contain}
.nilai-card h3{font-size:1.5rem;font-weight:700;margin-bottom:12px}
.nilai-card p{font-size:var(--fs-md);color:var(--muted);max-width:420px}
.nilai-nav{display:flex;justify-content:center;gap:12px;margin-top:32px}
.nilai-nav button{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-size:1.3rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.nilai-nav button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#FAFBFC}
.nilai-nav button:disabled{opacity:.3;cursor:default}
@media(max-width:600px){
 .cta .btns{grid-auto-flow:row}
}
@keyframes heroPath{
 from{opacity:0;transform:scale(.5)}
 to{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
 .hero-svg path{opacity:1;transform:none;animation:none}
}
@media(max-width:900px){
 .siapa-grid{grid-template-columns:1fr;gap:40px}
 .siapa{padding:88px 0}
 .nilai-grid{grid-template-columns:1fr;gap:48px}
 .nilai{padding:88px 0}
}