:root{
        --ink:#0b1220;
        --paper:#f6f7fb;
        --sky:#bfe7ff;
        --mint:#c7f9cc;
        --pink:#ffc6ff;
        --lemon:#fff3a3;
        --merah:#ff5d73;   
        --jingga:#ff9f5a;  
        --kuning:#ffe86b; 
        --hijau:#55f2a3;   
        --biru:#4fa8ff;    
        --nila:#6a5cff;   
        --ungu:#b57bff;   

      --border: 3px solid rgba(11,18,32,.95);
      --shadow: 8px 8px 0 rgba(11,18,32,.95);
      --shadow-lg: 14px 14px 0 rgba(11,18,32,.95);

      --radius: 28px;
    }

    html{ scroll-behavior:smooth; height:100%; 
        overscroll-behavior: none; }
    body{
      min-height:100%;
      color: var(--ink);
      background:
        radial-gradient(1200px 600px at 18% 8%, rgba(191,231,255,.70), transparent 62%),
        radial-gradient(900px 520px at 82% 12%, rgba(255,198,255,.55), transparent 58%),
        radial-gradient(820px 520px at 42% 92%, rgba(199,249,204,.50), transparent 60%),
        linear-gradient(#ffffff, #f4f6ff);
        overflow-x: hidden;
    }

    .bg-fx{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }
    .bg-blob{
      position:absolute;
      width: 46vmax;
      height: 46vmax;
      border-radius: 999px;
      filter: blur(30px);
      opacity: .22;
      transform: translate3d(0,0,0);
      animation: floaty 16s ease-in-out infinite;
    }
    .bg-blob.b1{ left:-10vmax; top:-12vmax; background: rgba(191,231,255,.95); animation-duration: 18s; }
    .bg-blob.b2{ right:-12vmax; top:-10vmax; background: rgba(255,198,255,.85); animation-duration: 20s; animation-delay: -6s; }
    .bg-blob.b3{ left:10vmax; bottom:-16vmax; background: rgba(199,249,204,.90); animation-duration: 22s; animation-delay: -10s; }
    @keyframes floaty{
      0%{ transform: translate3d(0,0,0) scale(1); }
      50%{ transform: translate3d(2.2vmax,-1.6vmax,0) scale(1.05); }
      100%{ transform: translate3d(0,0,0) scale(1); }
    }
    .bg-grain{
      position:absolute;
      inset:-40%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      opacity: .08;
      mix-blend-mode: multiply;
      transform: rotate(6deg);
    }

    .neo{
      border: var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      will-change: transform;
    }
    .lift:hover{ transform: translate(-3px,-3px); box-shadow: 12px 12px 0 rgba(11,18,32,.95); }
    .lift:active{ transform: translate(1px,1px); box-shadow: 6px 6px 0 rgba(11,18,32,.95); }

    .chip{
      border: 2px solid rgba(11,18,32,.9);
      box-shadow: 4px 4px 0 rgba(11,18,32,.9);
      border-radius: 999px;
    }

    .thin-scroll::-webkit-scrollbar{ height: 10px; }
    .thin-scroll::-webkit-scrollbar-thumb{ background: rgba(11,18,32,.25); border-radius: 999px; }
    .thin-scroll::-webkit-scrollbar-track{ background: rgba(11,18,32,.06); border-radius: 999px; }

    .modal-backdrop{
      background: rgba(11,18,32,.45);
      backdrop-filter: blur(10px);
    }
    .hidden-soft{ display:none; }

    .line-clamp-2{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .card-wow{ position:relative; overflow:hidden; transform-style:preserve-3d; }
    .card-wow::before{
      content:"";
      position:absolute; inset:-40%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,198,255,.45), transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(191,231,255,.52), transparent 38%),
        radial-gradient(circle at 50% 80%, rgba(199,249,204,.40), transparent 42%);
      filter: blur(14px);
      opacity:0;
      transform: rotate(10deg) scale(1.05);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events:none;
    }
    .card-wow::after{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(120deg, rgba(11,18,32,.08) 0 1px, transparent 1px 7px);
      opacity:0;
      transition: opacity .22s ease;
      pointer-events:none;
    }
    .card-wow:hover::before{ opacity:1; transform: rotate(0deg) scale(1.02); }
    .card-wow:hover::after{ opacity:.10; }
    .card-wow:hover{ transform: translate(-4px,-4px) rotate(-0.25deg); box-shadow: var(--shadow-lg); }
    .card-wow:active{ transform: translate(1px,1px) rotate(0deg); box-shadow: 6px 6px 0 rgba(11,18,32,.95); }

    .acc-panel{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
    .acc-item[data-open="true"] .acc-panel{ max-height: 520px; }
    .acc-item[data-open="true"] .acc-chevron{ transform: rotate(180deg); }
    .acc-chevron{ transition: transform .18s ease; }

    #heroStars{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      opacity:.65;
      mask-image: radial-gradient(circle at 40% 35%, rgba(0,0,0,1), rgba(0,0,0,.85) 45%, rgba(0,0,0,.12) 72%, transparent 86%);
    }

      /* ===== FAQ Chat UI (estetik + mejikuhibiniu) ===== */
