/* AIO — Home v4: redesign tambahan (marquee, bento "Kenapa AIO", showcase) */
:root{--g1:#2563eb;--g2:#7c3aed;--g3:#06b6d4}
[data-theme=dark]{--g1:#60a5fa;--g2:#a78bfa;--g3:#22d3ee}

/* Hero: judul gradien + sorotan */
.hero{text-align:center;margin-left:auto;margin-right:auto;position:relative}
.hero p{margin-left:auto;margin-right:auto}
.hero-points{justify-content:center}
.hero h1 span{
  background:linear-gradient(100deg,var(--g1),var(--g2) 55%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:h2flow 8s ease-in-out infinite alternate;
}
@keyframes h2flow{to{background-position:100% 0}}
.hero::before{
  content:"";position:absolute;left:50%;top:10%;width:min(560px,90%);height:260px;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--g2) 22%,transparent),transparent);
  filter:blur(40px);z-index:-1;pointer-events:none;
}
.url-card{position:relative;border:1px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
  linear-gradient(120deg,var(--g1),var(--g2),var(--g3)) border-box}
.url-wrap:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--g1) 25%,transparent)}
.url-card .btn-primary{background:linear-gradient(120deg,var(--g1),var(--g2));border:0;color:#fff;
  transition:transform .18s,box-shadow .18s,filter .18s}
.url-card .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 14px 28px -12px color-mix(in srgb,var(--g2) 70%,transparent)}

/* Marquee platform */
.marq{max-width:var(--wrap);margin:34px auto 0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-track{display:flex;gap:12px;width:max-content;animation:h2marq 34s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track>span{padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--card);
  font-size:.82rem;font-weight:600;color:var(--ink2);white-space:nowrap}
@keyframes h2marq{to{transform:translateX(-50%)}}

/* Bento: Kenapa AIO */
.why{padding:96px 0 0}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bx{grid-column:span 2;padding:24px;border-radius:22px;border:1px solid var(--border);background:var(--card);
  position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
.bx:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--g1) 45%,var(--border));
  box-shadow:0 22px 44px -26px color-mix(in srgb,var(--g1) 60%,transparent)}
.bx.wide{grid-column:span 4}
.bx.hl{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border-color:transparent}
.bx.hl p,.bx.hl h3{color:#fff}
.bx.hl p{opacity:.88}
.bx-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--g1) 12%,transparent);color:var(--g1)}
.bx.hl .bx-ic{background:rgba(255,255,255,.2);color:#fff}
.bx-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bx h3{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;color:var(--ink-strong);margin-bottom:6px}
.bx p{font-size:.9rem;line-height:1.6;color:var(--ink2)}
.bx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bx-tags b{font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)}

/* Angka ringkas */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.num{padding:22px 16px;text-align:center;border-radius:20px;border:1px dashed var(--border2);background:color-mix(in srgb,var(--card) 70%,transparent)}
.num b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.05em;
  background:linear-gradient(120deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.num small{font-size:.78rem;color:var(--ink2);font-weight:600}

/* Reveal saat scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media(max-width:860px){.bento{grid-template-columns:1fr 1fr}.bx,.bx.wide{grid-column:span 1}.bx.hl{grid-column:span 2}
  .nums{grid-template-columns:1fr 1fr}.why{padding-top:64px}}
@media(max-width:520px){.bento{grid-template-columns:1fr}.bx.hl{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.hero h1 span,.marq-track{animation:none}.rv{opacity:1;transform:none;transition:none}}
.marq-track>span{display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 7px}.marq-track .platform-logo{width:26px;height:26px;flex-basis:26px;border-radius:8px}.marq-track .platform-logo svg{width:16px;height:16px}