/* =========================
   Desain Token
==========================*/
:root{
  --bg: #F7F7FF;
  --panel: rgba(255,255,255,0.7);
  --ink: #111127;
  --muted: #5D5C78;
  --line: rgba(17,17,39,0.08);

  --purple-800:#4C1D95;
  --purple-700:#5B21B6;
  --purple-600:#6D28D9;
  --purple-500:#7C3AED;
  --purple-400:#8B5CF6;
  --purple-300:#A78BFA;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-1: 0 10px 30px rgba(92, 57, 192, 0.15);
  --shadow-2: 0 30px 60px rgba(92, 57, 192, 0.18), 0 6px 16px rgba(20, 16, 59, 0.08);
  --blur: saturate(140%) blur(8px);

  --ease-1: cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.16,.84,.44,1);
  --dur-1: 400ms;
  --dur-2: 700ms;
  --dur-3: 1100ms;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* =========================
   Reset & base
==========================*/
*, ::before, *::after{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 85% -10%, #EDE9FE 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% 15%, #F3E8FF 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color: var(--purple-600); text-decoration: none; }
.container{ width:min(1120px, 90vw); margin-inline:auto; }

/* =========================
   Navigation & Hamburger Menu
==========================*/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 0;
  background: rgba(247, 247, 255, 0.9);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
  transition: all var(--dur-1) var(--ease-1);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(1120px, 90vw);
  margin-inline: auto;
}

.nav-logo {
  font-weight: 700;
  color: var(--purple-800);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}

.nav-link {
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  transition: all var(--dur-1) var(--ease-1);
}

.nav-link:hover {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-700);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  width: 2rem;
  height: 0.25rem;
  background: var(--purple-700);
  border-radius: 10px;
  transition: all var(--dur-1) var(--ease-1);
  position: relative;
  transform-origin: center;
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
    z-index: 1001;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 70%;
    flex-direction: column;
    background: var(--bg);
    backdrop-filter: var(--blur);
    padding: 5rem 2rem;
    gap: 2rem;
    transition: right var(--dur-2) var(--ease-1);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  }
  
  .nav-menu.active {
    right: 0;
  }
  
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.4rem, 0.4rem);
  }
  
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0.4rem, -0.4rem);
  }
}