:root{
  --rain-red: #ff4d4d;
  --rain-orange:#ff9a3c;
  --rain-yellow:#ffe14d;
  --rain-green:#34d399;
  --rain-cyan:#22d3ee;
  --rain-blue:#60a5fa;
  --rain-indigo:#818cf8;
  --rain-violet:#c084fc;
  --rain-pink:#fb7185;
}

.faq-chat-panel{
  transform-origin: bottom right;
  transform: translateY(10px) scale(.96);
  opacity: 0;
  filter: blur(2px);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
  border: 3px solid rgba(11,18,32,.95);
  border-radius: 22px;
  box-shadow: 10px 10px 0 rgba(11,18,32,.95);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.faq-chat-panel[data-open="true"]{
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0);
}

.faq-chat-top{
  border-bottom: 3px solid rgba(11,18,32,.95);
  background:
    linear-gradient(90deg,
      rgba(255,77,77,.22),
      rgba(255,154,60,.22),
      rgba(255,225,77,.22),
      rgba(52,211,153,.22),
      rgba(34,211,238,.22),
      rgba(96,165,250,.22),
      rgba(129,140,248,.22),
      rgba(192,132,252,.22),
      rgba(251,113,133,.22)
    );
}

.faq-chat-body{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 15%, rgba(192,132,252,.16), transparent 65%),
    radial-gradient(900px 520px at 50% 95%, rgba(52,211,153,.14), transparent 60%),
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.74));
}

.faq-chat-bubble{
  border: 2px solid rgba(11,18,32,.92);
  box-shadow: 4px 4px 0 rgba(11,18,32,.92);
  border-radius: 18px;
  padding: 10px 12px;
  font-weight: 850;
  line-height: 1.25;
  position: relative;
  overflow: hidden;
}

.faq-chat-bubble::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,77,77,.22), transparent 42%),
    radial-gradient(circle at 45% 10%, rgba(255,225,77,.18), transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(34,211,238,.20), transparent 46%),
    radial-gradient(circle at 65% 70%, rgba(129,140,248,.18), transparent 46%),
    radial-gradient(circle at 30% 80%, rgba(192,132,252,.18), transparent 46%);
  filter: blur(12px);
  opacity:.55;
  pointer-events:none;
}

/* user vs bot bubble tone */
.faq-chat-bubble[data-role="user"]{
  background: rgba(255,255,255,.92);
}
.faq-chat-bubble[data-role="bot"]{
  background: rgba(255,255,255,.84);
}

/* ===== Quick Questions horizontal slider ===== */
.faq-quick{
  position: relative;
  padding: 10px 10px 12px;
  border-top: 3px solid rgba(11,18,32,.95);
  background: rgba(255,255,255,.62);
}

