:root{
  --bg:#000; --muted:#0b0d12; --card:#121521; --text:#f3f6ff; --soft:#c9d0e6;
  --brand:#7c5cff; --brand-2:#00e0a6; --ring:rgba(124,92,255,.35);
  --maxw:1120px; --radius:14px; --shadow:0 14px 40px rgba(0,0,0,.55);
}

/* BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  background:
    radial-gradient(1100px 700px at 12% 6%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 40%),
    radial-gradient(900px 600px at 88% 0%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 42%),
    linear-gradient(180deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 60%, var(--bg)) 45%, var(--bg) 100%);
  color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;height:auto;display:block}
picture,img{content-visibility:auto;contain-intrinsic-size:560px 360px}

/* LAYOUT */
.container{max-width:var(--maxw);width:min(100%,var(--maxw));margin-inline:auto;padding:24px}
.grid-2{display:grid;gap:28px;grid-template-columns:1.1fr 1fr}
@media (max-width:880px){.grid-2{grid-template-columns:1fr}}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;color:#000;padding:.5rem 1rem;border-radius:8px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--muted) 75%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.2px}
.site-nav ul{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}
.site-nav a{color:var(--soft);text-decoration:none}
.site-nav a:hover{color:var(--text)}
.nav-toggle{display:none;background:transparent;border:1px solid color-mix(in srgb,var(--text) 15%,transparent);color:var(--text);padding:.45rem .65rem;border-radius:10px;box-shadow:var(--shadow)}
@media (max-width:760px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;right:16px;top:60px;background:color-mix(in srgb,var(--card) 85%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start}
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:.9rem 1.15rem;border-radius:12px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  color:var(--text);background:color-mix(in srgb,var(--card) 92%,transparent);
  box-shadow:var(--shadow);transition:transform .15s,border-color .15s,background .15s;
}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 40%, var(--text) 12%)}
.btn-lg{padding:1rem 1.2rem;border-radius:14px;font-weight:800}
.btn-ghost{background:transparent}
.btn-sm{padding:.58rem .85rem;border-radius:10px}
.btn-block{display:block;width:100%}

/* HERO */
.hero{padding:44px 0 10px}
.hero h1{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:0 0 12px;color:var(--text);text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lead{font-size:1.08rem;color:var(--soft)}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-badges{display:flex;gap:16px;padding:0;margin:14px 0 0;list-style:none;color:color-mix(in srgb,var(--text) 78%,transparent);flex-wrap:wrap}
.tos-note{margin-top:8px;color:color-mix(in srgb,var(--soft) 80%,transparent)}
.fine{color:color-mix(in srgb,var(--soft) 80%,transparent);margin-top:8px;font-size:.92rem}
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.hero-visual img{border-radius:10px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);box-shadow:var(--shadow)}
.stat-card{position:absolute;right:-6px;bottom:-6px;background:color-mix(in srgb,var(--muted) 85%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:14px;padding:10px 12px;display:flex;gap:16px;backdrop-filter:blur(6px)}
.stat-card strong{font-size:1.05rem;color:var(--text)} .stat-card span{font-size:.8rem;color:var(--soft)}

/* SECTIONS */
.section{padding:80px 0}
.section .container{width:100%;max-width:var(--maxw);padding:0 24px}
.section h2{font-size:clamp(22px,3.2vw,36px);margin:0 0 32px;color:var(--text);text-align:center}
.section.muted{background:linear-gradient(180deg, color-mix(in srgb, var(--muted) 36%, transparent), transparent)}

/* FITUR */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;justify-items:center}
.card{width:100%;max-width:360px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);color:var(--text);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--brand)}
.card h3{margin:4px 0 10px;color:var(--text);text-align:center}
.card p{color:var(--soft);text-align:center}

/* LEGAL BEAUTIFIED */
.list{padding-left:18px;text-align:left} .note{color:var(--soft)}
.legal-wrap{display:grid;grid-template-columns:1.2fr 0.8fr;align-items:center;gap:48px}
@media (max-width:880px){.legal-wrap{grid-template-columns:1fr;text-align:center;gap:32px}}
.legal-content h2{font-size:clamp(26px,4vw,40px);margin-bottom:1rem;font-weight:800;color:var(--text)}
.legal-list{list-style:none;margin:0 0 1.2rem;padding:0}
.legal-list li{background:color-mix(in srgb,var(--card) 92%,transparent);border-left:3px solid var(--brand);border-radius:8px;margin-bottom:.6rem;padding:.8rem 1rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.legal-list li strong{color:var(--brand-2)}
.legal-content .note{color:var(--soft);font-size:.95rem;max-width:580px;line-height:1.65;margin-top:1rem}
.legal-illustration{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.legal-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--brand) 14%,transparent) 0%,color-mix(in srgb,var(--brand-2) 10%,transparent) 40%,transparent 70%);filter:blur(40px);opacity:.8}
.legal-icon{position:relative;font-size:5rem;line-height:1;z-index:1;text-shadow:0 0 20px color-mix(in srgb,var(--brand) 40%,transparent)}
.legal-tagline{position:relative;z-index:1;margin-top:.8rem;color:var(--soft);font-weight:600;letter-spacing:.5px}