/* =========================
   Preloader
==========================*/
#preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:
    radial-gradient(800px 400px at 20% 10%, #F5F3FF 0%, transparent 60%),
    radial-gradient(800px 400px at 80% 90%, #EEF2FF 0%, transparent 60%),
    #FFFFFF;
  transition: opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-1), visibility var(--dur-2) var(--ease-1);
}
#preloader.hide{ opacity:0; transform: scale(.98); visibility:hidden; pointer-events:none; }
.pl-wrap{
  position:relative; width:240px; height:240px; display:grid; place-items:center;
  filter: drop-shadow(0 10px 30px rgba(92,57,192,.25));
}
.pl-blob{
  position:absolute; inset:0;
  --c1: #A78BFA; --c2: #7C3AED; --c3: #C4B5FD;
  background:
    radial-gradient(60% 60% at 30% 30%, var(--c1), transparent 70%),
    radial-gradient(60% 60% at 70% 70%, var(--c2), transparent 70%),
    radial-gradient(80% 80% at 60% 30%, var(--c3), transparent 70%);
  filter: blur(20px) saturate(130%);
  border-radius: 42% 58% 65% 35% / 40% 45% 55% 60%;
  animation: blobMorph 9s var(--ease-2) infinite alternate;
}
.pl-ring{
  position:absolute; width:170px; height:170px; border-radius:50%;
  background:
    conic-gradient(from 0deg, #7C3AED, #A78BFA, #7C3AED 70%, transparent 70%);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, black 63%);
          mask: radial-gradient(closest-side, transparent 62%, black 63%);
  animation: spin 3.6s linear infinite;
  opacity:.85;
}
.pl-core{
  position:relative; z-index:2; display:grid; place-items:center; gap:10px;
  backdrop-filter: var(--blur);
  background: rgba(255,255,255,0.6);
  padding:18px 22px; border-radius:16px; border:1px solid var(--line);
}
.pl-title{ font-weight:700; letter-spacing:.4px; color:var(--purple-800); }
.pl-progress{
  width:160px; height:6px; background: #ECEAFB; border-radius:999px; overflow:hidden; border:1px solid #E8E4FF;
}
.pl-bar{ height:100%; width:0%; background: linear-gradient(90deg, #7C3AED, #A78BFA); border-radius:inherit; transition: width 300ms var(--ease-1); }
.pl-note{ font-size:.9rem; color: var(--muted); }

@keyframes blobMorph{
  0%{ border-radius: 42% 58% 65% 35% / 40% 45% 55% 60%; transform: translate3d(0,0,0) rotate(0deg); }
  50%{ border-radius: 58% 42% 35% 65% / 55% 45% 40% 60%; transform: translate3d(0,-6px,0) rotate(10deg); }
  100%{ border-radius: 45% 55% 50% 50% / 60% 40% 60% 40%; transform: translate3d(0,6px,0) rotate(-8deg); }
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =========================
   Hero / Lobby
==========================*/
.hero{
  position:relative; min-height:92svh; display:grid; place-items:center; overflow:hidden;
  margin-top: 70px;
}
.hero .bg-canvas{ position:absolute; inset:0; z-index:0; }
.hero .blob{
  position:absolute; width:520px; height:520px; border-radius:50%;
  filter: blur(40px) saturate(130%); opacity:.6; pointer-events:none; will-change: transform;
  mix-blend-mode: multiply;
}
.blob.b1{ background:radial-gradient(circle at 30% 30%, #EDE9FE, #C4B5FD 60%, transparent 70%); top:-120px; left:-80px; animation: floatA 12s var(--ease-2) infinite alternate; }
.blob.b2{ background:radial-gradient(circle at 70% 70%, #DDD6FE, #A78BFA 60%, transparent 70%); bottom:-160px; right:-120px; animation: floatB 13s var(--ease-2) infinite alternate; }
@keyframes floatA{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(20px,-30px,0); } }
@keyframes floatB{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-30px,20px,0); } }

.hero-inner{ position:relative; z-index:1; text-align:center; padding: 80px 0; }
.badge{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  color:#4C1D95; border:1px solid #E8E4FF; background: rgba(250,248,255,.7); backdrop-filter: var(--blur);
  transform: translateY(10px); opacity:0; transition: all var(--dur-2) var(--ease-1);
}
.hero.entered .badge{ transform:none; opacity:1; }
.hero-title{
  margin:16px 0 8px; font-size: clamp(2.2rem, 6vw, 4rem); font-weight:800; letter-spacing: .2px;
  background: linear-gradient(180deg, #1F1147 0%, #4C1D95 40%, #7C3AED 80%);
  -webkit-background-clip: text; background-clip:text; color: transparent;
  transform: translateY(14px); opacity:0; transition: all var(--dur-2) var(--ease-1) .05s;
}
.hero.entered .hero-title{ transform:none; opacity:1; }
.hero-sub{
  color:var(--muted); max-width: 760px; margin: 10px auto 0; font-size: clamp(1rem, 1.8vw, 1.2rem);
  transform: translateY(18px); opacity:0; transition: all var(--dur-2) var(--ease-1) .12s;
}
.hero.entered .hero-sub{ transform:none; opacity:1; }
.cta{
  margin-top:26px; display:inline-grid; grid-auto-flow:column; gap:12px; transform: translateY(22px); opacity:0; transition: all var(--dur-2) var(--ease-1) .18s;
}
.hero.entered .cta{ transform:none; opacity:1; }
.btn{
  padding:12px 18px; border-radius:12px; font-weight:700; letter-spacing:.2px; border:1px solid transparent; cursor:pointer;
  transition: transform var(--dur-1) var(--ease-2), box-shadow var(--dur-1) var(--ease-2);
  will-change: transform;
}
.btn-primary{
  background: linear-gradient(90deg, var(--purple-600), var(--purple-400)); color:white; box-shadow: var(--shadow-2);
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.01); }
.btn-ghost{
  background: rgba(255,255,255,.7); border-color:#E8E4FF; color:#4C1D95; backdrop-filter: var(--blur);
}

.scroll-ind{
  position:absolute; bottom:20px; left:50%; translate:-50% 0; display:grid; place-items:center; gap:6px; color:#5B21B6;
  opacity:.8; font-size:.9rem;
}
.scroll-ind .wheel{
  width:26px; height:42px; border:2px solid #A78BFA; border-radius:24px; position:relative;
}
.scroll-ind .wheel::after{
  content:""; position:absolute; top:6px; left:50%; translate:-50% 0;
  width:6px; height:10px; border-radius:6px; background:#7C3AED; animation: wheel 1.8s var(--ease-2) infinite;
}
@keyframes wheel{ 0%{ opacity:0; transform: translateY(0); } 30%{ opacity:1; } 100%{ opacity:0; transform: translateY(12px); } }
/* =========================
   Sections
==========================*/
section{ padding: 70px 0; }
.section-title{
  font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight:800; margin:0 0 10px; color:#2B175B;
}
.section-sub{ color:var(--muted); margin:0 0 24px; }

.panel{
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); backdrop-filter: var(--blur);
}

.about{ display:grid; gap:22px; grid-template-columns: 1.2fr .8fr; align-items:center; }
@media (max-width: 880px){ .about{ grid-template-columns:1fr; } }
.about-copy{ padding:22px; }
.about-copy h3{ margin:0 0 10px; color:#3B1C74; }
.about-copy p{ margin:0 0 12px; color:var(--muted); }

.grid{ display:grid; gap:18px; }
.grid.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 680px){ .grid.two{ grid-template-columns: 1fr; } }

.illus{
  min-height: 260px; position:relative; overflow:hidden; border-radius: var(--radius-lg);
  background:
    radial-gradient(160px 120px at 24% 36%, #C4B5FD, transparent 70%),
    radial-gradient(140px 120px at 72% 64%, #A78BFA, transparent 70%),
    linear-gradient(180deg, #ffffff, #F5F3FF);
}
.orbit{
  position:absolute; inset:14px; display:block; border-radius:50%;
  border:1px dashed rgba(124,58,237,.3);
  animation: spin 24s linear infinite;
}
.illus .dot{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, #7C3AED, #4C1D95);
  box-shadow: 0 6px 14px rgba(124,58,237,.35);
  animation: floatDot 5s var(--ease-2) infinite alternate;
}
.illus .dot.d1{ top:16%; left:20%; }
.illus .dot.d2{ bottom:22%; right:18%; animation-delay: .6s; }
@keyframes floatDot{ from{ transform: translateY(-6px); } to{ transform: translateY(6px); } }

/* Cards & grid jenis */

.grid.cols-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width: 960px){ .grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid.cols-3{ grid-template-columns: 1fr; } }

.card{
  padding:18px; border-radius: var(--radius-md); border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  transition: transform var(--dur-1) var(--ease-2), box-shadow var(--dur-1) var(--ease-2), border-color var(--dur-1) var(--ease-2);
  will-change: transform;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-1); border-color: rgba(124,58,237,.25); }
.icon{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; background: linear-gradient(180deg, #EDE9FE, #F5F3FF); border:1px solid #E8E4FF; color:#5B21B6;
}
.card h4{ margin:10px 0 6px; }
.card p{ margin:0; color: var(--muted); }

/* QA Accordion */
.accordion{ display:grid; gap:12px; }
.qa{
  border-radius: var(--radius-md); border:1px solid var(--line); overflow:hidden; background:#fff;
}
.qa summary{
  cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; font-weight:700; color:#34116B;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .chev{
  margin-left:auto; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; color:#7C3AED;
  transition: transform var(--dur-1) var(--ease-1);
}
.qa[open] summary .chev{ transform: rotate(180deg); }
.qa .answer{
  padding: 0 18px 18px; color: var(--muted); line-height:1.6;
  animation: dropIn var(--dur-2) var(--ease-1);
}
@keyframes dropIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform:none; } }
.answer ul{ margin:10px 0 0; padding-left:18px; }
.answer li{ margin:6px 0; }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: all var(--dur-2) var(--ease-1); }
.reveal.visible{ opacity:1; transform:none; }

/* Footer */
footer{
  padding: 28px 0 40px; color: #4C1D95;
}
.foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid #E8E4FF; padding-top:18px;
  font-size:.95rem;
}
.foot .brand{
  display:grid; grid-auto-flow:column; align-items:center; gap:10px;
}
.badge-mini{
  font-size:.7rem; padding:4px 8px; border-radius:999px; background:#F5F3FF; border:1px solid #E8E4FF; color:#6D28D9;
}

/* Schema.org microdata styling */
[itemscope] { border: none; }
[itemprop]:not([itemscope]) { display: inline; }