.hub h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.03em;margin:44px 0 10px}
.hub .lead{margin:0 0 8px;text-align:left;max-width:700px;font-size:18px;color:var(--muted)}
.joinbox{margin:20px 0 30px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:20px;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.joinbox div:first-child{flex:1 1 340px;font-size:16px;line-height:1.5}.joinbox span{color:var(--muted)}
.hub .pill{min-height:46px;padding:0 20px;color:var(--text);border-color:var(--dash)}.hub .pill.y{background:var(--acc);color:var(--on-accent);border-color:var(--acc)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
/* Kartu: ukuran, radius, font, dan gaya sama seperti kartu di beranda (.card .pc) */
.pc{--rx:0deg;--ry:0deg;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:opacity .7s ease,transform .3s ease-out,border-color .2s}
.pc.main{border-color:color-mix(in srgb,var(--acc) 55%,var(--border))}
.pt{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:26px;line-height:1.1;color:#fff;white-space:pre-line;position:relative;overflow:hidden;background:var(--g,linear-gradient(135deg,#312e81,#a855f7))}
.pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1);will-change:transform}
.pt:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(168,85,247,.32),transparent 55%);mix-blend-mode:soft-light}
.pl{position:relative;z-index:0;padding:0 16px}
.badge{position:absolute;left:14px;top:14px;z-index:2;display:inline-block;padding:5px 12px;border-radius:999px;background:var(--acc);color:var(--on-accent);font-family:'Onest',sans-serif;font-weight:700;font-size:12.5px;line-height:1.3}
.badge.o{background:#F5B400}
.pb{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pb h2{margin:0;font-size:18px;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.pb p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
.price{margin-top:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px}
.price small{font-family:'Onest',sans-serif;font-size:13px;color:var(--muted);font-weight:500}
.price.soon-p{font-family:'Onest',sans-serif;font-size:14px;color:var(--muted);font-weight:600;line-height:1.45}
.pb .muted{font-size:12px}
.cta{margin-top:6px;border-radius:999px;background:var(--btn);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .2s,transform .2s}
.cta:after{content:"→";margin-left:8px;display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cta:hover{background:var(--btn-h)}
.cta.o{background:transparent;color:var(--text);border:1px solid var(--dash)}.cta.o:hover{background:var(--surface2)}
.sublink{text-align:center;font-size:13.5px;font-weight:600;color:var(--link)}
.pc.wide{grid-column:1/-1;flex-direction:row}
.pc.wide .pt{width:34%;min-width:240px;aspect-ratio:auto;min-height:210px}
.pc.wide .pb{justify-content:center;padding:26px 28px}.pc.wide .pb h2{font-size:22px}.pc.wide .pb p{flex:none;max-width:560px}.pc.wide .cta{align-self:flex-start;padding:0 24px}
@media(max-width:640px){.pc.wide{flex-direction:column}.pc.wide .pt{width:100%;aspect-ratio:4/3;min-height:0}}
.note{margin:22px 0 56px;padding:14px 18px;border:1px dashed var(--dash);border-radius:14px;color:var(--muted);font-size:13.5px}
.dp{display:flex;align-items:center;gap:16px;margin:18px 0 14px;padding:16px 20px;border-radius:20px;background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 22%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--acc) 55%,var(--border))}
.dp strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;line-height:1.25}.dp span:not(.dp-ic){display:block;color:var(--muted);font-size:14.5px}
.dp-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--acc);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px}
/* Gerak saat kursor diarahkan: sama seperti beranda (miring maks 3 derajat, gambar zoom, judul bergeser, sorot), hanya untuk mouse */
@media(hover:hover) and (pointer:fine){
  .pc:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--border));box-shadow:0 18px 40px -20px rgba(0,0,0,.55)}
  .pc:hover .pt img{transform:translate(0,0) scale(1.05)}
  .pc:hover .pt:after{opacity:1}
  .pc:hover .pb h2{translate:5px 0}
  .pc:hover .cta:after{transform:translateX(6px)}
  .joinbox:hover,.dp:hover{transform:translateY(-3px)}
  .pill:hover,.nugas:hover{transform:translateY(-2px);border-color:var(--acc)}
}
.joinbox,.dp,.pill{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .2s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.pt img,.cta:after,.joinbox,.dp,.pill,.pb h2{transition:none!important}.pc:hover .pt img{transform:none}}
/* Penimpa aturan umum site.css (.card, .price, .btn) supaya kartu hub sama dengan kartu beranda */
.hub .pc.card{padding:0;border-radius:22px}
.hub .pb .price{padding:0;flex-direction:row;font-size:22px}
.hub .pb .price.soon-p{font-size:14px}
.hub .btn.cta{min-height:42px;padding:0 20px;font-size:14px}
.hub .btn.cta.o{background:transparent}