/* TESTIMONI SLIDER — fixed center */
.t-slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 720px;
  margin-inline: auto;
}
.t-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius);
}
.t-track {
  display: flex;
  transition: transform 0.6s ease;
}
.t-card {
  flex: 0 0 100%;
  max-width: 640px;
  margin-inline: auto; /* <--- ini penting: center card di tengah viewport */
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  opacity: 0.25;
  transform: scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.t-card.active {
  opacity: 1;
  transform: scale(1);
}
.t-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.t-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#000;font-weight:800;font-size:1.1rem}
.t-meta figcaption{color:var(--text);font-weight:700} .t-meta span{color:var(--soft);font-size:.9rem}
.t-card blockquote{margin:0;padding:0;font-size:1.05rem;color:var(--text);line-height:1.7}

/* gradient mask agar pinggir soft, TIDAK mengubah layout */
.t-mask{position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.t-mask--left{left:0;background:linear-gradient(to right,rgba(0,0,0,.6),transparent)}
.t-mask--right{right:0;background:linear-gradient(to left,rgba(0,0,0,.6),transparent)}

/* panah */
.t-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--muted) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.2s, transform 0.2s;
  z-index: 5;
}
.t-nav:hover{background:color-mix(in srgb,var(--brand) 35%,transparent);transform:translateY(-50%) scale(1.1)}
.t-prev { left: -60px; } /* panah agak keluar container */
.t-next { right: -60px; }
@media(max-width:680px){
  .t-mask{width:40px}
  .t-prev{left:4px} .t-next{right:4px}
  .t-nav{width:36px;height:36px;font-size:1.2rem}
  .t-card {
    padding: 20px;
    max-width: 90%; /* biar tetap ada ruang kanan kiri di layar kecil */
  }
  .t-prev, .t-next { left: 8px; right: 8px; }
}
@media (max-width: 768px) {
  .t-prev { left: -40px; }
  .t-next { right: -40px; }
  .t-mask{width:40px}
  .t-prev{left:4px} .t-next{right:4px}
  .t-nav{width:36px;height:36px;font-size:1.2rem}
}

/* PRICING */
.pricing{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:28px}
.price-card{flex:1 1 300px;max-width:340px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:16px;padding:28px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s,border-color .25s,box-shadow .25s}
.price-card:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:0 0 16px var(--ring)}
.price-card h3{margin-top:0;text-align:center;color:var(--text)}
.price{font-size:1.9rem;margin:.4rem 0 1.2rem;color:var(--text);text-align:center}
.price-card ul{margin:0 0 1.2rem;padding-left:1.2rem;color:var(--soft)}
.price-card .btn{margin-top:auto;text-align:center}
.featured{outline:2px solid var(--brand);box-shadow:0 0 0 6px var(--ring)}

/* CTA & FORM */
.cta{background:radial-gradient(800px 420px at 8% 8%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 42%)}
.cta .container{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:40px}
.form{background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:14px;padding:24px;box-shadow:var(--shadow);max-width:480px;margin:auto}
.form label{display:block;margin:.6rem 0 .25rem}
.form input[type="text"],.form input[type="email"]{width:100%;padding:.85rem;border-radius:10px;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:color-mix(in srgb,var(--muted) 80%,transparent);color:var(--text)}
.form input:focus{outline:2px solid var(--brand);box-shadow:0 0 0 4px var(--ring)}
.checkbox{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0}
.form-msg{margin-top:.6rem;font-size:.95rem}

/* FAQ */
.faq-list{max-width:760px;margin-inline:auto;text-align:left}
.faq-list details{background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0;box-shadow:var(--shadow)}
.faq-list summary{list-style:none;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:.6rem;color:var(--text)}
.faq-list summary::before{content:"▸";transform:translateY(-1px);opacity:.8}
.faq-list details[open] summary::before{content:"▾"}
.faq-list p{color:var(--soft);margin:.6rem 0 0}

/* FOOTER */
.site-footer{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);margin-top:44px;background:color-mix(in srgb,var(--bg) 96%,transparent)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-inner a{color:var(--soft);text-decoration:none}
.footer-inner a:hover{color:var(--text)}

/* RESPONSIVE FIXES */
html,body{overflow-x:hidden}
@media (max-width:960px){.pricing{display:grid;grid-template-columns:1fr;gap:24px}}
@media (max-width:880px){
  .hero .grid-2{grid-template-columns:1fr;gap:22px}
  .hero-copy{text-align:center}
  .cta-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .trust-badges{justify-content:center}
  .hero-visual{align-items:center}
  .stat-card{position:static;margin-top:12px}
  .cta .container{grid-template-columns:1fr;text-align:center}
  .section .container{text-align:center}
  .cards,.pricing{justify-items:center}
  .price-card{margin-inline:auto;max-width:560px}
  .site-nav{right:12px;left:auto;max-width:calc(100vw - 24px)}
}
@media (max-width:480px){.btn.btn-block,.price-card .btn{width:100%}}