/* ============================================================
   EAku.ai - Design System v1.0
   Sumber tunggal untuk seluruh halaman.
   Aturan: warna, font, radius, shadow HANYA dari file ini.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Aksen ruby (dipakai hemat ~10% - "permata") */
  --ruby: #E8244A;
  --ruby-dark: #C71D3D;

  /* Netral (tulang punggung ~90%) */
  --white: #FFFFFF;
  --offwhite: #F7F7F9;
  --ink: #0E0B1A;
  --text-secondary: #6B6B76;
  --border: #EAEAEF;

  /* Section gelap (momen dramatis) */
  --navy: #0E0B1A;
  --plum: #141024;

  /* Bentuk */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadow lembut */
  --shadow-sm: 0 1px 2px rgba(14, 11, 26, 0.04), 0 2px 8px rgba(14, 11, 26, 0.04);
  --shadow: 0 4px 12px rgba(14, 11, 26, 0.06), 0 12px 32px rgba(14, 11, 26, 0.06);
  --shadow-ruby: 0 8px 24px rgba(232, 36, 74, 0.28);

  /* Layout */
  --maxw: 1120px;
  --gutter: 24px;

  /* Type scale */
  --fs-hero: clamp(2.4rem, 6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;   /* ~17px */
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.8125rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(80px, 12vw, 140px); }
.section--tight { padding-block: clamp(48px, 7vw, 80px); }
.hero { padding-block: clamp(100px, 15vw, 180px); }

.section--offwhite { background: var(--offwhite); }

/* Section gelap dramatis */
.section--dark {
  background: radial-gradient(120% 140% at 50% 0%, var(--plum) 0%, var(--navy) 60%);
  color: var(--white);
  position: relative;
}
/* transisi tepi halus: fade lembut di batas atas & bawah */
.section--dark::before,
.section--dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}
.section--dark::before { top: 0; background: linear-gradient(180deg, rgba(14,11,26,0.5), transparent); }
.section--dark::after { bottom: 0; background: linear-gradient(0deg, rgba(14,11,26,0.4), transparent); }
.section--dark .container { position: relative; z-index: 2; }
.section--dark .eyebrow { color: rgba(255,255,255,0.6); }
.section--dark .section-lead { color: rgba(255,255,255,0.72); }

/* ---------- Typography ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.section-title { font-size: var(--fs-h2); font-weight: 700; }

.section-lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 44ch;
  margin-top: 16px;
}

.text-ruby { color: var(--ruby); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .3s cubic-bezier(0.22,1,0.36,1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Primer ruby */
.btn--primary {
  background: var(--ruby);
  color: var(--white);
  box-shadow: var(--shadow-ruby);
}
.btn--primary:hover { background: var(--ruby-dark); }

/* Sekunder outline (light bg) */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--outline:hover { border-color: var(--ink); }

/* Sekunder outline di atas section gelap */
.section--dark .btn--outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.28);
}
.section--dark .btn--outline:hover { border-color: rgba(255,255,255,0.7); }

/* Prominent ruby-outline CTA (e.g. Minta Akun Pantau) */
.btn--accent {
  background: rgba(232,36,74,0.08);
  color: var(--ruby);
  border: 1.5px solid var(--ruby);
}
.btn--accent:hover {
  background: var(--ruby);
  color: var(--white);
  border-color: var(--ruby);
}
.section--dark .btn--accent {
  color: #ff6b86;
  border-color: var(--ruby);
  background: rgba(232,36,74,0.12);
}
.section--dark .btn--accent:hover {
  color: var(--white);
  background: var(--ruby);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand .dot-ai { color: var(--ruby); }

.nav-desktop { display: none; gap: 28px; }
.nav-desktop a { font-size: var(--fs-small); color: var(--text-secondary); font-weight: 500; transition: color .15s; }
.nav-desktop a:hover { color: var(--ink); }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 10px 18px; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--gutter) 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: 12px 4px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--border); }
.nav-mobile a:last-child { border-bottom: none; }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  /* Tiga blok: brand | nav | cta, dipisah space-between dari .header-inner.
     Nav tidak melebar (flex:0), jadi tidak menabrak logo maupun CTA. */
  .header-inner { gap: clamp(14px, 1.6vw, 32px); }
  .brand { flex: 0 0 auto; }
  .header-cta { flex: 0 0 auto; }
  .nav-desktop {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(12px, 1.3vw, 24px);
  }
  .nav-desktop a {
    white-space: nowrap;
    font-size: 0.875rem;
  }
}
/* Layar lega: nav sedikit lebih besar & lapang */
@media (min-width: 1280px) {
  .nav-desktop a { font-size: 0.92rem; }
  .nav-desktop { gap: clamp(16px, 1.5vw, 26px); }
}

/* ---------- Hero ---------- */
.hero { text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 7px 16px; border-radius: var(--radius-pill);
  margin-bottom: 28px;
}
.hero-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); box-shadow: 0 0 0 0 rgba(232,36,74,0.6); animation: pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); }
                  50%   { opacity:0.45; transform:scale(0.82); } }

.hero h1 { font-size: var(--fs-hero); font-weight: 700; }
.hero-lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.3rem);
  color: rgba(255,255,255,0.72);
  max-width: 40ch; margin: 20px auto 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Feature grid (value prop / why) ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s cubic-bezier(0.22,1,0.36,1);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(232,36,74,0.08); color: var(--ruby);
  margin-bottom: 18px;
}
.card h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.card p { color: var(--text-secondary); font-size: var(--fs-small); }

/* Kartu di atas section gelap */
.section--dark .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.section--dark .card p { color: rgba(255,255,255,0.65); }
.section--dark .card h3 { color: var(--white); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 20px; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 8px; }
.step-num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink); color: var(--white);
  font-weight: 700; font-size: 1.05rem; margin-bottom: 16px;
}
.step h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.step p { color: var(--text-secondary); font-size: var(--fs-small); }

/* ---------- Product teaser ---------- */
.teaser {
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-start;
}
@media (min-width: 800px) {
  .teaser { flex-direction: row; align-items: center; justify-content: space-between; }
}
.teaser-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  font-size: var(--fs-small); font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 14px; background: var(--white);
}

/* ---------- CTA band (webinar) ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--fs-h2); }
.cta-band .section-lead { margin-inline: auto; }
.cta-band .hero-actions { margin-top: 32px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding-block: 56px 32px;
  font-size: var(--fs-small);
}
.footer-top {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-brand .brand { color: var(--white); margin-bottom: 14px; }
.footer-brand p { max-width: 34ch; color: rgba(255,255,255,0.55); }
.footer-col h4 { color: var(--white); font-size: var(--fs-small); font-weight: 600; margin-bottom: 14px; letter-spacing: 0.02em; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.6); padding: 5px 0; transition: color .15s; }
.footer-col a:hover { color: var(--white); }

.footer-disclaimer {
  margin-top: 28px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.6;
  max-width: 80ch;
}
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  align-items: center;
  justify-content: space-between;
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a { color: rgba(255,255,255,0.6); font-size: 0.8125rem; }
.footer-legal a:hover { color: var(--white); }
.footer-legal .copy { color: rgba(255,255,255,0.4); font-size: 0.8125rem; }

/* ---------- Reveal on scroll (sinematik: lambat, easing lembut) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Stagger: elemen berurutan masuk satu demi satu */
.reveal.in.stagger > * { animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal.in.stagger > *:nth-child(1) { animation-delay: 0.00s; }
.reveal.in.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.reveal.in.stagger > *:nth-child(3) { animation-delay: 0.16s; }
.reveal.in.stagger > *:nth-child(4) { animation-delay: 0.24s; }
.reveal.in.stagger > *:nth-child(5) { animation-delay: 0.32s; }
.reveal.in.stagger > *:nth-child(6) { animation-delay: 0.40s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Focus states (aksesibilitas) ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 3px;
}

/* ============================================================
   Komponen tambahan - dipakai lintas halaman
   (ditambah untuk halaman Webinar, reusable)
   ============================================================ */

/* Badge eyebrow dengan latar (untuk hero halaman dalam) */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.04em;
  padding: 8px 16px; border-radius: var(--radius-pill);
}
.pill--ruby { background: rgba(232,36,74,0.1); color: var(--ruby); }
.section--dark .pill--ruby { background: rgba(232,36,74,0.16); color: #ff5b78; }

/* Kartu batch (jadwal + harga) */
.batch-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
  max-width: 640px;
  margin-inline: auto;
}
.batch-meta {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.batch-meta-item { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.batch-meta-item svg { color: var(--ruby); flex-shrink: 0; }
.batch-meta-item small { display: block; font-weight: 500; color: var(--text-secondary); font-size: 0.8125rem; }

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 8px; }
.price-old { font-size: 1.25rem; color: var(--text-secondary); text-decoration: line-through; }
.price-now { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; color: var(--ruby); letter-spacing: -0.02em; }
.price-tag {
  font-size: var(--fs-small); font-weight: 600; color: var(--ruby);
  background: rgba(232,36,74,0.1); padding: 6px 12px; border-radius: var(--radius-pill);
}
.batch-card .btn { width: 100%; margin-top: 24px; }

/* Daftar materi bercentang */
.checklist { display: grid; gap: 16px; }
@media (min-width: 680px) { .checklist { grid-template-columns: 1fr 1fr; gap: 20px 32px; } }
.check-item { display: flex; gap: 14px; align-items: flex-start; }
.check-item .tick {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(232,36,74,0.1); color: var(--ruby);
  display: grid; place-items: center; margin-top: 1px;
}
.check-item p { font-weight: 500; }
.section--dark .check-item p { color: rgba(255,255,255,0.85); }

/* Tiga pilar mini */
.pillars { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--white);
}
.pillar .icon-sm { color: var(--ruby); flex-shrink: 0; }
.pillar strong { display: block; font-size: 1.0625rem; }
.pillar small { color: var(--text-secondary); }

/* Kartu bonus */
.bonus-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(232,36,74,0.06), rgba(232,36,74,0.02));
  border: 1px solid rgba(232,36,74,0.2);
  border-radius: var(--radius-lg); padding: 28px;
}
.bonus-card .gift {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(232,36,74,0.12); color: var(--ruby);
  display: grid; place-items: center;
}
.bonus-card h3 { font-size: var(--fs-h3); margin-bottom: 4px; }
.bonus-card p { color: var(--text-secondary); font-size: var(--fs-small); }

/* ============================================================
   Komponen Produk - reusable
   ============================================================ */

/* Kartu produk */
.product-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .product-grid { grid-template-columns: 1fr 1fr; } }

.product-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Aksen atas kartu (garis tipis warna karakter) */
.product-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent, var(--border));
}
.product-card .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.product-card h3 { font-size: 1.35rem; }
.product-card .platform {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-secondary); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
.product-card .character { font-size: var(--fs-small); font-weight: 600; color: var(--accent, var(--ink)); margin-bottom: 14px; }
.product-card .desc { color: var(--text-secondary); font-size: var(--fs-small); margin-bottom: 22px; flex-grow: 1; }
.product-card .price-line { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px; }
.product-card .price { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.product-card .price-unit { font-size: var(--fs-small); color: var(--text-secondary); }
.product-card .btn { width: 100%; }

/* Kartu flagship (besar, menonjol) */
.flagship {
  background: linear-gradient(180deg, #fffdf6 0%, var(--white) 60%);
  border: 1px solid #f0e2b8;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.flagship::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #f5c451, #e8a13a); }
.flagship-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.06em;
  color: #b5851f; background: rgba(245,196,81,0.16);
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.flagship h3 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: 8px; }
.flagship .character { font-size: var(--fs-body); font-weight: 600; color: #b5851f; margin-bottom: 16px; }
.flagship .desc { color: var(--text-secondary); max-width: 52ch; margin-bottom: 24px; }
.flagship-foot { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.flagship .price { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.flagship .price-unit { font-size: var(--fs-small); color: var(--text-secondary); font-weight: 500; }

/* Band info (cent / transparansi) */
.info-band {
  display: flex; gap: 20px; align-items: flex-start;
  border-radius: var(--radius-lg); padding: 28px 32px;
}
.info-band .band-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; }
.info-band h3 { font-size: var(--fs-h3); margin-bottom: 4px; }
.info-band p { font-size: var(--fs-small); }

.info-band--cent { background: rgba(232,36,74,0.05); border: 1px solid rgba(232,36,74,0.16); }
.info-band--cent .band-icon { background: rgba(232,36,74,0.12); color: var(--ruby); }
.info-band--cent p { color: var(--text-secondary); }

.section--dark .info-band { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.section--dark .info-band .band-icon { background: rgba(255,255,255,0.08); color: var(--white); }
.section--dark .info-band p { color: rgba(255,255,255,0.65); }

/* ============================================================
   Halaman legal & dokumen (prose) - reusable
   ============================================================ */
.doc-hero { padding-block: clamp(48px, 8vw, 88px) clamp(32px, 4vw, 48px); }
.doc-hero h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.doc-hero .updated { color: var(--text-secondary); font-size: var(--fs-small); margin-top: 12px; }

.prose { max-width: 720px; }
.prose h2 { font-size: 1.4rem; margin-top: 40px; margin-bottom: 12px; }
.prose h3 { font-size: 1.1rem; margin-top: 24px; margin-bottom: 8px; }
.prose p { color: #3a3a44; margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 22px; color: #3a3a44; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.note {
  background: rgba(232,36,74,0.05); border: 1px solid rgba(232,36,74,0.18);
  border-radius: var(--radius); padding: 16px 20px; margin: 20px 0;
  font-size: var(--fs-small); color: #3a3a44;
}
.note strong { color: var(--ruby); }

/* ============================================================
   About
   ============================================================ */
.value-row { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .value-row { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Insight (kartu artikel)
   ============================================================ */
.article-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
.article-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.article-card .cat { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ruby); margin-bottom: 12px; }
.article-card h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.3; }
.article-card p { color: var(--text-secondary); font-size: var(--fs-small); flex-grow: 1; }
.article-card .read { margin-top: 16px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.empty-hint { color: var(--text-secondary); font-size: var(--fs-small); margin-top: 8px; }

/* ============================================================
   Resource (Telegram highlight)
   ============================================================ */
.tele-card {
  text-align: center; max-width: 620px; margin-inline: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 44px 32px; background: var(--white); box-shadow: var(--shadow);
}
.tele-card .tele-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 20px;
  background: rgba(232,36,74,0.1); color: var(--ruby); display: grid; place-items: center;
}
.tele-card h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.tele-card p { color: var(--text-secondary); margin-bottom: 28px; }
.resource-list { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 720px; margin: 40px auto 0; }
@media (min-width: 680px) { .resource-list { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Webinar - grid dua batch
   ============================================================ */
.batch-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .batch-grid { grid-template-columns: 1fr 1fr; } }
.batch-card { margin-inline: 0; max-width: none; }
.batch-label {
  display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ruby);
  background: rgba(232,36,74,0.1); padding: 6px 14px;
  border-radius: var(--radius-pill); margin-bottom: 20px;
}
.batch-meta--stack { flex-direction: column; gap: 14px; }

/* ============================================================
   Artikel (Insight detail) - layout premium, reusable
   ============================================================ */
.article-hero { padding-block: clamp(40px, 6vw, 72px) 0; }
.article-hero .container { max-width: 760px; }
.article-cat {
  display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ruby);
  margin-bottom: 18px;
}
.article-title {
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 24px;
}
.article-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-bottom: 28px; margin-bottom: 0;
  color: var(--text-secondary); font-size: var(--fs-small);
  border-bottom: 1px solid var(--border);
}
.article-byline .author { font-weight: 600; color: var(--ink); }
.article-byline .sep { color: var(--border); }

.article-figure { margin: 32px 0 8px; }
.article-figure .ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.article-figure .ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-body { max-width: 760px; margin-inline: auto; padding-block: 8px 24px; }
.article-body .lead {
  font-size: clamp(1.2rem, 2.6vw, 1.4rem); line-height: 1.5;
  color: var(--ink); font-weight: 500; margin: 32px 0;
}
.article-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.75rem); letter-spacing: -0.01em;
  margin: 44px 0 16px;
}
.article-body p { font-size: 1.125rem; line-height: 1.75; color: #2f2f38; margin-bottom: 20px; }
.article-body ul { margin: 0 0 24px 4px; list-style: none; }
.article-body li {
  font-size: 1.125rem; line-height: 1.7; color: #2f2f38;
  padding-left: 28px; position: relative; margin-bottom: 12px;
}
.article-body li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ruby);
}
.article-divider { height: 1px; background: var(--border); border: none; margin: 44px 0; }

/* CTA elegan dalam artikel */
.article-cta {
  background: radial-gradient(120% 140% at 50% 0%, var(--plum) 0%, var(--navy) 70%);
  color: var(--white); border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 48px); text-align: center; margin: 48px 0;
}
.article-cta h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 12px; letter-spacing: -0.01em; }
.article-cta p { color: rgba(255,255,255,0.72); max-width: 48ch; margin: 0 auto 28px; font-size: 1.0625rem; }

/* Blok Tentang Penulis */
.author-box {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--offwhite); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; margin: 44px 0;
}
.author-box .avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center; font-weight: 700; font-size: 1.25rem;
}
.author-box .who { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.author-box .role { color: var(--ruby); font-size: var(--fs-small); font-weight: 600; margin-bottom: 10px; }
.author-box p { color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.6; margin: 0; }

/* Related insights */
.related { border-top: 1px solid var(--border); padding-top: 48px; }

/* Baris fakta netral di flagship (mis. tanggal akun real) */
.flagship-fact {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); color: var(--text-secondary);
  background: rgba(14,11,26,0.03); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 24px;
}
.flagship-fact svg { color: #b5851f; flex-shrink: 0; }

/* ============================================================
   Homepage - ajakan produk ringkas + tombol mencolok
   ============================================================ */
.product-cta {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
}
.product-cta .eyebrow { justify-content: center; }

/* Tombol gelap - mencolok, setara webinar tapi beda gaya */
.btn--dark {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(14,11,26,0.22);
}
.btn--dark:hover { background: #241d3a; }

/* ============================================================
   Halaman produk - kartu lebih hidup (peningkatan)
   ============================================================ */
/* character jadi "chip" berwarna aksen */
.product-card .character {
  display: inline-block;
  background:rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.06); background:color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
/* hover lebih terasa */
.product-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card:hover { border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* harga lebih menonjol */
.product-card .price { color: var(--ink); }
.product-card .price-line { padding-top: 16px; border-top: 1px solid var(--border); margin-top: 4px; }
/* tombol kartu ikut warna aksen saat hover */
.product-card .btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* flagship character chip juga */
.flagship .character {
  display: inline-block;
  background: rgba(245,196,81,0.16);
  padding: 6px 14px; border-radius: var(--radius-pill);
}

/* ============================================================
   Badge "Segera Hadir"
   ============================================================ */
.soon-badge {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ruby); background: rgba(232,36,74,0.1);
  padding: 3px 10px; border-radius: var(--radius-pill);
  vertical-align: middle; margin-left: 6px;
  text-transform: uppercase;
}

/* ============================================================
   Homepage - 3 jalur ekosistem
   ============================================================ */
.eco-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 760px) { .eco-grid { grid-template-columns: repeat(3, 1fr); } }
.eco-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s cubic-bezier(0.22,1,0.36,1);
  display: block;
}
.eco-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.eco-card .eco-num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink); color: var(--white);
  font-weight: 700; margin-bottom: 16px;
}
.eco-card.soon { border-color: rgba(232,36,74,0.3); background: linear-gradient(180deg, #fff5f7 0%, var(--white) 60%); }
.eco-card.soon .eco-num { background: var(--ruby); }
.eco-card h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.eco-card p { color: var(--text-secondary); font-size: var(--fs-small); }

/* Kartu ekosistem di atas section gelap */
.section--dark .eco-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.section--dark .eco-card h3 { color: var(--white); }
.section--dark .eco-card p { color: rgba(255,255,255,0.65); }
.section--dark .eco-card.soon {
  background: rgba(232,36,74,0.08);
  border-color: rgba(232,36,74,0.35);
}
.section--dark .eco-card .eco-num { background: rgba(255,255,255,0.12); }
.section--dark .eco-card.soon .eco-num { background: var(--ruby); }

/* ============================================================
   Homepage - highlight webinar (pintu masuk)
   ============================================================ */
.webinar-highlight {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px;
}
@media (min-width: 760px) { .webinar-highlight { grid-template-columns: repeat(3, 1fr); } }
.wh-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); padding: 22px;
}
.wh-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(232,36,74,0.16); color: #ff5b78;
  display: grid; place-items: center;
}
.wh-item strong { display: block; color: var(--white); font-size: 1.0625rem; margin-bottom: 2px; }
.wh-item span { color: rgba(255,255,255,0.6); font-size: var(--fs-small); }

/* Langkah lanjutan - kartu A & B */
.next-steps .eco-card { display: block; }

/* ============================================================
   Trust Bar - marquee bergerak halus (murni CSS, ringan)
   ============================================================ */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(18px, 2.5vw, 24px);
  overflow: hidden;
}
.trust-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track {
  display: flex;
  width: max-content;
  animation: trust-scroll 18s linear infinite;
  will-change: transform;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}

.trust-item {
  display: flex; align-items: center; gap: 11px;
  padding-inline: 28px;
  white-space: nowrap;
  position: relative;
}
.trust-item:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 30px; background: var(--border);
}
.trust-ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--offwhite);
  display: grid; place-items: center; color: var(--ruby); flex-shrink: 0;
}
.trust-txt { display: flex; flex-direction: column; line-height: 1.25; }
.trust-txt strong { font-size: 0.9375rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.trust-txt span { font-size: 0.8125rem; color: var(--text-secondary); }

@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* hormati preferensi kurangi gerakan */
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
}

/* ============================================================
   Founder Credentials - penguat kepercayaan (ringkas, tenang)
   ============================================================ */
.credibility { max-width: 680px; }
.credibility-statement {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
}
.credibility-statement strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   Eco card - teks aksi (affordance halus, Gaya 2)
   ============================================================ */
.eco-action {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-size: 0.875rem; font-weight: 600; color: var(--text-secondary);
  transition: color .18s ease, gap .18s ease;
}
.eco-action svg { transition: transform .18s ease; }
.eco-card:hover .eco-action { color: var(--ruby); gap: 9px; }
.eco-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d5d5de; }
.eco-card.soon:hover { border-color: rgba(232,36,74,0.4); }

/* ============================================================
   Homepage - Peta Ekosistem (5 jalur)
   Tenang, banyak white space. Baris terakhir jadi lebar (Institute).
   ============================================================ */
.path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 44px;
}
@media (min-width: 720px) {
  .path-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Institute membentang penuh sebagai penutup/fondasi */
  .path-card--wide { grid-column: 1 / -1; }
}

.path-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s cubic-bezier(0.22,1,0.36,1), border-color .3s ease;
}
.path-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: #d5d5de;
}

.path-ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(232,36,74,0.08);
  color: var(--ruby);
  display: grid; place-items: center;
}
.path-body { flex: 1; min-width: 0; }
.path-body h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.path-body p { color: var(--text-secondary); font-size: var(--fs-small); }

.path-go {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-secondary);
  transition: transform .18s ease, color .18s ease;
}
.path-card:hover .path-go { color: var(--ruby); transform: translateX(3px); }

/* Kartu webinar (lead) diberi sedikit penegasan - tetap tenang */
.path-card--lead {
  border-color: rgba(232,36,74,0.22);
  background: linear-gradient(180deg, #fff5f7 0%, var(--white) 55%);
}

/* Kartu Institute (fondasi) - netral gelap tipis, terasa "menaungi" */
.path-card--wide {
  background: var(--offwhite);
  align-items: center;
}
.path-card--wide .path-ic { background: rgba(14,11,26,0.06); color: var(--ink); }

/* ============================================================
   Homepage - Institute band (fondasi kepercayaan)
   ============================================================ */
.institute-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(232,36,74,0.05) 0%, transparent 55%),
    var(--white);
}
@media (min-width: 820px) {
  .institute-band { grid-template-columns: 1.5fr 1fr; gap: 48px; }
}
.institute-band .section-title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }

.institute-pillars {
  list-style: none;
  display: grid;
  gap: 14px;
}
.institute-pillars li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 500;
  color: var(--ink);
  font-size: var(--fs-small);
}
.institute-pillars li span {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--ruby);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Rantai Robot → Investor Password → Copy Trade
   ============================================================ */
.chain {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 44px;
}
@media (min-width: 760px) {
  .chain { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
}
.chain-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.chain-node strong { font-size: 1.0625rem; letter-spacing: -0.01em; }
.chain-node small { color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.45; }
.chain-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(232,36,74,0.08); color: var(--ruby);
  display: grid; place-items: center; margin-bottom: 8px;
}
.chain-arrow {
  display: grid; place-items: center;
  color: var(--text-secondary);
  padding: 4px;
  transform: rotate(90deg);
}
@media (min-width: 760px) { .chain-arrow { transform: none; } }
.chain-caption {
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  max-width: 60ch;
}

/* ============================================================
   Institute band varian solid - pemisah tegas dari peta ekosistem
   ============================================================ */
.institute-home { border-top: 1px solid var(--border); }
.institute-band--solid {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Trust strip - fakta institusional (korporat, tenang)
   ============================================================ */
.trust-strip-sec { border-bottom: 1px solid var(--border); }
.trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
}
@media (min-width: 760px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--ruby);
}
.trust-stat strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.trust-stat span { color: var(--text-secondary); font-size: var(--fs-small); }
.trust-founder {
  margin-top: 32px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.trust-founder strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   Journey - garis perjalanan ekosistem (ringkas, elegan)
   ============================================================ */
.journey {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  margin: 40px 0 8px;
  padding: 0;
  counter-reset: j;
}
.journey li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
}
.journey li span {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  white-space: nowrap;
}
.journey li:not(:last-child)::after {
  content: "";
  width: 18px; height: 1px;
  background: var(--border);
}
@media (max-width: 520px) {
  .journey li:not(:last-child)::after { width: 12px; }

  /* Hero muat satu layar HP */
  .hero { padding-block: 18px 18px; }
  .hero-verbs { font-size: clamp(1.5rem, 6.2vw, 2.1rem); line-height: 1.1; }
  .hero-badge { margin-bottom: 12px; }
  .hero-proof { margin-top: 16px !important; padding: 15px 16px !important; }
  .hero-proof p:first-child { font-size: 0.92rem !important; line-height: 1.4 !important; }
  .hero-proof .btn, .hero-proof a[href*="myfxbook"] { font-size: 0.82rem !important; }
  .hero-actions .btn { flex: 1 1 auto; }
  /* teks pendukung dikecilkan, urutan visual dijaga */
  .hero-note { font-size: 0.8rem !important; margin-top: 14px !important; }
  .scroll-cue { display: none; }
}

/* ============================================================
   Pasangan tombol Myfxbook - selalu sejajar & presisi
   ============================================================ */
.myfx-pair {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.myfx-pair > a {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.myfx-pair--center { justify-content: center; }
@media (max-width: 380px) {
  .myfx-pair > a { font-size: 0.82rem; padding-inline: 12px; }
}

/* ============================================================
   Insight line - satu baris ringkas
   ============================================================ */
.insight-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--offwhite);
}
.insight-line span { color: var(--text-secondary); font-size: var(--fs-small); }
.insight-line a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: var(--fs-small); color: var(--ink);
  white-space: nowrap;
  transition: gap .18s ease, color .18s ease;
}
.insight-line a:hover { color: var(--ruby); gap: 9px; }

/* ============================================================
   Footer - mission line korporat
   ============================================================ */
.footer-lead {
  padding-bottom: 40px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-mission {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
  max-width: 22ch;
}

/* ============================================================
   Hero - 4 kata kerja sinematik (muncul satu per satu)
   ============================================================ */
.hero-verbs {
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero-verbs .verb {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: verb-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-verbs .verb:nth-child(1) { animation-delay: 0.25s; }
.hero-verbs .verb:nth-child(2) { animation-delay: 0.55s; }
.hero-verbs .verb:nth-child(3) { animation-delay: 0.85s; }
.hero-verbs .verb:nth-child(4) { animation-delay: 1.15s; }
@keyframes verb-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Lead & tombol muncul setelah kata terakhir - koreografi */
.hero-lead--late { transition-delay: 1.5s; }
.hero-actions--late { transition-delay: 1.7s; }

@media (prefers-reduced-motion: reduce) {
  .hero-verbs .verb { opacity: 1; transform: none; animation: none; }
  .hero-lead--late, .hero-actions--late { transition-delay: 0s; }
}

/* ============================================================
   Trust - narasi dulu, data kemudian
   ============================================================ */
.trust-claims {
  margin-top: 24px;
  display: grid;
  gap: 16px;
  max-width: 60ch;
}
.trust-claims p {
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-secondary);
  padding-left: 20px;
  border-left: 2px solid var(--ruby);
}

/* ============================================================
   Eco → Institute note (benang Institute di ekosistem)
   ============================================================ */
.eco-institute-note {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 16px 24px;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-align: center;
}
.eco-institute-note svg { color: var(--ruby); flex-shrink: 0; }
.eco-institute-note a { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--ruby); }
.eco-institute-note a:hover { color: var(--ruby); }

/* Institute tagline (di section Institute) */
.institute-tagline {
  color: var(--ruby);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-top: 10px;
  line-height: 1.45;
}

/* footer contact block */
.footer-contact { margin-top: 16px; font-size: 0.8125rem; line-height: 1.7; color: rgba(255,255,255,0.5); }
.footer-contact a { color: rgba(255,255,255,0.7); }
.footer-contact a:hover { color: var(--white); }

/* Trust strip di dalam section narasi - beri jarak dari klaim */
.trust-narrative .trust-strip { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--border); }

/* ============================================================
   Scroll cue - undangan halus untuk turun (muncul setelah hero)
   ============================================================ */
.scroll-cue {
  width: 26px; height: 42px;
  margin: 56px auto 0;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
  opacity: 0;
  animation: cue-appear 1s ease forwards;
  animation-delay: 2s;
}
.scroll-cue span {
  width: 3px; height: 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.6);
  animation: cue-bob 1.8s cubic-bezier(0.5,0,0.5,1) infinite;
  animation-delay: 2.6s;
}
@keyframes cue-appear { to { opacity: 1; } }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(12px); opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { opacity: 1; animation: none; }
  .scroll-cue span { animation: none; }
}

/* ============================================================
   Gerakan - band ajakan Robotkan Strategimu
   ============================================================ */
.movement-band {
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(232,36,74,0.18), transparent 60%),
    var(--ink, #0e0b1a);
  text-align: center;
}
.movement-inner { max-width: 760px; margin: 0 auto; }
.movement-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: 100px;
  border: 1px solid rgba(232,36,74,0.5);
  background: rgba(232,36,74,0.1);
  color: #ff8fa3; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 24px;
}
.movement-tag .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); box-shadow: 0 0 0 0 rgba(232,36,74,0.6); animation: pulse 2.4s infinite; }
.movement-title {
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  color: #fff; margin-bottom: 24px;
}
.movement-mission {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.55; color: rgba(255,255,255,0.9);
  max-width: 60ch; margin: 0 auto 16px;
}
.movement-sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.6; color: rgba(255,255,255,0.6);
  max-width: 56ch; margin: 0 auto;
}

/* ============================================================
   Halaman Gerakan
   ============================================================ */
.movement-hero { text-align: center; }
.movement-hero .movement-tag { margin-bottom: 24px; }
.movement-hero-title {
  font-size: clamp(2.8rem, 11vw, 5.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: #fff; margin-bottom: 24px;
}
.movement-hero .hero-lead { margin-left: auto; margin-right: auto; }

.movement-cycle {
  display: grid; gap: 14px; margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cycle-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.cycle-step .cycle-num {
  font-size: 0.85rem; font-weight: 800; color: var(--ruby);
  letter-spacing: 1px; flex-shrink: 0; padding-top: 2px;
}
.cycle-step p { margin: 0; color: rgba(255,255,255,0.9); font-size: 0.98rem; line-height: 1.5; }

.movement-manifesto {
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 600; line-height: 1.5; letter-spacing: -0.01em;
  color: #fff;
}
.movement-manifesto strong { color: var(--ruby); }

/* ============================================================
   Perbaikan kontras teks (keterbacaan di latar gelap & terang)
   ============================================================ */
/* Prose di dalam section gelap: teks harus terang, bukan abu gelap */
.section--dark .prose p,
.section--dark .prose li { color: rgba(255,255,255,0.86); }
.section--dark .prose strong { color: #fff; }
.section--dark .prose h2,
.section--dark .prose h3 { color: #fff; }

/* Naikkan kontras teks pendukung di section gelap */
.section--dark .section-lead { color: rgba(255,255,255,0.85); }
.section--dark .eyebrow { color: rgba(255,255,255,0.72); }

/* Teks sekunder di latar terang: sedikit lebih gelap agar lebih terbaca */
:root { --text-secondary: #55555f; }

/* Footer (latar gelap): naikkan keterbacaan */
.footer-brand p { color: rgba(255,255,255,0.72) !important; }
.footer-bottom,
.footer-legal .copy { color: rgba(255,255,255,0.6) !important; }
.footer-legal a { color: rgba(255,255,255,0.75) !important; }

/* Movement page: pastikan paragraf & sub terang */
.movement-sub { color: rgba(255,255,255,0.78) !important; }

/* ============================================================
   Penyempurnaan Tipografi Premium (Tech-luxury, Apple/Tesla style)
   ============================================================ */
:root {
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Rendering lebih halus */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
}

/* Judul besar: pakai display font, tracking rapat, tebal terkontrol */
h1, h2, h3, .section-title, .hero h1, .hero-verbs,
.movement-title, .movement-hero-title, .movement-manifesto {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
}

/* Hero headline: presisi, tidak terlalu "blok", lebih lega */
.hero h1, .hero-verbs {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

/* Section title lebih elegan */
.section-title {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* Eyebrow / label kecil: spasi lega, halus (khas premium) */
.eyebrow, .movement-tag, .batch-label {
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Body lebih nyaman dibaca & terasa mahal: sedikit lebih longgar */
body { letter-spacing: -0.006em; }
.hero-lead, .section-lead { font-weight: 400; letter-spacing: -0.01em; }

/* Angka harga: tabular biar rapi & presisi */
.price-now, .price-old, .price { font-feature-settings: "tnum"; letter-spacing: -0.02em; }

/* Tombol: sedikit lebih halus, tidak terlalu tebal */
.btn { font-weight: 600; letter-spacing: -0.01em; }

/* ============================================================
   Channel perks chips
   ============================================================ */
.channel-perks { display: flex; flex-wrap: wrap; gap: 10px; }
.channel-perks .perk {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid rgba(232,36,74,0.4);
  background: rgba(232,36,74,0.08);
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem; font-weight: 500;
}
.channel-perks .perk::before {
  content: "✓"; color: var(--ruby); font-weight: 700; margin-right: 8px;
}

/* ============================================================
   Headline premium: gradient perak/metalik + highlight ruby
   ============================================================ */
.hero-verbs, .hero h1 {
  color: #ffffff; /* fallback jika gradient tidak didukung */
  background: linear-gradient(180deg, #ffffff 0%, #f0eef5 42%, #c9c6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* kedalaman halus, bukan 3D tebal */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
}
/* kata kunci ber-highlight ruby di dalam headline */
.hero-verbs .accent, .hero h1 .accent {
  color: #e8244a; /* fallback */
  background: linear-gradient(180deg, #ff5c7f 0%, #e8244a 55%, #c7223f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* section titles di latar gelap: sentuhan metalik juga */
.section--dark .section-title {
  color: #ffffff; /* fallback */
  background: linear-gradient(180deg, #ffffff 0%, #e8e6ef 55%, #cfccda 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section--dark .section-title .accent {
  background: linear-gradient(180deg, #ff5c7f, #e8244a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   Halaman Kemitraan (Bermitra dengan EAku.ai)
   ============================================================ */
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Badge row audiens (hero) */
.audience-badges {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 780px; margin: 28px auto 0;
}
.audience-badges span {
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  font-size: 0.85rem; font-weight: 500; letter-spacing: -0.01em;
}

/* Daftar benefit dengan centang (Section 5) */
.check-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
.check-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.check-item .tick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ruby); color: #fff; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700;
}
.check-item span.label { color: #fff; font-weight: 600; font-size: 0.98rem; }

/* Who-fits list (Section 6) */
.fit-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fit-list { grid-template-columns: repeat(3, 1fr); } }
.fit-item {
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--white);
  font-weight: 600; color: var(--ink); font-size: 0.95rem;
  display: flex; align-items: center; gap: 12px;
}
.fit-item::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ruby); flex: 0 0 auto;
}

/* Flow vertikal (Section 7) */
.flow { max-width: 560px; margin: 40px auto 0; display: grid; gap: 0; }
.flow-step {
  text-align: center; padding: 20px 24px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-weight: 600; font-size: 1.02rem;
}
.flow-arrow { text-align: center; color: var(--ruby); font-size: 1.3rem; padding: 8px 0; }

/* Partner highlight box */
.partner-note {
  max-width: 720px; margin: 0 auto; padding: 28px 32px;
  border-radius: 16px; border: 1px solid rgba(232,36,74,0.3);
  background: rgba(232,36,74,0.06); text-align: center;
}
.partner-note p { color: rgba(255,255,255,0.85); font-size: 1.02rem; line-height: 1.6; }

/* Check-items di section terang (offwhite) - teks gelap */
.section--offwhite .check-item {
  background: var(--white);
  border-color: var(--border);
}
.section--offwhite .check-item span.label { color: var(--ink); }

/* ============================================================
   PREMIUM POLISH v2 - kelas "brand teknologi"
   Ditambahkan di akhir agar meng-override dengan rapi.
   Prinsip: ruang lebih lega, tipografi lebih percaya diri,
   gerakan & hover lebih halus, detail lebih matang.
   ============================================================ */

/* 1) RUANG NAPAS - section lebih lega, terasa disengaja */
.section { padding-block: clamp(96px, 13vw, 168px); }
.section--tight { padding-block: clamp(56px, 8vw, 96px); }
.section-lead { margin-top: 20px; line-height: 1.65; }

/* 2) TIPOGRAFI LEBIH PERCAYA DIRI */
h1, .hero-verbs { letter-spacing: -0.035em; }
h2, .section-title { letter-spacing: -0.03em; }
.section-title { line-height: 1.08; }
.eyebrow { letter-spacing: 0.18em; font-size: 0.78rem; opacity: 0.9; }
/* judul besar dapat sedikit ruang bernapas di bawahnya */
.section-title + .section-lead { margin-top: 22px; }

/* 3) GERAKAN SCROLL LEBIH HALUS (ala Apple: naik lembut, blur tipis) */
.reveal {
  transform: translateY(30px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4) HOVER LEBIH HIDUP - tombol & kartu terangkat halus */
.btn { transition: transform .45s cubic-bezier(0.16,1,0.3,1), background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,36,74,0.36); }
.btn--outline:hover, .btn--accent:hover { transform: translateY(-2px); }
.card {
  transition: transform .5s cubic-bezier(0.16,1,0.3,1), box-shadow .5s cubic-bezier(0.16,1,0.3,1), border-color .5s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(14,11,26,0.04), 0 18px 48px rgba(14,11,26,0.10);
}
.section--dark .card:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 20px 56px rgba(0,0,0,0.36);
  border-color: rgba(255,255,255,0.18);
}
.product-card {
  transition: transform .5s cubic-bezier(0.16,1,0.3,1), box-shadow .5s cubic-bezier(0.16,1,0.3,1);
}
.product-card:hover { transform: translateY(-6px); }

/* 5) SHADOW BERLAPIS LEBIH LEMBUT (bukan bayangan keras) */
:root {
  --shadow: 0 2px 4px rgba(14,11,26,0.04), 0 8px 24px rgba(14,11,26,0.06), 0 24px 56px rgba(14,11,26,0.05);
}

/* 6) DETAIL MATANG */
/* header lebih tipis & tenang saat menempel */
.site-header { transition: background .4s ease, box-shadow .4s ease, border-color .4s ease; }
.site-header.is-stuck {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 1px 0 rgba(14,11,26,0.05), 0 8px 30px rgba(14,11,26,0.06);
}
/* garis pemisah section terang jadi hairline lembut, bukan garis tegas */
.section--offwhite { box-shadow: inset 0 1px 0 rgba(14,11,26,0.03); }
/* link dalam prose: underline halus yang tumbuh saat hover */
.prose a, .hero-note a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s cubic-bezier(0.16,1,0.3,1);
  text-decoration: none;
}
.prose a:hover, .hero-note a:hover { background-size: 100% 1px; }

/* fokus keyboard yang elegan (aksesibilitas + terlihat matang) */
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* seleksi teks berwarna brand */
::selection { background: rgba(232,36,74,0.16); color: inherit; }

/* 7) BADGE & PILL sedikit lebih halus */
.hero-badge, .pill {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 8) SECTION GELAP: glow tepi lebih dalam & sinematik */
.section--dark::before { height: 120px; background: linear-gradient(180deg, rgba(14,11,26,0.55), transparent); }
.section--dark::after { height: 120px; background: linear-gradient(0deg, rgba(14,11,26,0.45), transparent); }

/* ============================================================
   Tombol WhatsApp melayang - tenang & premium
   ============================================================ */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.34), 0 2px 6px rgba(14,11,26,0.12);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(0.16,1,0.3,1), transform .5s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease;
}
.wa-float.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(37,211,102,0.42), 0 3px 8px rgba(14,11,26,0.14);
}
.wa-float svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-float svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: opacity .3s ease; transform: none; }
  .wa-float.show { transform: none; }
}

/* ============================================================
   Harga per bulan (psikologi anchor) - besar & menonjol,
   keterangan sewa 12 bulan kecil di bawahnya
   ============================================================ */
.price-mo { display: flex; flex-direction: column; gap: 2px; }
.price-mo .amt { display: flex; align-items: baseline; gap: 6px; }
.price-mo .num { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.price-mo .per { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); }
.price-mo .sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.price-mo .sub b { color: var(--ink); font-weight: 600; }
.section--dark .price-mo .sub b, .flagship .price-mo .sub b { color: #fff; }
.product-card .price-mo .num { font-size: 1.7rem; }
.flagship .price-mo .num { font-size: 2.4rem; color: var(--ruby); }

/* ============================================================
   Detail teknis robot (spec chips) - meyakinkan tanpa ramai
   ============================================================ */
.spec-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.spec { font-size: 0.72rem; font-weight: 500; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.section--dark .spec, .flagship .spec { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.68); }
.spec b { color: var(--ink); font-weight: 600; }
.section--dark .spec b, .flagship .spec b { color: #fff; }
.spec--cent { border-color: rgba(31,191,107,0.4); color: #12a05b; background: rgba(31,191,107,0.06); }
.section--dark .spec--cent { color: #34d982; }
.flagship .spec-row { margin-bottom: 22px; }

/* ============================================================
   HALAMAN PRODUK ROBOT (v2)
   Komponen baru: timeline, kartu akun live, spec-list,
   kartu solusi, blok pengembang, FAQ, CTA empat tombol.
   Semua memakai token yang sudah ada. Tidak mengubah gaya lama.
   ============================================================ */

/* ---------- Baris verifikasi di hero ---------- */
.verify-box {
  max-width: 620px;
  margin: 26px auto 0;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  text-align: left;
}
.verify-box p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.82); }
.verify-box p strong { color: #fff; font-weight: 700; }
.verify-box .verify-head {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1FBF6B; margin-bottom: 12px;
}
.verify-box .verify-head .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1FBF6B;
  box-shadow: 0 0 10px rgba(31,191,107,0.8);
}

/* ---------- Angka besar di hero (klaim utama) ---------- */
.claim-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 10px; margin-top: 26px;
}
.claim {
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  font-size: 0.9rem; font-weight: 600; color: #fff;
  white-space: nowrap;
}

/* ---------- Timeline perjalanan ---------- */
.timeline {
  position: relative;
  max-width: 620px;
  margin: 46px auto 0;
  padding-left: 30px;
}
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 1px; background: linear-gradient(180deg, var(--border) 0%, rgba(232,36,74,0.45) 100%);
}
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--offwhite); border: 1px solid var(--border);
}
.tl-item::after {
  content: ""; position: absolute; left: -25.5px; top: 9.5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary);
}
.tl-item--live::after { background: var(--ruby); box-shadow: 0 0 0 4px rgba(232,36,74,0.14); }
.tl-year {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.tl-text { color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.6; margin-top: 3px; }

/* ---------- Kartu akun live ---------- */
.live-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 42px; }
@media (min-width: 620px) { .live-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .live-grid { grid-template-columns: repeat(3, 1fr); } }

.live-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  padding: 24px;
  display: flex; flex-direction: column;
  transition: border-color .4s ease, transform .5s cubic-bezier(0.16,1,0.3,1);
}
.live-card:hover { border-color: rgba(255,255,255,0.24); transform: translateY(-4px); }
.live-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #34d982; margin-bottom: 14px;
}
.live-status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #1FBF6B;
  box-shadow: 0 0 0 0 rgba(31,191,107,0.6); animation: pulse 2.4s infinite;
}
.live-card h3 { font-size: 1.2rem; color: #fff; margin-bottom: 6px; }
.live-since { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.live-cap {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: #fff;
  margin-top: 14px; font-feature-settings: "tnum";
}
.live-cap small { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); margin-top: 2px; }
.live-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.live-tag {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.72);
}
.live-tag--mt { border-color: rgba(255,255,255,0.28); color: #fff; }
.live-tag--fx { border-color: rgba(31,191,107,0.45); color: #34d982; background: rgba(31,191,107,0.08); }
.live-card .btn { width: 100%; margin-top: 20px; }
.live-foot { margin-top: 18px; flex-grow: 1; display: flex; align-items: flex-end; }
.live-foot .btn { margin-top: 0; }

/* ---------- Kartu solusi (3 jalur) ---------- */
.solution-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 800px) { .solution-grid { grid-template-columns: repeat(3, 1fr); } }
.solution-card { display: flex; flex-direction: column; }
.solution-card p { flex-grow: 1; margin-bottom: 24px; }
.solution-card .btn { width: 100%; }

/* ---------- Spesifikasi baris (kartu produk) ---------- */
.spec-list { margin: 4px 0 22px; border-top: 1px solid var(--border); }
.spec-list .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.spec-list .k { color: var(--text-secondary); white-space: nowrap; }
.spec-list .v { font-weight: 600; text-align: right; color: var(--ink); }

/* Kartu produk utama (GF Oil Swing) melebar penuh */
@media (min-width: 720px) {
  .product-card--lead { grid-column: 1 / -1; }
  .product-card--lead .lead-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px 44px; align-items: start; }
  .product-card--lead .spec-list { margin-top: 0; }
}
.product-card--lead { background: linear-gradient(180deg, #fffdf6 0%, var(--white) 55%); border-color: #f0e2b8; }
.product-card--lead h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.lead-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.06em;
  color: #b5851f; background: rgba(245,196,81,0.16);
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.product-card--lead .price-mo .num { color: var(--ruby); font-size: 2.2rem; }

/* ---------- Blok pengembang ---------- */
.dev-block { max-width: 780px; }
.dev-name {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: #fff;
}
.dev-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dev-role {
  font-size: 0.82rem; font-weight: 600;
  padding: 9px 17px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.85);
}
.dev-note {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.72); font-size: var(--fs-small);
  line-height: 1.75; max-width: 62ch;
}
.dev-note strong { color: #fff; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-top: 44px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 46px 22px 0;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em;
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ruby); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s cubic-bezier(0.22,1,0.36,1), border-color .25s ease;
}
.faq details[open] summary { color: var(--ruby); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); border-color: var(--ruby); }
.faq .faq-a {
  padding: 0 40px 24px 0; margin-top: -4px;
  color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.75;
}
.faq .faq-a a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ruby); }
.faq .faq-a a:hover { color: var(--ruby); }

/* ---------- CTA penutup: empat tombol besar ---------- */
.cta-quad {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  max-width: 760px; margin: 38px auto 0;
}
@media (min-width: 620px) { .cta-quad { grid-template-columns: 1fr 1fr; } }
.cta-quad .btn { width: 100%; padding: 20px 22px; font-size: 0.98rem; }
.cta-quad .led {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.led--green  { background: #1FBF6B; box-shadow: 0 0 10px rgba(31,191,107,0.7); }
.led--purple { background: #8b5cf6; box-shadow: 0 0 10px rgba(139,92,246,0.7); }
.led--blue   { background: #3b82f6; box-shadow: 0 0 10px rgba(59,130,246,0.7); }
.led--orange { background: #e8a13a; box-shadow: 0 0 10px rgba(232,161,58,0.7); }

/* Spesifikasi menumpuk di layar sempit supaya tidak terpotong rata kanan */
@media (max-width: 480px) {
  .spec-list .row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 0; }
  .spec-list .v { text-align: left; }
  .cta-quad .btn { padding: 18px 18px; font-size: 0.92rem; }
}

/* ============================================================
   HALAMAN COPY TRADE ROBOT (v2)
   Komponen: blok penawaran, badge instrumen, kartu robot copy,
   kartu jenis akun, daftar biaya. Memakai token yang sudah ada.
   ============================================================ */

/* ---------- Blok penawaran peluncuran (hero, gelap) ---------- */
.offer-box {
  max-width: 620px;
  margin: 24px auto 0;
  padding: 20px 22px;
  border: 1px solid rgba(232,36,74,0.35);
  border-radius: var(--radius-lg);
  background: rgba(232,36,74,0.07);
  text-align: left;
}
.offer-box .offer-head {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #ff6b86; margin-bottom: 12px;
}
.offer-box .offer-head .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ruby);
  box-shadow: 0 0 0 0 rgba(232,36,74,0.6); animation: pulse 2.4s infinite;
}
.offer-box p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.85); }
.offer-box p strong { color: #fff; font-weight: 700; }
.offer-box .offer-fine { margin-top: 10px; font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.55; }

/* ---------- Badge instrumen + karakter di kartu robot ---------- */
.robot-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-pill);
  color: var(--accent, var(--ink));
  border:1px solid rgba(255,255,255,0.18); border:1px solid color-mix(in srgb, var(--accent, var(--border)) 38%, transparent);
  background:rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.06); background:color-mix(in srgb, var(--accent, var(--border)) 9%, transparent);
  margin-bottom: 16px;
}

/* ---------- Kartu robot Copy Trade ---------- */
.copy-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .copy-grid { grid-template-columns: 1fr 1fr; } }

.copy-card .cta-stack { display: grid; gap: 10px; margin-top: 4px; }
.copy-card .cta-stack .btn { width: 100%; }
.copy-card .btn-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: var(--text-secondary);
  padding: 10px 12px; border-radius: var(--radius-pill);
  transition: color .25s ease, background .25s ease;
}
.copy-card .btn-sub:hover { color: var(--ink); background: var(--offwhite); }
.ext-ic { flex-shrink: 0; opacity: 0.9; }

/* ---------- Kartu jenis akun (Cent & Standar, bobot setara) ---------- */
.acct-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 760px) { .acct-grid { grid-template-columns: 1fr 1fr; } }
.acct-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .5s cubic-bezier(0.16,1,0.3,1), box-shadow .5s cubic-bezier(0.16,1,0.3,1);
}
.acct-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.acct-card h3 { font-size: 1.4rem; margin-bottom: 6px; }
.acct-card .acct-for { color: var(--text-secondary); font-size: var(--fs-small); margin-bottom: 22px; }
.acct-list { display: grid; gap: 0; border-top: 1px solid var(--border); margin-bottom: 20px; }
.acct-list .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.acct-list .k { color: var(--text-secondary); }
.acct-list .v { font-weight: 700; text-align: right; }
.acct-note { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; margin-top: auto; }

/* ---------- Daftar biaya layanan setelah kuota ---------- */
.fee-list { display: grid; gap: 0; margin: 26px 0 0; border-top: 1px solid rgba(255,255,255,0.12); max-width: 460px; }
.fee-list .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.95rem;
}
.fee-list .k { color: rgba(255,255,255,0.72); }
.fee-list .v { font-weight: 700; color: #fff; font-feature-settings: "tnum"; }
.section--offwhite .fee-list { border-top-color: var(--border); }
.section--offwhite .fee-list .row { border-bottom-color: var(--border); }
.section--offwhite .fee-list .k { color: var(--text-secondary); }
.section--offwhite .fee-list .v { color: var(--ink); }

/* ---------- Kartu bukti Myfxbook ---------- */
.proof-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 720px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
.proof-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  padding: 26px;
  display: flex; flex-direction: column;
  transition: border-color .4s ease, transform .5s cubic-bezier(0.16,1,0.3,1);
}
.proof-card:hover { border-color: rgba(255,255,255,0.24); transform: translateY(-4px); }
.proof-card h3 { font-size: 1.15rem; color: #fff; margin-bottom: 6px; }
.proof-card .proof-sub { font-size: 0.88rem; color: rgba(255,255,255,0.62); }
.proof-card .btn { width: 100%; margin-top: 20px; }

/* ---------- Kartu jalur ekosistem dengan penanda aktif ---------- */
.solution-card--current { border-color: rgba(232,36,74,0.4); background: linear-gradient(180deg, #fff5f7 0%, var(--white) 55%); }
.current-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ruby); background: rgba(232,36,74,0.1);
  padding: 5px 11px; border-radius: var(--radius-pill); margin-bottom: 12px;
}

/* ---------- Catatan risiko dalam kotak tenang ---------- */
.risk-note {
  margin-top: 32px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); max-width: 720px;
}
.risk-note p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }
.section--dark .risk-note { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.section--dark .risk-note p { color: rgba(255,255,255,0.68); }

/* ============================================================
   COPY TRADE v3 - pemangkasan, tenang, padat
   ============================================================ */

/* ---------- Diagram sebar: 1 akun master ke banyak follower ---------- */
.fanout { max-width: 560px; margin: 34px auto 0; }
.fan-master {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.07);
  font-size: 0.88rem; font-weight: 600; color: #fff;
}
.fan-master .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #1FBF6B;
  box-shadow: 0 0 0 0 rgba(31,191,107,0.6); animation: pulse 2.4s infinite;
}
.fan-lines { width: 100%; height: 54px; margin: 2px 0; }
.fan-lines svg { width: 100%; height: 100%; display: block; }
.fan-followers { display: flex; justify-content: space-between; gap: 8px; }
.fan-followers span {
  flex: 1 1 0; min-width: 0; text-align: center;
  padding: 11px 6px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
  font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fan-caption { margin-top: 16px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

/* ---------- Angka besar sebagai bukti utama ---------- */
.big-stat {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(3rem, 11vw, 6.5rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: 0.94;
  color: #fff; font-feature-settings: "tnum";
}
.big-stat-sub {
  margin-top: 18px; font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: rgba(255,255,255,0.78); max-width: 44ch; line-height: 1.55;
}

/* ---------- Tabel perbandingan, terbaca di HP ---------- */
.compare { margin-top: 40px; max-width: 760px; }
.compare-row {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  gap: 10px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.compare-row .lbl { color: var(--text-secondary); }
.compare-row .val { font-weight: 600; text-align: center; }
.compare-head {
  border-bottom: 1px solid var(--ink); padding-bottom: 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.compare-head .val { color: var(--ink); }
.compare-head .val.is-here { color: var(--ruby); }
.compare-row .val.is-here { color: var(--ink); }
@media (max-width: 520px) {
  .compare-row { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; text-align: left; }
  .compare-row .val { text-align: left; }
  .compare-row .val::before { content: attr(data-col) ": "; color: var(--text-secondary); font-weight: 400; }
  .compare-head { display: none; }
}

/* ---------- Journey varian gelap ---------- */
.journey--dark li { color: rgba(255,255,255,0.5); }
.journey--dark li span {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
  font-size: 0.82rem; padding: 8px 15px;
}
.journey--dark li:not(:last-child)::after { background: rgba(255,255,255,0.2); }

/* ---------- Baris penawaran ramping di hero ---------- */
.offer-line {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  font-size: 0.83rem; color: rgba(255,255,255,0.8);
}
.offer-line b { color: #fff; font-weight: 700; }
.offer-line a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* ---------- Link teks tenang, pengganti tombol sekunder ---------- */
.quiet-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.86rem; font-weight: 600; color: var(--text-secondary);
  transition: color .25s ease, gap .25s ease;
}
.quiet-link:hover { color: var(--ink); gap: 10px; }
.section--dark .quiet-link { color: rgba(255,255,255,0.66); }
.section--dark .quiet-link:hover { color: #fff; }
.quiet-row { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }

/* Kartu robot: satu CTA utama, satu link tenang */
.copy-card .cta-stack { display: grid; gap: 12px; justify-items: center; margin-top: 2px; }
.copy-card .cta-stack .btn { width: 100%; }

/* ============================================================
   HOMEPAGE v3 - tiga kondisi, bukan tiga tingkatan
   ============================================================ */
.state-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 46px; }
@media (min-width: 860px) { .state-grid { grid-template-columns: repeat(3, 1fr); } }

.state-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 30px 30px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .5s cubic-bezier(0.16,1,0.3,1), box-shadow .5s cubic-bezier(0.16,1,0.3,1), border-color .4s ease;
}
.state-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.state-card--lead { border-color: rgba(232,36,74,0.32); }
.state-quote {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  margin-bottom: 14px;
}
.state-card--lead .state-quote { color: var(--ruby); }
.state-what {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 10px;
}
.state-card p { color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.65; flex-grow: 1; margin-bottom: 22px; }
.state-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.state-meta span {
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 11px;
}
.state-card .btn { width: 100%; }

/* Baris bukti ringkas di hero */
.hero-proofline {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 22px; margin-top: 26px; padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
}
.hero-proofline span { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.82); white-space: nowrap; }
.hero-proofline .sep { color: rgba(255,255,255,0.22); font-weight: 400; }
@media (max-width: 620px) { .hero-proofline { border-radius: var(--radius-lg); gap: 8px 14px; padding: 14px 18px; } }

/* ---------- Visual bagi hasil 60 / 40 ---------- */
.split { max-width: 480px; margin-top: 30px; }
.split-bar {
  display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
}
.split-you { flex: 60; background: linear-gradient(90deg, #1FBF6B, #17a35b); }
.split-us  { flex: 40; background: rgba(255,255,255,0.16); }
.split-legend { display: flex; justify-content: space-between; margin-top: 14px; gap: 16px; }
.split-legend span { font-size: 0.85rem; color: rgba(255,255,255,0.66); }
.split-legend b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1.1; }
.split-legend span:first-child b { color: #34d982; }
.section--offwhite .split-us, .section:not(.section--dark) .split-us { background: var(--border); }

/* ============================================================
   HERO BERANDA - tipografi lebih premium
   Bobot lebih ringan, tracking lebih rapat, pemenggalan
   baris seimbang. Gradient metalik yang lama tetap dipakai.
   ============================================================ */
.hero-verbs {
  font-family: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.04;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero-verbs .accent { font-weight: 700; }

/* Kotak bukti Myfxbook di hero: lebih lapang dan tenang */
.hero-proof { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-proof p:first-child {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 500 !important;
  font-size: 1.08rem !important;
  letter-spacing: -0.018em;
  line-height: 1.5 !important;
}
.hero-proof p:first-child strong { font-weight: 700; letter-spacing: -0.02em; }
.hero-proof a { letter-spacing: -0.005em; transition: border-color .3s ease, background .3s ease; }
.hero-proof a:hover { border-color: rgba(255,255,255,0.45) !important; background: rgba(255,255,255,0.1) !important; }

/* Baris "Robotkan Strategimu" di hero */
.hero .kicker {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}

/* ============================================================
   Kartu tiga jalur - Copy Trade & Sewa naik bobot,
   Webinar tetap memimpin lewat warna tombol
   ============================================================ */
.state-card::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent, var(--border));
}
.state-card { border-color: #dcdce4; }
.state-card:hover { border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb, var(--accent, var(--ink)) 45%, var(--border)); }
.state-card .state-quote { color: var(--ink); }
.state-card--lead .state-quote { color: var(--ruby); }
/* tombol sekunder dipertegas garisnya, tanpa memakai ruby */
.state-card .btn--outline { border-color: var(--ink); color: var(--ink); }
.state-card .btn--outline:hover { background: var(--ink); color: var(--white); }

/* Kekhususan lebih tinggi supaya bobot 600 benar-benar dipakai
   (aturan .hero h1 di atas lebih spesifik daripada .hero-verbs) */
.hero h1.hero-verbs {
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.04;
}
.hero h1.hero-verbs .accent { font-weight: 700; }

/* ============================================================
   HERO BERANDA - kotak bukti & tombol Myfxbook
   Tenang, hairline netral, tombol memanjang satu baris.
   ============================================================ */
:root { --accent: #ff6b86; }   /* token yang sebelumnya belum pernah didefinisikan */

.hero-proof {
  max-width: 600px; margin: 22px auto 0; padding: 20px 22px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  text-align: left;
}
.proof-claim {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.04rem; font-weight: 500; line-height: 1.5;
  letter-spacing: -0.018em; color: rgba(255,255,255,0.9); margin: 0;
}
.proof-claim strong { color: var(--accent); font-weight: 700; }

.fx-label {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 10px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #34d982;
}
.fx-label .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #1FBF6B;
  box-shadow: 0 0 0 0 rgba(31,191,107,0.6); animation: pulse 2.4s infinite; flex-shrink: 0;
}
.fx-pair { display: flex; gap: 10px; }
.fx-btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05);
  color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(0.16,1,0.3,1);
}
.fx-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.44); transform: translateY(-1px); }
.fx-btn .fx-ic { opacity: 0.6; flex-shrink: 0; }
.fx-btn:hover .fx-ic { opacity: 1; }
.fx-note { margin: 12px 0 0; font-size: 0.72rem; line-height: 1.45; color: rgba(255,255,255,0.45); }

/* ---------- Layar pertama harus muat ---------- */
.hero { padding-block: clamp(64px, 8vw, 112px); }
@media (max-width: 560px) {
  .hero { padding-block: 22px 26px; }
  .hero h1.hero-verbs { font-size: clamp(1.6rem, 6.6vw, 2.3rem); line-height: 1.08; max-width: 22ch; }
  .hero-badge { margin-bottom: 14px; }
  .hero-proof { margin-top: 18px; padding: 16px 18px; border-radius: 16px; }
  .proof-claim { font-size: 0.95rem; line-height: 1.48; }
  .fx-label { margin: 14px 0 9px; }
  .fx-btn { padding: 11px 12px; font-size: 0.8rem; }
  .hero .kicker { margin: 18px 0 8px !important; font-size: 0.72rem; letter-spacing: 0.18em; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-note { margin-top: 14px !important; font-size: 0.78rem !important; }
}

/* Judul hero: 3 baris di desktop, lebih lega dan lebih premium */
@media (min-width: 1024px) {
  .hero h1.hero-verbs { max-width: 26ch; font-size: clamp(2.4rem, 4vw, 3.25rem); }
  .hero { padding-block: clamp(56px, 6vw, 92px); }
}

/* HP kecil (iPhone SE dan sejenisnya) */
@media (max-width: 380px) {
  .hero { padding-block: 16px 20px; }
  .hero h1.hero-verbs { font-size: 1.5rem; line-height: 1.1; }
  .hero-badge { font-size: 0.7rem; margin-bottom: 12px; }
  .hero-proof { margin-top: 14px; padding: 14px 16px; }
  .proof-claim { font-size: 0.88rem; line-height: 1.45; }
  .fx-label { margin: 12px 0 8px; font-size: 0.62rem; letter-spacing: 0.12em; }
  .fx-btn { padding: 10px 8px; font-size: 0.75rem; gap: 6px; }
  .fx-note { font-size: 0.68rem; }
  .hero .kicker { margin: 14px 0 8px !important; }
}

/* ============================================================
   HIRARKI TIPOGRAFI SERAGAM DI SELURUH HALAMAN
   Display besar memakai bobot lebih ringan (600) dengan tracking
   rapat, judul section tetap 700 karena ukurannya lebih kecil.
   Ini praktik optical sizing: makin besar huruf, makin ringan
   bobot yang dibutuhkan agar terbaca mahal.
   ============================================================ */
.hero h1 {
  font-family: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.06;
}
.hero h1 .accent { font-weight: 700; }
.dev-name, .movement-hero-title, .movement-title { font-weight: 600; letter-spacing: -0.038em; }
.big-stat { font-weight: 700; }

/* ============================================================
   HERO BERANDA v4
   Masalah sebelumnya: ruby dipakai di 8 tempat sekaligus,
   jarak antar baris judul terlalu rapat sehingga terlihat
   menumpuk, dan ada blok teks mengambang di antara kotak
   bukti dan tombol. Diperbaiki di bawah ini.
   ============================================================ */

/* Judul: jarak baris dilonggarkan, sisi kiri-kanan diberi napas */
.hero h1.hero-verbs {
  font-size: clamp(1.55rem, 4.6vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.032em;
  max-width: 24ch;
  margin-inline: auto;
}
.hero h1.hero-verbs .accent { white-space: nowrap; }

/* Kotak bukti: satu angka besar, satu kalimat penjelas, satu aksen */
.hero-proof { max-width: 560px; margin: 26px auto 0; padding: 24px 26px; }
.proof-stat {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.55rem, 5vw, 2.1rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;
  color: #fff; margin: 0;
}
.proof-sub {
  margin: 12px 0 0; font-size: 0.94rem; line-height: 1.62;
  color: rgba(255,255,255,0.64); letter-spacing: -0.005em;
}
.proof-sub strong { color: var(--accent); font-weight: 600; }
.proof-div { height: 1px; background: rgba(255,255,255,0.1); margin: 20px 0 18px; }

/* Jarak antar blok hero dibuat berirama */
.hero .hero-actions { margin-top: 28px; }
.hero .kicker {
  margin: 26px 0 0; color: var(--accent);
  font-size: 0.74rem; letter-spacing: 0.24em;
}

@media (max-width: 560px) {
  .hero h1.hero-verbs { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.2; max-width: 20ch; }
  .hero-proof { margin-top: 22px; padding: 20px 20px; }
  .proof-sub { font-size: 0.88rem; line-height: 1.58; }
  .proof-div { margin: 17px 0 15px; }
  .hero .hero-actions { margin-top: 24px; }
  .hero .kicker { margin-top: 22px !important; font-size: 0.7rem; }
}

/* Ruang hero dirapikan agar tombol utama aman di laptop 1366 dan HP 667 */
@media (min-width: 1024px) {
  .hero { padding-block: clamp(44px, 4.4vw, 72px); }
  .hero .hero-actions { margin-top: 26px; }
  .hero .kicker { margin-top: 22px; }
}
@media (max-width: 560px) {
  .hero { padding-block: 14px 22px; }
  .hero-proof { margin-top: 18px; padding: 18px 18px; }
  .hero .hero-actions { margin-top: 20px; }
}

/* ============================================================
   ARTIKEL PENGUAT DI DASAR HALAMAN LAYANAN
   Bukan pintu keluar: tiap artikel punya jalan pulang ke layanan.
   ============================================================ */
.read-next {
  display: block; max-width: 620px; margin-top: 26px;
  padding: 22px 24px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--white);
  transition: transform .45s cubic-bezier(0.16,1,0.3,1), box-shadow .45s ease, border-color .35s ease;
}
.read-next:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c9c9d4; }
.read-next .rn-eyebrow {
  display: block; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 10px;
}
.read-next .rn-title {
  display: block; font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.3; color: var(--ink);
}
.read-next .rn-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 0.83rem; font-weight: 600; color: var(--ruby);
}
.section--dark .read-next {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12);
}
.section--dark .read-next:hover { border-color: rgba(255,255,255,0.26); box-shadow: none; }
.section--dark .read-next .rn-title { color: #fff; }
.section--dark .read-next .rn-eyebrow { color: rgba(255,255,255,0.5); }
.section--dark .read-next .rn-go { color: var(--accent); }

/* Baris Telegram ramping di footer, muncul di semua halaman */
.footer-telegram {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 16px 0; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.86rem; color: rgba(255,255,255,0.62);
}
.footer-telegram a {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.32);
  transition: border-color .3s ease;
}
.footer-telegram a:hover { border-color: #fff; }

/* Semua blok di dalam hero dipusatkan, tidak ada yang menempel ke kiri */
.hero .hero-proof, .hero .myfx-pair { margin-left: auto; margin-right: auto; }
.hero .hero-note { max-width: 56ch; margin-inline: auto; }
.hero .hero-actions { justify-content: center; }

/* ============================================================
   KOMPONEN PENJUALAN (v4)
   Ditambahkan untuk memangkas keraguan pembeli:
   pemandu memilih, jangkar harga, jaminan mitra,
   dan baris akun live yang ringkas.
   ============================================================ */

/* ---------- Pemandu memilih ---------- */
.chooser{
  max-width:760px; margin:0 auto 46px;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--white); padding:26px 30px;
}
.chooser .ch-head{
  font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:16px;
}
.chooser a{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 0; border-bottom:1px solid var(--border);
  font-size:0.95rem; transition:color .25s ease;
}
.chooser a:last-child{border-bottom:none;}
.chooser a:hover{color:var(--ruby);}
.chooser .cond{color:var(--text-secondary);flex:1;}
.chooser .pick{font-weight:700;letter-spacing:-0.015em;white-space:nowrap;}
.section--dark .chooser{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);}
.section--dark .chooser a{border-bottom-color:rgba(255,255,255,0.1);color:#fff;}
.section--dark .chooser .cond{color:rgba(255,255,255,0.6);}
.section--dark .chooser .ch-head{color:rgba(255,255,255,0.5);}
@media (max-width:520px){
  .chooser{padding:22px 20px;}
  .chooser a{flex-direction:column;gap:3px;padding:11px 0;}
  .chooser .pick{white-space:normal;}
}

/* ---------- Jangkar harga di hero ---------- */
.price-anchor{
  display:inline-flex;align-items:baseline;gap:10px;
  margin-top:22px;padding:12px 22px;
  border:1px solid rgba(255,255,255,0.16);border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.04);
}
.price-anchor .lbl{font-size:0.8rem;color:rgba(255,255,255,0.55);}
.price-anchor .amt{font-size:1.05rem;font-weight:700;letter-spacing:-0.02em;color:#fff;}

/* ---------- Jaminan mitra ---------- */
.guarantee-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px;}
@media (min-width:800px){.guarantee-grid{grid-template-columns:1fr 1fr;}}
.guarantee{
  border:1px solid rgba(31,191,107,0.3); border-radius:var(--radius-lg);
  background:rgba(31,191,107,0.06); padding:32px 30px;
}
.guarantee .g-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:#1a9d59;margin-bottom:14px;
}
.guarantee .g-tag svg{flex:none;}
.guarantee h3{font-size:1.35rem;letter-spacing:-0.025em;margin-bottom:10px;}
.guarantee p{color:var(--text-secondary);font-size:var(--fs-small);line-height:1.65;}
.section--dark .guarantee{border-color:rgba(31,191,107,0.34);background:rgba(31,191,107,0.08);}
.section--dark .guarantee .g-tag{color:#34d982;}
.section--dark .guarantee h3{color:#fff;}
.section--dark .guarantee p{color:rgba(255,255,255,0.7);}

/* ---------- Baris akun live ringkas ---------- */
.live-rows{margin-top:38px;border-top:1px solid rgba(255,255,255,0.12);}
.live-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.12);
}
.live-row .dot{width:8px;height:8px;border-radius:50%;background:#1FBF6B;flex:none;
  box-shadow:0 0 0 0 rgba(31,191,107,0.6);animation:pulse 2.4s infinite;}
.live-row .nm{font-size:1.05rem;font-weight:700;letter-spacing:-0.02em;color:#fff;min-width:150px;}
.live-row .sc{font-size:0.85rem;color:rgba(255,255,255,0.55);flex:1;min-width:150px;}
.live-row .cp{font-size:1.05rem;font-weight:700;color:#fff;font-feature-settings:"tnum";}
.live-row .tg{font-size:0.72rem;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);
  border:1px solid rgba(31,191,107,0.45);color:#34d982;background:rgba(31,191,107,0.08);}
@media (max-width:560px){
  .live-row{gap:8px 14px;padding:16px 0;}
  .live-row .nm{min-width:auto;font-size:1rem;}
  .live-row .sc{flex:1 1 100%;min-width:auto;}
}

/* Hero Copy Trade: diagram dirampingkan agar tombol masuk layar pertama HP */
@media (max-width:560px){
  .hero .fanout{margin-top:24px;}
  .fan-lines{height:42px;}
  .fan-caption{margin-top:12px;font-size:0.76rem;}
  .fan-master{padding:12px 18px;font-size:0.82rem;}
  .fan-followers span{padding:9px 4px;font-size:0.72rem;}
  .hero .offer-line{margin-top:16px;padding:9px 15px;font-size:0.78rem;}
}

/* ============================================================
   HERO SEMUA HALAMAN: tombol wajib masuk layar pertama HP
   Area terlihat Safari iPhone sekitar 700px, bukan 844px.
   ============================================================ */
@media (max-width:560px){
  .hero{padding-block:14px 20px;}
  .hero h1{font-size:clamp(1.45rem,6vw,2rem) !important;line-height:1.18 !important;}
  .hero .hero-lead{font-size:0.95rem;line-height:1.55;margin-top:14px;}
  .hero .hero-proof{margin-top:16px;padding:16px 16px;}
  .hero .proof-stat{font-size:1.4rem;}
  .hero .proof-sub{font-size:0.85rem;line-height:1.5;margin-top:9px;}
  .hero .proof-div{margin:14px 0 12px;}
  .hero .fx-label{margin:0 0 8px;font-size:0.7rem;}
  .hero .fx-btn{padding:10px 8px;font-size:0.75rem;}
  .hero .fx-note{margin-top:9px;font-size:0.72rem;}
  .hero .price-anchor{margin-top:14px;padding:9px 16px;}
  .hero .hero-actions{margin-top:16px !important;gap:9px;}
  .hero .hero-note{margin-top:12px !important;font-size:0.74rem !important;}
  .hero .hero-badge{margin-bottom:12px;font-size:0.72rem;}
  .hero .kicker{margin:14px 0 6px !important;}
  .scroll-cue{display:none;}
}

/* Spesifikasi dipadatkan: baris tetap lengkap, tingginya berkurang */
.spec-list .row{padding:8px 0;font-size:0.84rem;}
.copy-card .spec-list .row{padding:7px 0;}
@media (max-width:480px){ .spec-list .row{padding:7px 0;} }

/* Kartu produk & langkah lebih rapat di HP */
@media (max-width:560px){
  .product-card{padding:24px 20px;}
  .product-card .desc{font-size:0.88rem;line-height:1.55;}
  .steps .step{padding:22px 20px;}
  .card{padding:24px 20px;}
  .section{padding-block:clamp(56px,11vw,96px);}
}

/* Hero halaman panjang (Kemitraan, About): dirapatkan sedikit lagi di HP */
@media (max-width:560px){
  .hero .pill, .hero .hero-badge{margin-bottom:10px;}
  .hero .hero-lead{margin-top:12px;}
  .hero .hero-actions{margin-top:14px !important;}
}

/* ============================================================
   PERBAIKAN: komponen bagi hasil dipakai di latar terang
   Sebelumnya hanya dirancang untuk latar gelap, sehingga
   angka 40% dan labelnya nyaris tidak terbaca.
   ============================================================ */
.split-bar{border-color:var(--border);}
.split-us{background:#d6d6de;}
.split-legend span{color:var(--text-secondary);}
.split-legend b{color:var(--ink);}
.split-legend span:first-child b{color:#12a35c;}
.split-legend span:last-child b{color:var(--ink);}

/* varian gelap tetap seperti semula */
.section--dark .split-bar{border-color:rgba(255,255,255,0.14);}
.section--dark .split-us{background:rgba(255,255,255,0.16);}
.section--dark .split-legend span{color:rgba(255,255,255,0.66);}
.section--dark .split-legend b{color:#fff;}
.section--dark .split-legend span:first-child b{color:#34d982;}

/* label di bawah angka dibuat lebih tegas */
.split-legend span{font-size:0.88rem;font-weight:600;}
.split-legend b{font-size:1.75rem;letter-spacing:-0.035em;margin-bottom:2px;}

/* ============================================================
   TIGA PORTOFOLIO MYFXBOOK
   Instrumen jadi baris utama tiap tombol, supaya terbaca
   sekilas bahwa ekosistem ini mencakup USOIL dan XAUUSD.
   ============================================================ */
.fx-trio{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.fx-trio .fx-btn{
  flex:none; width:100%;
  flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:13px 10px; white-space:normal; text-align:center;
  position:relative;
}
.fx-trio .ins{
  font-size:0.92rem; font-weight:700; letter-spacing:-0.015em; color:#fff;
  display:flex; align-items:center; gap:6px;
}
.fx-trio .det{ font-size:0.71rem; font-weight:500; color:rgba(255,255,255,0.5); letter-spacing:0; }
.fx-trio .fx-ic{ position:absolute; top:9px; right:10px; opacity:0.45; }
.fx-trio .fx-btn:hover .fx-ic{ opacity:1; }

/* penanda emas untuk akun XAUUSD, pembeda dari dua akun Oil */
.fx-btn--gold{ border-color:rgba(201,167,91,0.45); background:rgba(201,167,91,0.09); }
.fx-btn--gold:hover{ border-color:rgba(201,167,91,0.75); background:rgba(201,167,91,0.15); }
.fx-btn--gold .ins{ color:#E8C77E; }

@media (max-width:560px){
  .fx-trio{ grid-template-columns:1fr 1fr; gap:8px; }
  .fx-trio .fx-btn:last-child{ grid-column:1 / -1; }
  .fx-trio .ins{ font-size:0.86rem; }
  .fx-trio .det{ font-size:0.67rem; }
  .fx-trio .fx-btn{ padding:11px 8px; }
}

/* Kartu bukti Copy Trade: tiga kolom di layar lebar */
@media (min-width:980px){ .proof-grid{ grid-template-columns:repeat(3,1fr); } }
.proof-card--gold{ border-color:rgba(201,167,91,0.3); background:rgba(201,167,91,0.06); }
.proof-card--gold:hover{ border-color:rgba(201,167,91,0.5); }
.proof-card .ins-tag{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); margin-bottom:12px;
}
.proof-card--gold .ins-tag{ border-color:rgba(201,167,91,0.5); color:#E8C77E; background:rgba(201,167,91,0.1); }

/* ============================================================
   PORTOFOLIO MYFXBOOK: format baris
   Lebih lapang daripada tiga kolom sempit, sehingga nama robot
   dan instrumen muat bersama tanpa berdesakan.
   ============================================================ */
.fx-rows{ display:flex; flex-direction:column; gap:8px; }
.fx-row{
  display:flex; align-items:center; gap:14px;
  padding:13px 18px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.045);
  text-align:left; transition:background .3s ease, border-color .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.fx-row:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.34); transform:translateX(2px); }
.fx-row .ins{
  font-size:0.76rem; font-weight:700; letter-spacing:0.08em;
  padding:5px 11px; border-radius:var(--radius-pill); flex:none; min-width:74px; text-align:center;
  border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.85);
}
.fx-row .nm{ font-size:0.92rem; font-weight:600; color:#fff; letter-spacing:-0.015em; flex:1; min-width:0; }
.fx-row .nm small{ display:block; font-size:0.74rem; font-weight:500; color:rgba(255,255,255,0.48); margin-top:2px; letter-spacing:0; }
.fx-row .fx-ic{ flex:none; opacity:0.42; }
.fx-row:hover .fx-ic{ opacity:1; }

/* baris XAUUSD dibedakan emas */
.fx-row--gold{ border-color:rgba(201,167,91,0.4); background:rgba(201,167,91,0.08); }
.fx-row--gold:hover{ border-color:rgba(201,167,91,0.7); background:rgba(201,167,91,0.14); }
.fx-row--gold .ins{ border-color:rgba(201,167,91,0.55); color:#E8C77E; background:rgba(201,167,91,0.12); }

@media (max-width:560px){
  .fx-row{ padding:11px 14px; gap:11px; }
  .fx-row .ins{ font-size:0.7rem; min-width:66px; padding:4px 8px; }
  .fx-row .nm{ font-size:0.86rem; }
  .fx-row .nm small{ font-size:0.7rem; }
}

/* HP sangat sempit: keterangan tetap satu baris */
@media (max-width:400px){
  .fx-row{ padding:10px 12px; gap:9px; }
  .fx-row .ins{ font-size:0.72rem; min-width:60px; padding:4px 6px; letter-spacing:0.05em; }
  .fx-row .nm{ font-size:0.82rem; }
  .fx-row .nm small{ font-size:0.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ============================================================
   DAFTAR AKUN LIVE: satu daftar, tanpa pengulangan
   Baris yang punya portofolio Myfxbook langsung bisa diklik.
   ============================================================ */
a.live-row{ text-decoration:none; transition:background .3s ease, border-color .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1); }
a.live-row:hover{ background:rgba(255,255,255,0.05); transform:translateX(2px); }
.live-row .ins{
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; flex:none;
  padding:4px 9px; border-radius:var(--radius-pill); min-width:66px; text-align:center;
  border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.72);
}
.live-row .ins--gold{ border-color:rgba(201,167,91,0.5); color:#E8C77E; background:rgba(201,167,91,0.1); }
.live-row .go{ display:inline-flex; align-items:center; gap:7px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.04em; color:#34d982; flex:none; }
.live-row .go svg{ opacity:0.7; }
a.live-row:hover .go svg{ opacity:1; }
.live-row .mt{ font-size:0.7rem; font-weight:600; color:rgba(255,255,255,0.32); flex:none; }
@media (max-width:620px){
  .live-row .ins{ min-width:60px; font-size:0.63rem; }
  .live-row .go, .live-row .mt{ font-size:0.72rem; }
}

/* Daftar akun live di HP: dua baris tetap, tinggi seragam */
@media (max-width:620px){
  .live-row{
    display:grid; align-items:center;
    grid-template-columns:auto auto 1fr auto;
    grid-template-areas:
      "dot ins nama aksi"
      "sub sub sub modal";
    gap:6px 9px; padding:14px 0;
  }
  .live-row .dot{ grid-area:dot; }
  .live-row .ins{ grid-area:ins; }
  .live-row .nm{ grid-area:nama; min-width:0; font-size:0.94rem; }
  .live-row .go, .live-row .mt{ grid-area:aksi; justify-self:end; }
  .live-row .sc{ grid-area:sub; font-size:0.76rem; min-width:0; }
  .live-row .cp{ grid-area:modal; justify-self:end; font-size:0.86rem; }
}

/* ============================================================
   IKON MEDIA SOSIAL
   Tanpa tulisan, tenang, dan tidak bersaing dengan tautan lain.
   Muncul di footer setiap halaman.
   ============================================================ */
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.5);
  transition:color .3s ease, border-color .3s ease, background .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.footer-social a:hover{
  color:#fff; border-color:rgba(255,255,255,0.32);
  background:rgba(255,255,255,0.08); transform:translateY(-2px);
}
.footer-social svg{ width:17px; height:17px; display:block; }
@media (max-width:760px){ .footer-social{ margin-top:18px; } }

/* Versi di halaman About: sedikit lebih besar, tetap tenang */
.social-row{ display:flex; gap:12px; margin-top:26px; }
.social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px;
  border:1px solid var(--border); background:var(--white); color:var(--text-secondary);
  transition:color .3s ease, border-color .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease;
}
.social-row a:hover{ color:var(--ink); border-color:#c9c9d4; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.social-row svg{ width:20px; height:20px; display:block; }
.section--dark .social-row a{ border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.55); }
.section--dark .social-row a:hover{ color:#fff; border-color:rgba(255,255,255,0.34); background:rgba(255,255,255,0.09); }

/* ============================================================
   GRAFIK PERFORMA BULANAN
   Bulan naik dan bulan turun ditampilkan apa adanya.
   Angka bersumber dari company-config.js.
   ============================================================ */
.perf-grid{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:38px; }
@media (min-width:900px){ .perf-grid{ grid-template-columns:repeat(3,1fr); } }

.perf{
  border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.04); padding:24px 22px;
  display:flex; flex-direction:column;
}
.perf--gold{ border-color:rgba(201,167,91,0.3); background:rgba(201,167,91,0.06); }

.perf-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.perf-ins{
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; padding:4px 9px;
  border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.72); flex:none;
}
.perf--gold .perf-ins{ border-color:rgba(201,167,91,0.5); color:#E8C77E; background:rgba(201,167,91,0.1); }
.perf-nm{ font-size:1.02rem; font-weight:700; letter-spacing:-0.02em; color:#fff; }
.perf-sub{ font-size:0.76rem; color:rgba(255,255,255,0.45); margin-bottom:18px; }

/* batang bulanan */
.perf-chart{ display:flex; align-items:flex-end; gap:5px; height:96px; margin-bottom:6px; }
.perf-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative; }
.perf-bar{ width:100%; border-radius:3px 3px 0 0; min-height:2px; }
.perf-bar--up{ background:linear-gradient(180deg,#34d982,#1a9d59); }
.perf-bar--down{ background:linear-gradient(180deg,#ff6b86,#c81c3c); border-radius:0 0 3px 3px; }
.perf-bar--nil{ background:rgba(255,255,255,0.1); }
.perf-col .val{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:0.7rem; font-weight:700; white-space:nowrap; letter-spacing:-0.01em;
}
.perf-col .val--up{ color:#34d982; }
.perf-col .val--down{ color:#ff6b86; }
.perf-zero{ height:1px; background:rgba(255,255,255,0.14); margin-bottom:6px; }
.perf-months{ display:flex; gap:5px; }
.perf-months span{ flex:1; text-align:center; font-size:0.7rem; color:rgba(255,255,255,0.34); letter-spacing:0.02em; }
.perf-tahun{ font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.3); text-align:right; margin-top:8px; }

/* baris statistik */
.perf-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:16px;
  background:rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; }
.perf-stats div{ background:#12101d; padding:11px 12px; }
.section--offwhite .perf-stats div, .section:not(.section--dark) .perf-stats div{ background:rgba(255,255,255,0.03); }
.perf-stats b{ display:block; font-size:0.96rem; font-weight:700; letter-spacing:-0.02em; color:#fff; font-feature-settings:"tnum"; }
.perf-stats span{ display:block; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-top:2px; }
.perf-stats .dd b{ color:#ff8fa3; }

.perf-note{ font-size:0.7rem; line-height:1.5; color:rgba(255,255,255,0.38); margin-top:12px; }
.perf-cta{ margin-top:14px; }
.perf-cta a{ display:inline-flex; align-items:center; gap:7px; font-size:0.8rem; font-weight:600; color:#34d982; }
.perf--gold .perf-cta a{ color:#E8C77E; }
.perf-baru{
  display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:#E8C77E; background:rgba(201,167,91,0.14); border:1px solid rgba(201,167,91,0.34);
  padding:3px 8px; border-radius:var(--radius-pill); margin-left:8px;
}

/* ============================================================
   KARTU BUKTI UTAMA
   Satu akun forward test pertama, ditampilkan besar.
   Durasi jadi elemen terkuat, grafik bulanan jadi pendukung.
   ============================================================ */
.bukti{
  border:1px solid rgba(255,255,255,0.13); border-radius:24px;
  background:rgba(255,255,255,0.045); padding:34px 32px; margin-top:38px;
  max-width:900px;
}
.bukti-top{ display:flex; align-items:center; gap:11px; margin-bottom:20px; flex-wrap:wrap; }
.bukti-ins{
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em; padding:5px 11px;
  border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.75);
}
.bukti-nm{ font-size:1.08rem; font-weight:700; letter-spacing:-0.02em; color:#fff; }
.bukti-tag{
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:#34d982; background:rgba(31,191,107,0.1); border:1px solid rgba(31,191,107,0.34);
  padding:4px 10px; border-radius:var(--radius-pill);
}

.bukti-body{ display:grid; grid-template-columns:1fr; gap:30px; }
@media (min-width:860px){ .bukti-body{ grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:center; } }

.bukti-durasi{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:clamp(2.4rem,6.5vw,3.5rem); font-weight:700;
  letter-spacing:-0.045em; line-height:1; color:#fff;
}
.bukti-sejak{ font-size:0.92rem; color:rgba(255,255,255,0.6); margin-top:12px; line-height:1.55; }
.bukti-sejak b{ color:#fff; font-weight:600; }

.bukti-angka{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:24px;
  background:rgba(255,255,255,0.09); border-radius:12px; overflow:hidden; }
.bukti-angka div{ background:#13111f; padding:14px 15px; }
.bukti-angka b{ display:block; font-size:1.22rem; font-weight:700; letter-spacing:-0.025em; color:#fff; font-feature-settings:"tnum"; }
.bukti-angka span{ display:block; font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-top:3px; }
.bukti-angka .dd b{ color:#ff8fa3; }

.bukti-chart-wrap .lbl{
  font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.36); margin-bottom:16px;
}
.bukti-chart{ display:flex; align-items:flex-end; gap:8px; height:150px; }
.bukti-chart .perf-col .val{ font-size:0.72rem; }
.bukti-months{ display:flex; gap:8px; margin-top:8px; }
.bukti-months span{ flex:1; text-align:center; font-size:0.72rem; color:rgba(255,255,255,0.36); }

.bukti-kaki{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.bukti-kaki .ket{ font-size:0.74rem; line-height:1.55; color:rgba(255,255,255,0.4); max-width:52ch; }
.bukti-kaki a{ display:inline-flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:700; color:#34d982; white-space:nowrap; }

/* ============================================================
   OBJEK PRODUK 3D
   Satu bentuk berbeda untuk tiap robot, mengikuti karakternya.
   Seluruhnya CSS, nol file gambar, tajam di layar apa pun.
   ============================================================ */
.stage{ perspective:1100px; position:relative; display:flex; align-items:center; justify-content:center; }
.obj{ position:relative; transform-style:preserve-3d; animation:objApung 7.5s ease-in-out infinite; }
@keyframes objApung{ 0%,100%{transform:translateY(-9px);} 50%{transform:translateY(9px);} }
.obj-in{ position:absolute; inset:0; transform-style:preserve-3d; animation:objGoyang 15s ease-in-out infinite; }
@keyframes objGoyang{ 0%,100%{transform:rotateX(9deg) rotateY(-20deg);} 50%{transform:rotateX(6deg) rotateY(20deg);} }
.obj-bayang{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  width:62%; height:8%; border-radius:50%; filter:blur(9px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 72%);
  animation:objBayang 7.5s ease-in-out infinite;
}
@keyframes objBayang{ 0%,100%{transform:translateX(-50%) scaleX(0.87);opacity:0.38;}
                      50%{transform:translateX(-50%) scaleX(1.13);opacity:0.6;} }
@media (prefers-reduced-motion:reduce){
  .obj,.obj-in,.obj-bayang{ animation:none; }
  .obj-in{ transform:rotateX(8deg) rotateY(-14deg); }
}

/* ---------- 1. BOLA · GF Oil Swing ---------- */
.o-bola{
  position:absolute; inset:0; border-radius:50%;
  background:rgba(255,255,255,0.06); background:radial-gradient(38% 34% at 30% 24%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(90% 90% at 34% 28%, color-mix(in srgb,var(--c) 82%,#fff) 0%,
      color-mix(in srgb,var(--c) 60%,#0a0813) 42%, #0b0814 100%);
  box-shadow:none; box-shadow:inset -14px -18px 40px rgba(0,0,0,0.62),
    inset 6px 8px 22px color-mix(in srgb,var(--c) 40%,transparent),
    0 0 46px color-mix(in srgb,var(--c) 30%,transparent);
}
.o-bola::after{
  content:""; position:absolute; left:16%; right:16%; top:52%; height:30%;
  border-radius:50%; filter:blur(5px); opacity:0.5;
  background:rgba(255,255,255,0.06); background:linear-gradient(180deg, color-mix(in srgb,var(--c) 55%,transparent), transparent);
}

/* ---------- 2. KRISTAL · GFX Hunter ---------- */
.o-kristal{ position:absolute; inset:0; }
.o-kristal span{ position:absolute; inset:0; display:block; }
.o-kristal .f1{ clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);
  background:rgba(255,255,255,0.06); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 88%,#fff) 0%, color-mix(in srgb,var(--c) 44%,#0a0813) 58%, #090712 100%);
  filter:none; filter:drop-shadow(0 0 30px color-mix(in srgb,var(--c) 42%,transparent)); }
.o-kristal .f2{ clip-path:polygon(50% 0,100% 38%,50% 52%);
  background:rgba(255,255,255,0.06); background:linear-gradient(200deg, rgba(255,255,255,0.5), color-mix(in srgb,var(--c) 30%,transparent)); opacity:0.9; }
.o-kristal .f3{ clip-path:polygon(50% 0,0 38%,50% 52%);
  background:linear-gradient(160deg, rgba(255,255,255,0.24), rgba(0,0,0,0.34)); }
.o-kristal .f4{ clip-path:polygon(0 38%,50% 52%,50% 100%);
  background:rgba(255,255,255,0.06); background:linear-gradient(180deg, color-mix(in srgb,var(--c) 34%,transparent), rgba(0,0,0,0.55)); }

/* ---------- 3. KUBUS · GFX Predator ---------- */
.o-kubus{ position:absolute; inset:0; transform-style:preserve-3d; }
.o-kubus span{
  position:absolute; inset:0; border-radius:16px;
  border:1px solid rgba(255,255,255,0.18); border:1px solid color-mix(in srgb,var(--c) 46%,transparent);
  background:rgba(255,255,255,0.06); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 46%,#141024) 0%,
    color-mix(in srgb,var(--c) 18%,#0d0a18) 55%, #0a0812 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -18px 34px rgba(0,0,0,0.45);
}
.o-kubus .d{ transform:translateZ(var(--z)); box-shadow:none; box-shadow:inset 0 2px 0 rgba(255,255,255,0.3), 0 0 40px color-mix(in srgb,var(--c) 26%,transparent); }
.o-kubus .b{ transform:translateZ(calc(var(--z) * -1)); }
.o-kubus .ka{ transform:rotateY(90deg) translateZ(var(--z)); filter:brightness(0.72); }
.o-kubus .ki{ transform:rotateY(-90deg) translateZ(var(--z)); filter:brightness(0.62); }
.o-kubus .at{ transform:rotateX(90deg) translateZ(var(--z)); filter:brightness(1.25); }
.o-kubus .bw{ transform:rotateX(-90deg) translateZ(var(--z)); filter:brightness(0.5); }

/* ---------- 4. KEPALA · GFX Monster ---------- */

/* ---------- 5. TIGA LEMPENG · GFX Scalper Pro ---------- */
.o-lempeng{ position:absolute; inset:0; transform-style:preserve-3d; }
.o-lempeng span{
  position:absolute; left:6%; right:6%; height:26%; border-radius:14px;
  border:1px solid rgba(255,255,255,0.18); border:1px solid color-mix(in srgb,var(--c) 44%,transparent);
  background:rgba(255,255,255,0.06); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 48%,#141024) 0%,
    color-mix(in srgb,var(--c) 18%,#0d0a18) 58%, #0a0812 100%);
  box-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.26), 0 10px 26px rgba(0,0,0,0.5),
    0 0 26px color-mix(in srgb,var(--c) 22%,transparent);
}
.o-lempeng .l1{ top:10%; transform:translateZ(22px); }
.o-lempeng .l2{ top:37%; transform:translateZ(0); filter:brightness(0.86); }
.o-lempeng .l3{ top:64%; transform:translateZ(-22px); filter:brightness(0.7); }

/* ============================================================
   BERANDA v4: fokus produk
   Hero satu objek, deretan produk, tanpa paragraf panjang.
   ============================================================ */
.hero-produk{ text-align:center; padding-block:clamp(30px,5vw,64px) clamp(40px,6vw,80px); }
.hero-produk .stage{ width:min(340px,72vw); height:min(340px,72vw); margin:0 auto clamp(20px,3vw,34px); }
.hero-produk .obj{ width:100%; height:100%; }
.hero-produk h1{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:clamp(2rem,6vw,3.6rem); font-weight:600; letter-spacing:-0.04em;
  line-height:1.06; max-width:16ch; margin-inline:auto;
}
.hero-produk .kar{
  font-size:clamp(0.95rem,2.2vw,1.15rem); color:rgba(255,255,255,0.55);
  margin-top:16px; letter-spacing:-0.01em;
}
.hero-produk .harga{
  margin-top:24px; font-size:clamp(1.05rem,2.6vw,1.3rem); font-weight:700;
  letter-spacing:-0.025em; color:#fff;
}
.hero-produk .harga small{ display:block; font-size:0.76rem; font-weight:500; color:rgba(255,255,255,0.4); margin-top:5px; letter-spacing:0; }
.hero-produk .hero-actions{ margin-top:26px; justify-content:center; }
.bukti-baris{
  margin-top:22px; display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center;
  font-size:0.82rem; color:rgba(255,255,255,0.42);
}
.bukti-baris .dot{ width:7px;height:7px;border-radius:50%;background:#1FBF6B;box-shadow:0 0 10px rgba(31,191,107,.9);
  animation:pulse 2.4s infinite; flex:none; }
.bukti-baris a{ color:rgba(255,255,255,0.78); border-bottom:1px solid rgba(255,255,255,0.28); }
.bukti-baris a:hover{ color:#fff; border-color:#fff; }

/* ---------- deretan produk ---------- */
.produk-deret{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .produk-deret{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .produk-deret{ grid-template-columns:repeat(4,1fr); } }

.pcard{
  position:relative; border:1px solid var(--line-d,rgba(255,255,255,0.1)); border-radius:26px;
  background:linear-gradient(170deg,#14111f 0%,#0b0914 62%,#08060f 100%);
  padding:26px 24px 26px; display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .5s cubic-bezier(0.16,1,0.3,1), border-color .4s ease;
}
.pcard:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb,var(--c) 42%,transparent); }
.pcard::before{ content:""; position:absolute; top:-32%; right:-28%; width:86%; height:86%;
  border-radius:50%; filter:blur(58px); opacity:0.4; background:var(--c); pointer-events:none; }
.pcard .stage{ width:100%; height:170px; margin-bottom:18px; }
.pcard .obj{ width:118px; height:118px; }
.pcard .ins{ position:relative; font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--c); }
.pcard h3{ position:relative; font-size:1.24rem; font-weight:700; letter-spacing:-0.028em; color:#fff; margin-top:8px; }
.pcard .kar{ position:relative; font-size:0.82rem; color:rgba(255,255,255,0.44); margin-top:6px; }
.pcard .harga{ position:relative; margin-top:16px; font-size:1.3rem; font-weight:700; letter-spacing:-0.03em; color:#fff; }
.pcard .harga span{ font-size:0.72rem; font-weight:500; color:rgba(255,255,255,0.36); letter-spacing:0; }
.pcard .aksi{ position:relative; display:flex; gap:9px; margin-top:20px; width:100%; }
.pcard .aksi .btn{ flex:1; padding:12px 10px; font-size:0.86rem; }
.pcard--lebar{ grid-column:1 / -1; }
@media (min-width:1100px){ .pcard--lebar{ grid-column:span 4; flex-direction:row; text-align:left; gap:40px; align-items:center; padding:30px 36px; } }
@media (min-width:1100px){
  .pcard--lebar .stage{ width:210px; height:180px; margin-bottom:0; flex:none; }
  .pcard--lebar .obj{ width:140px; height:140px; }
  .pcard--lebar .isi{ flex:1; }
  .pcard--lebar .aksi{ width:auto; max-width:320px; }
}

/* Kartu produk mengurung proyeksi 3D agar tidak meluber ke luar layar.
   overflow diletakkan di kartu, bukan di .stage, supaya rantai
   preserve-3d tetap utuh dan objek tidak menjadi datar. */
.pcard{ overflow:hidden; }
.hero-produk .stage{ contain:layout paint; }

/* ---------- 6. CINCIN · Copy Trade ---------- */
/* Satu inti di tengah, gelombang menyebar keluar. Menggambarkan
   satu akun master yang tersalin ke banyak akun pengikut. */
.o-cincin{ position:absolute; inset:0; transform-style:preserve-3d; }
.o-cincin span{
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18); border:2px solid color-mix(in srgb,var(--c) 60%,transparent);
  transform:translate(-50%,-50%) rotateX(64deg) translateZ(var(--z,0));
  box-shadow:none; box-shadow:0 0 22px color-mix(in srgb,var(--c) 34%,transparent);
}
.o-cincin .c1{ width:34%; height:34%; --z:26px; border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb,var(--c) 92%,#fff); border-width:3px; }
.o-cincin .c2{ width:60%; height:60%; --z:6px; opacity:0.82; }
.o-cincin .c3{ width:86%; height:86%; --z:-14px; opacity:0.55; }
.o-cincin .c4{ width:112%; height:112%; --z:-32px; opacity:0.3; }
.o-cincin .inti{
  position:absolute; top:50%; left:50%; width:20%; height:20%; border-radius:50%;
  transform:translate(-50%,-50%) translateZ(34px);
  background:rgba(255,255,255,0.06); background:radial-gradient(40% 38% at 32% 28%, #fff 0%, color-mix(in srgb,var(--c) 82%,#fff) 40%, color-mix(in srgb,var(--c) 55%,#0a0813) 100%);
  box-shadow:none; box-shadow:0 0 34px color-mix(in srgb,var(--c) 80%,transparent);
  border:none;
}

/* ---------- 7. LIMAS · Webinar ---------- */
/* Bentuk yang menanjak, melambangkan membangun dari nol. */
.o-limas{ position:absolute; inset:0; }
.o-limas span{ position:absolute; inset:0; display:block; }
.o-limas .s1{ clip-path:polygon(50% 4%,100% 92%,0 92%);
  background:rgba(255,255,255,0.06); background:linear-gradient(160deg, color-mix(in srgb,var(--c) 86%,#fff) 0%, color-mix(in srgb,var(--c) 40%,#0a0813) 62%, #090712 100%);
  filter:none; filter:drop-shadow(0 0 30px color-mix(in srgb,var(--c) 40%,transparent)); }
.o-limas .s2{ clip-path:polygon(50% 4%,100% 92%,50% 74%);
  background:linear-gradient(210deg, rgba(255,255,255,0.42), rgba(0,0,0,0.3)); }
.o-limas .s3{ clip-path:polygon(50% 4%,0 92%,50% 74%);
  background:linear-gradient(150deg, rgba(255,255,255,0.16), rgba(0,0,0,0.45)); }
.o-limas .s4{ clip-path:polygon(0 92%,100% 92%,50% 74%);
  background:rgba(255,255,255,0.06); background:linear-gradient(180deg, color-mix(in srgb,var(--c) 42%,transparent), rgba(0,0,0,0.6)); }

/* ============================================================
   KARTU PRODUK: perbaikan luberan proyeksi 3D
   Sisi kubus dan sensor kepala menjulur keluar kartu.
   Dikurung di sini tanpa mematikan efek 3D di dalamnya.
   ============================================================ */
.pcard{ overflow:hidden; }
.pcard .stage{ overflow:hidden; border-radius:20px; }
.hero-produk .stage{ overflow:hidden; }

/* tiga aksi: satu tombol utama, dua tautan tenang */
.pcard .aksi{ flex-direction:column; gap:11px; }
.pcard .aksi .btn{ width:100%; flex:none; }
.pcard .tautan{
  position:relative; display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:0.78rem; margin-top:2px;
}
.pcard .tautan a{ color:rgba(255,255,255,0.5); border-bottom:1px solid rgba(255,255,255,0.16); padding-bottom:1px; }
.pcard .tautan a:hover{ color:#fff; border-color:rgba(255,255,255,0.5); }
@media (min-width:1100px){ .produk-deret--dua{ grid-template-columns:1fr 1fr; max-width:840px; margin-inline:auto; } }

/* ============================================================
   HALAMAN PRODUK
   Satu halaman satu robot. Ringkas, padat, tanpa paragraf panjang.
   ============================================================ */
.pp-hero{ text-align:center; padding-block:clamp(24px,4vw,50px) clamp(44px,6vw,80px); }
.pp-hero .stage{ width:min(300px,66vw); height:min(300px,66vw); margin:0 auto clamp(18px,3vw,30px); overflow:hidden; }
.pp-hero .obj{ width:100%; height:100%; }
.pp-hero .ins{ font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--c); }
.pp-hero h1{
  font-family:'Inter Tight','Inter',sans-serif; margin-top:14px;
  font-size:clamp(2.1rem,6.4vw,3.8rem); font-weight:600; letter-spacing:-0.042em; line-height:1.04;
}
.pp-hero .kar{ font-size:clamp(1rem,2.4vw,1.22rem); color:rgba(255,255,255,0.56); margin-top:14px; letter-spacing:-0.012em; }
.pp-hero .harga{ margin-top:26px; font-size:clamp(1.15rem,2.8vw,1.5rem); font-weight:700; letter-spacing:-0.03em; color:#fff; }
.pp-hero .harga small{ display:block; font-size:0.78rem; font-weight:500; color:rgba(255,255,255,0.4); margin-top:6px; letter-spacing:0; }
.pp-hero .hero-actions{ justify-content:center; margin-top:26px; }

/* satu kalimat besar pemisah bagian */
.pp-kalimat{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:clamp(1.5rem,4vw,2.5rem); font-weight:600; letter-spacing:-0.038em;
  line-height:1.18; max-width:20ch; margin-inline:auto; text-align:center;
}
.pp-kalimat .m{ color:rgba(255,255,255,0.42); }
.section:not(.section--dark) .pp-kalimat .m{ color:var(--text-secondary); }

/* tiga poin ringkas */
.pp-tiga{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:44px; }
@media (min-width:820px){ .pp-tiga{ grid-template-columns:repeat(3,1fr); } }
.pp-poin{ text-align:center; padding:26px 22px; border:1px solid rgba(255,255,255,0.1); border-radius:20px;
  background:rgba(255,255,255,0.035); }
.pp-poin .n{ font-size:1.9rem; font-weight:700; letter-spacing:-0.035em; color:var(--c); line-height:1; }
.pp-poin h3{ font-size:1.02rem; font-weight:700; letter-spacing:-0.02em; margin-top:12px; color:#fff; }
.pp-poin p{ font-size:0.86rem; line-height:1.6; color:rgba(255,255,255,0.5); margin-top:7px; }
.section:not(.section--dark) .pp-poin{ border-color:var(--border); background:var(--white); }
.section:not(.section--dark) .pp-poin h3{ color:var(--ink); }
.section:not(.section--dark) .pp-poin p{ color:var(--text-secondary); }

/* tabel spesifikasi ala Apple */
.spek{ max-width:760px; margin:38px auto 0; }
.spek-grup{ margin-bottom:30px; }
.spek-grup h4{
  font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--c); padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.14); margin-bottom:4px;
}
.section:not(.section--dark) .spek-grup h4{ border-color:var(--border); }
.spek-baris{ display:flex; gap:20px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.07); align-items:baseline; }
.section:not(.section--dark) .spek-baris{ border-color:var(--border); }
.spek-baris:last-child{ border-bottom:none; }
.spek-baris dt{ flex:0 0 40%; font-size:0.85rem; color:rgba(255,255,255,0.45); }
.section:not(.section--dark) .spek-baris dt{ color:var(--text-secondary); }
.spek-baris dd{ flex:1; font-size:0.92rem; font-weight:600; color:#fff; letter-spacing:-0.015em; }
.section:not(.section--dark) .spek-baris dd{ color:var(--ink); }
@media (max-width:560px){
  .spek-baris{ flex-direction:column; gap:3px; padding:12px 0; }
  .spek-baris dt{ flex:none; font-size:0.78rem; }
}

/* kotak jujur: risiko disampaikan lebih dulu */
.jujur{
  max-width:760px; margin:40px auto 0; padding:28px 30px; border-radius:22px;
  border:1px solid rgba(232,36,74,0.28); background:rgba(232,36,74,0.06);
}
.jujur h4{ font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ruby-lite,#FF5C7F); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.jujur ul{ list-style:none; }
.jujur li{ font-size:0.9rem; line-height:1.65; color:rgba(255,255,255,0.68); padding-left:20px; position:relative; margin-bottom:11px; }
.jujur li:last-child{ margin-bottom:0; }
.jujur li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--ruby); }
.jujur li b{ color:#fff; font-weight:700; }

/* ============================================================
   BERANDA v5 · SHOWROOM
   Produk melayang sendiri tanpa kartu. Satu produk satu bagian.
   Penjelasan seminimal mungkin, bukti dipusatkan ke Myfxbook.
   ============================================================ */
.show{ padding-block:clamp(56px,9vw,120px); position:relative; overflow:hidden; }
.show::before{
  content:""; position:absolute; top:50%; left:50%; width:min(760px,120vw); height:min(760px,120vw);
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(110px); opacity:0.22;
  background:var(--c); pointer-events:none;
}
.show-in{
  position:relative; max-width:1120px; margin-inline:auto; padding-inline:clamp(20px,5vw,40px);
  display:grid; gap:clamp(26px,5vw,64px); grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width:900px){
  .show-in{ grid-template-columns:1fr 1fr; text-align:left; }
  .show--balik .show-in{ direction:rtl; }
  .show--balik .show-in > *{ direction:ltr; }
}
.show .stage{ width:min(320px,70vw); height:min(320px,70vw); margin-inline:auto; overflow:hidden; }
.show .obj{ width:100%; height:100%; }

.show .flag{
  display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--c); border:1px solid rgba(255,255,255,0.18); border:1px solid color-mix(in srgb,var(--c) 46%,transparent);
  background:rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.06); background:color-mix(in srgb,var(--c) 12%,transparent); padding:5px 11px; border-radius:var(--radius-pill);
  margin-bottom:16px;
}
.show .ins{ font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--c); }
.show h2{
  font-family:'Inter Tight','Inter',sans-serif; margin-top:12px;
  font-size:clamp(2rem,5.6vw,3.4rem); font-weight:600; letter-spacing:-0.042em; line-height:1.04; color:#fff;
}
.show .kar{ font-size:clamp(0.98rem,2.3vw,1.18rem); color:rgba(255,255,255,0.55); margin-top:14px; letter-spacing:-0.012em; }
.show .harga{ margin-top:22px; font-size:clamp(1.1rem,2.6vw,1.4rem); font-weight:700; letter-spacing:-0.03em; color:#fff; }
.show .harga span{ font-size:0.76rem; font-weight:500; color:rgba(255,255,255,0.4); letter-spacing:0; }
.show .aksi{ display:flex; gap:11px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
@media (min-width:900px){ .show .aksi{ justify-content:flex-start; } }
.show .aksi .btn{ padding:13px 26px; font-size:0.9rem; }

/* ringkasan spesifikasi pendek di beranda */
.show-ringkas{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:22px; justify-content:center; }
@media (min-width:900px){ .show-ringkas{ justify-content:flex-start; } }
.show-ringkas span{
  font-size:0.74rem; font-weight:600; color:rgba(255,255,255,0.62);
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04);
  padding:6px 12px; border-radius:var(--radius-pill);
}
/* tombol ketiga yang paling tenang */
.btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,0.16); color:rgba(255,255,255,0.7); }
.btn--ghost:hover{ border-color:rgba(255,255,255,0.4); color:#fff; background:rgba(255,255,255,0.05); }

/* daftar pilih robot untuk Copy Trade */
.pilih-daftar{ display:flex; flex-direction:column; gap:10px; }
.pilih-baris{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:14px 18px; border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.13); background:rgba(255,255,255,0.04);
}
.pilih-baris .ins{
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; flex:none; min-width:70px; text-align:center;
  padding:5px 9px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.75);
}
.pilih-baris .nm{ flex:1; min-width:0; font-size:0.95rem; font-weight:600; color:#fff; letter-spacing:-0.015em; }
.pilih-baris .nm small{ display:block; font-size:0.74rem; font-weight:500; color:rgba(255,255,255,0.45); margin-top:2px; }
.pilih-aksi{ display:flex; gap:8px; flex:none; }
.pilih-aksi .btn{ padding:9px 16px; font-size:0.8rem; }
@media (max-width:640px){
  .pilih-baris{ flex-wrap:wrap; gap:10px 12px; }
  .pilih-baris .nm{ flex:1 1 auto; }
  .pilih-aksi{ flex:1 1 100%; }
  .pilih-aksi .btn{ flex:1; }
}

/* ---------- 8. DUA KEKUATAN · Kemitraan ---------- */
/* Dua bentuk yang bertemu, bukan satu menelan yang lain. */
.o-dua{ position:absolute; inset:0; transform-style:preserve-3d; }
.o-dua span{
  position:absolute; top:50%; width:56%; height:56%; border-radius:50%;
  background:rgba(255,255,255,0.06); background:radial-gradient(38% 34% at 30% 24%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 44%),
    radial-gradient(90% 90% at 34% 28%, color-mix(in srgb,var(--c) 78%,#fff) 0%,
      color-mix(in srgb,var(--c) 52%,#0a0813) 44%, #0b0814 100%);
  box-shadow:none; box-shadow:inset -10px -12px 30px rgba(0,0,0,0.6), 0 0 34px color-mix(in srgb,var(--c) 28%,transparent);
}
.o-dua .a{ left:2%; transform:translateY(-50%) translateZ(20px); }
.o-dua .b{ right:2%; transform:translateY(-50%) translateZ(-20px); filter:brightness(0.82); }
.o-dua .temu{
  position:absolute; top:50%; left:50%; width:16%; height:16%; border-radius:50%;
  transform:translate(-50%,-50%) translateZ(40px);
  background:rgba(255,255,255,0.06); background:radial-gradient(40% 38% at 32% 28%, #fff 0%, color-mix(in srgb,var(--c) 84%,#fff) 42%, color-mix(in srgb,var(--c) 56%,#0a0813) 100%);
  box-shadow:none; box-shadow:0 0 40px color-mix(in srgb,var(--c) 88%,transparent);
}

/* dua jaminan berdampingan */
.jaminan-dua{ display:grid; gap:18px; grid-template-columns:1fr; max-width:900px; margin:38px auto 0; }
@media (min-width:840px){ .jaminan-dua{ grid-template-columns:1fr 1fr; } }
.jaminan{
  border:1px solid rgba(31,191,107,0.32); background:rgba(31,191,107,0.07);
  border-radius:22px; padding:28px 26px; text-align:left;
}
.jaminan .t{ display:inline-flex; align-items:center; gap:9px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:#34d982; margin-bottom:13px; }
.jaminan h3{ font-size:1.24rem; font-weight:700; letter-spacing:-0.028em; color:#fff; margin-bottom:10px; }
.jaminan p{ font-size:0.92rem; line-height:1.68; color:rgba(255,255,255,0.66); }
.jaminan p b{ color:#fff; font-weight:700; }

/* akses akun pantau di halaman produk */
.pantau-ket{
  max-width:520px; margin:22px auto 0; padding:18px 22px; border-radius:16px;
  border:1px solid var(--border); background:var(--white); text-align:left;
}
.section--dark .pantau-ket{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); }
.pantau-ket p{ font-size:0.85rem; line-height:1.6; color:var(--text-secondary); }
.section--dark .pantau-ket p{ color:rgba(255,255,255,0.6); }
.pantau-ket .lbl{ font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:9px; display:block; }
.section--dark .pantau-ket .lbl{ color:rgba(255,255,255,0.4); }


/* ============================================================
   AKUN PANTAU: kartu kredensial (server, login, investor password)
   Selalu gelap, supaya menonjol di atas seksi terang.
   ============================================================ */
.akun-list{ display:flex; flex-direction:column; gap:12px; max-width:520px; margin:24px auto 0; }
.akun{
  border-radius:18px; padding:18px 20px 8px; text-align:left;
  background:var(--ink); border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 44px rgba(14,11,26,0.16);
}
.section--dark .akun{ background:rgba(255,255,255,0.035); box-shadow:none; }
.akun-kop{ display:flex; flex-direction:column; gap:3px; padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.09); margin-bottom:4px; }
.akun-nm{ font-size:0.98rem; font-weight:700; color:#fff; letter-spacing:-0.02em; }
.akun-meta{ font-size:0.72rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.58); }
.akun-baris{ display:flex; align-items:center; gap:14px; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.055); }
.akun-baris:last-child{ border-bottom:none; }
.akun-baris .k{ flex:0 0 40%; font-size:0.72rem; font-weight:600; letter-spacing:0.11em;
  text-transform:uppercase; color:rgba(255,255,255,0.6); }
.akun-baris .v{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  background:none; border:none; padding:5px 0; cursor:pointer; text-align:left;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:0.92rem; font-weight:600; letter-spacing:-0.01em; color:#fff;
  transition:color .25s ease;
}
.akun-baris .v .tx{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.akun-baris .v svg{ width:13px; height:13px; flex:none; opacity:0.3; transition:opacity .25s ease; }
.akun-baris .v:hover{ color:var(--gold, #C9A75B); }
.akun-baris .v:hover svg{ opacity:0.85; }
.akun-baris .v.is-salin{ color:#1FBF6B; }
.akun-baris .v.is-salin svg{ opacity:1; }
.akun-baris .v.is-salin .tx::after{ content:" tersalin"; font-size:0.72rem; letter-spacing:0.06em; }
.akun-cat{ max-width:520px; margin:14px auto 0; font-size:0.78rem; line-height:1.65;
  color:var(--text-secondary); text-align:left; }
.section--dark .akun-cat{ color:rgba(255,255,255,0.5); }
@media (max-width:520px){
  .akun{ padding:16px 16px 6px; }
  .akun-baris{ flex-direction:column; align-items:flex-start; gap:2px; padding:8px 0; }
  .akun-baris .k{ flex:none; font-size:0.72rem; }
  .akun-baris .v{ font-size:0.88rem; width:100%; padding:2px 0; }
}


/* ============================================================
   HASIL BACKTEST: angka besar, jujur, tanpa grafik
   ============================================================ */
.bt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; max-width:760px;
  margin:34px auto 0; background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
@media (min-width:800px){ .bt-grid{ grid-template-columns:repeat(4,1fr); } }
.bt{ background:var(--ink); padding:26px 16px; display:flex; flex-direction:column; gap:7px;
  align-items:center; justify-content:center; }
.bt .n{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.85rem; font-weight:600;
  letter-spacing:-0.045em; color:#fff; line-height:1; }
.bt .l{ font-size:0.72rem; font-weight:500; letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.58); text-align:center; }
.bt--turun .n{ color:var(--c,#E8244A); }
@media (max-width:400px){ .bt{ padding:20px 10px; } .bt .n{ font-size:1.5rem; } .bt .l{ font-size:0.65rem; } }

.bt-rows{ display:flex; flex-direction:column; gap:1px; max-width:760px; margin:34px auto 0;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
.bt-row{ background:var(--ink); padding:18px 22px; display:flex; align-items:baseline; gap:14px;
  flex-wrap:wrap; text-align:left; }
.bt-row .r{ flex:1 1 100%; font-size:0.95rem; font-weight:700; color:#fff; letter-spacing:-0.02em; }
@media (min-width:640px){ .bt-row .r{ flex:0 0 34%; } }
.bt-row .a{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.3rem; font-weight:600;
  letter-spacing:-0.04em; color:#fff; }
.bt-row .b{ font-size:0.8rem; font-weight:600; color:var(--c,#E8244A); }
.bt-row .c{ font-size:0.78rem; color:rgba(255,255,255,0.58); margin-left:auto; }

.bt-cat{ max-width:62ch; margin:22px auto 0; font-size:0.82rem; line-height:1.7;
  color:rgba(255,255,255,0.5); text-align:left; }
.section:not(.section--dark) .bt-cat{ color:var(--text-secondary); }


/* ============================================================
   PERBAIKAN: baris Myfxbook di seksi TERANG
   Sebelumnya memakai teks putih, jadi tidak terbaca di latar terang.
   ============================================================ */
.section:not(.section--dark) .fx-row{
  border-color:var(--border); background:var(--white);
  box-shadow:0 2px 12px rgba(14,11,26,0.05);
}
.section:not(.section--dark) .fx-row:hover{
  background:var(--white); border-color:rgba(14,11,26,0.3);
  box-shadow:0 6px 20px rgba(14,11,26,0.09);
}
.section:not(.section--dark) .fx-row .ins{
  border-color:rgba(14,11,26,0.15); color:#484852; background:rgba(14,11,26,0.02);
}
.section:not(.section--dark) .fx-row .nm{ color:var(--ink); }
.section:not(.section--dark) .fx-row .nm small{ color:var(--text-secondary); }
.section:not(.section--dark) .fx-row .fx-ic{ color:var(--ink); opacity:0.4; }
.section:not(.section--dark) .fx-row:hover .fx-ic{ opacity:0.95; }
.section:not(.section--dark) .fx-row--gold{
  border-color:rgba(201,167,91,0.5); background:rgba(201,167,91,0.06);
}
.section:not(.section--dark) .fx-row--gold:hover{ border-color:rgba(201,167,91,0.8); }
.section:not(.section--dark) .fx-row--gold .ins{
  border-color:rgba(201,167,91,0.5); color:#6B5220; background:rgba(201,167,91,0.1);
}

/* Nota VPN: diletakkan sebelum tautan Myfxbook supaya terbaca duluan */
.vpn-nota{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  max-width:520px; margin:28px auto 0; padding:15px 18px; border-radius:14px;
  border:1px solid rgba(201,167,91,0.42); background:rgba(201,167,91,0.09);
}
.section--dark .vpn-nota{ border-color:rgba(201,167,91,0.36); background:rgba(201,167,91,0.09); }
.vpn-nota svg{ flex:none; width:17px; height:17px; margin-top:2px; color:#9A7A2F; }
.section--dark .vpn-nota svg{ color:#D6B26E; }
.vpn-nota p{ font-size:0.84rem; line-height:1.6; color:var(--ink); }
.section--dark .vpn-nota p{ color:rgba(255,255,255,0.78); }
.vpn-nota b{ font-weight:700; }


/* ---- Daftar spesifikasi backtest, gaya lembar spesifikasi ---- */
.bt-spek{ max-width:760px; margin:26px auto 0; display:grid; grid-template-columns:1fr; column-gap:48px; }
@media (min-width:820px){ .bt-spek{ grid-template-columns:1fr 1fr; } }
.bt-sb{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.07); text-align:left; }
.bt-sb .k{ font-size:0.8rem; color:rgba(255,255,255,0.58); }
.bt-sb .v{ font-size:0.86rem; font-weight:600; color:#fff; letter-spacing:-0.01em; text-align:right; }

/* ---- Kartu per tahun, khusus GF Oil Swing ---- */
.bt-tahun{ display:grid; grid-template-columns:1fr; gap:12px; max-width:760px; margin:34px auto 0; }
@media (min-width:820px){ .bt-tahun{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.th{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.10);
  border-radius:18px; padding:20px 20px 8px; text-align:left; }
.th .y{ display:block; font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.6rem;
  font-weight:600; letter-spacing:-0.04em; color:#fff; line-height:1; }
.th .ev{ display:block; margin-top:6px; padding-bottom:13px; font-size:0.7rem; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--c,#C9A75B);
  border-bottom:1px solid rgba(255,255,255,0.09); }
.th-b{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.055); }
.th-b:last-child{ border-bottom:none; }
.th-b .k{ font-size:0.74rem; color:rgba(255,255,255,0.58); }
.th-b .v{ font-size:0.85rem; font-weight:600; color:#fff; text-align:right; }
.th-b .v--turun{ color:var(--c,#C9A75B); }


/* ---- Langkah bernomor (halaman Akun Pantau) ---- */
.lgk{ display:grid; grid-template-columns:1fr; gap:12px; max-width:760px; margin:32px auto 0; }
@media (min-width:700px){ .lgk{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .lgk{ grid-template-columns:repeat(4,1fr); } }
.lg{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.10);
  border-radius:16px; padding:18px 18px 20px; text-align:left; }
.lg .no{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; font-size:0.78rem; font-weight:700; color:var(--ink);
  background:var(--c,#1FBF6B); margin-bottom:12px; }
.lg p{ font-size:0.86rem; line-height:1.6; color:rgba(255,255,255,0.66); }
.lg p b{ color:#fff; font-weight:600; }

.bh .n{ font-size:1.05rem; } .bh .l{ font-size:0.7rem; }





/* ---- Penanda menu: satu-satunya butir yang hidup ---- */
.nav-desktop a.nav-live, .nav-mobile a.nav-live{ display:inline-flex; align-items:center; gap:7px; }
.nav-live .dot{ width:6px; height:6px; border-radius:50%; background:#1FBF6B; flex:none;
  box-shadow:0 0 8px rgba(31,191,107,0.9); animation:pulse 2.4s infinite; }

/* ---- Kepala kelompok di menu mobile ---- */
.nav-grup{ display:block; padding:16px 0 4px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.34); }
.nav-grup:first-child{ padding-top:4px; }


/* ============================================================
   BUKTI UTAMA DI HERO
   Tanpa kotak, tanpa bingkai. Hanya garis rambut dan ruang.
   ============================================================ */
.bukti-hero{ max-width:680px; margin:44px auto 0; }
.bh-lbl{ display:inline-flex; align-items:center; gap:8px; font-size:0.7rem; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.bh-lbl .dot{ width:6px; height:6px; border-radius:50%; background:#1FBF6B; flex:none;
  box-shadow:0 0 9px rgba(31,191,107,0.9); animation:pulse 2.4s infinite; }

.bh:last-child{ border-bottom:1px solid rgba(255,255,255,0.09); }


/* ---- Tombol di bawah bukti hero ---- */
.bh-aksi{ margin-top:26px; justify-content:center; }
.btn--live{ display:inline-flex; align-items:center; gap:9px; }
.btn--live .dot{ width:7px; height:7px; border-radius:50%; background:#1FBF6B; flex:none;
  box-shadow:0 0 9px rgba(31,191,107,0.9); animation:pulse 2.4s infinite; }


/* ============================================================
   HERO BERANDA: cahaya latar yang bergerak pelan
   Murni gradasi dan transform, tanpa filter blur, tanpa gambar.
   ============================================================ */
.hero-utama{ position:relative; overflow:hidden; isolation:isolate; }
.hero-utama .aurora{
  position:absolute; display:block; border-radius:50%; pointer-events:none; z-index:0;
}
.hero-utama .a1{
  width:72vw; height:72vw; max-width:660px; max-height:660px; top:-34%; left:-12%;
  background:radial-gradient(closest-side, rgba(232,36,74,0.34) 0%, rgba(232,36,74,0.11) 44%, transparent 72%);
  animation:auroraA 26s ease-in-out infinite;
}
.hero-utama .a2{
  width:62vw; height:62vw; max-width:580px; max-height:580px; top:-20%; right:-14%;
  background:radial-gradient(closest-side, rgba(201,167,91,0.26) 0%, rgba(201,167,91,0.08) 46%, transparent 72%);
  animation:auroraB 34s ease-in-out infinite;
}
@keyframes auroraA{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(7%,5%,0); }
}
@keyframes auroraB{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(-8%,6%,0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-utama .aurora{ animation:none; }
}


/* ---- Hook hero: judul besar, lead ringkas ---- */
.hero-utama .eyebrow{ color:#D6B26E; }
.hero-utama h1{ text-wrap:balance; }
.hero-utama .hero-lead{ font-size:clamp(1.02rem,3.1vw,1.35rem); color:rgba(255,255,255,0.74);
  line-height:1.45; text-wrap:balance; }
.hero-utama .bukti-hero{ margin-top:40px; }


/* ============================================================
   GFX MONSTER: massa bersudut dengan celah menyala
   Bukan wajah, bukan maskot. Bidang tajam, berat, dan gelap,
   dengan satu retakan terang di tengahnya.
   ============================================================ */
.o-inti{ position:absolute; inset:0; transform-style:preserve-3d;
  animation:intiPutar 24s linear infinite; }
.o-inti span{ position:absolute; display:block; }

.o-inti .k1{
  inset:2%; transform:translateZ(-34px);
  clip-path:polygon(50% 3%, 87% 25%, 97% 65%, 65% 97%, 29% 93%, 4% 57%, 15% 21%);
  background:rgba(255,255,255,0.06); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 26%,#140f22),
    color-mix(in srgb,var(--c) 7%,#0a0813) 66%, #07050e);
  box-shadow:none; box-shadow:0 0 60px color-mix(in srgb,var(--c) 30%,transparent);
}
.o-inti .k2{
  inset:11%; transform:translateZ(0);
  clip-path:polygon(50% 0%, 92% 22%, 100% 62%, 68% 100%, 26% 96%, 0% 56%, 12% 18%);
  background:rgba(255,255,255,0.06); background:radial-gradient(72% 52% at 30% 12%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(152deg, color-mix(in srgb,var(--c) 60%,#1a1129) 0%,
      color-mix(in srgb,var(--c) 22%,#0e0a1a) 56%, #0a0813 100%);
  box-shadow:0 26px 52px rgba(0,0,0,0.6);
}
.o-inti .k3{
  inset:26%; transform:translateZ(26px);
  clip-path:polygon(50% 0%, 84% 26%, 92% 64%, 60% 100%, 24% 90%, 4% 52%, 16% 20%);
  background:rgba(255,255,255,0.06); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 82%,#fff) 0%,
    color-mix(in srgb,var(--c) 44%,#150f26) 52%, color-mix(in srgb,var(--c) 16%,#0b0915) 100%);
  box-shadow:none; box-shadow:0 0 34px color-mix(in srgb,var(--c) 52%,transparent);
}

/* retakan terang, denyut jantung objek */
.o-inti .retak{
  left:46.5%; top:14%; width:7%; height:72%; transform:translateZ(40px) rotate(9deg);
  clip-path:polygon(38% 0%, 100% 30%, 62% 54%, 100% 74%, 30% 100%, 0% 62%, 46% 42%, 6% 26%);
  background:rgba(255,255,255,0.06); background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--c) 78%,#fff));
  box-shadow:none; box-shadow:0 0 22px color-mix(in srgb,var(--c) 95%,transparent),
             0 0 52px color-mix(in srgb,var(--c) 62%,transparent);
  animation:intiDenyut 3.8s ease-in-out infinite;
}

/* serpihan yang terlepas */
.o-inti .serpih{
  width:15%; height:15%;
  background:rgba(255,255,255,0.06); background:linear-gradient(140deg, color-mix(in srgb,var(--c) 66%,#fff),
    color-mix(in srgb,var(--c) 18%,#0b0915));
  box-shadow:none; box-shadow:0 0 18px color-mix(in srgb,var(--c) 48%,transparent);
}
.o-inti .s1{ left:-3%; top:30%; transform:translateZ(52px) rotate(-16deg);
  clip-path:polygon(0% 46%, 74% 0%, 100% 62%, 32% 100%); }
.o-inti .s2{ right:-1%; top:58%; width:11%; height:11%;
  transform:translateZ(46px) rotate(22deg);
  clip-path:polygon(12% 0%, 100% 34%, 68% 100%, 0% 70%); }

@keyframes intiPutar{
  0%   { transform:rotateY(0deg) rotateX(4deg); }
  100% { transform:rotateY(360deg) rotateX(4deg); }
}
@keyframes intiDenyut{
  0%, 100% { opacity:1; }
  48%      { opacity:0.55; }
}
@media (prefers-reduced-motion: reduce){
  .o-inti{ animation:none; }
  .o-inti .retak{ animation:none; }
}

/* ============================================================
   HEMAT TENAGA: animasi berhenti saat bagian tidak terlihat
   ============================================================ */
.anim-diam, .anim-diam *{ animation-play-state:paused !important; }


/* ============================================================
   TOMBOL WHATSAPP MELAYANG
   ============================================================ */
.wa-apung{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px 13px 14px; border-radius:999px;
  background:#1FBF6B; color:#06210F; font-size:0.9rem; font-weight:700;
  letter-spacing:-0.01em; text-decoration:none; border:none;
  box-shadow:0 10px 30px rgba(31,191,107,0.34), 0 2px 8px rgba(0,0,0,0.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-apung:hover{ transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(31,191,107,0.44), 0 2px 8px rgba(0,0,0,0.3); }
.wa-apung svg{ width:22px; height:22px; flex:none; }
.wa-apung .tx{ white-space:nowrap; }
@media (max-width:640px){
  .wa-apung{ right:14px; bottom:14px; padding:13px; }
  .wa-apung .tx{ display:none; }
}
@media print{ .wa-apung{ display:none; } }


/* Elemen yang benar-benar bergerak diberi lapisan sendiri,
   supaya sisanya tidak ikut digambar ulang tiap frame. */
.obj, .obj-in, .obj-bayang, .hero-utama .aurora{ will-change:transform; }
.anim-diam .obj, .anim-diam .obj-in, .anim-diam .obj-bayang{ will-change:auto; }


/* Batasi area yang perlu digambar ulang di sekitar objek 3D */
.stage{ contain:layout paint; }


/* ---- Ajakan pendek di hero ---- */
.bh-ajak{
  margin-top:26px; font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:clamp(1.05rem,3.6vw,1.45rem); font-weight:500; letter-spacing:-0.025em;
  line-height:1.4; color:rgba(255,255,255,0.9); max-width:26ch; margin-inline:auto;
  text-wrap:balance;
}
.bh-kecil{ margin-top:10px; font-size:0.72rem; line-height:1.6; color:rgba(255,255,255,0.42);
  max-width:46ch; margin-inline:auto; }

/* ---- Tombol WhatsApp bersembunyi selama hero terlihat ---- */
.wa-apung{ opacity:1; visibility:visible;
  transition:transform .3s ease, box-shadow .25s ease, opacity .3s ease, visibility .3s; }
.wa-apung.wa-sembunyi{ opacity:0; visibility:hidden; transform:translateY(14px);
  pointer-events:none; }





/* ============================================================
   KURVA PERTUMBUHAN DI HERO
   Hijau di atas gelap. Satu SVG, nol berkas gambar.
   ============================================================ */
.bh-grafik{ position:relative; margin-top:28px; }
.kurva{ display:block; width:100%; height:clamp(146px,29vw,210px); overflow:visible; }

.kv-kisi line{ stroke:rgba(255,255,255,0.06); stroke-width:1; vector-effect:non-scaling-stroke; }

.kv-halo{ opacity:0.16; stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:kvGambar 2.4s cubic-bezier(.2,.7,.3,1) .3s forwards; }
.kv-garis{ stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:kvGambar 2.4s cubic-bezier(.2,.7,.3,1) .3s forwards; }
.kv-isi{ opacity:0; animation:kvMuncul 1.5s ease 1.35s forwards; }

/* titik akhir yang berdenyut, tempat mata berhenti */
.kv-wrap{ position:relative; display:block; }
.kv-titik{ position:absolute; right:0; top:6%; width:11px; height:11px;
  margin:-5.5px -5.5px 0 0; opacity:0;
  animation:kvMuncul .6s ease 2.5s forwards; }
.kv-titik::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:#7BF7B6; box-shadow:0 0 12px rgba(123,247,182,0.95), 0 0 26px rgba(31,191,107,0.6); }
.kv-titik i{ position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(123,247,182,0.75);
  animation:kvDenyut 2.6s ease-out infinite; }

@keyframes kvGambar{ to{ stroke-dashoffset:0; } }
@keyframes kvMuncul{ to{ opacity:1; } }
@keyframes kvDenyut{
  0%   { transform:scale(1);   opacity:0.75; }
  70%  { transform:scale(3.1); opacity:0; }
  100% { transform:scale(3.1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .kv-halo, .kv-garis{ animation:none; stroke-dashoffset:0; }
  .kv-isi, .kv-titik{ animation:none; opacity:1; }
  .kv-titik i{ animation:none; }
}

.kv-kaki{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.09);
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.42); }
.kv-naik{ color:#7BF7B6; font-weight:700; letter-spacing:0.09em; }



/* ============================================================
   OBJEK BATU OBSIDIAN BERURAT
   Bongkah gelap bersudut, tiap robot punya siluet sendiri,
   dengan urat logam tipis membelah permukaannya.
   Hanya untuk lima robot. Copy Trade, Edukasi Robot, dan
   Peneliti tetap memakai objek tiga dimensinya.
   ============================================================ */
.o-batu{ position:absolute; inset:0;
  /* satu lapisan kompositor sendiri: siluet clip-path cukup digambar
     sekali, sisanya tinggal digeser, bukan digambar ulang tiap frame */
  will-change:transform; transform:translateZ(0); }
.anim-diam .o-batu{ will-change:auto; }
.o-batu span{ position:absolute; display:block; }

.o-batu--oil{ --siluet:polygon(10% 22%, 40% 6%, 76% 12%, 94% 42%, 88% 76%, 58% 94%, 22% 86%, 4% 54%); --terang:#FFFFFF; --inti:#C6CCD8; --gelap:#6B7280; }
.o-batu--predator{ --siluet:polygon(18% 14%, 58% 4%, 92% 26%, 96% 58%, 70% 92%, 34% 88%, 8% 62%, 6% 34%); --terang:#FFF3CE; --inti:#D9A93A; --gelap:#6F4E10; }
.o-batu--gold{ --siluet:polygon(50% 3%, 74% 10%, 92% 30%, 96% 56%, 78% 82%, 52% 97%, 26% 84%, 8% 60%, 6% 32%, 26% 11%); --terang:#DCEBFF; --inti:#4C8DFF; --gelap:#0B2A63; }
.o-batu--monster{ --siluet:polygon(14% 18%, 34% 4%, 52% 16%, 74% 6%, 92% 30%, 84% 52%, 96% 70%, 66% 96%, 40% 86%, 20% 96%, 6% 66%, 16% 44%); --terang:#FFDDE4; --inti:#D63F5C; --gelap:#63101F; }
.o-batu--hunter{ --siluet:polygon(44% 2%, 66% 20%, 74% 52%, 62% 86%, 46% 98%, 32% 84%, 26% 50%, 34% 18%); --terang:#DCFBEC; --inti:#2FB878; --gelap:#075030; }
.o-batu--pro{ --siluet:polygon(12% 20%, 46% 6%, 78% 14%, 94% 44%, 86% 74%, 54% 96%, 24% 88%, 6% 56%); --terang:#EDE6FF; --inti:#8B62F0; --gelap:#341B76; }

.o-batu .bt-badan{
  inset:0; clip-path:var(--siluet); transform:translate(7px,11px);
  background:linear-gradient(158deg, #0A0810 0%, #06050B 100%);
  opacity:0.9;
}
.o-batu .bt-muka{
  inset:0; clip-path:var(--siluet);
  background:rgba(255,255,255,0.06); background:radial-gradient(88% 68% at 26% 12%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(60% 50% at 78% 84%, color-mix(in srgb,var(--inti) 13%,transparent) 0%, transparent 60%),
    linear-gradient(156deg, #1C1826 0%, #14111D 38%, #0C0A13 70%, #08060D 100%);
  box-shadow:0 26px 52px rgba(0,0,0,0.72);
}
.o-batu .urat{
  border-radius:2px; transform-origin:0 50%;
  background:rgba(255,255,255,0.06); background:linear-gradient(90deg, transparent 0%,
    color-mix(in srgb,var(--inti) 88%,var(--terang)) 34%,
    color-mix(in srgb,var(--terang) 78%,transparent) 58%,
    color-mix(in srgb,var(--inti) 60%,transparent) 76%, transparent 100%);
  box-shadow:none; box-shadow:0 0 8px color-mix(in srgb,var(--inti) 46%,transparent);
}
.o-batu .bt-tulis{
  inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-family:"Inter Tight",Inter,system-ui,sans-serif; font-weight:700;
  letter-spacing:-0.03em; line-height:0.98; white-space:nowrap; text-align:center;
}
.o-batu .b1{
  font-size:calc(var(--u2) * 0.46); letter-spacing:0.17em; font-weight:600; opacity:0.6;
  color:currentColor;
  color:currentColor; color:color-mix(in srgb,var(--inti) 66%,var(--terang));
}
.o-batu .b2{
  font-size:var(--u2);
  background-image:linear-gradient(162deg, var(--terang) 0%, var(--inti) 44%,
    var(--gelap) 76%, var(--terang) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,0.85);
}

/* andalan: satu garis emas tipis di bawah nama */
.o-batu--oil .bt-tulis::after{
  content:""; width:38%; height:1px; margin-top:9px;
  background:linear-gradient(90deg,transparent,#C9A75B 34%,#F0E2BE 50%,#C9A75B 66%,transparent);
  opacity:0.85;
}


/* ============================================================
   COPY TRADE: dua lempeng bertumpuk, ikon salin
   Garis pasar yang sama muncul persis di kedua lempeng, jadi
   yang terlihat bukan dua kartu melainkan transaksi yang disalin.
   Garisnya sengaja naik turun, bukan tanjakan mulus.
   ============================================================ */
.o-salin{
  position:absolute; inset:0; --terang:#E6FBFF; --inti:#22D3EE; --gelap:#0A5566;
  will-change:transform; transform:translateZ(0);
}
.anim-diam .o-salin{ will-change:auto; }
.o-salin .sl-lp{
  position:absolute; display:block; width:70%; height:78%; border-radius:15px; overflow:hidden;
  background:
    radial-gradient(88% 66% at 26% 12%, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(156deg,#1C1826 0%,#14111D 40%,#0B0913 74%,#08060D 100%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
}
.o-salin .sl-lp::before{
  content:""; position:absolute; left:14%; right:14%; top:-1px; height:1px;
  background:rgba(255,255,255,0.06); background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--inti) 85%,var(--terang)),transparent);
}
.o-salin .sl-blk{ left:0; top:0; opacity:0.55;
  border-color:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb,var(--inti) 20%,transparent); }
.o-salin .sl-dpn{ right:0; bottom:0;
  border-color:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb,var(--inti) 34%,transparent);
  box-shadow:0 24px 46px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.24); }
.o-salin .sl-kilat{
  position:absolute; left:9%; top:7%; width:52%; height:34%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,0.2),transparent 74%);
}
.o-salin .ct-grf{ position:absolute; left:11%; right:11%; bottom:16%; width:78%; height:52%; }


/* ============================================================
   EAKU INSTITUTE: satu jilid tebal berdiri
   Emas hanya muncul sebagai satu blok tepi halaman. Hiasan
   sampulnya cap timbul yang cuma terasa lewat bayangan.
   ============================================================ */
.o-jilid{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  --e1:#FBF0D2; --e2:#D9BC74; --e3:#A88736;
  --k1:#241E2E; --k2:#181320; --k3:#0D0A14; --k4:#070510;
  will-change:transform; transform:translateZ(0);
}
.anim-diam .o-jilid{ will-change:auto; }
.o-jilid span{ position:absolute; display:block; }

.o-jilid .jl-buku{
  position:relative; height:72%; aspect-ratio:150 / 200;
  transform:rotateX(6deg) rotateY(-22deg); transform-style:preserve-3d;
}
.o-jilid .jl-bayang{
  left:22%; right:22%; bottom:12%; height:9%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,0.85), transparent 74%);
}
.o-jilid .jl-punggung{
  left:-13%; top:1.5%; width:15%; height:97%; border-radius:5px 2px 2px 5px;
  background:linear-gradient(90deg, var(--k4), var(--k2) 62%, var(--k1));
  box-shadow:-7px 14px 26px rgba(0,0,0,0.75);
}
.o-jilid .jl-emas{
  right:-9%; top:3.5%; width:10%; height:93%; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--e1) 0%, var(--e2) 22%, var(--e3) 58%,
    var(--e2) 82%, var(--e1) 100%);
  box-shadow:0 10px 22px rgba(0,0,0,0.6), inset -2px 0 3px rgba(0,0,0,0.28);
}
.o-jilid .jl-sampul{
  inset:0; border-radius:3px 9px 9px 3px; overflow:hidden;
  background:
    radial-gradient(96% 74% at 24% 8%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 54%),
    linear-gradient(158deg, var(--k1) 0%, var(--k2) 44%, var(--k3) 78%, var(--k4) 100%);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 30px 56px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.15);
}
.o-jilid .jl-cahaya{
  left:5%; top:4%; width:52%; height:32%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,0.17), transparent 75%);
}
.o-jilid .jl-cap{
  left:50%; top:50%; width:28%; height:0; padding-bottom:28%;
  margin:-14% 0 0 -14%; border-radius:50%;
  box-shadow:inset 0 1.5px 2px rgba(0,0,0,0.85),
    inset 0 -1.5px 1px rgba(255,255,255,0.09), 0 1px 0 rgba(255,255,255,0.06);
}


/* ============================================================
   EDUKASI ROBOT: siluet topi sarjana
   Satu bentuk utuh dipotong dari lembaran logam mawar. Sengaja
   bukan emas kuning supaya tidak kembar dengan jilid Institute.
   ============================================================ */
.o-topi{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  will-change:transform; transform:translateZ(0);
}
.anim-diam .o-topi{ will-change:auto; }
.o-topi svg{
  width:88%; height:88%; overflow:visible;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,0.72))
         drop-shadow(0 0 22px rgba(232,160,140,0.18));
}


/* ============================================================
   COPY TRADE SEBAGAI PRODUK UTAMA
   ============================================================ */
.ct-promo{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  padding:8px 15px 8px 12px; border-radius:999px;
  border:1px solid rgba(34,211,238,0.34); background:rgba(34,211,238,0.08);
  font-size:0.78rem; font-weight:600; letter-spacing:-0.005em; color:#BFF3FD;
}
.ct-promo .tt{
  width:7px; height:7px; border-radius:50%; background:#22D3EE; flex:none;
  box-shadow:0 0 10px rgba(34,211,238,0.9); animation:pulse 2.4s infinite;
}

.ct-daftar{ max-width:640px; margin:18px auto 0; display:flex; flex-direction:column; gap:1px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
.ct-harga{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 20px; background:var(--ink); text-align:left; }
.ct-harga .nm{ display:flex; flex-direction:column; gap:3px; font-size:0.98rem;
  font-weight:700; color:#fff; letter-spacing:-0.02em; }
.ct-harga .nm small{ font-size:0.72rem; font-weight:500; letter-spacing:0.13em;
  text-transform:uppercase; color:rgba(255,255,255,0.42); }
.ct-harga .hg{ display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.12rem; font-weight:600;
  letter-spacing:-0.035em; color:#fff; white-space:nowrap; }
.ct-harga .hg small{ font-size:0.72rem; font-weight:500; letter-spacing:0.08em;
  color:rgba(255,255,255,0.42); }
@media (max-width:420px){
  .ct-harga{ padding:15px 15px; }
  .ct-harga .nm{ font-size:0.9rem; } .ct-harga .hg{ font-size:1rem; }
}


/* Penanda halus untuk blok produk utama di beranda */
.show--utama{ position:relative; }
/* Blok utama memakai cahaya seksi yang sama dengan blok lain,
   hanya diredam karena biru langit jauh lebih terang daripada
   emas, ruby, dan hijau, sehingga mudah terlihat berkabut. */
.show--utama::before{ opacity:0.13; }
/* cahaya latar seksi dihapus. Yang menyala cukup objeknya saja,
   supaya bidangnya tetap hitam pekat seperti seksi lain. */
.show--utama > *{ position:relative; z-index:1; }
.show--utama .isi h2{ font-size:clamp(2.1rem,7.4vw,3.5rem); }


/* ============================================================
   COPY TRADE: rasi bintang
   Satu titik pusat menyala terhubung ke empat titik pengikut.
   Satu-satunya objek yang memancarkan cahaya, bukan dipahat,
   sehingga terbaca sebagai produk utama tanpa perlu diperbesar.
   ============================================================ */
.o-rasi{ position:absolute; inset:0; will-change:transform; transform:translateZ(0); }
.anim-diam .o-rasi{ will-change:auto; }
.o-rasi span{ position:absolute; display:block; }
.o-rasi .rs-halo{
  left:50%; top:50%; width:66%; height:66%; margin:-33% 0 0 -33%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(34,211,238,0.30) 0%,
    rgba(34,211,238,0.07) 46%, transparent 70%);
  z-index:0;
}
.o-rasi .rs-jar{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.o-rasi .rs-pusat{
  left:50%; top:50%; width:23%; height:23%; margin:-11.5% 0 0 -11.5%; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #9BEFFF 24%, #22D3EE 56%, #0A4E5F 100%);
  box-shadow:0 0 22px rgba(34,211,238,0.85), 0 0 46px rgba(34,211,238,0.22);
}
.o-rasi .rs-pusat i{
  position:absolute; left:22%; top:16%; width:34%; height:26%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,0.92), transparent 74%);
}
.o-rasi .rs-nd{
  width:8.5%; height:8.5%; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 34% 28%, #EAFEFF, #22D3EE 58%, #0A4E5F 100%);
  box-shadow:0 0 11px rgba(34,211,238,0.7);
}
.o-rasi .n1{ left:12.8%; top:16.8%; }
.o-rasi .n2{ left:81.8%; top:19.8%; }
.o-rasi .n3{ left:16.8%; top:75.8%; }
.o-rasi .n4{ left:79.8%; top:73.8%; }

/* ---- Kelompok tombol yang lebih rapat di blok produk ---- */
.show .aksi--rapat{ gap:8px; }
.show .aksi--rapat .btn{ padding:10px 16px; font-size:0.83rem; letter-spacing:-0.01em; }
@media (max-width:430px){
  .show .aksi--rapat{ gap:6px; }
  .show .aksi--rapat .btn{ padding:8px 11px; font-size:0.735rem; }
}
@media (max-width:340px){
  .show .aksi--rapat{ gap:5px; }
  .show .aksi--rapat .btn{ padding:7px 9px; font-size:0.69rem; }
}


/* Pil promo: satu baris, tidak membungkus */
.ct-promo{ max-width:100%; }
.ct-promo span.tt{ margin-top:1px; }
@media (max-width:520px){
  .ct-promo{ padding:7px 13px 7px 11px; font-size:0.7rem; line-height:1.35; text-align:left; }
}

/* Label kecil di bawah tautan bukti */
.bukti-tanpa-vpn{
  display:block; margin-top:9px; font-size:0.7rem; line-height:1.5;
  color:rgba(255,255,255,0.42);
}
.section:not(.section--dark) .bukti-tanpa-vpn{ color:var(--text-secondary); }
.bukti-tanpa-vpn a{ color:inherit; text-decoration:underline; }


/* ---- Nota VPN dibuat tegas dan jadi titik pendaratan ---- */
.vpn-nota{ scroll-margin-top:96px; padding:18px 20px; gap:14px; max-width:560px; }
.vpn-nota svg{ width:22px; height:22px; margin-top:3px; }
.vpn-nota p{ font-size:0.9rem; line-height:1.62; }
.vpn-nota p b:first-child{
  display:block; font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:1.1rem; font-weight:700; letter-spacing:-0.025em; line-height:1.25;
  margin-bottom:6px; color:#F0DCA8;
}
.section:not(.section--dark) .vpn-nota p b:first-child{ color:#7A5E18; }
@media (max-width:430px){
  .vpn-nota{ padding:16px 16px; gap:11px; }
  .vpn-nota p{ font-size:0.85rem; }
  .vpn-nota p b:first-child{ font-size:1.02rem; }
}


/* ---- Pil dirapatkan karena kini ada lima, termasuk periode backtest ---- */
@media (max-width:520px){
  .show-ringkas{ gap:6px 7px; margin-top:18px; }
  .show-ringkas span{ font-size:0.72rem; padding:5px 10px; }
}
@media (max-width:360px){
  .show-ringkas{ gap:5px 6px; }
  .show-ringkas span{ font-size:0.645rem; padding:4px 9px; }
}


/* ============================================================
   PERBAIKAN TATA LETAK
   Tiga temuan dari pemeriksaan menyeluruh di 320, 390, 768, 1440.
   ============================================================ */

/* 1. Tombol yang dirapatkan sempat jadi 27px, terlalu kecil untuk
      jempol. Lebarnya tetap dijaga supaya muat satu baris, yang
      ditambah hanya tingginya. */
.show .aksi--rapat .btn{ min-height:40px; }
@media (max-width:430px){ .show .aksi--rapat .btn{ min-height:38px; } }
@media (max-width:340px){ .show .aksi--rapat .btn{ min-height:36px; } }

/* 2. Nilai kredensial yang bisa diketuk untuk menyalin hanya 20px.
      Diperbesar supaya nyaman ditekan tanpa mengubah tampilannya. */
.akun-baris .v{ min-height:34px; }
@media (max-width:520px){
  .akun-baris{ padding:9px 0; }
  .akun-baris .v{ min-height:36px; align-items:center; }
}

/* 3. Pil promo menempel tanpa jarak pada kalimat di atasnya. */
.ct-promo{ margin-top:20px; }
.show .ct-promo{ margin-top:18px; }


/* Hero halaman Akun Pantau memakai irama yang berbeda dari hero
   halaman lain. Disamakan supaya seluruh halaman kedua sejajar. */
main > section.hero:not(.hero-utama){ padding-top:50px; padding-bottom:80px; }
@media (max-width:760px){
  main > section.hero:not(.hero-utama){ padding-top:34px; padding-bottom:48px; }
}


/* ============================================================
   KELAS ROBOT
   ============================================================ */
.kls-isi{ max-width:760px; margin:30px auto 0; display:flex; flex-direction:column; gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.kb{ background:var(--white); padding:18px 22px; display:grid;
  grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; text-align:left; }
.section--dark .kb{ background:var(--ink); }
.kb .n{ grid-row:1 / span 2; font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:0.9rem; font-weight:700; color:#B4614A; padding-top:2px; }
.kb .j{ font-size:1rem; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.section--dark .kb .j{ color:#fff; }
.kb .k{ font-size:0.84rem; line-height:1.5; color:var(--text-secondary); }
@media (max-width:430px){ .kb{ padding:15px 16px; column-gap:12px; } .kb .j{ font-size:0.94rem; } }

.rek{ max-width:520px; margin:28px auto 0; border:1px solid rgba(255,255,255,0.11);
  border-radius:18px; overflow:hidden; background:rgba(255,255,255,0.03); }
.rk-baris{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-top:1px solid rgba(255,255,255,0.06); text-align:left; }
.rk-baris:first-child{ border-top:none; }
.rk-baris .k{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.44); }
.rk-baris .v{ font-size:1rem; font-weight:700; color:#fff; text-align:right; }
.rk-baris .v--salin{ background:none; border:none; cursor:pointer; padding:4px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1.06rem;
  letter-spacing:0.02em; transition:color .25s ease; }
.rk-baris .v--salin:hover{ color:#E8A08C; }
.rk-baris .v--salin.is-salin{ color:#1FBF6B; }
.rk-baris .v--salin.is-salin .tx::after{ content:" tersalin"; font-size:0.7rem; letter-spacing:0.06em; }

.kunci{ display:flex; gap:10px; max-width:420px; margin:26px auto 0; }
.kunci input{
  flex:1; min-width:0; padding:13px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.04);
  color:#fff; font-family:inherit; font-size:0.98rem; letter-spacing:0.02em;
}
.kunci input::placeholder{ color:rgba(255,255,255,0.34); }
.kunci input:focus{ outline:none; border-color:#E8A08C;
  box-shadow:0 0 0 3px rgba(232,160,140,0.14); }
.kunci .btn{ flex:none; }
.kunci-pesan{ min-height:1.3em; margin-top:12px; font-size:0.86rem; color:#FFC7B8; }
@media (max-width:430px){ .kunci{ flex-direction:column; } .kunci .btn{ width:100%; } }

.akses-kartu{ max-width:640px; margin:30px auto 0; display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:660px){ .akses-kartu{ grid-template-columns:1fr 1fr; } }
.ak-item{ display:flex; flex-direction:column; gap:6px; padding:22px 24px; border-radius:18px;
  text-align:left; text-decoration:none; color:inherit;
  border:1px solid rgba(232,160,140,0.32); background:rgba(232,160,140,0.07);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.ak-item:hover{ transform:translateY(-2px); border-color:rgba(232,160,140,0.7); }
.ak-lb{ font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:#E8A08C; }
.ak-jd{ font-size:1.14rem; font-weight:700; color:#fff; letter-spacing:-0.02em; }
.ak-kt{ font-size:0.82rem; line-height:1.5; color:rgba(255,255,255,0.5); }


/* ============================================================
   COPY TRADE: tiga langkah memulai
   ============================================================ */
.ct-langkah{ max-width:1040px; margin:32px auto 0; display:grid;
  grid-template-columns:1fr; gap:14px; }
@media (min-width:860px){ .ct-langkah{ grid-template-columns:repeat(3,1fr); } }
.cl{ display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:24px 24px 26px; border-radius:20px; text-align:left;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); }
.cl--wajib{ border-color:rgba(34,211,238,0.42); background:rgba(34,211,238,0.07); }
.cl .no{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; font-size:0.86rem; font-weight:700;
  color:var(--ink); background:rgba(255,255,255,0.72); flex:none; }
.cl--wajib .no{ background:#22D3EE; }
.cl .jd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:1.06rem; font-weight:700; color:#fff; letter-spacing:-0.02em; line-height:1.3; }
.cl .wajib{ font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; color:#0B0813; background:#22D3EE; }
.cl .kt{ font-size:0.86rem; line-height:1.6; color:rgba(255,255,255,0.56); }
.cl .btn{ margin-top:auto; align-self:stretch; text-align:center; }
@media (max-width:430px){
  .cl{ padding:20px 18px 22px; }
  .cl .jd{ font-size:1rem; }
}


/* Pengingat di atas daftar robot Copy Trade */
.ingat{ max-width:560px; margin:14px auto 0; padding:12px 18px; border-radius:14px;
  font-size:0.84rem; line-height:1.6; text-align:center;
  border:1px solid rgba(232,36,74,0.36); background:rgba(232,36,74,0.08); color:#FFC7D2; }
.ingat b{ color:#fff; font-weight:700; }
.ingat a{ color:inherit; text-decoration:underline; }


/* ============================================================
   PANDUAN SETUP COPY TRADE
   ============================================================ */
.pd-daftar{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.pd{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 26px;
  border-radius:20px; border:1px solid var(--border); background:var(--white);
  box-shadow:0 2px 14px rgba(14,11,26,0.04); text-align:left; }
.section--dark .pd{ background:var(--ink); border-color:rgba(255,255,255,0.1); box-shadow:none; }
.pd .no{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex:none;
  font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:0.9rem; font-weight:700;
  color:#0B0813; background:#22D3EE; }
.pd h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:1.14rem; font-weight:700; letter-spacing:-0.025em; color:var(--ink); line-height:1.3; }
.section--dark .pd h3{ color:#fff; }
.pd .lbl{ font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; }
.lbl--wajib{ color:#0B0813; background:#22D3EE; }
.lbl--penting{ color:#fff; background:var(--ruby); }
.pd .ket{ margin-top:8px; font-size:0.88rem; line-height:1.62; color:var(--text-secondary); }
.pd ul{ margin-top:14px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.pd li{ position:relative; padding-left:20px; font-size:0.88rem; line-height:1.55; color:var(--ink); }
.section--dark .pd li{ color:rgba(255,255,255,0.82); }
.pd li::before{ content:""; position:absolute; left:2px; top:0.55em; width:6px; height:6px;
  border-radius:50%; background:#22D3EE; }
.pd--kode li{ font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:0.82rem; letter-spacing:-0.01em; }
@media (max-width:520px){
  .pd{ padding:20px 18px; gap:14px; }
  .pd .no{ width:32px; height:32px; font-size:0.82rem; }
  .pd h3{ font-size:1.04rem; }
}


/* ---- Daftar robot dengan tautan salin langsung ---- */
.rb-daftar{ margin-top:14px; display:flex; flex-direction:column; gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.rb{ display:grid; grid-template-columns:1.25fr 1fr auto; gap:12px; align-items:center;
  padding:13px 16px; background:var(--white); text-decoration:none; color:inherit;
  transition:background .25s ease; }
.rb:hover{ background:#FAFAFC; }
.rb .nm{ font-size:0.94rem; font-weight:700; color:var(--c); letter-spacing:-0.02em; }
.rb .nm i, .rb .md i{ display:block; font-style:normal; font-size:0.72rem; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); margin-top:2px; }
.rb .md{ font-size:0.92rem; font-weight:700; color:var(--ink); text-align:right; }
.rb .go{ font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; color:#0B0813; background:#22D3EE; white-space:nowrap; }
.pd .cat{ margin-top:12px; font-size:0.8rem; line-height:1.55; color:var(--text-secondary); }
@media (max-width:520px){
  .rb{ grid-template-columns:1fr auto; row-gap:8px; }
  .rb .md{ text-align:left; grid-column:1; }
  .rb .go{ grid-column:2; grid-row:1 / span 2; }
}

/* ---- Dua sisi batas kerugian ---- */
.risk-dua{ max-width:860px; margin:30px auto 0; display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){ .risk-dua{ grid-template-columns:1fr 1fr; } }
.rk{ padding:24px 26px; border-radius:20px; text-align:left;
  border:1px solid rgba(255,255,255,0.11); background:rgba(255,255,255,0.03); }
.rk--ketat{ border-color:rgba(232,36,74,0.34); background:rgba(232,36,74,0.06); }
.rk--longgar{ border-color:rgba(217,169,58,0.34); background:rgba(217,169,58,0.06); }
.rk .lb{ display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:#FFC7D2; }
.rk--longgar .lb{ color:#F0D89A; }
.rk .jd{ display:block; margin-top:9px; font-size:1.16rem; font-weight:700; color:#fff;
  letter-spacing:-0.025em; line-height:1.3; }
.rk .kt{ display:block; margin-top:10px; font-size:0.88rem; line-height:1.62;
  color:rgba(255,255,255,0.58); }

.dd-tabel{ max-width:640px; margin:22px auto 0; border:1px solid rgba(255,255,255,0.11);
  border-radius:16px; overflow:hidden; background:rgba(255,255,255,0.03); }
.dd{ display:grid; grid-template-columns:1.3fr 1fr 1.1fr; gap:12px; padding:12px 20px;
  align-items:baseline; border-top:1px solid rgba(255,255,255,0.06); text-align:left; }
.dd:first-child{ border-top:none; }
.dd--kop{ font-size:0.72rem; letter-spacing:0.09em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); font-weight:700;
  border-bottom:1px solid rgba(255,255,255,0.1); }
.dd .r{ font-size:0.92rem; font-weight:700; color:#fff; }
.dd .a{ font-size:1.02rem; font-weight:800; color:#FF8FA3; letter-spacing:-0.02em; }
.dd--kop .a{ font-size:0.72rem; font-weight:700; color:rgba(255,255,255,0.4); letter-spacing:0.09em; }
.dd .k{ font-size:0.8rem; color:rgba(255,255,255,0.44); text-align:right; }

.rk-saran{ max-width:640px; margin:26px auto 0; padding:22px 26px; border-radius:18px;
  border:1px solid rgba(34,211,238,0.32); background:rgba(34,211,238,0.07); text-align:center; }
.rk-saran p{ font-size:0.92rem; line-height:1.68; color:rgba(255,255,255,0.72); }
.rk-saran b{ color:#fff; font-weight:700; }
.rk-saran .btn{ margin-top:18px; }


/* ---- Ajakan masuk Copy Trade ---- */
.masuk-tekan{ max-width:520px; margin:28px auto 0; padding:24px 28px; border-radius:20px;
  text-align:left; border:1px solid rgba(34,211,238,0.4); background:rgba(34,211,238,0.08); }
.masuk-tekan .mt-lb{ display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:#7FE9FA; }
.masuk-tekan .mt-jd{ display:block; margin-top:9px; font-size:1.24rem; font-weight:700;
  color:#fff; letter-spacing:-0.025em; line-height:1.3; }
.masuk-tekan .mt-kt{ display:block; margin-top:9px; font-size:0.88rem; line-height:1.6;
  color:rgba(255,255,255,0.6); }
@media (max-width:430px){ .masuk-tekan{ padding:20px 20px; } .masuk-tekan .mt-jd{ font-size:1.12rem; } }


/* ============================================================
   COPY TRADE: satu kartu berisi semua yang dibutuhkan
   untuk memutuskan, supaya tidak tercerai-berai.
   ============================================================ */
.ct-daftar{ max-width:900px; margin:30px auto 0; display:grid;
  grid-template-columns:1fr; gap:14px; }
@media (min-width:780px){ .ct-daftar{ grid-template-columns:1fr 1fr; } }
.ct-kartu{ display:flex; flex-direction:column; gap:16px; padding:24px 26px;
  border-radius:20px; text-align:left; background:var(--white);
  border:1px solid var(--border); box-shadow:0 2px 14px rgba(14,11,26,0.04); }
.section--dark .ct-kartu{ background:var(--ink); border-color:rgba(255,255,255,0.1); box-shadow:none; }
.ck-kepala{ display:flex; flex-direction:column; gap:4px;
  padding-bottom:14px; border-bottom:1px solid var(--border); }
.section--dark .ck-kepala{ border-color:rgba(255,255,255,0.09); }
.ck-nm{ font-size:1.24rem; font-weight:700; letter-spacing:-0.03em; color:var(--c); }
.ck-sf{ font-size:0.76rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--text-secondary); }
.ck-angka{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ca{ display:flex; flex-direction:column; gap:3px; }
.ca .k{ font-size:0.7rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--text-secondary); }
.ca .v{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.14rem; font-weight:700;
  letter-spacing:-0.03em; color:var(--ink); }
.section--dark .ca .v{ color:#fff; }
.ca .v i{ display:block; font-style:normal; font-size:0.72rem; font-weight:500;
  letter-spacing:0.04em; color:var(--text-secondary); margin-top:2px; }
.ck-aksi{ display:flex; gap:9px; margin-top:auto; }
.ck-aksi .btn{ flex:1; padding:10px 12px; font-size:0.82rem; text-align:center; min-height:40px; }
.cat-kecil{ max-width:56ch; margin:20px auto 0; font-size:0.82rem; line-height:1.6;
  color:var(--text-secondary); }

/* ---- Tiga hal yang dilakukan ---- */
.ct-ringkas{ max-width:900px; margin:30px auto 0; display:grid;
  grid-template-columns:1fr; gap:14px; }
@media (min-width:820px){ .ct-ringkas{ grid-template-columns:repeat(3,1fr); } }
.cr{ display:flex; flex-direction:column; gap:9px; padding:22px 24px; border-radius:18px;
  text-align:left; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); }
.cr--wajib{ border-color:rgba(34,211,238,0.42); background:rgba(34,211,238,0.08); }
.cr .no{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; font-size:0.82rem; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,0.68); }
.cr--wajib .no{ background:#22D3EE; }
.cr .jd{ font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-0.02em; line-height:1.32; }
.cr .kt{ font-size:0.84rem; line-height:1.55; color:rgba(255,255,255,0.55); }
@media (max-width:430px){
  .ct-kartu{ padding:20px 20px; }
  .ck-nm{ font-size:1.14rem; }
  .cr{ padding:18px 18px; }
}


/* ============================================================
   CARA MENDAPATKAN: tiga langkah, seragam di semua produk
   ============================================================ */
.cb-daftar{ max-width:900px; margin:30px auto 0; display:grid;
  grid-template-columns:1fr; gap:14px; }
@media (min-width:820px){ .cb-daftar{ grid-template-columns:repeat(3,1fr); } }
.cb{ display:flex; flex-direction:column; gap:9px; padding:22px 24px; border-radius:18px;
  text-align:left; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); }
.cb .no{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; font-size:0.82rem; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.06); background:color-mix(in srgb, var(--c) 90%, #fff); }
.cb .jd{ font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-0.02em; line-height:1.32; }
.cb .kt{ font-size:0.84rem; line-height:1.58; color:rgba(255,255,255,0.55); }
@media (max-width:430px){ .cb{ padding:18px 18px; } }


/* ============================================================
   TANYA JAWAB
   ============================================================ */
.tq-daftar{ max-width:740px; margin:0 auto; display:flex; flex-direction:column; gap:38px; }
.tq-jd{ display:flex; align-items:center; gap:12px; font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:1.12rem; font-weight:700; letter-spacing:-0.02em; color:var(--c); margin-bottom:14px; }
.section--offwhite .tq-jd{ color:currentColor; color:color-mix(in srgb, var(--c) 74%, #0B0813); }
.tq-jd .n{ font-size:0.72rem; font-weight:700; letter-spacing:0.04em; padding:3px 9px;
  border-radius:999px; color:var(--text-secondary); border:1px solid var(--border); }
.tq-isi{ display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.tq{ background:var(--white); }
.section--dark .tq{ background:var(--ink); }
.tq summary{ list-style:none; cursor:pointer; padding:17px 22px; padding-right:48px;
  position:relative; font-size:0.96rem; font-weight:600; line-height:1.45; color:var(--ink);
  transition:background .25s ease; }
.section--dark .tq summary{ color:#fff; }
.tq summary::-webkit-details-marker{ display:none; }
.tq summary:hover{ background:#FAFAFC; }
.tq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--c); border-bottom:2px solid var(--c);
  transform:rotate(45deg); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.tq[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.tq-jw{ padding:0 22px 20px; }
.tq-jw p{ font-size:0.9rem; line-height:1.72; color:var(--text-secondary); }
@media (max-width:430px){
  .tq summary{ padding:15px 18px; padding-right:42px; font-size:0.92rem; }
  .tq summary::after{ right:18px; }
  .tq-jw{ padding:0 18px 18px; }
}


/* ============================================================
   HALAMAN BELI: daftar harga ringkas untuk transaksi cepat
   ============================================================ */
.bl-semua{ max-width:740px; margin:0 auto; display:flex; flex-direction:column; gap:32px; }
.bl-jd{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.1rem; font-weight:700;
  letter-spacing:-0.025em; color:var(--ink); margin-bottom:13px; }
.section--dark .bl-jd{ color:#fff; }
.bl-jd .k{ font-size:0.76rem; font-weight:500; letter-spacing:0.04em; color:var(--text-secondary); }
.bl-daftar{ display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.bl{ display:grid; grid-template-columns:1.35fr 0.95fr 1fr; gap:14px; align-items:center;
  padding:16px 20px; background:var(--white); text-decoration:none; color:inherit;
  transition:background .25s ease; }
.bl:hover{ background:#FAFAFC; }
.bl .nm{ font-size:1rem; font-weight:700; color:var(--c); letter-spacing:-0.02em; }
.bl i{ display:block; font-style:normal; font-size:0.72rem; font-weight:500;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--text-secondary); margin-top:3px; }
.bl .md{ font-size:0.92rem; font-weight:600; color:var(--ink); }
.bl .hg{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.14rem; font-weight:700;
  letter-spacing:-0.03em; color:var(--ink); text-align:right; }
.bl .hg i{ text-align:right; }
.bl-cat{ max-width:56ch; margin:24px auto 0; text-align:center; font-size:0.86rem;
  line-height:1.65; color:var(--text-secondary); }
.bl-cat b{ color:var(--ink); font-weight:700; }
@media (max-width:520px){
  .bl{ grid-template-columns:1fr auto; row-gap:10px; padding:15px 16px; }
  .bl .md{ grid-column:1; grid-row:2; }
  .bl .hg{ grid-column:2; grid-row:1 / span 2; }
}

/* Peringatan penipuan di dekat rekening */
.rek-aman{ max-width:520px; margin:16px auto 0; padding:18px 22px; border-radius:16px;
  text-align:left; border:1px solid rgba(232,36,74,0.36); background:rgba(232,36,74,0.07); }
.rek-aman .ra-lb{ display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:#FFC7D2; margin-bottom:7px; }
.rek-aman p{ font-size:0.84rem; line-height:1.62; color:rgba(255,255,255,0.66); }
.rek-aman b{ color:#fff; font-weight:700; }
.section--offwhite .rek-aman{ background:rgba(232,36,74,0.05); }
.section--offwhite .rek-aman .ra-lb{ color:#B01838; }
.section--offwhite .rek-aman p{ color:var(--text-secondary); }
.section--offwhite .rek-aman b{ color:var(--ink); }


/* Tautan tanya jawab, ditaruh di titik keraguan muncul */
.tanya-taut{ max-width:640px; margin:20px auto 0; text-align:center;
  font-size:0.88rem; line-height:1.6; color:var(--text-secondary); }
.tanya-taut a{ color:inherit; font-weight:600; text-decoration:underline;
  text-underline-offset:3px; transition:color .25s ease; }
.tanya-taut a:hover{ color:var(--ruby); }
.section--dark .tanya-taut{ color:rgba(255,255,255,0.5); }
.section--dark .tanya-taut a{ color:rgba(255,255,255,0.78); }


/* ============================================================
   BACKTEST: angka dan dua kartu risiko
   ============================================================ */
.bt-angka{ max-width:800px; margin:30px auto 0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:18px; overflow:hidden; }
@media (min-width:760px){ .bt-angka{ grid-template-columns:repeat(4,1fr); } }
.ba{ background:var(--white); padding:22px 14px; display:flex; flex-direction:column;
  align-items:center; gap:5px; }
.section--dark .ba{ background:var(--ink); }
.ba .v{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.7rem; font-weight:700;
  letter-spacing:-0.04em; color:var(--c); line-height:1; }
.ba .k{ font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); }
.section--dark .ba .k{ color:#fff; }
.ba .c{ font-size:0.7rem; line-height:1.4; color:var(--text-secondary); text-align:center; }

.bt-risiko{ max-width:860px; margin:28px auto 0; display:grid;
  grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){ .bt-risiko{ grid-template-columns:1fr 1fr; } }
.br{ padding:24px 26px; border-radius:20px; text-align:left;
  border:1px solid rgba(217,169,58,0.32); background:rgba(217,169,58,0.07); }
.br--nyata{ border-color:rgba(31,191,107,0.32); background:rgba(31,191,107,0.06); }
.section--offwhite .br{ background:rgba(217,169,58,0.06); }
.section--offwhite .br--nyata{ background:rgba(31,191,107,0.05); }
.br .lb{ display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:#8A6A18; }
.br--nyata .lb{ color:#0A6038; }
.section--dark .br .lb{ color:#F0D89A; }
.section--dark .br--nyata .lb{ color:#9DF5C6; }
.br .ag{ display:block; margin-top:9px; font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:2.1rem; font-weight:700; letter-spacing:-0.04em; color:var(--ink); line-height:1; }
.section--dark .br .ag{ color:#fff; }
.br .tg{ display:block; margin-top:7px; font-size:0.8rem; font-weight:600;
  color:var(--text-secondary); }
.br .ke{ margin-top:13px; font-size:0.85rem; line-height:1.62; color:var(--text-secondary); }
.br .ke b{ color:var(--ink); font-weight:700; }
.section--dark .br .ke b{ color:#fff; }

.bt-tutup{ max-width:56ch; margin:26px auto 0; font-size:1rem; line-height:1.65;
  color:var(--text-secondary); }
.bt-tutup b{ color:var(--ink); font-weight:700; }
.section--dark .bt-tutup b{ color:#fff; }

.bt-saran{ max-width:560px; margin:26px auto 0; padding:20px 24px; border-radius:16px;
  text-align:left; border:1px solid rgba(217,169,58,0.34); background:rgba(217,169,58,0.08); }
.bt-saran .sa-lb{ display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:#8A6A18; margin-bottom:7px; }
.section--dark .bt-saran .sa-lb{ color:#F0D89A; }
.bt-saran p{ font-size:0.88rem; line-height:1.65; color:var(--text-secondary); }
.bt-saran b{ color:var(--ink); font-weight:700; }
.section--dark .bt-saran b{ color:#fff; }


/* ============================================================
   SKALA JARAK SEKSI BACKTEST
   Empat nilai saja, dipakai berulang, supaya iramanya rapi:
   12 rapat, 18 antar kalimat, 34 sebelum blok, 60 antar kelompok.
   ============================================================ */
#backtest .eyebrow{ margin-top:0; margin-bottom:12px; }
#backtest .pp-kalimat{ margin-block:0; margin-inline:auto; }
#backtest .pp-kalimat + p{ margin-top:18px !important; }
#backtest .bt-angka{ margin-top:34px; }
#backtest .bt-risiko{ margin-top:34px; }
#backtest .bt-saran{ margin-top:34px; }
#backtest .bt-cat{ margin-top:18px; }
#backtest .bt-cat + .eyebrow{ margin-top:60px !important; }

/* Judul dengan penekanan pada baris kedua */
.pp-kalimat--tegas{ max-width:24ch; }
.pp-kalimat--tegas .m{
  display:block; font-size:0.62em; font-weight:600; letter-spacing:-0.02em;
  margin-bottom:6px;
}


/* Sorotan periode paling produktif */
.bt-sorot{ max-width:700px; margin-inline:auto; display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(31,191,107,0.34);
  border-radius:18px; overflow:hidden; }
@media (min-width:640px){ .bt-sorot{ grid-template-columns:repeat(3,1fr); } }
.so{ background:var(--ink); padding:20px 14px; display:flex; flex-direction:column;
  align-items:center; gap:5px; }
.section--offwhite .so{ background:var(--white); }
.so .v{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.66rem; font-weight:700;
  letter-spacing:-0.04em; line-height:1; color:#5BD99A; }
.so .k{ font-size:0.76rem; line-height:1.4; color:rgba(255,255,255,0.5); text-align:center; }
.section--offwhite .so .k{ color:var(--text-secondary); }
#backtest .bt-sorot{ margin-top:34px; }
#backtest .bt-sorot + .eyebrow{ margin-top:60px !important; }


/* ============================================================
   COPY TRADE: pilih robot lalu lima langkah
   ============================================================ */
.cr-daftar{ max-width:760px; margin:30px auto 0; display:flex; flex-direction:column; gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.cr-baris{ display:grid; grid-template-columns:1.25fr 1fr 1fr auto; gap:14px; align-items:center;
  padding:16px 20px; background:var(--white); text-align:left; }
.section--dark .cr-baris{ background:var(--ink); }
.cr-baris .nm{ font-size:1rem; font-weight:700; color:var(--c); letter-spacing:-0.02em; }
.cr-baris i{ display:block; font-style:normal; font-size:0.72rem; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); margin-top:3px; }
.cr-baris .md, .cr-baris .hg{ font-size:0.92rem; font-weight:700; color:var(--ink); }
.section--dark .cr-baris .md, .section--dark .cr-baris .hg{ color:#fff; }
.cr-baris .ak{ display:flex; gap:8px; }
.cr-baris .ak .btn{ padding:9px 15px; font-size:0.78rem; min-height:38px; }
@media (max-width:720px){
  .cr-baris{ grid-template-columns:1fr 1fr; row-gap:12px; }
  .cr-baris .nm{ grid-column:1 / -1; }
  .cr-baris .ak{ grid-column:1 / -1; }
  .cr-baris .ak .btn{ flex:1; text-align:center; }
}

.cl2-daftar{ max-width:720px; margin:30px auto 0; display:flex; flex-direction:column; gap:12px; }
.cl2{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px 22px; border-radius:18px;
  text-align:left; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); }
.cl2--wajib{ border-color:rgba(34,211,238,0.42); background:rgba(34,211,238,0.08); }
.cl2 .no{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; font-size:0.86rem; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,0.72); flex:none; }
.cl2--wajib .no{ background:#22D3EE; }
.cl2 h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:1.04rem;
  font-weight:700; color:#fff; letter-spacing:-0.02em; line-height:1.3; }
.cl2 .lbl{ font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; color:#0B0813; background:#22D3EE; }
.cl2 p{ margin-top:8px; font-size:0.86rem; line-height:1.6; color:rgba(255,255,255,0.56); }
.cl-aksi{ margin-top:14px; }
.cl-aksi .btn{ min-height:40px; }
@media (max-width:430px){ .cl2{ padding:18px 18px; gap:13px; } .cl2 h3{ font-size:0.98rem; }
  .cl2 .lbl{ font-size:0.72rem; } }


/* ============================================================
   RINGKASAN RISIKO: angka tetap terpampang, penjelasan dilipat
   ============================================================ */
.bt-ring{ max-width:640px; margin-inline:auto; display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; overflow:hidden; }
@media (min-width:600px){ .bt-ring{ grid-template-columns:1fr 1fr; } }
.brg{ background:var(--ink); padding:18px 16px; display:flex; flex-direction:column;
  align-items:center; gap:4px; }
.section--offwhite .brg{ background:var(--white); }
.brg .k{ font-size:0.74rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:rgba(255,255,255,0.44); text-align:center; }
.section--offwhite .brg .k{ color:var(--text-secondary); }
.brg .v{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:1.44rem; font-weight:700;
  letter-spacing:-0.035em; color:#fff; line-height:1.1; }
.section--offwhite .brg .v{ color:var(--ink); }
.brg .t{ font-size:0.76rem; color:rgba(255,255,255,0.44); text-align:center; }
.section--offwhite .brg .t{ color:var(--text-secondary); }

.bt-detil{ max-width:640px; margin-inline:auto; text-align:left; }
.bt-detil summary{ list-style:none; cursor:pointer; text-align:center; font-size:0.86rem;
  font-weight:600; color:rgba(255,255,255,0.6); padding:10px 0; position:relative;
  transition:color .25s ease; }
.section--offwhite .bt-detil summary{ color:var(--text-secondary); }
.bt-detil summary::-webkit-details-marker{ display:none; }
.bt-detil summary::after{ content:" +"; font-weight:700; }
.bt-detil[open] summary::after{ content:" −"; }
.bt-detil summary:hover{ color:#fff; }
.bt-detil:not([open]) .bd-isi{ display:none; }
.bt-detil[open] .bd-isi{ display:flex; flex-direction:column; gap:11px;
  padding:6px 20px 18px; }
.bd-isi p{ font-size:0.85rem; line-height:1.62; color:rgba(255,255,255,0.56); }
.section--offwhite .bd-isi p{ color:var(--text-secondary); }
.bd-isi b{ color:#fff; font-weight:700; }
.section--offwhite .bd-isi b{ color:var(--ink); }
/* Skala jarak yang sama dipakai di seksi akun real */
#backtest .eyebrow, #live .eyebrow{ margin-top:0; margin-bottom:12px; }
#backtest .pp-kalimat, #live .pp-kalimat{ margin-block:0; margin-inline:auto; }
#backtest .pp-kalimat + p, #live .pp-kalimat + p{ margin-top:18px !important; }
#backtest .bt-angka, #live .bt-angka{ margin-top:34px; }
#backtest .bt-sorot, #live .bt-sorot{ margin-top:34px; }
#backtest .bt-ring, #live .bt-ring{ margin-top:34px; }
#backtest .bt-detil, #live .bt-detil{ margin-top:18px; }
#backtest .bt-cat, #live .bt-cat{ margin-top:18px; }
#backtest .bt-cat + .eyebrow, #live .bt-cat + .eyebrow,
#backtest .bt-sorot + .eyebrow, #live .bt-sorot + .eyebrow{ margin-top:60px !important; }


/* Keterangan bukti di bawah tombol, bukan tombol tambahan */
.bukti-cat{ margin-top:14px; font-size:0.78rem; font-weight:500; letter-spacing:0.01em;
  color:var(--text-secondary); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.section--dark .bukti-cat{ color:rgba(255,255,255,0.44); }
.bukti-cat .sep{ opacity:0.5; }


/* ============================================================
   COPY TRADE: tabel periksa dan tabel salin di dalam langkah
   ============================================================ */
.cp-daftar{ margin-top:14px; display:flex; flex-direction:column; gap:1px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:14px; overflow:hidden; }
.cp-baris{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 15px; background:#0F0C18; flex-wrap:wrap; }
.cp-baris .nm{ font-size:0.94rem; font-weight:700; color:var(--c); letter-spacing:-0.02em; }
.cp-baris i{ display:block; font-style:normal; font-size:0.72rem; font-weight:500;
  letter-spacing:0.04em; color:rgba(255,255,255,0.4); margin-top:2px; }
.cp-baris .ak{ display:flex; gap:7px; }
.cp-baris .ak .btn{ padding:8px 13px; font-size:0.74rem; min-height:36px; }

.cs-daftar{ margin-top:14px; display:flex; flex-direction:column; gap:1px;
  background:rgba(34,211,238,0.16); border:1px solid rgba(34,211,238,0.3);
  border-radius:14px; overflow:hidden; }
.cs-baris{ display:grid; grid-template-columns:1.15fr 1fr 1fr auto; gap:12px; align-items:center;
  padding:13px 15px; background:#0F0C18; text-decoration:none; color:inherit;
  transition:background .25s ease; }
.cs-baris:hover{ background:#161226; }
.cs-baris .nm{ font-size:0.94rem; font-weight:700; color:var(--c); letter-spacing:-0.02em; }
.cs-baris .md{ font-size:0.84rem; font-weight:600; color:rgba(255,255,255,0.72); }
.cs-baris .hg{ font-size:0.84rem; font-weight:700; color:#fff; }
.cs-baris .hg i{ display:block; font-style:normal; font-size:0.7rem; font-weight:500;
  color:rgba(255,255,255,0.4); margin-top:2px; }
.cs-baris .go{ font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:8px 15px; border-radius:999px; color:#0B0813; background:#22D3EE; white-space:nowrap; }
@media (max-width:560px){
  .cp-baris .ak{ width:100%; }
  .cp-baris .ak .btn{ flex:1; min-width:0; text-align:center; }
  .cs-baris{ grid-template-columns:1fr auto; row-gap:9px; }
  .cs-baris .md{ grid-column:1; grid-row:2; }
  .cs-baris .hg{ grid-column:1; grid-row:3; }
  .cs-baris .go{ grid-column:2; grid-row:1 / span 3; }
}
/* Kartu langkah tidak boleh melebar melebihi induknya di layar sempit */
.cl2{ min-width:0; }
.cl-isi{ min-width:0; }
.cl-isi h3, .cl-isi p{ overflow-wrap:anywhere; }
.cp-daftar, .cs-daftar{ min-width:0; }
.cp-baris, .cs-baris{ min-width:0; }
.cp-baris .nm, .cs-baris .nm, .cs-baris .md, .cs-baris .hg{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:380px){
  .cp-baris .ak .btn{ padding:8px 8px; font-size:0.72rem; }
}
#cara .vpn-nota{ margin-top:34px; }
#cara .vpn-nota + .cl2-daftar{ margin-top:18px; }


/* Lencana produk paling banyak dipilih */
.lencana-laris{ display:inline-block; margin-left:9px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
  color:#0B0813; background:linear-gradient(120deg,#F0E2BE,#C9A75B); vertical-align:middle; }
@media (max-width:430px){ .lencana-laris{ font-size:0.7rem; padding:3px 9px; margin-left:7px; } }


/* ============================================================
   ARTIKEL DI BERANDA
   ============================================================ */
.ar-daftar{ max-width:900px; margin:30px auto 0; display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:820px){ .ar-daftar{ grid-template-columns:repeat(3,1fr); } }
.ar-kartu{ display:flex; flex-direction:column; gap:9px; padding:24px 26px; border-radius:20px;
  text-align:left; text-decoration:none; color:inherit; background:var(--white);
  border:1px solid var(--border); box-shadow:0 2px 14px rgba(14,11,26,0.04);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.section--dark .ar-kartu{ background:var(--ink); border-color:rgba(255,255,255,0.1); box-shadow:none; }
.ar-kartu:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.18); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.ar-kartu .jd{ font-size:1.04rem; font-weight:700; letter-spacing:-0.025em; color:var(--ink);
  line-height:1.32; }
.section--dark .ar-kartu .jd{ color:#fff; }
.ar-kartu .kt{ font-size:0.85rem; line-height:1.6; color:var(--text-secondary); }
.ar-kartu .go{ margin-top:auto; padding-top:6px; font-size:0.74rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:currentColor; color:color-mix(in srgb, var(--c) 74%, #0B0813); }
.section--dark .ar-kartu .go{ color:var(--c); }
@media (max-width:430px){ .ar-kartu{ padding:20px 20px; } }


/* Keterangan badan hukum di footer */
.f-badan{ margin-top:12px; font-size:0.8rem; line-height:1.6; color:rgba(255,255,255,0.44); }
.f-badan b{ color:rgba(255,255,255,0.72); font-weight:600; }


/* ============================================================
   Kotak jujur di seksi terang.
   Sebelumnya warna hurufnya selalu putih, jadi hilang di latar
   terang. Sekarang ikut warna seksinya.
   ============================================================ */
.section--offwhite .jujur, .section--white .jujur{
  background:rgba(232,36,74,0.045); border-color:rgba(232,36,74,0.2);
}
.section--offwhite .jujur h4, .section--white .jujur h4{ color:#B01838; }
.section--offwhite .jujur li, .section--white .jujur li{ color:var(--text-secondary); }
.section--offwhite .jujur li b, .section--white .jujur li b{ color:var(--ink); }
.section--offwhite .jujur li::before, .section--white .jujur li::before{ background:var(--ruby); }


/* ============================================================
   Perbaikan kontras kartu angka.
   Warna abu-abu gelap tidak terbaca di seksi gelap, dan warna
   produk yang terang tidak terbaca di seksi terang.
   ============================================================ */
.section--dark .ba .c,
.section--dark .brg .k, .section--dark .brg .t,
.section--dark .so .k{ color:rgba(255,255,255,0.6); }
.section--dark .bt-cat,
.section--dark .cat-kecil,
.section--dark .bl-cat{ color:rgba(255,255,255,0.6); }
/* Paragraf pengantar di seksi gelap: warna abu-abu gelap tidak
   terbaca, jadi dipaksa memakai putih transparan. */
.section--dark p[style*="color:var(--text-secondary)"],
.section--dark p[style*="color: var(--text-secondary)"]{ color:rgba(255,255,255,0.66) !important; }

/* Warna produk yang terlalu terang diberi versi gelap di seksi terang */
.section--offwhite .ba .v, .section--white .ba .v{
  color:currentColor;
  color:currentColor; color:color-mix(in srgb, var(--c) 58%, #0B0813);
}


/* Paragraf pengantar mewarisi warna seksinya */
.section--dark .container > p{ color:rgba(255,255,255,0.66); }
.section--offwhite .container > p, .section--white .container > p{ color:var(--text-secondary); }


/* Tautan Copy Trade di bawah tombol kartu robot */
.ct-taut{ margin-top:7px; font-size:0.82rem; line-height:1.55; color:var(--text-secondary); }
.section--dark .ct-taut{ color:rgba(255,255,255,0.46); }
.ct-taut a{ color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:currentColor;
  text-decoration-color:currentColor; text-decoration-color:color-mix(in srgb, var(--c) 60%, transparent); font-weight:600;
  transition:color .25s ease; }
.ct-taut a:hover{ color:var(--c); }


/* ============================================================
   HERO: dirapatkan supaya muat di layar laptop pendek
   Layar 1366x768 dan 1440x820 sangat umum, dan hero yang
   melebihi tinggi layar membuat tombolnya terpotong.
   ============================================================ */
.hero-utama{ padding-top:clamp(56px, 7vh, 96px); }
.hero-utama .hero-lead{ margin-top:16px !important; }
.hero-utama .bukti-hero{ margin-top:26px; }
.hero-utama .bh-grafik{ margin-top:12px; height:auto; }
.hero-utama .hero-actions{ margin-top:26px; }
@media (max-height:860px) and (min-width:900px){
  .hero-utama{ padding-top:44px; }
  /* Perkecil bidang kurvanya saja, bukan kotak pembungkusnya,
     supaya label sumbu tidak meluap dan menimpa teks di bawahnya. */
  .hero-utama .kv-wrap{ height:170px; }
  .hero-utama .kv-wrap svg{ height:170px; }
  .hero-utama .bukti-hero{ margin-top:20px; }
  .hero-utama .hero-actions{ margin-top:20px; }
  .hero-utama .bh-ajak{ margin-top:18px !important; }
}
@media (max-height:780px) and (min-width:900px){
  .hero-utama{ padding-top:30px; }
  .hero-utama .kv-wrap{ height:132px; }
  .hero-utama .kv-wrap svg{ height:132px; }
  .hero-utama .hero-lead{ margin-top:12px !important; }
  .hero-utama .bh-ajak{ margin-top:14px !important; }
}


/* ============================================================
   KARTU PRODUK: irama jarak dibakukan
   Empat nilai saja: 12 rapat, 18 antar blok, 26 sebelum harga,
   14 setelah tombol. Sebelumnya delapan nilai acak.
   ============================================================ */
.show .ins{ margin-bottom:12px; }
.show h2{ margin:0; }
.show .kar{ margin-top:12px; }
.show .show-ringkas{ margin-top:18px; }
.show .harga{ margin-top:26px; }
.show .aksi{ margin-top:18px !important; }
.show .bukti-cat{ margin-top:18px !important; justify-content:center; }
.show .ct-taut{ margin-top:6px !important; }

/* Lencana ikut sebaris dengan keterangan pasar, tidak turun sendiri */
.show .ins{ display:flex; align-items:center; justify-content:center; gap:9px;
  flex-wrap:wrap; row-gap:7px; }


/* Kalimat pengantar hero: lebih lebar di layar besar supaya tidak
   patah jadi tiga baris. Di HP tetap sempit agar mudah dibaca. */
@media (min-width:900px){
  .hero-utama .hero-lead{ max-width:40ch !important; }
}


/* ============================================================
   AREA AMAN iPhone
   iPhone dengan batang beranda punya ruang terlindung di bawah
   layar. Tanpa ini, tombol melayang bertumpuk dengan batangnya.
   ============================================================ */
.wa-apung{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
.wa-float{ bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
body{ padding-bottom:env(safe-area-inset-bottom, 0px); }
@supports (padding: max(0px)){
  .container{ padding-left:max(24px, env(safe-area-inset-left));
              padding-right:max(24px, env(safe-area-inset-right)); }
}


/* ============================================================
   ARTIKEL: kotak kutipan dan ajakan di akhir
   ============================================================ */
.article-body .callout{ margin:30px 0; padding:22px 26px; border-radius:18px;
  border:1px solid rgba(31,191,107,.3); background:rgba(31,191,107,.05); }
.article-body .callout-label{ font-size:0.7rem; font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:#0A6038; margin-bottom:8px; }
.article-body .callout p{ margin:0; font-size:0.95rem; line-height:1.7; }
.section--dark .article-body .callout-label{ color:#9DF5C6; }

.artikel-cta{ margin:44px 0 8px; padding:30px 32px; border-radius:22px;
  border:1px solid var(--border); background:var(--surface, rgba(255,255,255,.02)); }
.artikel-cta .ac-lbl{ font-size:0.7rem; font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ruby, #E8244A); margin-bottom:9px; }
.artikel-cta h3{ font-family:"Inter Tight",Inter,sans-serif; font-size:1.5rem; font-weight:700;
  letter-spacing:-0.03em; line-height:1.2; }
.artikel-cta .ac-kar{ margin-top:11px; font-size:0.95rem; line-height:1.7;
  color:var(--text-secondary); max-width:56ch; }
.artikel-cta .hero-actions{ justify-content:flex-start; }
@media (max-width:560px){
  .artikel-cta{ padding:24px 22px; }
  .artikel-cta .hero-actions .btn{ flex:1; text-align:center; }
  .article-body .callout{ padding:20px 20px; }
}


/* ============================================================
   SOCIAL PROOF: tiga angka
   ============================================================ */
.sp-daftar{ max-width:900px; margin:34px auto 0; display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:760px){ .sp-daftar{ grid-template-columns:repeat(3,1fr); } }
.sp-kartu{ padding:28px 26px; border-radius:20px; border:1px solid var(--border);
  background:var(--white); box-shadow:0 2px 14px rgba(14,11,26,0.04);
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.section--dark .sp-kartu{ background:var(--ink); border-color:rgba(255,255,255,0.1); box-shadow:none; }
.sp-kartu .v{ font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:2.4rem; font-weight:800;
  letter-spacing:-0.045em; line-height:1; color:var(--c); }
.sp-kartu .j{ font-size:0.9rem; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.section--dark .sp-kartu .j{ color:#fff; }
.sp-kartu .k{ margin-top:3px; font-size:0.84rem; line-height:1.6; color:var(--text-secondary); }
.sp-cat{ margin-top:22px; font-size:0.8rem; color:var(--text-secondary); }
.section--dark .sp-cat{ color:rgba(255,255,255,0.44); }

/* ============================================================
   TESTIMONI: pita berjalan
   Berhenti saat disentuh, di-hover, atau difokuskan keyboard.
   Bisa digeser manual. Berhenti total bila pengguna memilih
   mengurangi gerakan di pengaturan perangkatnya.
   ============================================================ */
.tm-bidang{ margin-top:34px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tm-bidang::-webkit-scrollbar{ display:none; }
.tm-bidang:focus-visible{ outline:2px solid var(--c); outline-offset:4px; border-radius:20px; }
.tm-jalur{ display:flex; width:max-content; animation:tm-geser 96s linear infinite; }
.tm-bidang:hover .tm-jalur,
.tm-bidang:focus-within .tm-jalur,
.tm-bidang:active .tm-jalur{ animation-play-state:paused; }
@keyframes tm-geser{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.tm-set{ display:flex; gap:16px; padding:4px 8px; }

.tm-kartu{ flex:0 0 340px; margin:0; padding:26px 26px 22px; border-radius:22px;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.028);
  box-shadow:0 1px 20px rgba(0,0,0,0.16);
  display:flex; flex-direction:column; gap:14px; text-align:left; }
.section:not(.section--dark) .tm-kartu{ background:var(--white); border-color:var(--border);
  box-shadow:0 2px 14px rgba(14,11,26,0.04); }
.tm-kutip{ width:20px; height:15px; color:rgba(232,36,74,0.55); flex:none; }
.tm-kartu blockquote{ margin:0; font-size:0.92rem; line-height:1.68;
  color:rgba(255,255,255,0.72); }
.section:not(.section--dark) .tm-kartu blockquote{ color:var(--text-secondary); }
.tm-kartu figcaption{ margin-top:auto; padding-top:4px; display:flex; align-items:center; gap:11px; }
.tm-ava{ width:38px; height:38px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:700; letter-spacing:0.02em; color:#fff;
  background:linear-gradient(140deg, #E8244A, #8B1E5C); }
.tm-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tm-id b{ font-size:0.88rem; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.section:not(.section--dark) .tm-id b{ color:var(--ink); }
.tm-id i{ font-style:normal; font-size:0.76rem; color:rgba(255,255,255,0.44); }
.section:not(.section--dark) .tm-id i{ color:var(--text-secondary); }
.tm-cat{ margin-top:26px; font-size:0.78rem; line-height:1.6; color:rgba(255,255,255,0.4);
  max-width:60ch; margin-inline:auto; }

@media (max-width:560px){
  .tm-kartu{ flex:0 0 84vw; max-width:320px; padding:22px 22px 20px; }
  .tm-set{ gap:13px; }
  .tm-jalur{ animation-duration:120s; }
}
@media (prefers-reduced-motion: reduce){
  .tm-jalur{ animation:none; }
  .tm-bidang{ scroll-snap-type:x mandatory; }
  .tm-kartu{ scroll-snap-align:center; }
}


/* Keterangan modal awal Copy Trade */
.ct-modal{ margin-top:10px; font-size:0.86rem; line-height:1.6; color:rgba(255,255,255,0.5);
  max-width:46ch; margin-inline:auto; }
.ct-modal b{ color:#fff; font-weight:700; }
.section:not(.section--dark) .ct-modal{ color:var(--text-secondary); }
.section:not(.section--dark) .ct-modal b{ color:var(--ink); }


/* Baris pasar di bawah kalimat pengantar hero */
.hero-pasar{ margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:0.78rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.44); }
.hero-pasar .s{ letter-spacing:0; opacity:.6; }
.section:not(.section--dark) .hero-pasar{ color:var(--text-secondary); }


/* Layar HP pendek: rapatkan hero supaya tombolnya tetap terlihat */
@media (max-height:840px) and (max-width:900px){
  .hero-utama{ padding-top:40px; }
  .hero-utama .hero-lead{ margin-top:14px !important; }
  .hero-utama .hero-pasar{ margin-top:9px; }
  .hero-utama .bukti-hero{ margin-top:18px; }
  .hero-utama .hero-actions{ margin-top:18px; }
}


/* Layar HP sangat pendek seperti iPhone SE: kurva diperkecil
   supaya ketiga tombol tetap terlihat tanpa menggulir. */
@media (max-height:700px) and (max-width:900px){
  .hero-utama{ padding-top:28px; }
  .hero-utama h1{ font-size:2rem !important; }
  .hero-utama .hero-lead{ margin-top:10px !important; font-size:0.92rem; }
  .hero-utama .hero-pasar{ margin-top:7px; font-size:0.7rem; }
  .hero-utama .bukti-hero{ margin-top:12px; }
  .hero-utama .kv-wrap{ height:104px; }
  .hero-utama .kv-wrap svg{ height:104px; }
  .hero-utama .bh-ajak{ margin-top:12px !important; font-size:0.9rem; }
  .hero-utama .hero-actions{ margin-top:14px; }
}


/* ============================================================
   PITA PENGUMUMAN NOMOR
   Tipis, di atas menu, bisa ditutup. Bukan jendela sembulan,
   supaya tidak terasa panik dan tidak menutupi isi halaman.
   ============================================================ */
.pita-nomor{ position:relative; z-index:120; background:#141024;
  border-bottom:1px solid rgba(232,36,74,0.28); }
.pn-isi{ max-width:1120px; margin-inline:auto; padding:10px 52px 10px 24px;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.pn-tt{ width:7px; height:7px; border-radius:50%; background:#E8244A; flex:none;
  box-shadow:0 0 0 3px rgba(232,36,74,0.18); }
.pn-teks{ margin:0; font-size:0.83rem; line-height:1.5; color:rgba(255,255,255,0.72);
  text-align:center; }
.pn-teks b{ color:#fff; font-weight:700; white-space:nowrap; }
.pn-cta{ flex:none; padding:6px 14px; border-radius:999px;
  border:1px solid rgba(232,36,74,0.5); background:rgba(232,36,74,0.12);
  font-size:0.78rem; font-weight:700; color:#FF7A93; text-decoration:none;
  transition:background .25s ease; }
.pn-cta:hover{ background:rgba(232,36,74,0.22); }
.pn-tutup{ position:absolute; top:50%; right:12px; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%; background:transparent;
  color:rgba(255,255,255,0.5); font-size:20px; line-height:1; cursor:pointer; }
.pn-tutup:hover{ color:#fff; background:rgba(255,255,255,0.08); }
@media (max-width:640px){
  .pn-isi{ padding:8px 40px 8px 16px; gap:8px; }
  .pn-teks{ font-size:0.76rem; line-height:1.45; }
  .pn-cta{ font-size:0.72rem; padding:4px 11px; }
  .pn-tt{ display:none; }
}


/* Pengumuman nomor di halaman tautan bio, yang tidak memakai kepala halaman */
.ganti-nomor{ margin:16px auto 0; max-width:520px; padding:11px 16px; border-radius:14px;
  border:1px solid rgba(232,36,74,0.3); background:rgba(232,36,74,0.08);
  font-size:0.8rem; line-height:1.55; color:rgba(255,255,255,0.72); text-align:center; }
.ganti-nomor b{ color:#fff; font-weight:700; }
.ganti-nomor .no{ white-space:nowrap; color:#FF7A93; }


/* Tombol melayang Telegram. Memakai kerangka .wa-apung yang sudah ada,
   hanya warnanya yang disesuaikan. */
.tg-apung{ background:#29A9EB; color:#04202F;
  box-shadow:0 10px 30px rgba(41,169,235,0.34), 0 2px 8px rgba(0,0,0,0.3); }
.tg-apung:hover{ box-shadow:0 14px 38px rgba(41,169,235,0.44), 0 2px 8px rgba(0,0,0,0.3); }


/* ============================================================
   HALAMAN KONTAK: kartu kanal
   ============================================================ */
.kanal{ max-width:900px; margin:36px auto 0; display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:760px){ .kanal{ grid-template-columns:1fr 1fr; } }
.kn{ display:flex; flex-direction:column; gap:5px; padding:26px 26px 22px; border-radius:22px;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.028);
  text-decoration:none; text-align:left; transition:border-color .25s ease, background .25s ease; }
.kn:hover{ border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.05); }
.kn--utama{ border-color:rgba(41,169,235,0.42); background:rgba(41,169,235,0.08); }
.kn--utama:hover{ border-color:rgba(41,169,235,0.62); background:rgba(41,169,235,0.13); }
.kn-lbl{ font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.42); }
.kn--utama .kn-lbl{ color:#7FD4FA; }
.kn-jd{ font-family:"Inter Tight",Inter,sans-serif; font-size:1.5rem; font-weight:700;
  letter-spacing:-0.03em; color:#fff; }
.kn-nl{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.92rem; font-weight:600;
  color:rgba(255,255,255,0.78); word-break:break-all; }
.kn-kt{ margin-top:7px; font-size:0.86rem; line-height:1.6; color:rgba(255,255,255,0.5); }
.kn-go{ margin-top:12px; font-size:0.82rem; font-weight:700; color:#fff; }
.kn-go::after{ content:" \2192"; }

.nota-jujur{ padding:22px 24px; border-radius:18px; border:1px solid var(--border);
  background:rgba(20,16,36,0.03); }
.section--dark .nota-jujur{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); }
.nj-lbl{ font-size:0.7rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--c); margin-bottom:8px; }
.nota-jujur p:last-child{ margin:0; font-size:0.9rem; line-height:1.7; color:var(--text-secondary); }
.section--dark .nota-jujur p:last-child{ color:rgba(255,255,255,0.6); }


/* ============================================================
   Blok langkah di seksi terang
   Aturan .lg dibuat untuk latar gelap. Di seksi terang, warnanya
   harus dibalik supaya tulisannya terbaca.
   ============================================================ */
.section--offwhite .lg,
.section--putih .lg,
.section:not(.section--dark) .lg{
  background:var(--white, #fff);
  border-color:var(--border, rgba(20,16,36,0.12));
  box-shadow:0 1px 3px rgba(14,11,26,0.04);
}
.section--offwhite .lg p,
.section--putih .lg p,
.section:not(.section--dark) .lg p{ color:var(--text-secondary, #5A5765); }
.section--offwhite .lg p b,
.section--putih .lg p b,
.section:not(.section--dark) .lg p b{ color:var(--ink, #0B0912); }
.section--offwhite .lg .no,
.section--putih .lg .no,
.section:not(.section--dark) .lg .no{ color:#fff; }


/* ============================================================
   Keterbacaan teks ruby di latar terang
   Ruby #E8244A pada putih hanya mencapai rasio 4,39 banding 1,
   sedikit di bawah ambang 4,5 untuk teks kecil. Untuk label dan
   teks kecil di seksi terang, dipakai ruby yang lebih pekat.
   Warna tombol dan judul tidak diubah, supaya merek tetap sama.
   ============================================================ */
/* Berlaku menyeluruh, karena halaman artikel dan legal tidak
   memakai pembungkus section. Di seksi gelap dikembalikan
   ke ruby terang lewat aturan di bawahnya. */
.cat, .article-cat, .ac-lbl, .nj-lbl, .lbl, .callout-label,
.article-body strong, .article-body b,
.dis .j, .lg-lbl{ color:#CE1A3D; }

.section--dark .cat,
.section--dark .article-cat,
.section--dark .ac-lbl,
.section--dark .nj-lbl,
.section--dark .lbl,
.section--dark .callout-label,
.hal--gelap .lbl{ color:#E8244A; }

/* Tombol utama: putih pada ruby juga 4,39. Dipekatkan sedikit
   supaya melewati ambang, tanpa mengubah kesan warnanya. */
.btn--primary{ background:#DC1F45; }
.btn--primary:hover{ background:#C41539; }


/* ============================================================
   Penegasan keterbacaan, kekhususan lebih tinggi
   Beberapa aturan lama memakai ruby terang dengan kekhususan
   yang mengalahkan aturan di atas. Ditegaskan di sini.
   ============================================================ */
.artikel-cta .ac-lbl{ color:#CE1A3D; }
.article-card .cat{ color:#CE1A3D; }
.section--dark .article-card .cat{ color:#E8244A; }
.section:not(.section--dark) .note strong,
.prose .note strong{ color:#CE1A3D; }
.section:not(.section--dark) .movement-manifesto strong{ color:#CE1A3D; }
.section--dark .artikel-cta .ac-lbl,
.section--dark .note strong,
.section--dark .movement-manifesto strong{ color:#E8244A; }


/* ============================================================
   Lencana berlatar warna: tulisannya harus gelap
   Lencana pd-isi memakai latar berwarna terang, jadi tulisan
   ruby di atasnya sulit dibaca. Diganti tinta gelap.
   ============================================================ */
.pd-isi .lbl,
.lbl[style*="background"],
.pd .lbl,
.lbl--wajib,
.cl-isi .lbl{ color:#0B0813 !important; }


/* ============================================================
   PITA PRODUK
   Kelima robot dalam satu pita yang digeser ke samping.
   Dua kartu tampil penuh, kartu ketiga terlihat sebagian
   supaya pengunjung tahu masih ada lagi di sampingnya.
   ============================================================ */
.pita-produk .geser{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; margin-top:26px; }
.pita-produk .geser::-webkit-scrollbar{ display:none; }
.pita-produk .geser:focus-visible{ outline:2px solid var(--c); outline-offset:4px; border-radius:20px; }
.geser-jalur{ display:flex; gap:12px; width:max-content;
  padding:4px clamp(20px, 5vw, 40px) 16px; }

.geser-jalur > .kg{ position:relative; flex:0 0 min(298px, 78vw);
  width:min(298px, 78vw); margin:0; padding:22px 20px 22px;
  border-radius:20px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.028); text-align:center; scroll-snap-align:center;
  transition:border-color .25s ease, background .25s ease; }
.geser-jalur > .kg:hover{ border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); }

.kg .stage{ width:186px; height:186px; margin:0 auto 4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
/* Objek batu perlu ukuran sendiri di dalam kartu, karena di sini
   tidak ada pembungkus seksi produk yang biasanya menentukannya. */
.kg .obj{ position:relative; width:100%; height:100%; }
.kg .obj-in{ position:absolute; inset:0; }
.kg .o-batu{ position:absolute; inset:0; }
.kg .ins{ font-size:0.68rem; letter-spacing:0.1em; line-height:1.4; }
.kg .lencana-laris{ font-size:0.6rem; }
.kg h2{ font-size:1.5rem; margin-top:10px; letter-spacing:-0.035em; }
.kg .kar{ display:block; margin-top:10px; font-size:0.86rem; line-height:1.6;
  color:rgba(255,255,255,0.58); }
.kg .show-ringkas{ margin-top:14px; gap:6px; justify-content:center; }

.kg .show-ringkas span{ font-size:0.72rem; padding:6px 12px; }
.kg .harga{ margin-top:18px; font-size:1.35rem; }
.kg .harga span{ font-size:0.82rem; }
.kg .aksi{ margin-top:16px; gap:9px; justify-content:center; }
.kg .btn{ font-size:0.86rem; padding:11px 22px; }
.kg .bukti-cat{ display:flex; justify-content:center; margin-top:14px !important;
  font-size:0.72rem; }
.kg .ct-taut{ display:none; }
.kg-isi{ opacity:1; transform:none; }

.pita-produk .titik{ display:flex; justify-content:center; gap:5px; padding-bottom:8px; }
.pita-produk .titik i{ width:5px; height:5px; border-radius:50%; display:block;
  background:rgba(255,255,255,0.22); transition:width .3s ease, background .3s ease; }
.pita-produk .titik i.on{ width:17px; border-radius:99px; background:var(--c); }

.pita-bukti{ margin-top:14px; text-align:center; font-size:0.8rem;
  color:rgba(255,255,255,0.44); }
.pita-bukti a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.pita-bukti .sep{ opacity:.5; margin-inline:6px; }

.pita-ct{ margin-top:16px; display:flex; align-items:center; gap:16px;
  padding:16px 18px; border-radius:18px; text-decoration:none;
  border:1px solid rgba(34,211,238,0.36); background:rgba(34,211,238,0.07);
  transition:background .25s ease, border-color .25s ease; }
.pita-ct:hover{ background:rgba(34,211,238,0.13); border-color:rgba(34,211,238,0.55); }
.pita-ct .tx{ font-size:0.85rem; line-height:1.6; color:rgba(255,255,255,0.62); }
.pita-ct .tx b{ color:#fff; font-weight:700; }
.pita-ct .tb{ margin-left:auto; flex:none; padding:11px 20px; border-radius:999px;
  background:#22D3EE; color:#04202F; font-size:0.82rem; font-weight:700;
  letter-spacing:-0.01em; white-space:nowrap; }
.pita-ct:hover .tb{ background:#4BDEF5; }
@media (max-width:640px){
  .pita-ct{ flex-direction:column; align-items:stretch; gap:13px; text-align:left; }
  .pita-ct .tb{ margin-left:0; text-align:center; padding:12px 20px; }
}

@media (min-width:900px){
  .geser-jalur{ padding-inline:max(40px, calc((100vw - 1120px) / 2)); }
  .geser-jalur > .kg{ flex:0 0 330px; width:330px; }
  .kg .stage{ width:210px; height:210px; }
  .kg h2{ font-size:1.6rem; }
}


/* ============================================================
   BLOK COPY TRADE
   Ditaruh setelah pita robot, dibuat lebih besar dan lengkap
   karena inilah jalan masuk termurah bagi orang baru.
   ============================================================ */
.blok-ct{ border-top:1px solid rgba(34,211,238,0.16); }
.ct-atas{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
@media (min-width:900px){
  .ct-atas{ grid-template-columns:1.15fr 0.85fr; gap:48px; }
}
.ct-lead{ margin-top:16px; font-size:0.98rem; line-height:1.7;
  color:rgba(255,255,255,0.62); max-width:46ch; }

.ct-angka{ margin-top:26px; display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
@media (min-width:640px){ .ct-angka{ grid-template-columns:repeat(3,1fr); } }
.ca{ background:#0E0B18; padding:18px 20px; display:flex; flex-direction:column; gap:3px; }
.ca .v{ font-family:"Inter Tight",Inter,sans-serif; font-size:1.6rem; font-weight:800;
  letter-spacing:-0.04em; line-height:1; color:var(--c); }
.ca .k{ margin-top:5px; font-size:0.84rem; font-weight:700; color:#fff; }
.ca .c{ font-size:0.76rem; line-height:1.5; color:rgba(255,255,255,0.44); }

.ct-kanan .stage{ width:min(260px, 62vw); height:min(260px, 62vw); margin-inline:auto;
  display:flex; align-items:center; justify-content:center; }
.ct-kanan .obj{ position:relative; width:100%; height:100%; }
.ct-kanan .obj-in{ position:absolute; inset:0; }
.ct-kanan .o-rasi{ position:absolute; inset:0; }

.ct-poin{ margin-top:30px; display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
@media (min-width:820px){ .ct-poin{ grid-template-columns:repeat(3,1fr); } }
.cp{ background:#0E0B18; padding:18px 20px; display:flex; gap:14px; align-items:flex-start; }
.cp .no{ flex:none; font-family:"Inter Tight",Inter,sans-serif; font-size:0.78rem;
  font-weight:800; letter-spacing:0.06em; color:var(--c); padding-top:2px; }
.cp .tx b{ display:block; font-size:0.9rem; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.cp .tx i{ display:block; margin-top:4px; font-style:normal; font-size:0.78rem;
  line-height:1.55; color:rgba(255,255,255,0.46); }

.ct-aksi{ margin-top:26px; display:flex; gap:11px; flex-wrap:wrap; }
.ct-cat{ margin-top:16px; font-size:0.8rem; line-height:1.6;
  color:rgba(255,255,255,0.42); max-width:52ch; }

@media (max-width:560px){
  .ct-aksi .btn{ flex:1; text-align:center; }
  .ca .v{ font-size:1.45rem; }
}


/* ============================================================
   Kartu: harga dan tombol harus sejajar antar kartu
   Jumlah baris pil berbeda tiap robot, jadi tanpa aturan ini
   harga melompat naik turun saat kartu digeser. Isi kartu
   dijadikan kolom, dan bagian bawahnya didorong ke dasar.
   ============================================================ */
.geser-jalur > .kg{ display:flex; flex-direction:column; }
.kg .kg-isi{ display:flex; flex-direction:column; flex:1; }
.kg .ins{ min-height:2.6em; display:flex; align-items:center;
  justify-content:center; gap:8px; flex-wrap:wrap; }
.kg .kar{ min-height:3.2em; }
.kg .show-ringkas{ min-height:6.6em; align-content:flex-start; margin-bottom:14px; }
.kg .harga{ margin-top:auto; padding-top:16px; }

/* Lencana laris tidak boleh menggeser baris di bawahnya */
.kg .lencana-laris{ display:inline-block; }


/* ============================================================
   Kartu: irama jarak dibakukan
   Empat nilai saja: 10 rapat, 16 antar blok, 20 sebelum harga,
   14 setelah tombol. Sebelumnya tujuh nilai acak.
   ============================================================ */
.kg .ins{ margin-top:6px; }
.kg h2{ margin-top:10px; }
.kg .kar{ margin-top:10px; }
.kg .show-ringkas{ margin-top:16px; }
.kg .harga{ padding-top:6px; min-height:0; }
.kg .aksi{ margin-top:16px; }
.kg .bukti-cat{ margin-top:14px !important; }


/* ============================================================
   HERO ARAH C
   Angka jadi pemandangan, bukan grafiknya. Nama pasar dibesarkan
   karena XAUUSD adalah kata yang paling dicari trader Indonesia.
   ============================================================ */
.hero-utama .hero-in{ text-align:center; position:relative; z-index:1; }
.hero-utama .eyebrow{ margin-bottom:18px; }
.hero-judul{ font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(2.3rem, 9vw, 4.2rem); font-weight:600; letter-spacing:-0.055em;
  line-height:1.0; color:#fff; }
.hero-utama .hero-lead{ max-width:24ch; margin:16px auto 0; }

/* Nama pasar: dibesarkan dan diberi jarak huruf lebar */
.pasar-besar{ margin-top:24px; display:flex; align-items:center; justify-content:center;
  gap:clamp(14px, 4vw, 26px); }
.pasar-besar .pb{ font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(1.35rem, 5.6vw, 2.1rem); font-weight:700; letter-spacing:0.1em;
  line-height:1; color:#fff;
  background:linear-gradient(180deg, #fff 42%, rgba(255,255,255,0.56) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pasar-besar .pb-p{ width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ruby, #E8244A); box-shadow:0 0 0 5px rgba(232,36,74,0.16); }
.pasar-ket{ margin-top:11px; font-size:0.8rem; letter-spacing:0.02em;
  color:rgba(255,255,255,0.42); }

/* Tiga fakta */
.hero-fakta{ margin:28px auto 0; max-width:520px; display:grid;
  grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
.hero-fakta .hf{ background:#0C0A16; padding:16px 8px; }
.hero-fakta .v{ display:block; font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(1.15rem, 4.6vw, 1.5rem); font-weight:800; letter-spacing:-0.04em;
  line-height:1; color:#4BD98A; }
.hero-fakta .k{ display:block; margin-top:7px; font-size:0.62rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.44);
  line-height:1.45; }

/* Kurva jadi pengiring, bukan pusat perhatian */
.hero-kurva{ margin:24px auto 0; max-width:560px; }
.hero-kurva .kv-wrap{ display:block; position:relative; height:76px; }
.hero-kurva .kv-wrap svg{ width:100%; height:76px; display:block; }
.hero-kurva .kv-kaki{ margin-top:9px; display:flex; justify-content:space-between;
  font-size:0.66rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.34); }
.hero-kurva .kv-naik{ color:rgba(255,255,255,0.5); }
.hero-utama .hero-actions{ margin-top:22px; justify-content:center; }

@media (max-width:400px){
  .hero-fakta .k{ font-size:0.58rem; letter-spacing:0.06em; }
  .hero-fakta .hf{ padding:14px 5px; }
}
@media (max-height:700px) and (max-width:900px){
  .hero-utama{ padding-top:30px; }
  .pasar-besar{ margin-top:22px; }
  .hero-fakta{ margin-top:20px; }
  .hero-kurva{ margin-top:18px; }
  .hero-kurva .kv-wrap, .hero-kurva .kv-wrap svg{ height:70px; }
  .hero-utama .hero-actions{ margin-top:18px; }
}


/* ============================================================
   HERO ARAH C
   Angka jadi pemandangan, dan nama pasar dibuat menonjol
   karena di situlah trader mengenali dirinya sendiri.
   ============================================================ */
.hero-utama .hero-in{ text-align:center; position:relative; z-index:1; }

.hero-utama .hero-judul{ margin-top:14px; font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(2.4rem, 8.4vw, 4.4rem); font-weight:600; letter-spacing:-0.055em;
  line-height:1.0; color:#fff; }
.hero-utama .hero-lead{ margin:13px auto 0 !important; max-width:26ch;
  font-weight:300; color:rgba(255,255,255,0.58); }

/* --- nama pasar, dibuat besar dan tegas --- */
.pasar-besar{ margin-top:24px; display:flex; align-items:center; justify-content:center;
  gap:clamp(16px, 5vw, 30px); }
.pasar-besar .pb{ font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(1.9rem, 8vw, 3rem); font-weight:800; letter-spacing:-0.03em;
  line-height:1; color:#fff;
  background:linear-gradient(180deg, #fff 32%, rgba(255,255,255,0.62) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pasar-besar .pb-p{ width:1px; height:clamp(26px, 7vw, 40px); flex:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%,
    rgba(255,255,255,0) 100%); }
.pasar-ket{ margin-top:10px; font-size:0.82rem; font-weight:400; letter-spacing:0.02em;
  color:rgba(255,255,255,0.42); }

/* --- tiga fakta --- */
.hero-fakta{ margin:24px auto 0; max-width:520px; display:grid;
  grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; }
.hero-fakta .hf{ background:#0C0A16; padding:15px 8px; }
.hero-fakta .v{ display:block; font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(1.2rem, 5.4vw, 1.5rem); font-weight:800; letter-spacing:-0.04em;
  line-height:1; color:#4BD98A; }
.hero-fakta .k{ display:block; margin-top:7px; font-size:0.6rem; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase; color:rgba(255,255,255,0.44);
  line-height:1.45; }

/* --- kurva pengiring, dibuat kecil supaya bukan pusat perhatian --- */
.hero-kurva{ margin:22px auto 0; max-width:560px; }
.hero-kurva .kv-wrap{ display:block; position:relative; height:76px; }
.hero-kurva .kv-wrap svg{ width:100%; height:76px; display:block; }
.hero-kurva .kv-kaki{ margin-top:9px; display:flex; justify-content:space-between;
  font-size:0.62rem; font-weight:600; letter-spacing:0.11em; text-transform:uppercase;
  color:rgba(255,255,255,0.34); }
.hero-kurva .kv-naik{ color:rgba(255,255,255,0.44); }

.hero-utama .hero-actions{ margin-top:22px; justify-content:center; }

@media (max-width:400px){
  .hero-fakta .k{ font-size:0.56rem; letter-spacing:0.08em; }
  .hero-fakta .hf{ padding:15px 5px; }
}


/* Layar HP pendek: hero dirapatkan supaya tombol tetap terlihat */
@media (max-height:880px) and (max-width:900px){
  .hero-utama{ padding-top:30px; }
  .hero-utama .hero-judul{ margin-top:12px; }
  .pasar-besar{ margin-top:20px; }
  .hero-fakta{ margin-top:20px; }
  .hero-kurva{ margin-top:18px; }
  .hero-kurva .kv-wrap, .hero-kurva .kv-wrap svg{ height:62px; }
  .hero-utama .hero-actions{ margin-top:18px; }
}
@media (max-height:780px) and (min-width:900px){
  .hero-utama{ padding-top:32px; }
  .hero-kurva .kv-wrap, .hero-kurva .kv-wrap svg{ height:64px; }
}


/* Layar HP pendek, termasuk viewport nyata di Safari dan Chrome
   setelah dipotong bilah alamat. Semuanya dirapatkan, tetapi
   kurva tetap ditampilkan karena itu bukti utama kami. */
@media (max-height:700px) and (max-width:900px){
  .hero-utama{ padding-top:20px; }
  .hero-utama .eyebrow{ font-size:0.62rem; }
  .hero-utama .hero-judul{ font-size:1.86rem !important; margin-top:8px; }
  .hero-utama .hero-lead{ margin-top:8px !important; font-size:0.86rem; line-height:1.5; }
  .pasar-besar{ margin-top:13px; }
  .pasar-besar .pb{ font-size:1.62rem; }
  .pasar-ket{ margin-top:6px; font-size:0.72rem; }
  .hero-fakta{ margin-top:13px; }
  .hero-fakta .hf{ padding:10px 5px; }
  .hero-fakta .v{ font-size:1.08rem; }
  .hero-fakta .k{ margin-top:5px; }
  .hero-kurva{ margin-top:13px; }
  .hero-kurva .kv-wrap, .hero-kurva .kv-wrap svg{ height:46px; }
  .hero-kurva .kv-kaki{ margin-top:6px; font-size:0.56rem; }
  .hero-utama .hero-actions{ margin-top:13px; gap:7px; }
  .hero-utama .hero-actions .btn{ padding:11px 18px; font-size:0.82rem; }
}

/* Layar teramat pendek: keterangan pasar dilepas lebih dulu,
   kurva tetap dipertahankan. */
@media (max-height:580px) and (max-width:900px){
  .pasar-ket{ display:none; }
  .hero-kurva .kv-wrap, .hero-kurva .kv-wrap svg{ height:44px; }
}


/* ============================================================
   SASARAN SENTUH
   Ujung jari butuh sekitar 44 piksel. Beberapa kendali di situs
   ini lebih kecil dari itu, jadi mudah salah tekan di HP.
   Ukuran tampaknya tidak diubah, yang diperbesar area sentuhnya.
   ============================================================ */
@media (hover:none){
  .nav-toggle{ min-width:44px; min-height:44px; }
  .pn-tutup{ width:40px; height:40px; }
  .pn-cta{ min-height:40px; display:inline-flex; align-items:center; }
  .site-header .btn{ min-height:40px; display:inline-flex; align-items:center;
    justify-content:center; }

  /* Baris kredensial yang bisa disalin: area sentuh ditinggikan
     tanpa mengubah ukuran hurufnya. */
  .ap-baris .v, .akun .v, [data-salin]{ min-height:44px; display:flex;
    align-items:center; }

  /* Tautan kecil di dalam kalimat diberi ruang sentuh vertikal */
  .vpn-nota a, .bukti-cat a, .pita-bukti a,
  .bukti-tanpa-vpn a, .ct-taut a, .artikel-cta a:not(.btn){
    display:inline-block; padding-block:8px; }

  /* Tautan yang menyatu di tengah kalimat tidak bisa ditinggikan
     tanpa merusak alinea. Area sentuhnya diperluas lewat lapisan
     tak terlihat, jadi tampilannya tetap sama. */
  p a:not(.btn):not(.taut):not(.kn),
  .kn-nl a, li a:not(.btn){ position:relative; }
  p a:not(.btn):not(.taut):not(.kn)::after,
  li a:not(.btn)::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%); }

  /* Menu dan tautan footer: jarak antar baris diperlebar supaya
     tidak mudah salah tekan. */
  .footer-col a,
  .footer-legal-links a,
  .footer-contact a,
  .footer-telegram a{ display:inline-block; padding-block:8px; }
  .kaki a, .kaki .pt a{ display:inline-block; padding-block:9px; }
  .site-header .brand{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ============================================================
   TEKS TERKECIL
   Di layar 320 piksel beberapa label turun sampai 9 piksel.
   Batas nyaman dibaca sekitar 11 piksel.
   ============================================================ */
@media (max-width:400px){
  .hero-fakta .k{ font-size:0.69rem !important; }
  .hero-kurva .kv-kaki{ font-size:0.68rem; }
  .kg .ins{ font-size:0.7rem; }
  .lencana-laris{ font-size:0.68rem; }
  .pita-produk .titik i{ height:6px; }
}

/* ============================================================
   PERAPIAN v161
   Tiga kelompok huruf tebal bersaing di satu layar hero.
   Judul dikembalikan sebagai satu-satunya elemen dominan,
   sisanya diturunkan bobotnya. Irama jarak dibuat berskala,
   dan tata letak tombol disamakan lebarnya.
   ============================================================ */

/* ---------- 1. HIERARKI: satu yang dominan ---------- */
.hero-utama .hero-judul{
  font-size:clamp(2.5rem, 9vw, 4.6rem) !important;
  letter-spacing:-0.052em !important;
  line-height:0.98 !important;
}
/* nama pasar turun jadi pendukung, bukan pesaing judul */
.pasar-besar .pb{
  font-size:clamp(1.32rem, 5.4vw, 1.85rem) !important;
  font-weight:700 !important;
  letter-spacing:0.02em !important;
}
.pasar-besar{ gap:clamp(13px, 3.6vw, 22px) !important; }
.pasar-besar .pb-p{ width:6px !important; height:6px !important;
  box-shadow:0 0 0 4px rgba(232,36,74,0.14) !important; }
/* tiga fakta ikut turun bobotnya */
.hero-fakta .v{
  font-size:clamp(1.05rem, 4.2vw, 1.32rem) !important;
  font-weight:700 !important;
  letter-spacing:-0.03em !important;
}

/* ---------- 2. IRAMA JARAK BERSKALA ---------- */
/* sebelumnya 18, 13, 20, 10, 36 px tanpa pola. Kini 14 / 22 / 34. */
.hero-utama .hero-judul{ margin-top:14px !important; }
.hero-utama .hero-lead{ margin-top:14px !important; }
.pasar-besar{ margin-top:34px !important; }
.pasar-ket{ margin-top:14px !important; }
.hero-fakta{ margin-top:34px !important; }
.hero-kurva{ margin-top:34px !important; }
.hero-utama .hero-actions{ margin-top:34px !important; }

/* ---------- 3. KOTAK FAKTA: tinggi isi seragam ---------- */
.hero-fakta .hf{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:18px 10px !important;
}
/* label dikunci dua baris supaya yang membungkus dan tidak tetap sejajar */
.hero-fakta .k{
  margin-top:9px !important; min-height:2.9em; display:flex; align-items:flex-start;
  justify-content:center; text-align:center; line-height:1.45 !important;
}

/* ---------- 4. TOMBOL: lebar seragam, hierarki jelas ---------- */
.hero-utama .hero-actions{
  display:grid !important; grid-template-columns:1fr 1fr; gap:10px;
  max-width:420px; margin-inline:auto;
}
.hero-utama .hero-actions .btn{ width:100%; margin:0; }
/* tombol utama melebar penuh di baris pertama */
.hero-utama .hero-actions .btn--primary{ grid-column:1 / -1; }

/* ---------- 5. KARTU BUKTI SOSIAL: tinggi seragam ---------- */
.sp-grid, [class*="sp-"]:has(> .sp-kartu){ align-items:stretch; }
.sp-kartu{ display:flex; flex-direction:column; height:100%; }
.sp-kartu .k{ margin-top:auto; padding-top:6px; }
/* eyebrow disamakan dengan irama yang sama */
.hero-utama .eyebrow{ margin-bottom:0 !important; }
.hero-utama .hero-judul{ margin-top:16px !important; }
/* kolom tombol dibiarkan menyusut supaya benar-benar sama lebar
   walau teksnya berbeda panjang */
.hero-utama .hero-actions{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
.hero-utama .hero-actions .btn{ min-width:0; white-space:nowrap; }
@media (max-width:360px){
  .hero-utama .hero-actions .btn{ font-size:0.86rem; padding-inline:12px; }
}
/* petunjuk geser dipisah dari judul, karena instruksi bukan pernyataan */
.geser-ket{
  margin-top:12px; font-size:0.72rem; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.34); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.geser-ket::after{
  content:""; width:16px; height:1px; background:rgba(255,255,255,0.3);
  animation:geserPetunjuk 2.2s ease-in-out infinite;
}
@keyframes geserPetunjuk{ 0%,100%{transform:translateX(0);opacity:0.3;} 50%{transform:translateX(5px);opacity:0.75;} }
.section:not(.section--dark) .geser-ket{ color:var(--text-secondary); }
@media (min-width:900px){ .geser-ket{ display:none; } }
/* kurva diberi ruang di kedua sisi supaya titik ujungnya
   tidak menempel tepi dan cahayanya tidak terlihat terpotong */
.hero-kurva{ padding-inline:10px; }
.hero-kurva .kv-wrap svg{ overflow:visible; }
.hero-kurva .kv-kaki{ padding-inline:2px; }

/* ============================================================
   PERAPIAN v162 · PROPORSI KARTU
   Kartu robot terlalu memanjang, kartu testimoni menyisakan
   ruang kosong besar karena tingginya dikunci oleh satu
   kutipan terpanjang. Ketiganya dirapatkan tanpa membuang isi.
   ============================================================ */

/* ---------- 1. KARTU ROBOT ---------- */
/* objek 3D dikecilkan, porsinya terlalu besar dibanding isi */
.kg .stage{ height:148px !important; }
.kg{ padding:20px 18px !important; }

/* label ringkas dipadatkan supaya tidak membungkus tiga baris */
.kg .show-ringkas{
  gap:6px 7px !important; margin-top:13px !important; margin-bottom:12px !important;
}
.kg .show-ringkas span{
  font-size:0.68rem !important; padding:5px 9px !important; letter-spacing:0 !important;
}
/* irama jarak dalam kartu dirapatkan dan diseragamkan */
.kg .kg-isi > .ins{ margin-top:4px !important; }
.kg .kg-isi > h2{ margin-top:7px !important; }
.kg .kg-isi > .kar{ margin-top:7px !important; }
.kg .kg-isi > .harga{ padding-top:2px !important; }
.kg .kg-isi > .aksi{ margin-top:13px !important; }
.kg .kg-isi > .bukti-cat{ margin-top:10px !important; }

/* ---------- 2. KARTU TESTIMONI ---------- */
/* kutipan dibatasi supaya kartu tidak dikunci oleh yang terpanjang */
.tm-kartu blockquote{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7;
  overflow:hidden; margin-bottom:16px;
}
.tm-kartu{
  padding:20px 20px 18px !important;
  display:flex; flex-direction:column;
}
/* nama pengirim menempel ke bawah, tanpa ruang kosong menganga */
.tm-kartu figcaption{ margin-top:auto !important; padding-top:4px; }

/* ---------- 3. KARTU BUKTI SOSIAL ---------- */
/* tinggi disamakan, sebelumnya 178 dan 200 px */
.sp-daftar{ align-items:stretch; }
.sp-kartu{ display:flex; flex-direction:column; height:100%; padding:24px 22px !important; }
.sp-kartu .k{ margin-top:8px; }
/* min-height lama dipatok untuk tiga baris label. Setelah label
   dipadatkan, seluruh kartu muat dua baris, jadi patokannya diturunkan. */
.kg .show-ringkas{ min-height:3.9em !important; }
/* layar sempit: label dipadatkan sedikit lagi supaya seluruh kartu
   tetap dua baris dan tingginya tidak melonjak */
@media (max-width:380px){
  .kg .show-ringkas span{ font-size:0.63rem !important; padding:4px 8px !important; }
  .kg .show-ringkas{ gap:5px 6px !important; min-height:3.6em !important; }
}
/* Mayoritas kutipan 4 sampai 6 baris. Batas 6 membuat tinggi kartu
   mengikuti mayoritas, bukan mengikuti satu kutipan terpanjang. */
.tm-kartu blockquote{ -webkit-line-clamp:6 !important; }


/* ============================================================
   v165 - PEMBERESAN IRAMA KARTU ROBOT
   Temuan dari pemeriksaan di 360, 393, 430, 768, 1024, 1280, 1440.
   ============================================================ */

/* 1. Lencana "Paling Banyak Dipilih" hanya ada di satu kartu, dan
      selama ini mendorong judul, deskripsi, serta label kartu itu
      turun 16px. Akibatnya kelima kartu tidak sebaris di layar PC.
      Barisnya sekarang diberi tinggi tetap di semua kartu, dan
      lencana dinaikkan ke atas teksnya sendiri. */
.kg .kg-isi > .ins{
  display:flex !important; flex-direction:column; align-items:center;
  justify-content:flex-end; gap:7px; min-height:44px;
}
.kg .kg-isi > .ins .lencana-laris{ order:-1; margin-left:0 !important; }

/* 2. Di layar PC kartu terakhir terpotong lurus di tepi kanan dan
      terbaca seperti blok rusak. Tepinya sekarang meredup, sehingga
      terbaca sebagai "masih ada lagi di sebelah". Petunjuk geser
      ikut ditampilkan, sebelumnya hanya muncul di layar sempit. */
@media (min-width:900px){
  .pita-produk .geser{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px,
      #000 calc(100% - 132px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 48px,
      #000 calc(100% - 132px), transparent 100%);
  }
  .geser-ket{ display:flex; }
}

/* 3. Baris kedua judul seksi terlalu redup di layar terang maupun
      di layar laptop yang warnanya dingin. Kontrasnya dinaikkan. */
.pp-kalimat .m{ color:rgba(255,255,255,0.58); }

/* 4. Tautan di kaki halaman hanya setinggi 15px, terlalu tipis untuk
      dijadikan sasaran jempol. Ditambah ruang atas bawah. */
.footer-tautan a, .footer-legal a, .site-footer a{ padding-block:3px; }

/* 5. Di layar 360px label hero mengecil sampai 9,6px, terlalu halus
      untuk dibaca di HP Android kecil. Ambang bawahnya dinaikkan
      tanpa mengubah tampilan di layar yang lebih lebar. */
.hero-fakta .k{ font-size:max(0.7rem, 0.6rem) !important; }
@media (max-width:400px){
  .hero-fakta .k{ font-size:0.7rem !important; letter-spacing:0.06em; }
}
@media (max-width:360px){
  .hero-fakta .k{ font-size:0.7rem !important; }
  .hero-kurva .kv-kaki{ font-size:0.7rem !important; }
}
.hero-kurva .kv-kaki{ font-size:max(0.7rem, 0.62rem) !important; }

/* 6. Di 360px label ringkas halaman produk turun ke 10,3px. Dinaikkan
      ke 11,2px, sudah diperiksa tidak menimbulkan geser mendatar. */
@media (max-width:360px){
  .show-ringkas span{ font-size:0.7rem !important; padding:4px 9px !important; }
}


/* ============================================================
   v166 - HARGA BULANAN DAN ALUR PENYEWAAN
   Harga bulanan jadi angka utama, tahunan tetap ada di bawahnya
   sebagai satu baris tenang. Tidak ada kotak tambahan, tidak ada
   warna baru, supaya kartunya tetap sepi.
   ============================================================ */

.harga small{
  display:block; margin-top:7px; font-size:0.74rem; font-weight:500;
  letter-spacing:0; line-height:1.5; color:rgba(255,255,255,0.42);
}
.section:not(.section--dark) .harga small{ color:var(--text-secondary); }
.kg .harga small{ font-size:0.7rem; margin-top:5px; }
.show .harga small{ font-size:0.76rem; }

/* Baris tahunan di tabel harga halaman /beli */
.bl .hg .th{
  display:block; margin-top:5px; font-size:0.72rem; font-weight:500;
  font-style:normal; letter-spacing:0; line-height:1.45; opacity:0.6;
  text-transform:none;
}

/* Empat langkah, bukan tiga. Di layar sedang dibagi dua supaya
   tidak ada satu kartu yang menggantung sendirian di baris kedua. */
@media (min-width:820px){ .cb-daftar--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .cb-daftar--4{ grid-template-columns:repeat(4,1fr); } }
.cb .kt a{ color:rgba(255,255,255,0.82); border-bottom:1px solid rgba(255,255,255,0.26); }
.cb .kt a:hover{ color:#fff; border-color:#fff; }




/* ============================================================
   v168 - WHATSAPP KEMBALI JADI JALUR UTAMA
   Kartu utama sekarang berwarna hijau WhatsApp. Channel Telegram
   diberi warna birunya sendiri supaya tetap terlihat, karena dari
   sanalah kami menyapa orang lagi setelah percakapan selesai.
   ============================================================ */
.kn--utama{ border-color:rgba(31,191,107,0.42) !important; background:rgba(31,191,107,0.08) !important; }
.kn--utama:hover{ border-color:rgba(31,191,107,0.62) !important; background:rgba(31,191,107,0.13) !important; }
.kn--utama .kn-lbl{ color:#7FE7B3 !important; }
.kn--channel{ border-color:rgba(41,169,235,0.40); background:rgba(41,169,235,0.07); }
.kn--channel:hover{ border-color:rgba(41,169,235,0.6); background:rgba(41,169,235,0.12); }
.kn--channel .kn-lbl{ color:#7FD4FA; }

/* Tombol melayang kembali ke hijau WhatsApp */
.wa-apung{ background:#25D366 !important; color:#04240F !important;
  box-shadow:0 12px 32px rgba(37,211,102,0.34), 0 2px 8px rgba(0,0,0,0.3) !important; }
.wa-apung:hover{ box-shadow:0 14px 38px rgba(37,211,102,0.44), 0 2px 8px rgba(0,0,0,0.3) !important; }

/* ---------- Pita Channel Telegram ----------
   Satu blok tenang, bukan pop up dan bukan pengumuman melayang.
   Tujuannya mengumpulkan orang yang belum siap bicara, supaya
   masih bisa kami sapa lagi lewat channel. */
.tg-pita{
  max-width:880px; margin:0 auto; display:flex; align-items:center; gap:22px;
  padding:26px 28px; border-radius:22px; text-decoration:none;
  border:1px solid rgba(41,169,235,0.34); background:rgba(41,169,235,0.06);
  transition:border-color .25s ease, background .25s ease;
}
.tg-pita:hover{ border-color:rgba(41,169,235,0.58); background:rgba(41,169,235,0.11); }
.tg-pita .ik{
  flex:none; width:52px; height:52px; border-radius:16px; display:flex;
  align-items:center; justify-content:center; background:#29A9EB; color:#04202F;
}
.tg-pita .ik svg{ width:26px; height:26px; }
.tg-pita .tx{ flex:1; min-width:0; }
.tg-pita .lb{
  display:block; font-size:0.68rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:#7FD4FA;
}
.tg-pita .jd{
  display:block; margin-top:7px; font-family:"Inter Tight",Inter,sans-serif;
  font-size:1.24rem; font-weight:700; letter-spacing:-0.028em; color:#fff; line-height:1.28;
}
.tg-pita .kt{
  display:block; margin-top:7px; font-size:0.88rem; line-height:1.6;
  color:rgba(255,255,255,0.55);
}
.tg-pita .tb{
  flex:none; padding:13px 24px; border-radius:999px; background:#29A9EB; color:#04202F;
  font-size:0.86rem; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;
}
.tg-pita:hover .tb{ background:#4FBEF5; }
.section:not(.section--dark) .tg-pita .jd{ color:var(--ink); }
.section:not(.section--dark) .tg-pita .kt{ color:var(--text-secondary); }
.section:not(.section--dark) .tg-pita .lb{ color:#1478A8; }
@media (max-width:700px){
  .tg-pita{ flex-direction:column; align-items:flex-start; gap:16px; padding:24px 22px; }
  .tg-pita .tb{ width:100%; text-align:center; }
}



/* ============================================================
   v169 - PENYERAGAMAN JARAK DALAM KARTU
   Sebelumnya jarak teks ke tepi kartu berkisar 19 sampai 31 piksel
   dengan angka yang tidak berpola: 18, 20, 22, 26, 30. Mata memang
   sulit menyebutkan apa yang salah, tapi terasa tidak rapi.

   Sekarang semuanya dikunci ke satu tangga kelipatan empat:
     20px  kartu padat  : kartu robot, baris akun, langkah ringkas
     24px  kartu biasa  : langkah, format kirim, poin, testimoni
     28px  kartu utama  : kanal, pita channel, blok kejujuran
   Sudut kartu ikut dua tingkat saja: 20px biasa, 22px kartu utama.
   ============================================================ */

/* ---- tangga 20px ---- */
.geser-jalur > .kg, .kg{ padding:20px !important; border-radius:20px !important; }
.akun{ padding:20px 20px 4px !important; border-radius:20px !important; }
.lg{ padding:20px !important; border-radius:20px !important; }

/* ---- tangga 24px ---- */
.cb{ padding:24px !important; border-radius:20px !important; }
.rek-aman{ padding:24px !important; border-radius:20px !important; }
.sp-kartu{ padding:24px !important; border-radius:20px !important; }
.pp-poin{ padding:24px !important; border-radius:20px !important; }
.tm-kartu{ padding:24px !important; border-radius:20px !important; }

/* ---- tangga 28px ---- */
.kn{ padding:28px !important; border-radius:22px !important; }
.tg-pita{ padding:28px !important; border-radius:22px !important; }
.jujur{ padding:28px !important; border-radius:22px !important; }

/* Kartu robot menyempit jadi 298px di bawah 900px. Padding 20px
   membuat label "2 sampai 3 posisi per minggu" pecah jadi tiga baris,
   jadi di lebar itu kartunya dirapatkan satu tingkat. */
@media (max-width:899px){
  .geser-jalur > .kg, .kg{ padding:18px !important; }
}

/* Layar sempit: tangga yang sama, satu tingkat lebih rapat */
@media (max-width:430px){
  .akun, .lg{ padding:18px !important; }
  .akun{ padding-bottom:4px !important; }
  .cb, .rek-aman, .sp-kartu, .pp-poin, .tm-kartu{ padding:20px !important; }
  .kn, .tg-pita, .jujur{ padding:22px !important; }
}

/* ---- Celah putih di antara dua seksi gelap ----
   Seksi yang dipasangi padding-top:0 membuat margin anak pertamanya
   lolos keluar, sehingga muncul jalur putih selebar 20 sampai 38px
   di lima halaman robot, halaman Akun Pantau, dan halaman Disclaimer.
   Seksi sekarang membentuk konteks sendiri supaya marginnya tidak
   lagi merembes. Latar halaman sengaja tidak diubah, karena halaman
   legal dan halaman terang lain memakai latar putih. */
.section{ display:flow-root; }
/* Halaman legal memakai .container sebagai seksi, bukan .section */
main > section.container{ display:flow-root; }


/* ============================================================
   v170 - PANDUAN PROFIL DI SEKSI ROBOT
   Satu kalimat pengarah di bawah judul, dan satu ajakan tenang
   sebelum jalur Copy Trade. Keduanya teks biasa, bukan kotak
   tambahan, supaya seksi ini tidak jadi ramai.
   ============================================================ */
.pp-panduan{
  margin:14px auto 0; max-width:46ch; text-align:center;
  font-size:0.94rem; line-height:1.62; letter-spacing:-0.008em;
  color:rgba(255,255,255,0.5); text-wrap:balance;
}
.section:not(.section--dark) .pp-panduan{ color:var(--text-secondary); }
.pp-panduan + .geser-ket{ margin-top:16px; }

.pita-profil{
  margin-top:14px; text-align:center; font-size:0.88rem; line-height:1.65;
  color:rgba(255,255,255,0.46); max-width:64ch; margin-inline:auto;
  text-wrap:balance;
}
.pita-profil a{
  color:rgba(255,255,255,0.82); font-weight:600;
  border-bottom:1px solid rgba(255,255,255,0.3);
}
.pita-profil a:hover{ color:#fff; border-color:#fff; }
.section:not(.section--dark) .pita-profil{ color:var(--text-secondary); }
@media (max-width:430px){
  .pp-panduan{ font-size:0.88rem; }
  .pita-profil{ font-size:0.84rem; }
}

/* ================= DATA PENGUJIAN (v172) ================= */
.dp-kepala{ text-align:center; margin-bottom:34px; }
.dp-kepala h2{ margin-bottom:14px; }
.dp-kepala .sub{ max-width:54ch; margin:0 auto; font-size:0.98rem; line-height:1.7;
  color:rgba(255,255,255,0.56); }

.dp-konteks{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:30px; }
.dp-konteks span{ font-size:0.76rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(255,255,255,0.60);
  border:1px solid rgba(255,255,255,0.14); border-radius:999px; padding:9px 16px; }

.dp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:820px){ .dp-grid{ grid-template-columns:repeat(4,1fr); } }
.dp-sel{ border:1px solid rgba(255,255,255,0.11); border-radius:18px;
  background:rgba(255,255,255,0.035); padding:24px 20px; text-align:center; }
.dp-sel .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:2rem; letter-spacing:-0.03em; line-height:1.05; color:#1FBF6B; }
.dp-sel .k{ display:block; margin-top:11px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.44); }
.dp-sel .c{ display:block; margin-top:7px; font-size:0.76rem; color:rgba(255,255,255,0.5);
  line-height:1.5; }

.dp-pita{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
@media (min-width:820px){ .dp-pita{ grid-template-columns:repeat(3,1fr); } }
.dp-pt{ display:flex; align-items:center; gap:14px; padding:18px 22px; border-radius:16px;
  border:1px solid rgba(31,191,107,0.26);
  background:linear-gradient(140deg, rgba(31,191,107,0.11), rgba(31,191,107,0.02)); }
.dp-pt i{ flex:0 0 auto; width:9px; height:9px; border-radius:99px; background:#1FBF6B;
  box-shadow:0 0 14px rgba(31,191,107,0.95); }
.dp-pt span{ font-size:0.92rem; line-height:1.5; color:rgba(255,255,255,0.78); }
.dp-pt b{ color:#fff; font-weight:700; }

.dp-risiko{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
@media (min-width:820px){ .dp-risiko{ grid-template-columns:repeat(2,1fr); } }
.dp-rk{ border:1px solid rgba(201,167,91,0.30); border-radius:20px; padding:26px 26px 24px;
  background:linear-gradient(150deg, rgba(201,167,91,0.10), rgba(201,167,91,0.02)); }
.dp-rk .jd{ display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:#D9BC74; }
.dp-rk .ket{ display:block; margin-top:9px; font-size:0.85rem; line-height:1.55;
  color:rgba(255,255,255,0.52); }
.dp-duo{ display:flex; align-items:stretch; gap:12px; margin-top:20px; }
.dp-duo > div{ flex:1; border-radius:14px; padding:16px 16px 15px;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); }
.dp-duo .a{ display:block; font-size:0.66rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(255,255,255,0.40); line-height:1.4; }
.dp-duo .b{ display:block; margin-top:9px; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:800; font-size:1.72rem; letter-spacing:-0.03em; line-height:1; color:#D9BC74; }
.dp-duo .n{ display:block; margin-top:7px; font-size:0.74rem; color:rgba(255,255,255,0.46); }
.dp-duo .baik{ border-color:rgba(31,191,107,0.38);
  background:linear-gradient(140deg, rgba(31,191,107,0.15), rgba(31,191,107,0.03));
  box-shadow:0 0 44px -14px rgba(31,191,107,0.55); }
.dp-duo .baik .b{ color:#1FBF6B; }
.dp-duo .baik .a{ color:rgba(255,255,255,0.58); }

.dp-tenang{ margin-top:14px; border:1px solid rgba(255,255,255,0.12); border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  padding:32px 26px; }
@media (min-width:820px){ .dp-tenang{ padding:40px 46px; } }
.dp-tenang h3{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.42rem; letter-spacing:-0.025em; line-height:1.3; color:#fff; margin-bottom:16px; }
@media (min-width:820px){ .dp-tenang h3{ font-size:1.6rem; } }
.dp-tenang p{ font-size:0.97rem; line-height:1.72; color:rgba(255,255,255,0.60); }
.dp-tenang p + p{ margin-top:14px; }
.dp-tenang b{ color:#fff; font-weight:600; }

.dp-catatan{ margin-top:26px; font-size:0.8rem; line-height:1.68;
  color:rgba(255,255,255,0.38); text-align:center; }
.dp-catatan b{ color:rgba(255,255,255,0.58); font-weight:600; }

/* ================= PINTU KARAKTER RISIKO (v173) ================= */
.kr-pintu{ display:block; position:relative; max-width:760px; margin:34px auto 0;
  padding:28px 26px 26px 30px; border-radius:22px; text-align:left;
  border:1px solid color-mix(in srgb, var(--c,#E8244A) 34%, transparent);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--c,#E8244A) 13%, transparent),
    color-mix(in srgb, var(--c,#E8244A) 3%, transparent));
  box-shadow:0 0 60px -18px color-mix(in srgb, var(--c,#E8244A) 55%, transparent);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.kr-pintu::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:4px;
  border-radius:0 99px 99px 0; background:var(--c,#E8244A); }
.kr-pintu:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--c,#E8244A) 55%, transparent);
  box-shadow:0 0 74px -16px color-mix(in srgb, var(--c,#E8244A) 70%, transparent); }
.krp-lb{ display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--c,#E8244A);
  border:1px solid color-mix(in srgb, var(--c,#E8244A) 42%, transparent);
  border-radius:999px; padding:7px 14px; margin-bottom:16px; }
.krp-jd{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.34rem; letter-spacing:-0.025em; line-height:1.25; color:#fff; }
@media (min-width:700px){ .krp-jd{ font-size:1.52rem; } }
.krp-kt{ display:block; margin-top:11px; font-size:0.93rem; line-height:1.65;
  color:rgba(255,255,255,0.60); }
.krp-go{ display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-size:0.9rem; font-weight:700; color:#fff; }
.krp-go::after{ content:"\2192"; font-size:1.05rem; transition:transform .22s ease; }
.kr-pintu:hover .krp-go::after{ transform:translateX(4px); }

/* halaman karakter risiko */
.kr-hero{ padding-bottom:clamp(48px,7vw,72px); }
.kr-jejak{ font-size:0.78rem; letter-spacing:0.04em; color:rgba(255,255,255,0.42);
  margin-bottom:26px; }
.kr-jejak a{ color:rgba(255,255,255,0.66); border-bottom:1px solid rgba(255,255,255,0.2); }
.kr-jejak span{ margin:0 8px; color:rgba(255,255,255,0.26); }
.kr-judul{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:clamp(2.1rem,7vw,3.4rem); letter-spacing:-0.04em; line-height:1.06; color:#fff;
  margin-top:14px; }
.kr-judul .m{ color:rgba(255,255,255,0.42); }
.kr-lead{ max-width:56ch; margin-top:20px; font-size:1.02rem; line-height:1.72;
  color:rgba(255,255,255,0.62); }

.kr-teks{ max-width:720px; margin-inline:auto; }
.kr-h2{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:1.42rem;
  letter-spacing:-0.025em; color:#fff; margin-top:42px; margin-bottom:14px; }
.kr-teks .kr-h2:first-child{ margin-top:0; }
.kr-teks p{ font-size:0.99rem; line-height:1.76; color:rgba(255,255,255,0.62); }
.kr-teks p + p{ margin-top:14px; }
.kr-teks a{ color:#fff; border-bottom:1px solid rgba(255,255,255,0.3); }

/* baris konfirmasi di alur beli */
.kr-akui{ max-width:640px; margin:26px auto 0; text-align:left; padding:20px 22px;
  border-radius:16px; border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04); }
.ka-lb{ display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--c,#E8244A); margin-bottom:10px; }
.kr-akui p{ font-size:0.9rem; line-height:1.66; color:rgba(255,255,255,0.62); }
.kr-akui a{ color:#fff; border-bottom:1px solid rgba(255,255,255,0.3); }

/* tagline penguat di hero (v180) */
.section--dark .container > p.hero-tagline,
.hero-tagline{ margin-top:16px; font-family:"Inter Tight",Inter,sans-serif;
  font-weight:700; font-size:clamp(0.92rem,2.6vw,1.08rem); letter-spacing:0.16em;
  text-transform:uppercase; color:#D6B26E; }

/* ================= HALAMAN GF ONE (v186) ================= */
.g1-hero{ text-align:center; }
.g1-lb{ display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:#7FD4FF; border:1px solid rgba(41,169,235,0.42);
  border-radius:999px; padding:8px 16px; }
.g1-judul{ margin-top:22px; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:clamp(2.8rem,10vw,4.4rem); letter-spacing:-0.045em; line-height:1; color:#fff; }
.g1-oneshot{ margin-top:14px; font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:clamp(1.05rem,3.4vw,1.38rem); letter-spacing:-0.01em; color:#7FD4FF; }
.section--dark .container > p.g1-lead,
.g1-lead{ margin-top:16px; max-width:50ch; margin-inline:auto; font-size:0.98rem; line-height:1.72;
  color:rgba(255,255,255,0.6); }

.g1-sorot{ display:grid; grid-template-columns:1fr; gap:11px; margin-top:32px;
  max-width:800px; margin-inline:auto; }
@media (min-width:720px){ .g1-sorot{ grid-template-columns:repeat(3,1fr); } }
.g1-sorot > div{ border:1px solid rgba(41,169,235,0.28); border-radius:15px; padding:20px 16px;
  background:linear-gradient(150deg, rgba(41,169,235,0.11), rgba(41,169,235,0.03)); }
.g1-sorot .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.75rem; letter-spacing:-0.035em; line-height:1; color:#7FD4FF; }
.g1-sorot .k{ display:block; margin-top:10px; font-size:0.75rem; line-height:1.5;
  color:rgba(255,255,255,0.54); }
.section--dark .container > p.g1-cat,
.g1-cat{ margin-top:16px; font-size:0.79rem; color:rgba(255,255,255,0.42); }

/* modal, tiga tingkat */
.g1-modal{ display:grid; grid-template-columns:1fr; gap:12px; max-width:940px; margin:0 auto; }
@media (min-width:760px){ .g1-modal{ grid-template-columns:repeat(3,1fr); } }
.g1-modal > div{ border:1px solid rgba(7,6,13,0.13); border-radius:16px; padding:22px 22px 20px;
  background:rgba(255,255,255,0.6); }
.g1-modal .c{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.45rem; letter-spacing:-0.03em; color:var(--ink); }
.g1-modal .r{ display:block; margin-top:6px; font-size:0.92rem; font-weight:600; color:#0E5C82; }
.g1-modal .n{ display:block; margin-top:11px; font-size:0.85rem; line-height:1.6;
  color:var(--text-secondary); }
.g1-modal .utama{ border-color:rgba(41,169,235,0.45);
  background:linear-gradient(150deg, rgba(41,169,235,0.14), rgba(41,169,235,0.04)); }

/* tiga angka hasil */
.g1-angka{ display:grid; grid-template-columns:1fr; gap:12px; max-width:940px; margin:0 auto; }
@media (min-width:720px){ .g1-angka{ grid-template-columns:repeat(3,1fr); } }
.g1-angka > div{ border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:26px 20px;
  text-align:center; background:rgba(255,255,255,0.035); }
.g1-angka .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:2.15rem; letter-spacing:-0.035em; line-height:1; color:#7FD4FF; }
.g1-angka .k{ display:block; margin-top:11px; font-size:0.74rem; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; color:rgba(255,255,255,0.46); }
.section--dark .container > p.g1-jelas,
.g1-jelas{ max-width:62ch; margin:22px auto 0; text-align:center; font-size:0.9rem;
  line-height:1.7; color:rgba(255,255,255,0.56); }

.note-tengah{ max-width:62ch; margin:24px auto 0; text-align:center; font-size:0.86rem;
  line-height:1.7; color:var(--text-secondary); }
/* sub judul pada bagian terang perlu warna gelap agar terbaca */
.section--offwhite .dp-kepala .sub{ color:var(--text-secondary); }
.section--dark .note-tengah{ color:rgba(255,255,255,0.5); }

.g1-jujur{ max-width:820px; margin:30px auto 0; border:1px solid rgba(7,6,13,0.14);
  border-radius:18px; padding:24px 26px; background:rgba(255,255,255,0.6); }
.g1-jujur .lb{ display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:#0E5C82; margin-bottom:12px; }
.g1-jujur p{ font-size:0.93rem; line-height:1.72; color:var(--text-secondary); }
.g1-jujur p + p{ margin-top:11px; }
.g1-jujur b{ color:var(--ink); font-weight:700; }

.cb-baris{ display:grid; grid-template-columns:1fr; gap:12px; max-width:940px; margin:0 auto; }
@media (min-width:760px){ .cb-baris{ grid-template-columns:repeat(3,1fr); } }

/* Kartu langkah di bagian terang (v188).
   Komponen .cb dirancang untuk latar gelap, jadi teksnya putih.
   Ketika dipakai di .section--offwhite, warnanya dibalik supaya terbaca. */
.section--offwhite .cb{
  border-color:rgba(7,6,13,0.13);
  background:rgba(255,255,255,0.62);
}
.section--offwhite .cb .jd{ color:var(--ink); }
.section--offwhite .cb .kt{ color:var(--text-secondary); }
.section--offwhite .cb .kt a{ color:var(--ink); border-bottom-color:rgba(7,6,13,0.28); }
.section--offwhite .cb .kt a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ================= COPY TRADE DI BERANDA (v189) ================= */
.ct-blok{ max-width:780px; margin:0 auto; text-align:center; }
.ct-blok h2{ margin-top:16px; }
.ct-blok h2 .m{ color:rgba(7,6,13,0.34); }
.ct-blok .sub{ margin-top:18px; max-width:52ch; margin-inline:auto; font-size:1.02rem;
  line-height:1.7; color:var(--text-secondary); }
.ct-pil{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:24px; }
.ct-pil span{ font-size:0.8rem; font-weight:600; letter-spacing:0.04em;
  border:1px solid rgba(31,191,107,0.42); background:rgba(31,191,107,0.08);
  border-radius:999px; padding:9px 17px; color:#11603C; }
.ct-inti{ margin-top:24px; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:clamp(1.15rem,3.6vw,1.45rem); letter-spacing:-0.025em; color:var(--ink); }

/* ================= BLOK BELUM SIAP MENYEWA (v189) ================= */
.bs-kepala{ text-align:center; margin-bottom:34px; }
.bs-kepala h2{ margin-top:14px; }
.bs-kepala .sub{ max-width:50ch; margin:16px auto 0; font-size:1rem; line-height:1.7;
  color:rgba(255,255,255,0.56); }

.bs-grid{ display:grid; grid-template-columns:1fr; gap:14px; max-width:1000px; margin:0 auto; }
@media (min-width:820px){ .bs-grid{ grid-template-columns:repeat(3,1fr); } }

.bs{ display:flex; flex-direction:column; border:1px solid var(--w); border-radius:20px;
  padding:26px 24px 24px; text-decoration:none;
  background:linear-gradient(160deg, color-mix(in srgb,var(--w) 13%,transparent),
                                     color-mix(in srgb,var(--w) 3%,transparent));
  transition:transform .22s ease, box-shadow .22s ease; }
.bs:hover{ transform:translateY(-3px);
  box-shadow:0 22px 50px -22px color-mix(in srgb,var(--w) 60%,transparent); }
.bs .lb{ display:inline-block; align-self:flex-start; font-size:0.66rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--w);
  border:1px solid color-mix(in srgb,var(--w) 45%,transparent);
  border-radius:999px; padding:6px 13px; }
.bs .nm{ display:block; margin-top:16px; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:800; font-size:1.5rem; letter-spacing:-0.03em; line-height:1.1; color:#fff; }
.bs .kt{ display:block; margin-top:11px; font-size:0.92rem; line-height:1.62;
  color:rgba(255,255,255,0.6); }
.bs .hg{ display:block; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.12);
  font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:1.15rem;
  letter-spacing:-0.02em; color:#fff; }
.bs .hg small{ display:block; margin-top:5px; font-family:Inter,sans-serif; font-weight:400;
  font-size:0.78rem; letter-spacing:0; color:rgba(255,255,255,0.45); }
.bs .go{ margin-top:auto; padding-top:18px; font-size:0.9rem; font-weight:700; color:var(--w); }
.bs .go::after{ content:" \2192"; }

/* ================= KATALOG ROBOT (v190) ================= */
.kat-kepala{ text-align:center; margin-bottom:26px; }
.kat-kepala h2{ margin-top:14px; }
.kat-kepala .sub{ max-width:58ch; margin:16px auto 0; font-size:1rem; line-height:1.7;
  color:rgba(255,255,255,0.56); }

.kat-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.kat-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.kat-chips button{ font-family:inherit; font-size:0.76rem; font-weight:600; cursor:pointer;
  border:1px solid rgba(255,255,255,0.16); background:transparent; border-radius:999px;
  padding:9px 16px; color:rgba(255,255,255,0.6); transition:all .2s ease; }
.kat-chips button:hover{ border-color:rgba(255,255,255,0.4); color:#fff; }
.kat-chips button.on{ background:#fff; border-color:#fff; color:#0B0912; font-weight:700; }
.kat-jml{ font-size:0.82rem; color:rgba(255,255,255,0.5); }
.kat-jml b{ color:#fff; font-weight:700; }

.kat-grid{ display:grid; grid-template-columns:1fr; gap:13px; align-items:stretch; }
@media (min-width:720px){ .kat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1140px){ .kat-grid{ grid-template-columns:repeat(3,1fr); } }

.ka{ position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.11); background:#0F0D1B;
  transition:border-color .22s ease, transform .22s ease; }
.ka:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--w) 46%,transparent); }
.ka::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--w); z-index:2; }

.ka-kop{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px; }
.ka-ikon{ flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--w) 38%,#0B0912), #0B0912);
  border:1px solid color-mix(in srgb,var(--w) 38%,transparent);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:0.78rem;
  line-height:1.05; color:#fff; letter-spacing:-0.02em; }
.ka-jd{ min-width:0; }
.ka-nm{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.12rem; letter-spacing:-0.025em; color:#fff; line-height:1.15; }
.ka-dev{ display:block; margin-top:3px; font-size:0.71rem; color:rgba(255,255,255,0.44); }
.ka-lc{ margin-left:auto; align-self:flex-start; font-size:0.55rem; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; border-radius:6px; padding:4px 8px;
  white-space:nowrap; }
.lc-gratis{ background:#4FE0A0; color:#052A1B; }
.lc-paket{ background:#C4A6FF; color:#1B0F33; }
.lc-lama{ background:#E8C25A; color:#2A1F05; }
.lc-baru{ background:#7FD4FF; color:#04222F; }

.ka-kurva{ position:relative; height:82px; margin:0 18px; border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb,var(--w) 8%,transparent), transparent); }
.ka-kurva svg{ display:block; width:100%; height:100%; }
.ka-kurva .ket{ position:absolute; left:0; right:0; bottom:0; padding:8px 9px 5px;
  font-size:0.58rem; letter-spacing:0.05em; color:rgba(255,255,255,0.46);
  background:linear-gradient(180deg, transparent, rgba(15,13,27,0.92) 62%); }

.ka-met{ display:flex; flex-wrap:wrap; gap:5px; padding:13px 18px 0; }
.ka-met span{ font-size:0.63rem; font-weight:700; letter-spacing:0.04em;
  border:1px solid rgba(255,255,255,0.15); border-radius:5px; padding:4px 8px;
  color:rgba(255,255,255,0.6); }
.ka-met span.utama{ border-color:color-mix(in srgb,var(--w) 48%,transparent);
  background:color-mix(in srgb,var(--w) 13%,transparent);
  color:color-mix(in srgb,var(--w) 80%,#fff); }

.ka-ang{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:14px 18px 0;
  border-radius:11px; overflow:hidden; background:rgba(255,255,255,0.08); }
.ka-ang > div{ background:#131020; padding:11px 6px; text-align:center; }
.ka-ang .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1rem; letter-spacing:-0.02em; color:#fff; line-height:1; }
.ka-ang .v.ris{ color:var(--w); }
.ka-ang .k{ display:block; margin-top:5px; font-size:0.56rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.4); line-height:1.35; }

.ka-vf{ display:flex; gap:5px; padding:12px 18px 0; }
.ka-vf span{ flex:1; text-align:center; font-size:0.57rem; font-weight:700; letter-spacing:0.04em;
  border-radius:5px; padding:5px 4px; border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.36); }
.ka-vf span.ya{ border-color:rgba(31,191,107,0.4); background:rgba(31,191,107,0.10); color:#5FE0A0; }

.ka-bawah{ margin-top:auto; padding:14px 18px 16px; }
.ka-hrg{ display:flex; align-items:baseline; gap:7px; }
.ka-hrg .h{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:1.12rem;
  letter-spacing:-0.02em; color:#fff; }
.ka-hrg .s{ font-size:0.71rem; color:rgba(255,255,255,0.42); }
.ka-mod{ display:block; margin-top:4px; font-size:0.7rem; color:rgba(255,255,255,0.44);
  line-height:1.5; }
.ka-aksi{ display:flex; gap:7px; margin-top:12px; }
.ka-aksi a{ flex:1; text-align:center; border-radius:9px; padding:11px 6px;
  font-size:0.76rem; font-weight:700; border:1px solid transparent; }
.b-sewa{ background:#E8244A; color:#fff; }
.b-sewa:hover{ background:#f03356; color:#fff; }
.b-copy{ border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); }
.b-copy:hover{ border-color:rgba(255,255,255,0.45); color:#fff; }
.b-copy.off{ opacity:.3; pointer-events:none; }
.b-gratis{ background:#4FE0A0; color:#052A1B; }
.b-gratis:hover{ background:#63eeae; color:#052A1B; }
.b-det{ border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); }
.b-det:hover{ border-color:rgba(255,255,255,0.45); color:#fff; }
.ka-det{ display:block; margin-top:9px; text-align:center; font-size:0.73rem; font-weight:600;
  color:rgba(255,255,255,0.5); padding:7px 4px; }
.ka-det::after{ content:" \2192"; }
.ka-det:hover{ color:#fff; }

.ka--slot{ border-style:dashed; background:rgba(255,255,255,0.02); }
.ka--slot::before{ opacity:.4; }
.ka--slot .ka-nm{ color:rgba(255,255,255,0.6); }
.ka-slot-isi{ padding:14px 18px 0; }
.ka-slot-isi p{ font-size:0.87rem; line-height:1.65; color:rgba(255,255,255,0.52); }
.ka-slot-isi .kecil{ margin-top:10px; font-size:0.78rem; color:rgba(255,255,255,0.38); }

.kat-catatan{ margin-top:26px; text-align:center; font-size:0.78rem; line-height:1.7;
  color:rgba(255,255,255,0.36); max-width:76ch; margin-inline:auto; }

/* Target sentuh menu di tablet (v190).
   Di iPad menu desktop tetap tampil, tapi tinggi tautannya hanya 22px
   sehingga sulit disentuh. Padding vertikal dinaikkan tanpa mengubah
   tampilan di perangkat bermouse. */
@media (pointer:coarse) and (min-width:900px){
  .nav-desktop a{ padding-block:11px; }
  .brand{ padding-block:7px; }
}

/* Baris harga tahunan di kartu katalog (v192).
   Dibuat menonjol supaya sewa tahunan lebih menarik daripada bulanan. */
/* baris modal dikunci dua baris supaya tinggi kartu seragam */
.ka-mod{ min-height:2.9em; }
.ka-thn{ display:block; margin-top:7px; padding:7px 10px; border-radius:8px;
  font-size:0.72rem; line-height:1.45; letter-spacing:0.01em;
  border:1px solid rgba(31,191,107,0.32); background:rgba(31,191,107,0.09);
  color:#8FE9BC; }
.ka-thn b{ color:#B7F5D3; font-weight:700; }
.ka-thn--kosong{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.44); }
.ka-mod{ margin-top:8px; }


/* Kartu katalog dipadatkan di layar HP (v192).
   Delapan puluh persen pengunjung memakai HP, dan kartu setinggi 1.100px
   membuat katalog jadi sepuluh layar. Yang dipangkas hanya ruang dan
   ukuran, tidak ada informasi yang dibuang. */
@media (max-width:640px){
  .kat-grid{ gap:11px; }
  .ka-kop{ padding:14px 15px 11px; gap:10px; }
  .ka-ikon{ width:38px; height:38px; border-radius:11px; font-size:0.7rem; }
  .ka-nm{ font-size:1.05rem; }
  .ka-dev{ font-size:0.68rem; }
  .ka-kurva{ height:64px; margin:0 15px; }
  .ka-met{ padding:11px 15px 0; gap:4px; }
  .ka-met span{ font-size:0.6rem; padding:4px 7px; }
  .ka-ang{ margin:11px 15px 0; }
  .ka-ang > div{ padding:9px 4px; }
  .ka-ang .v{ font-size:0.92rem; }
  .ka-ang .k{ margin-top:4px; font-size:0.53rem; }
  .ka-vf{ padding:10px 15px 0; gap:4px; }
  .ka-vf span{ font-size:0.54rem; padding:4px 3px; }
  .ka-bawah{ padding:11px 15px 14px; }
  .ka-hrg .h{ font-size:1.05rem; }
  .ka-thn{ margin-top:6px; padding:6px 9px; font-size:0.68rem; }
  .ka-mod{ margin-top:6px; font-size:0.67rem; min-height:0; }
  .ka-aksi{ margin-top:10px; gap:6px; }
  .ka-aksi a{ padding:10px 5px; font-size:0.73rem; }
  .ka-det{ margin-top:6px; padding:9px 4px; font-size:0.7rem; }
  .ka-slot-isi{ padding:11px 15px 0; }
  .ka-slot-isi p{ font-size:0.82rem; }
}

/* Lencana unggulan di kartu katalog (v194).
   Dibuat lebih menonjol daripada lencana biasa, dengan pendar lembut. */
.ka-lc.lc-laris,
.ka-lc.lc-favorit{ font-size:0.58rem; padding:5px 10px; }
.lc-laris{ background:linear-gradient(135deg,#F0CE6A,#C9A75B); color:#2A1F05;
  box-shadow:0 0 18px -4px rgba(232,194,90,0.7); }
.lc-favorit{ background:linear-gradient(135deg,#8FD9FF,#4FB8E8); color:#04222F;
  box-shadow:0 0 18px -4px rgba(79,184,232,0.7); }

/* Keterangan tiga kurva pada kartu paket (v195) */
.ka-kurva .ket-tiga{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.ka-kurva .ket-tiga i{ width:12px; height:2px; border-radius:9px; background:var(--p);
  display:inline-block; margin-left:6px; }
.ka-kurva .ket-tiga i:first-child{ margin-left:0; }

/* Tiga kartu unggulan di beranda (v196) */
.kat-grid--tiga{ max-width:1120px; margin-inline:auto; }
@media (min-width:720px) and (max-width:1139px){
  .kat-grid--tiga{ grid-template-columns:repeat(2,1fr); }
}

/* ================= BARIS ROBOT DI BERANDA (v196) ================= */
.rb-daftar{ display:flex; flex-direction:column; gap:9px; max-width:940px; margin:0 auto; }
.rb{ position:relative; display:flex; align-items:center; gap:13px; padding:13px 15px;
  border:1px solid rgba(255,255,255,0.11); border-radius:14px; background:#0F0D1B;
  text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
.rb:hover{ border-color:color-mix(in srgb,var(--w) 50%,transparent); transform:translateX(2px); }
.rb::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 9px 9px 0; background:var(--w); }
.rb-ik{ flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--w) 38%,#0B0912), #0B0912);
  border:1px solid color-mix(in srgb,var(--w) 38%,transparent);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:0.64rem;
  line-height:1.05; color:#fff; }
.rb-tx{ flex:1; min-width:0; }
.rb-n{ display:flex; align-items:center; gap:7px; min-width:0; }
.rb-n b{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:1rem;
  letter-spacing:-0.02em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-lc{ flex:0 0 auto; font-size:0.5rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; border-radius:4px; padding:3px 6px; white-space:nowrap; }
.rb-m{ display:block; margin-top:4px; font-size:0.72rem; color:rgba(255,255,255,0.46);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-m i{ font-style:normal; color:var(--w); font-weight:700; }
.rb-kanan{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.rb-kv{ flex:0 0 auto; width:56px; height:26px; }
.rb-kv svg{ width:100%; height:100%; display:block; }
.rb-h{ flex:0 0 auto; text-align:right; min-width:66px; }
.rb-h b{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:0.92rem; color:#fff; letter-spacing:-0.02em; }
.rb-h span{ display:block; margin-top:2px; font-size:0.61rem; color:rgba(255,255,255,0.4); }

/* Di layar sempit, kurva pindah ke atas harga supaya keduanya tetap muat */
@media (max-width:560px){
  .rb{ gap:11px; padding:12px 13px; }
  .rb-ik{ width:38px; height:38px; font-size:0.6rem; }
  .rb-n b{ font-size:0.94rem; }
  .rb-m{ font-size:0.68rem; }
  .rb-kanan{ flex-direction:column; align-items:flex-end; gap:5px; }
  .rb-kv{ width:60px; height:20px; }
  .rb-h{ min-width:0; }
  .rb-h b{ font-size:0.86rem; }
  .rb-h span{ font-size:0.58rem; }
}

/* ================= PANEL IDENTITAS ROBOT (v198) ================= */
.ki{ display:grid; grid-template-columns:1fr; gap:0; max-width:1000px; margin:0 auto;
  border:1px solid rgba(255,255,255,0.12); border-radius:20px; overflow:hidden;
  background:#0F0D1B; }
@media (min-width:860px){ .ki{ grid-template-columns:1.15fr 1fr; } }

.ki-kiri{ padding:22px 22px 20px; display:flex; flex-direction:column;
  background:linear-gradient(160deg, color-mix(in srgb,var(--w) 11%,transparent), transparent 76%); }
/* kurva memenuhi sisa ruang supaya kedua kolom seimbang tingginya */
@media (min-width:860px){ .ki-kiri .ki-kurva{ flex:1; height:auto; min-height:120px; } }
@media (min-width:860px){ .ki-kiri{ border-right:1px solid rgba(255,255,255,0.10); } }

.ki-dev{ font-size:0.82rem; color:rgba(255,255,255,0.48); display:flex; align-items:center; gap:8px; }
.ki-dev b{ color:#fff; font-weight:600; }
.ki-dev i{ font-style:normal; font-size:0.62rem; font-weight:700; letter-spacing:0.08em;
  border:1px solid rgba(255,255,255,0.22); border-radius:4px; padding:2px 6px;
  color:rgba(255,255,255,0.55); }

.ki-met{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.ki-met span{ font-size:0.68rem; font-weight:700; letter-spacing:0.04em;
  border:1px solid rgba(255,255,255,0.16); border-radius:6px; padding:5px 10px;
  color:rgba(255,255,255,0.62); }
.ki-met span.utama{ border-color:color-mix(in srgb,var(--w) 48%,transparent);
  background:color-mix(in srgb,var(--w) 13%,transparent);
  color:color-mix(in srgb,var(--w) 80%,#fff); }

.ki-kurva{ position:relative; height:120px; margin-top:16px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb,var(--w) 8%,transparent), transparent); }
.ki-kurva svg{ display:block; width:100%; height:100%; }
.ki-kurva .ket{ position:absolute; left:0; right:0; bottom:0; padding:10px 11px 7px;
  font-size:0.66rem; color:rgba(255,255,255,0.5);
  background:linear-gradient(180deg, transparent, rgba(15,13,27,0.92) 62%); }
.ki-tiga{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.ki-tiga i{ width:13px; height:2px; border-radius:9px; background:var(--p);
  display:inline-block; margin-left:7px; }
.ki-tiga i:first-child{ margin-left:0; }

.ki-kanan{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px; }
.ki-ris{ display:flex; align-items:center; gap:10px; }
.ki-ris .lbl{ font-size:0.66rem; font-weight:700; letter-spacing:0.11em; text-transform:uppercase;
  color:rgba(255,255,255,0.42); }
.ki-ris .tk{ display:flex; gap:4px; margin-left:auto; }
.ki-ris .tk i{ width:16px; height:5px; border-radius:99px; background:rgba(255,255,255,0.15); }
.ki-ris .tk i.on{ background:var(--w); }
.ki-ris .ang{ font-size:0.74rem; font-weight:700; color:rgba(255,255,255,0.66); }

.ki-ang{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  border:1px solid rgba(255,255,255,0.10); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,0.08); }
.ki-ang > div{ background:#131020; padding:13px 12px; }
.ki-ang .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.28rem; letter-spacing:-0.025em; color:#fff; line-height:1; }
.ki-ang .k{ display:block; margin-top:7px; font-size:0.6rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.44); }
.ki-ang .c{ display:block; margin-top:5px; font-size:0.66rem; line-height:1.45;
  color:rgba(255,255,255,0.36); }

.ki-vf{ display:flex; gap:6px; }
.ki-vf span{ flex:1; text-align:center; font-size:0.6rem; font-weight:700; letter-spacing:0.04em;
  border-radius:7px; padding:7px 4px; border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.36); }
.ki-vf span.ya{ border-color:rgba(31,191,107,0.4); background:rgba(31,191,107,0.10); color:#5FE0A0; }

.ki-modal{ font-size:0.82rem; color:rgba(255,255,255,0.6); line-height:1.6; }
.ki-modal b{ color:#fff; font-weight:600; }
.ki-modal .sr{ display:block; font-size:0.75rem; color:rgba(255,255,255,0.42); }

.ki-hrg{ display:flex; align-items:baseline; gap:9px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.10); }
.ki-hrg .v{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:1.5rem;
  letter-spacing:-0.03em; color:#fff; }
.ki-hrg .k{ font-size:0.75rem; color:rgba(255,255,255,0.44); }

.ki-tahun{ padding:10px 13px; border-radius:10px; font-size:0.78rem; line-height:1.5;
  border:1px solid rgba(31,191,107,0.32); background:rgba(31,191,107,0.09); color:#8FE9BC; }
.ki-tahun b{ color:#B7F5D3; font-weight:700; }
.ki-tahun .hm{ display:block; margin-top:2px; font-size:0.73rem; opacity:.85; }
.ki-tahun--kosong{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.5); }

@media (max-width:520px){
  .ki-kiri, .ki-kanan{ padding:18px 16px; }
  .ki-kurva{ height:100px; }
  .ki-ang > div{ padding:11px 10px; }
  .ki-ang .v{ font-size:1.14rem; }
}

/* Jarak bagian atas halaman robot dirapatkan (v199).
   Batu sudah dihapus, jadi hero tidak lagi butuh ruang besar, dan panel
   identitas menempel langsung ke tabel spesifikasi. */
.pp-hero{ padding-bottom:38px; }
.ki-blok{ padding-bottom:52px; }
@media (max-width:640px){
  .pp-hero{ padding-bottom:28px; }
  .ki-blok{ padding-bottom:38px; }
}

/* Tombol hero dirapikan (v201).
   Aturan lama memakai grid dua kolom dengan tombol utama melebar penuh,
   sisa dari masa hero masih punya tiga tombol. Akibatnya tombol kedua
   tertinggal di kolom kiri dan terlihat tidak rata. */
.hero-utama .hero-actions{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  gap:10px; max-width:420px; margin-inline:auto;
}
.hero-utama .hero-actions .btn{ flex:1 1 145px; grid-column:auto !important; }

/* Copy Trade jadi satu baris di bawah daftar robot (v201) */
.rb-ct{ max-width:60ch; margin:20px auto 0; text-align:center; font-size:0.88rem;
  line-height:1.7; color:rgba(255,255,255,0.52); }
.rb-ct a{ color:#8FE9BC; border-bottom:1px solid rgba(143,233,188,0.4); font-weight:600; }
.rb-ct a:hover{ color:#B7F5D3; border-color:#B7F5D3; }

/* Blok Belum Siap kini dua kartu */
.bs-grid--dua{ max-width:720px; }
@media (min-width:820px){ .bs-grid--dua{ grid-template-columns:repeat(2,1fr); } }

/* Baris bukti di bawah tombol hero (v201).
   Aturan ini sempat ikut terhapus saat pembersihan CSS, sehingga barisnya
   menempel ke tombol dan pemisahnya tidak berjarak. */
.section--dark .container > p.hero-bukti,
.hero-bukti{ margin-top:18px; padding-bottom:6px; display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap; gap:10px; font-size:0.82rem; font-weight:500;
  color:rgba(255,255,255,0.46); }
.hero-bukti .sep{ opacity:.45; }
.hero-bukti .b{ white-space:nowrap; }
.hero-bukti a{ display:inline-block; padding-block:6px; color:rgba(255,255,255,0.72);
  border-bottom:1px solid rgba(255,255,255,0.26); }
.hero-bukti a:hover{ color:#fff; border-color:rgba(255,255,255,0.6); }
@media (max-width:560px){
  .hero-bukti{ flex-direction:column; gap:5px; font-size:0.76rem; line-height:1.5; }
  .hero-bukti .sep{ display:none; }
}
@media (max-width:360px){ .hero-bukti .b{ white-space:normal; text-align:center; } }

/* ================= PITA AKUN PANTAU DI BERANDA (v203) ================= */
.ap-pita{ display:flex; align-items:center; gap:16px; max-width:880px; margin:0 auto;
  padding:18px 22px; border-radius:16px; text-decoration:none;
  border:1px solid rgba(31,191,107,0.30); background:rgba(31,191,107,0.06);
  transition:border-color .25s ease, background .25s ease; }
.ap-pita:hover{ border-color:rgba(31,191,107,0.6); background:rgba(31,191,107,0.11); }
.ap-pita .ik{ flex:0 0 auto; width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(31,191,107,0.45); display:flex; align-items:center; justify-content:center; }
.ap-pita .ik i{ width:9px; height:9px; border-radius:999px; background:#1FBF6B;
  box-shadow:0 0 12px rgba(31,191,107,0.9); }
.ap-pita .tx{ flex:1; min-width:0; }
.ap-pita .tx b{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.02rem; letter-spacing:-0.02em; color:#fff; }
.ap-pita .tx span{ display:block; margin-top:5px; font-size:0.85rem; line-height:1.6;
  color:rgba(255,255,255,0.54); }
.ap-pita .go{ flex:0 0 auto; font-size:0.85rem; font-weight:700; color:#8FE9BC; white-space:nowrap; }
.ap-pita .go::after{ content:" \2192"; }
@media (max-width:700px){
  .ap-pita{ flex-wrap:wrap; gap:12px; padding:16px 17px; }
  .ap-pita .tx{ flex:1 1 100%; order:2; }
  .ap-pita .go{ order:3; }
}

/* ================= BELUM SIAP, DUA BARIS RAMPING (v203) ================= */
.bs-jd{ text-align:center; font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:clamp(1rem,3vw,1.15rem); letter-spacing:-0.02em; color:rgba(255,255,255,0.62);
  margin-bottom:16px; }
.bs-baris{ display:grid; grid-template-columns:1fr; gap:10px; max-width:820px; margin:0 auto; }
@media (min-width:720px){ .bs-baris{ grid-template-columns:1fr 1fr; } }
.bsr{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:13px;
  text-decoration:none; border:1px solid rgba(255,255,255,0.11);
  background:rgba(255,255,255,0.03); transition:border-color .2s ease; }
.bsr:hover{ border-color:color-mix(in srgb,var(--w) 50%,transparent); }
.bsr .lb{ flex:0 0 auto; font-size:0.55rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--w); border:1px solid color-mix(in srgb,var(--w) 42%,transparent);
  border-radius:5px; padding:5px 8px; white-space:nowrap; }
.bsr .tx{ flex:1; min-width:0; }
.bsr .tx b{ display:block; font-size:0.92rem; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.bsr .tx span{ display:block; margin-top:3px; font-size:0.75rem; color:rgba(255,255,255,0.46); }
.bsr .hg{ flex:0 0 auto; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:0.9rem; color:#fff; white-space:nowrap; }

/* ================= TESTIMONI RINGKAS (v203) ================= */
.tm-jd{ text-align:center; font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:clamp(1rem,3vw,1.15rem); letter-spacing:-0.02em; color:rgba(255,255,255,0.62);
  margin-bottom:18px; }
.tm-ringkas{ display:grid; grid-template-columns:1fr; gap:10px; max-width:1000px; margin:0 auto; }
@media (min-width:700px){ .tm-ringkas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .tm-ringkas{ grid-template-columns:repeat(3,1fr); } }
.tm-ringkas{ max-width:1000px; }
.tm-ringkas .tm-kartu{ margin:0; padding:16px 18px; border-radius:13px;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); }
.tm-ringkas .tm-kutip{ width:16px; height:12px; color:rgba(201,167,91,0.5); display:block; }
.tm-ringkas blockquote{ margin:10px 0 0; font-size:0.84rem; line-height:1.65;
  color:rgba(255,255,255,0.66); }
.tm-ringkas figcaption{ display:flex; align-items:center; gap:9px; margin-top:12px;
  padding-top:11px; border-top:1px solid rgba(255,255,255,0.09); }
.tm-ringkas .tm-ava{ width:26px; height:26px; font-size:0.65rem; }
.tm-ringkas .tm-id{ font-size:0.76rem; color:rgba(255,255,255,0.6); }
.tm-ringkas .tm-id b, .tm-ringkas .tm-id strong{ color:#fff; }
.section--dark .container > p.tm-cat,
.tm-cat{ margin-top:18px; text-align:center; font-size:0.74rem; line-height:1.6;
  color:rgba(255,255,255,0.34); max-width:64ch; margin-inline:auto; }

/* ================= TESTIMONI GESER DI HP (v205) ================= */
.tm-jd .geser-ket{ display:none; }
@media (max-width:699px){
  .tm-ringkas.geser-hp{ display:flex; gap:10px; overflow-x:auto; padding:2px 20px 12px;
    margin-inline:-20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .tm-ringkas.geser-hp::-webkit-scrollbar{ display:none; }
  .tm-ringkas.geser-hp .tm-kartu{ flex:0 0 82%; scroll-snap-align:center; }
  .tm-jd .geser-ket{ display:block; margin-top:7px; font-family:Inter,sans-serif;
    font-weight:600; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
    color:rgba(255,255,255,0.32); }
}

/* ================= ARTIKEL, DAFTAR BERNOMOR (v205) ================= */
.ar-jd{ text-align:center; font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:clamp(1rem,3vw,1.18rem); letter-spacing:-0.02em; color:var(--text-secondary);
  margin-bottom:6px; }
.ar-daftar2{ max-width:760px; margin:0 auto; }
.ar-baris{ display:flex; align-items:center; gap:18px; padding:20px 6px;
  border-bottom:1px solid rgba(7,6,13,0.11); text-decoration:none;
  transition:padding-left .22s ease; }
.ar-baris:first-child{ border-top:1px solid rgba(7,6,13,0.11); }
.ar-baris:hover{ padding-left:12px; }
.ar-baris .no{ flex:0 0 auto; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.05rem; letter-spacing:0.02em; color:#C9A75B; min-width:26px; }
.ar-baris .tx{ flex:1; min-width:0; }
.ar-baris .tx b{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:1.02rem; letter-spacing:-0.02em; line-height:1.35; color:var(--ink); }
.ar-baris .tx span{ display:block; margin-top:5px; font-size:0.84rem; line-height:1.55;
  color:var(--text-secondary); }
.ar-baris .mnt{ flex:0 0 auto; font-size:0.73rem; font-weight:600; letter-spacing:0.04em;
  color:rgba(7,6,13,0.4); white-space:nowrap; }
.ar-baris .mnt::after{ content:" \2192"; margin-left:7px; color:rgba(7,6,13,0.28); }
@media (max-width:560px){
  .ar-baris{ gap:13px; padding:16px 2px; align-items:flex-start; }
  .ar-baris .no{ font-size:0.92rem; min-width:22px; padding-top:2px; }
  .ar-baris .tx b{ font-size:0.94rem; }
  .ar-baris .tx span{ font-size:0.79rem; }
  .ar-baris .mnt{ font-size:0.68rem; padding-top:3px; }
}
/* teks testimoni ringkas tidak dipotong, panjangnya sudah pendek */
.tm-ringkas .tm-kartu blockquote{
  display:block; -webkit-line-clamp:none !important; overflow:visible; margin-bottom:0; }
.tm-ringkas .tm-kartu{ flex:none; }
@media (max-width:699px){ .tm-ringkas.geser-hp .tm-kartu{ flex:0 0 82%; } }

/* ================= PITA FAKTA HALAMAN (v207) ================= */
.hf{ display:grid; grid-template-columns:1fr; gap:1px; max-width:880px; margin:28px auto 0;
  border:1px solid rgba(255,255,255,0.12); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,0.09); }
@media (min-width:640px){ .hf{ grid-template-columns:repeat(3,1fr); } }
.hf > div{ background:#0F0D1B; padding:20px 18px; text-align:center;
  display:flex; flex-direction:column; justify-content:center; }
.hf .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.42rem; letter-spacing:-0.03em; line-height:1.05; color:var(--c); }
.hf .k{ display:block; margin-top:9px; font-size:0.68rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.44); }
.hf .c{ display:block; margin-top:6px; font-size:0.75rem; line-height:1.5;
  color:rgba(255,255,255,0.4); }
@media (max-width:639px){
  .hf > div{ padding:14px 16px; flex-direction:row; align-items:baseline; gap:12px;
    text-align:left; min-height:66px; }
  .hf .v{ flex:0 0 auto; font-size:1.1rem; }
  .hf .isi{ flex:1; min-width:0; }
  .hf .k{ margin-top:0; font-size:0.63rem; }
  .hf .c{ margin-top:4px; font-size:0.71rem; }
}

/* Kalimat pengantar hero dibatasi lebarnya supaya barisnya tidak terlalu panjang */
.pp-hero .kar, .pp-hero .pp-kar{ max-width:62ch; margin-inline:auto; }
/* Tombol hero halaman disamakan lebarnya di layar sempit (v207) */
@media (max-width:600px){
  .pp-hero .hero-actions{ display:flex; flex-wrap:wrap; justify-content:center;
    gap:10px; max-width:420px; margin-inline:auto; }
  .pp-hero .hero-actions .btn{ flex:1 1 145px; min-width:0; padding-inline:14px; }
}
/* jarak antara pita fakta dan baris saringan katalog (v209) */
.hf + .kat-bar{ margin-top:30px; }
@media (max-width:640px){ .hf + .kat-bar{ margin-top:24px; } }

/* ================= HERO KARTU DATA (v211) ================= */
.hk{ display:grid; grid-template-columns:1fr; margin:30px auto 0; max-width:940px;
  border:1px solid rgba(255,255,255,0.13); border-radius:22px; overflow:hidden;
  background:#0F0D1B; text-align:left; }
@media (min-width:820px){ .hk{ grid-template-columns:1.25fr 1fr; } }

.hk-kiri{ padding:17px 20px 13px; }
@media (min-width:820px){ .hk-kiri{ border-right:1px solid rgba(255,255,255,0.10); } }
.section--dark .container .hk-kop,
.hk-kop{ display:flex; align-items:center; gap:9px; font-size:0.78rem;
  color:rgba(255,255,255,0.46); margin:0; }
.hk-kop i{ width:7px; height:7px; border-radius:99px; background:#1FBF6B;
  box-shadow:0 0 10px rgba(31,191,107,0.9); flex:0 0 auto; }
.hk-kop b{ color:#fff; font-weight:600; }
.hk-kurva{ position:relative; margin-top:10px; }
.hk-kurva .kv-wrap{ display:block; position:relative; }
.hk-kurva .kurva{ display:block; width:100%; height:190px; }
.hk-sumbu{ display:flex; justify-content:space-between; margin-top:4px;
  font-size:0.66rem; letter-spacing:0.06em; color:rgba(255,255,255,0.34); }

.hk-kanan{ padding:18px 20px; display:flex; flex-direction:column; justify-content:center; gap:0; }
.hk-baris{ display:flex; align-items:baseline; gap:13px; padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,0.09); }
.hk-baris:first-child{ padding-top:0; }
.hk-baris:last-child{ border-bottom:none; padding-bottom:0; }
.hk-baris .v{ flex:0 0 auto; min-width:76px; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:800; font-size:1.14rem; letter-spacing:-0.02em; color:#5FE0A0; }
.hk-baris .k{ font-size:0.79rem; line-height:1.5; color:rgba(255,255,255,0.5); }
.hk-baris .k b{ display:block; font-size:0.84rem; font-weight:600; color:#fff; margin-bottom:2px; }

@media (max-width:520px){
  .hk{ margin-top:24px; }
  .hk-kiri{ padding:15px 16px 11px; }
  .hk-kurva .kurva{ height:150px; }
  .hk-kanan{ padding:15px 16px; }
  .hk-baris{ padding:11px 0; gap:11px; }
  .hk-baris .v{ min-width:68px; font-size:1.05rem; }
  .hk-baris .k{ font-size:0.76rem; }
}
/* kalimat kedua hero dilebarkan supaya "Margin Call" tidak pecah baris (v211) */
.hero-utama .hero-lead{ max-width:46ch !important; margin-inline:auto; }

/* Kurva hero dibuat lebih menyala (v213).
   Isi di bawah garis dipekatkan dan garisnya diberi pendar, supaya
   kontras hijau terhadap latar hitam terasa segar dan hidup. */
.hk-kurva .kv-garis{ stroke-width:3.2 !important;
  filter:drop-shadow(0 0 6px rgba(60,240,150,0.75)) drop-shadow(0 0 16px rgba(31,191,107,0.45)); }
.hk-kurva .kv-halo{ opacity:0.55 !important; stroke:#3CF096 !important; stroke-width:18 !important;
  filter:blur(11px); }
/* alas hijau tipis di dasar bidang kurva, supaya bagian datar tetap terasa hijau */
.hk-kurva::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(180deg, transparent, rgba(31,191,107,0.14) 55%, rgba(31,191,107,0.22));
  pointer-events:none; z-index:0; }
.hk-kurva .kv-wrap{ position:relative; z-index:1; }
.hk-kurva .kv-kisi line{ stroke:rgba(90,255,175,0.10) !important; }
.hk-kurva .kv-titik::before{ background:#B6FFD9;
  box-shadow:0 0 14px rgba(120,255,190,0.95), 0 0 30px rgba(31,191,107,0.7); }
.hk-kurva .kv-titik i{ border-color:rgba(150,255,205,0.85) !important; }
/* pendar lembut di dasar kartu, memisahkan hijau dari hitam */
.hk-kiri{ position:relative; }
.hk-kiri::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:52%;
  background:radial-gradient(120% 100% at 78% 100%, rgba(31,191,107,0.16), transparent 68%);
  pointer-events:none; }
.hk-kiri > *{ position:relative; z-index:2; }
/* lencana dan tombol uji coba GF ONE (v215) */
.lc-uji{ background:linear-gradient(135deg,#9BE2FF,#4FB8E8); color:#04222F;
  box-shadow:0 0 18px -4px rgba(79,184,232,0.7); font-size:0.58rem; padding:5px 10px; }
.b-uji{ background:#7FD4FF; color:#04222F; }
.b-uji:hover{ background:#9BE2FF; color:#04222F; }

/* ================= RITME JARAK BAKU (v217) =================
   Sebelumnya ada tiga aturan padding bertumpuk dengan skala yang tidak
   berhubungan: 140, 168, dan 96. Akibatnya jarak antar bagian melompat
   tidak berirama, dan di HP bagian ramping sama sekali tidak lebih rapat
   daripada bagian biasa. Satu skala di bawah ini menggantikan semuanya. */
main > .section{ padding-block:clamp(56px, 8.5vw, 120px); }
main > .section--tight{ padding-block:clamp(34px, 5vw, 68px); }

/* hero: napas atas cukup, bawah nol karena kartu data menempel */
main > .hero-utama{ padding-top:clamp(38px, 5.5vw, 76px) !important; padding-bottom:0 !important; }
main > .pp-hero{ padding-top:clamp(38px, 5.5vw, 76px); }
.nw{ white-space:nowrap; }

/* Di layar HP kecil, hero dirapatkan supaya tombol masuk layar pertama (v217).
   Yang dipangkas hanya ruang, bukan ukuran teks maupun kurva. */
@media (max-width:430px){
  main > .hero-utama{ padding-top:30px !important; }
  .hero-utama .hero-judul{ margin-top:12px; }
  .hero-utama .hero-lead{ margin-top:10px !important; }
  .hero-utama .hero-tagline{ margin-top:12px; }
  .hk{ margin-top:20px; }
  .hk-kiri{ padding:13px 15px 9px; }
  .hk-kurva .kurva{ height:132px; }
  .hk-kanan{ padding:12px 15px; }
  .hk-baris{ padding:9px 0; }
  .hero-utama .hero-actions{ margin-top:18px; }
}

/* ================= HASIL PENGUJIAN LENGKAP GF ONE (v219) ================= */
.uj-mutu{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; max-width:880px;
  margin:0 auto; border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  overflow:hidden; background:rgba(255,255,255,0.09); }
@media (min-width:720px){ .uj-mutu{ grid-template-columns:repeat(4,1fr); } }
.uj-mutu > div{ background:#0F0D1B; padding:18px 12px; text-align:center; }
.uj-mutu .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.24rem; letter-spacing:-0.03em; color:#7FD4FF; line-height:1; }
.uj-mutu .k{ display:block; margin-top:8px; font-size:0.63rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.44); }

.uj-jd{ text-align:center; font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:clamp(1.05rem,3vw,1.28rem); letter-spacing:-0.02em; color:#fff; }
.uj-blok{ margin-top:40px; }
.uj-grid{ display:grid; grid-template-columns:1fr; gap:12px; max-width:940px;
  margin:20px auto 0; }
@media (min-width:640px){ .uj-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .uj-grid{ grid-template-columns:repeat(4,1fr); } }
.uj-kartu{ border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:20px 18px;
  background:rgba(255,255,255,0.03); }
.uj-kartu--utama{ border-color:rgba(41,169,235,0.5);
  background:linear-gradient(150deg, rgba(41,169,235,0.16), rgba(41,169,235,0.04));
  box-shadow:0 0 30px -14px rgba(41,169,235,0.7); }
.uj-kartu .n{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:2rem; letter-spacing:-0.04em; line-height:1; color:#7FD4FF; }
.uj-kartu--utama .n{ color:#B6E9FF; font-size:2.3rem; }
.uj-kartu .t{ display:block; margin-top:9px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.uj-kartu .d{ display:block; margin-top:11px; font-size:0.83rem; line-height:1.6;
  color:rgba(255,255,255,0.56); }

.uj-dua{ display:grid; grid-template-columns:1fr; gap:14px; max-width:940px; margin:40px auto 0; }
@media (min-width:860px){ .uj-dua{ grid-template-columns:1fr 1fr; } }
.uj-sisi{ border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:24px 24px 22px;
  background:rgba(255,255,255,0.03); }
.uj-sisi--jujur{ border-color:rgba(232,36,74,0.3); background:rgba(232,36,74,0.05); }
.uj-sisi .lb{ display:block; font-size:0.66rem; font-weight:700; letter-spacing:0.15em;
  text-transform:uppercase; color:#7FD4FF; }
.uj-sisi--jujur .lb{ color:#FF8FA6; }
.uj-sisi h4{ margin-top:11px; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.15rem; letter-spacing:-0.025em; line-height:1.25; color:#fff; }
.uj-sisi p{ margin-top:12px; font-size:0.88rem; line-height:1.68; color:rgba(255,255,255,0.58); }
.uj-sisi p b{ color:#fff; font-weight:600; }
.uj-list{ margin-top:13px; padding:0; list-style:none; }
.uj-list li{ position:relative; padding-left:17px; margin-top:9px; font-size:0.86rem;
  line-height:1.6; color:rgba(255,255,255,0.58); }
.uj-list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  border-radius:99px; background:rgba(255,143,166,0.7); }
.uj-list li b{ color:#fff; font-weight:600; }
.uj-cat{ margin-top:14px; font-size:0.78rem; line-height:1.6; color:rgba(255,255,255,0.4); }

.uj-bar{ margin-top:18px; }
.uj-bar .ujb{ display:flex; align-items:center; gap:11px; margin-top:10px; }
.uj-bar .l{ flex:0 0 116px; font-size:0.74rem; color:rgba(255,255,255,0.5); }
.uj-bar .g{ flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,0.08);
  overflow:hidden; }
.uj-bar .g i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#29A9EB,#7FD4FF); }
.uj-bar .g i.rugi{ background:linear-gradient(90deg,#8A2540,#E8244A); }
.uj-bar .v{ flex:0 0 46px; text-align:right; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:800; font-size:0.86rem; color:#fff; }

.uj-aman{ margin-top:40px; }
.uj-aman-grid{ display:grid; grid-template-columns:1fr; gap:1px; max-width:940px;
  margin:20px auto 0; border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  overflow:hidden; background:rgba(255,255,255,0.09); }
@media (min-width:640px){ .uj-aman-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .uj-aman-grid{ grid-template-columns:repeat(4,1fr); } }
.uj-aman-grid > div{ background:#0F0D1B; padding:19px 16px; text-align:center; }
.uj-aman-grid .v{ display:block; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:1.3rem; letter-spacing:-0.03em; color:#5FE0A0; line-height:1; }
.uj-aman-grid .k{ display:block; margin-top:8px; font-size:0.64rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.46); }
.uj-aman-grid .c{ display:block; margin-top:6px; font-size:0.74rem; line-height:1.5;
  color:rgba(255,255,255,0.38); }

/* ================= PITA KOMUNITAS (v227) ================= */
.km-jd{ text-align:center; font-family:'Inter Tight',Inter,sans-serif; font-weight:800;
  font-size:clamp(1.15rem,3.4vw,1.5rem); letter-spacing:-0.03em; color:#fff; }
.section--dark .container > p.km-sub,
.km-sub{ margin:11px auto 0; max-width:56ch; text-align:center; font-size:0.88rem;
  line-height:1.65; color:rgba(255,255,255,0.5); }
.km-grid{ display:grid; grid-template-columns:1fr; gap:12px; max-width:820px;
  margin:26px auto 0; }
@media (min-width:700px){ .km-grid{ grid-template-columns:1fr 1fr; } }

.km{ display:flex; align-items:center; gap:15px; padding:19px 20px; border-radius:16px;
  text-decoration:none; border:1px solid var(--gr); background:var(--bg);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.km:hover{ transform:translateY(-2px); border-color:var(--gr2);
  box-shadow:0 12px 34px -16px var(--gl); }
.km .ik{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:flex;
  align-items:center; justify-content:center; background:var(--ib); color:var(--ic); }
.km .ik svg{ width:24px; height:24px; display:block; }
.km .tx{ flex:1; min-width:0; }
.km .tx .lb{ display:block; font-size:0.62rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ic); }
.km .tx b{ display:block; margin-top:4px; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:800; font-size:1.06rem; letter-spacing:-0.025em; color:#fff; }
.km .tx .kt{ display:block; margin-top:4px; font-size:0.76rem; line-height:1.5;
  color:rgba(255,255,255,0.5); }
.km .go{ flex:0 0 auto; font-size:1.1rem; color:var(--ic); }

.km--wa{ --gr:rgba(37,211,102,0.40); --gr2:rgba(37,211,102,0.85);
  --bg:linear-gradient(135deg, rgba(37,211,102,0.16), rgba(37,211,102,0.04));
  --ib:rgba(37,211,102,0.20); --ic:#5FE39B; --gl:rgba(37,211,102,0.55); }
.km--tg{ --gr:rgba(56,178,236,0.40); --gr2:rgba(56,178,236,0.85);
  --bg:linear-gradient(135deg, rgba(56,178,236,0.16), rgba(56,178,236,0.04));
  --ib:rgba(56,178,236,0.20); --ic:#7FD4FF; --gl:rgba(56,178,236,0.55); }

/* blok Belum Siap kini hanya satu kartu */
.bs-baris--satu{ grid-template-columns:1fr !important; max-width:520px; }

@media (max-width:520px){
  .km{ padding:16px 16px; gap:13px; }
  .km .ik{ width:40px; height:40px; border-radius:12px; }
  .km .tx b{ font-size:1rem; }
}

/* ================= KUTIPAN BESAR DI ARTIKEL (v228) ================= */
.article-body blockquote.pull{
  margin:38px 0; padding:0 0 0 22px; border-left:3px solid var(--ruby, #E8244A);
  font-family:'Inter Tight',Inter,sans-serif; font-weight:700;
  font-size:clamp(1.25rem, 3.6vw, 1.75rem); letter-spacing:-0.03em; line-height:1.3;
  color:var(--ink); }
.section--dark .article-body blockquote.pull{ color:#fff; }
@media (max-width:560px){
  .article-body blockquote.pull{ margin:28px 0; padding-left:17px; }
}
/* catatan risiko di akhir artikel */
.article-body .artikel-disclaimer{
  margin-top:26px; padding-top:18px; border-top:1px solid rgba(7,6,13,0.10);
  font-size:0.78rem; line-height:1.65; color:var(--text-secondary); }

/* ================= KATALOG DUA TINGKAT (v229) ================= */
.tk-lb{ text-align:center; margin:0 auto; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:700; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.42); }
.tk-lb--2{ margin-top:56px; }

.kb-grid{ display:grid; grid-template-columns:1fr; gap:16px; max-width:1120px;
  margin:22px auto 0; }
@media (min-width:1000px){ .kb-grid{ grid-template-columns:repeat(3,1fr); } }

.ka.kb{ border-color:color-mix(in srgb, var(--w) 42%, transparent);
  background:linear-gradient(165deg, color-mix(in srgb, var(--w) 9%, #0F0D1B), #0F0D1B 62%);
  box-shadow:0 22px 60px -30px color-mix(in srgb, var(--w) 80%, transparent); }
.ka.kb .ka-nm{ font-size:1.05rem; }
.ka.kb .kb-alasan{ margin-top:13px; min-height:112px; font-size:0.83rem; line-height:1.6;
  color:rgba(255,255,255,0.52); }
.ka.kb .kb-alasan b{ display:block; margin-bottom:5px; font-family:'Inter Tight',Inter,sans-serif;
  font-weight:800; font-size:0.95rem; letter-spacing:-0.02em;
  color:color-mix(in srgb, var(--w) 80%, #fff); }
.ka.kb .ka-kop{ min-height:62px; align-items:flex-start; }
.ka.kb .ka-nm, .ka.kb .ka-dev{ white-space:nowrap; }
.ka.kb .ka-kurva, .ka.kb .ka-kurva svg{ height:96px; }

.tk-grid{ display:grid; grid-template-columns:1fr; gap:12px; max-width:1120px; margin:22px auto 0; }
@media (min-width:720px){ .tk-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .tk-grid{ grid-template-columns:repeat(3,1fr); } }

.kb-lanjut{ margin-top:34px; text-align:center; }
.kb-lanjut .btn{ font-size:1rem; padding:16px 34px; }
.kb-lanjut .ket{ margin-top:12px; font-size:0.84rem; line-height:1.6;
  color:rgba(255,255,255,0.45); }
.kb-lanjut .ket b{ color:rgba(255,255,255,0.72); font-weight:600; }

/* Di bawah 1000px kartu andalan digeser ke samping, tidak menumpuk ke bawah */
@media (max-width:999px){
  .kb-grid{ display:flex; gap:12px; overflow-x:auto; padding:4px 20px 14px;
    margin-inline:-20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .kb-grid::-webkit-scrollbar{ display:none; }
  .kb-grid > .ka.kb{ flex:0 0 82%; max-width:420px; scroll-snap-align:center; }
  .ka.kb .ka-kop{ flex-wrap:wrap; row-gap:8px; min-height:0; }
  .ka.kb .ka-jd{ flex:1 1 auto; min-width:0; }
  .ka.kb .ka-nm{ white-space:normal; }
  .ka.kb .ka-lc{ order:3; margin-left:0; }
  .ka.kb .kb-alasan{ min-height:0; }
  .kb-geser{ display:block; margin-top:9px; font-family:Inter,sans-serif; font-weight:600;
    font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
    color:rgba(255,255,255,0.32); text-align:center; }
}
@media (min-width:1000px){ .kb-geser{ display:none; } }

/* ===== Kartu andalan di HP dirapatkan (v230) =====
   Sebelumnya 770px karena lencana turun baris, alasan empat baris,
   dan blok harga terlalu longgar. Isinya tetap lengkap. */
@media (max-width:999px){
  .ka.kb{ padding:14px 15px 16px; }

  /* lencana kembali sebaris dengan nama, ukurannya dikecilkan */
  .ka.kb .ka-kop{ flex-wrap:nowrap; row-gap:0; align-items:center; }
  .ka.kb .ka-jd{ min-width:0; }
  .ka.kb .ka-nm{ font-size:1rem; line-height:1.2; }
  .ka.kb .ka-dev{ font-size:0.7rem; }
  .ka.kb .ka-lc{ order:0; margin-left:auto; flex:0 0 auto;
    font-size:0.52rem; padding:4px 8px; letter-spacing:0.06em; }
  .ka.kb .ka-ikon{ width:40px; height:40px; border-radius:12px; font-size:0.58rem; }

  /* alasan dibatasi tiga baris */
  .ka.kb .kb-alasan{ margin-top:11px; font-size:0.8rem; line-height:1.55; }
  .ka.kb .kb-alasan b{ font-size:0.88rem; margin-bottom:3px; }
  .ka.kb .kb-alasan{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    overflow:hidden; }

  .ka.kb .ka-kurva, .ka.kb .ka-kurva svg{ height:74px; }
  .ka.kb .ka-met{ margin-top:10px; }
  .ka.kb .ka-ang{ margin-top:9px; }
  .ka.kb .ka-vf{ margin-top:9px; }

  /* blok harga dan tombol dirapatkan */
  .ka.kb .ka-bawah{ margin-top:13px; }
  .ka.kb .ka-hrg{ margin-bottom:8px; }
  .ka.kb .ka-thn{ padding:9px 12px; font-size:0.76rem; line-height:1.45; }
  .ka.kb .ka-mod{ margin-top:7px; font-size:0.72rem; }
  .ka.kb .ka-aksi{ margin-top:11px; }
  .ka.kb .ka-aksi .btn, .ka.kb .ka-aksi a{ padding:11px 16px; font-size:0.86rem; }
  .ka.kb .ka-detail{ margin-top:9px; font-size:0.78rem; }
}

/* koreksi selektor blok bawah kartu andalan di HP (v230) */
@media (max-width:999px){
  .ka.kb .kb-alasan{ -webkit-line-clamp:3; }
  .ka.kb .ka-bawah{ margin-top:12px; }
  .ka.kb .ka-hrg .h{ font-size:1.3rem; }
  .ka.kb .ka-thn{ margin-top:7px; padding:8px 11px; font-size:0.74rem; line-height:1.4; }
  .ka.kb .ka-mod{ margin-top:6px; font-size:0.7rem; }
  .ka.kb .ka-aksi{ margin-top:10px; gap:8px; }
  .ka.kb .ka-aksi .b-sewa, .ka.kb .ka-aksi .b-copy,
  .ka.kb .ka-aksi .b-uji, .ka.kb .ka-aksi a{ padding:10px 14px; font-size:0.84rem; }
  .ka.kb .ka-det{ margin-top:9px; font-size:0.76rem; }
  .ka.kb .ka-ang{ padding-block:8px; }
  .ka.kb .ka-ang .v{ font-size:1.05rem; }
  .ka.kb .ka-vf span{ padding:6px 9px; font-size:0.62rem; }
}

/* ===== Kartu andalan di HP: pangkas yang membuat menjulang (v230b) =====
   Sasaran: label statistik dan label verifikasi tidak lagi turun baris,
   kotak tahunan jadi satu baris, dan jarak blok bawah dirapatkan. */
@media (max-width:999px){
  .ka.kb .ka-ikon{ width:36px !important; height:36px !important;
    border-radius:11px !important; font-size:0.54rem !important; }
  .ka.kb .ka-kop{ padding-bottom:9px !important; }

  /* tiga angka: label muat satu baris */
  .ka.kb .ka-ang{ padding-block:7px !important; }
  .ka.kb .ka-ang .v{ font-size:1rem !important; }
  .ka.kb .ka-ang .k{ font-size:0.5rem !important; letter-spacing:0.04em !important;
    white-space:nowrap !important; }

  /* label verifikasi muat satu baris */
  .ka.kb .ka-vf{ margin-top:8px !important; gap:5px !important; }
  .ka.kb .ka-vf span{ padding:5px 7px !important; font-size:0.55rem !important;
    letter-spacing:0.02em !important; white-space:nowrap !important; }

  /* kotak tahunan jadi satu baris */
  .ka.kb .ka-thn br{ display:none !important; }
  .ka.kb .ka-thn{ margin-top:6px !important; padding:7px 10px !important;
    font-size:0.71rem !important; line-height:1.35 !important; }

  .ka.kb .ka-bawah{ margin-top:11px !important; padding-top:11px !important; }
  .ka.kb .ka-det{ margin-top:8px !important; padding:6px 0 !important;
    font-size:0.74rem !important; }
  .ka.kb .ka-met{ margin-top:9px !important; }
  .ka.kb .ka-met span{ padding:5px 9px !important; font-size:0.62rem !important; }
}
/* alasan boleh empat baris supaya tidak ada yang terpotong */
@media (max-width:999px){ .ka.kb .kb-alasan{ -webkit-line-clamp:4 !important; } }

/* koreksi dua bug kartu andalan di HP (v230c) */
@media (max-width:999px){
  /* kotak tahunan: br dikembalikan supaya kata tidak menempel */
  .ka.kb .ka-thn br{ display:inline !important; }
  .ka.kb .ka-thn{ line-height:1.32 !important; }

  /* kop: nama diberi ruang, lencana tidak lagi menimpa */
  .ka.kb .ka-kop{ align-items:flex-start !important; }
  .ka.kb .ka-jd{ flex:1 1 auto !important; min-width:0 !important; padding-right:4px; }
  .ka.kb .ka-nm{ font-size:0.92rem !important; line-height:1.25 !important;
    display:block; overflow-wrap:anywhere; }
  .ka.kb .ka-lc{ flex:0 0 auto !important; align-self:flex-start !important;
    max-width:44% !important; text-align:center; line-height:1.25 !important; }
}