.faq-quick-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 10px;
}

.faq-quick-row::-webkit-scrollbar{ height: 10px; }
.faq-quick-row::-webkit-scrollbar-thumb{ background: rgba(11,18,32,.25); border-radius: 999px; }
.faq-quick-row::-webkit-scrollbar-track{ background: rgba(11,18,32,.06); border-radius: 999px; }

.faq-quick::before,
.faq-quick::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 26px;
  pointer-events:none;
  z-index: 2;
}
.faq-quick::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.faq-quick::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

.faq-chip{
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 2px solid rgba(11,18,32,.92);
  box-shadow: 4px 4px 0 rgba(11,18,32,.92);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  white-space: nowrap;
  position: relative;
  background: rgba(255,255,255,.92);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change: transform;
}

/* mejikuhibiniu border glow */
.faq-chip::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--rain-red),
    var(--rain-orange),
    var(--rain-yellow),
    var(--rain-green),
    var(--rain-cyan),
    var(--rain-blue),
    var(--rain-indigo),
    var(--rain-violet),
    var(--rain-pink)
  );
  opacity: .55;
  filter: blur(10px);
  z-index:-1;
}

.faq-chip:hover{
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 rgba(11,18,32,.95);
  filter: saturate(1.05);
}

.faq-chip:active{
  transform: translate(1px,1px);
  box-shadow: 3px 3px 0 rgba(11,18,32,.95);
}

.faq-chip:focus-visible{
  outline: 3px solid rgba(11,18,32,.95);
  outline-offset: 3px;
}

/* unread dot keep */
.faq-unread-dot{
  position:absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--pink);
  border: 2px solid rgba(11,18,32,.95);
  box-shadow: 3px 3px 0 rgba(11,18,32,.95);
}

.faq-quick-row{
  scroll-padding-left: 8px;
}
.faq-chip{
  scroll-snap-align: start;
}

    .skip-link{
      position:absolute;
      left:-999px;
      top:10px;
      background:#fff;
      padding:10px 14px;
      border: var(--border);
      box-shadow: var(--shadow);
      border-radius: 16px;
      z-index:9999;
      font-weight:900;
    }
    .skip-link:focus{ left:10px; }

    .cert-paper{
      background:
        radial-gradient(900px 520px at 15% 20%, rgba(191,231,255,.55), transparent 60%),
        radial-gradient(900px 520px at 80% 18%, rgba(255,198,255,.40), transparent 62%),
        radial-gradient(900px 520px at 45% 95%, rgba(199,249,204,.42), transparent 60%),
        linear-gradient(#fff, #fbfbff);
    }
    .cert-border{
      border: 4px solid rgba(11,18,32,.95);
      border-radius: 26px;
      box-shadow: 10px 10px 0 rgba(11,18,32,.95);
    }

    .cert-logo-center{
  width: 90px;
  height: 90px;
  margin: 0 auto 14px auto; 
  border-radius: 999px;
  border: 4px solid rgba(11,18,32,.95);
  box-shadow: 8px 8px 0 rgba(11,18,32,.95);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
}


.cert-logo-center img{
  width: 72px;
  height: 72px;
  object-fit: contain;
}
#certModal .neo{
  -webkit-overflow-scrolling: touch;
}


    .podium{
      display:grid;
      gap:16px;
      align-items:end;
    }
    @media (min-width: 768px){
      .podium{
        grid-template-columns: 1fr 1.18fr 1fr;
        gap: 18px;
      }
    }
    .podium .podium-card{
      position:relative;
    }
    .podium .podium-card[data-rank="1"]{
      transform: translateY(-6px);
    }
    @media (prefers-reduced-motion: reduce){
      .podium .podium-card[data-rank="1"]{ transform:none; }
    }

    @media (prefers-reduced-motion: reduce){
      .lift, .card-wow, .neo { transition:none !important; }
      #heroStars{ display:none; }
      .bg-blob{ animation: none !important; }
    }