:root{
    --teal-900:#0B4A43; --teal-700:#14746A; --teal-500:#1E9384;
    --gold-500:#D9A254; --gold-300:#EFCB93;
    --cream-50:#F8F3EA; --cream-100:#F1E9DA;
    --ink-900:#12201D; --ink-700:#2B3B37;

    --bg:var(--cream-50); --bg-alt:var(--cream-100); --bg-raised:#ffffff;
    --text:var(--ink-900); --text-dim:#5B6864;
    --accent:var(--teal-900); --accent-soft:var(--teal-500);
    --gold:var(--gold-500); --gold-soft:var(--gold-300);
    --line:rgba(18,32,29,0.12); --line-strong:rgba(18,32,29,0.22);
    --tag-bg:rgba(11,74,67,0.08);
    --shadow:0 12px 30px rgba(11,74,67,0.10);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0D1917; --bg-alt:#0F1D1A; --bg-raised:#132622;
      --text:var(--cream-50); --text-dim:#9FB0AB;
      --accent:var(--gold-300); --accent-soft:var(--gold-500);
      --gold:var(--gold-300); --gold-soft:var(--gold-500);
      --line:rgba(248,243,234,0.14); --line-strong:rgba(248,243,234,0.24);
      --tag-bg:rgba(239,203,147,0.10);
      --shadow:0 12px 30px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0D1917; --bg-alt:#0F1D1A; --bg-raised:#132622;
    --text:var(--cream-50); --text-dim:#9FB0AB;
    --accent:var(--gold-300); --accent-soft:var(--gold-500);
    --gold:var(--gold-300); --gold-soft:var(--gold-500);
    --line:rgba(248,243,234,0.14); --line-strong:rgba(248,243,234,0.24);
    --tag-bg:rgba(239,203,147,0.10);
    --shadow:0 12px 30px rgba(0,0,0,0.35);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif; text-wrap:balance; margin:0; color:var(--text);}
  p{margin:0;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;}
  img{max-width:100%;}

  .wrap{max-width:1100px; margin:0 auto; padding-inline:20px;}
  .narrow{max-width:720px;}
  section{padding-block:64px;}
  @media (max-width:640px){ section{ padding-block:44px; } }

  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--tag-bg); padding:6px 13px; border-radius:100px; }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
  h2.h-section{ font-size:clamp(26px,3.6vw,38px); line-height:1.18; max-width:22ch; }
  .lede{ color:var(--text-dim); font-size:16.5px; line-height:1.7; max-width:62ch; margin-top:14px; }
  .section-head{ margin-bottom:36px; }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; padding:13px 24px; border-radius:11px; border:none; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
  .btn-primary{ background:var(--accent); color:var(--bg); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(11,74,67,0.25); }
  .btn-ghost{ background:transparent; color:var(--text); border:1.5px solid var(--line-strong); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

  /* ================= NAVBAR ================= */
  .nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; }
  .nav-brand{ display:flex; align-items:center; gap:9px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px; text-decoration:none; }
  .nav-brand .mark{ width:28px; height:28px; object-fit:contain; }
  .nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
  .nav-links a{ font-size:14px; font-weight:600; text-decoration:none; color:var(--text-dim); position:relative; padding-bottom:4px; }
  .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .25s ease; }
  .nav-links a:hover{ color:var(--text); }
  .nav-links a:hover::after{ right:0; }
  .nav-cta{ display:flex; }
  @media (max-width:820px){ .nav-links{ display:none; } }

  /* ================= SEAM (divider, dipakai di semua batas section) ================= */
  .seam{ height:38px; }
  .seam svg{ width:100%; height:100%; display:block; }
  .pin-pulse{ transform-box:fill-box; transform-origin:center; animation:pinPulse 2.6s ease-out infinite; }
  .pin-pulse.d2{ animation-delay:1.3s; }
  @keyframes pinPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
  @media (prefers-reduced-motion:reduce){ .pin-pulse{ animation:none; opacity:0; } }

  /* ================= Blueprint bg (pekat = Hero, pudar = section tenang) ================= */
  .bp-grid{
    background-image:
      linear-gradient(rgba(20,116,106,0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,116,106,0.16) 1px, transparent 1px);
    background-size:22px 22px;
  }
  .bp-grid.faint{
    background-image:
      linear-gradient(rgba(20,116,106,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,116,106,0.07) 1px, transparent 1px);
  }

  /* ================= HERO ================= */
  .hero{ position:relative; overflow:hidden; padding-block:52px 60px; }
  .hero-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; }
  .hero-content{ flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:16px; order:1; }
  .hero-content h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.14; max-width:17ch; }
  .hero-content h1 .hl-gold{ color:var(--gold); }
  .hero-content h1 .hero-tail{ display:block; margin-top:8px; font-size:.66em; font-weight:600; color:var(--text-dim); line-height:1.3; }
  .hero-content .lede{ margin-top:0; }
  .hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
  .hero-micro{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-dim); }
  .trust-row{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
  .trust-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-dim); }
  .trust-item svg{ flex-shrink:0; color:var(--accent-soft); }

  .sketch-wrap{ position:relative; flex:0 0 auto; width:300px; height:264px; order:2; }
  .sketch-wrap svg{ width:100%; height:100%; display:block; overflow:visible; }
  .sketch-path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .scene{ opacity:0; }
  .ring-track{ fill:none; stroke:var(--line); }
  .scene-chart-labels{ opacity:0; }
  .lbl-small{ font-family:'IBM Plex Mono',monospace; font-size:10px; fill:var(--text-dim); }
  .lbl-accent{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; fill:var(--gold); }
  .lbl-ring{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; fill:var(--accent); }
  @media (max-width:900px){ .sketch-wrap{ width:230px; height:203px; } .hero-content h1{ max-width:20ch; } }
  @media (max-width:680px){ .hero-inner{ flex-wrap:wrap; justify-content:center; text-align:left; } .hero-content{ flex-basis:100%; } .sketch-wrap{ margin:6px auto 0; } }
  @media (max-width:420px){ .sketch-wrap{ width:190px; height:167px; } }

  /* ================= TENTANG ================= */
  .about{ position:relative; }
  .about-inner{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; position:relative; }
  .about-icon{ flex:0 0 auto; width:120px; height:120px; }
  .about-icon img{ width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(.8); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
  .about-icon img.in{ opacity:1; transform:scale(1); }
  .about-text{ flex:1 1 380px; min-width:0; }
  .about-text .lede{ margin-top:14px; }
  @media (max-width:640px){ .about-inner{ flex-direction:column; text-align:left; } }

  /* ================= PROBLEM ================= */
  .problem-stage{ position:relative; height:360px; margin-top:20px; border-radius:20px; border:1px solid var(--line); background:var(--bg-raised); overflow:hidden; }
  .scatter-card{ position:absolute; background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim); filter:saturate(.55) brightness(.97); animation:floaty 6.5s ease-in-out infinite; white-space:nowrap; }
  .scatter-card b{ display:block; font-size:14px; color:var(--text-dim); font-weight:600; }
  @keyframes floatyFlat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  @media (max-width:640px){
    .problem-stage{ height:auto; display:flex; flex-wrap:wrap; align-content:flex-start; gap:9px; padding:16px; }
    .scatter-card{ position:static; font-size:10px; padding:7px 10px; border-radius:9px; white-space:normal; animation-name:floatyFlat; }
    .scatter-card b{ font-size:12px; }
  }
  @keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-9px) rotate(var(--r,0deg)); } }
  @media (prefers-reduced-motion:reduce){ .scatter-card{ animation:none; } }
  .problem-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:36px; }
  .problem-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:22px; transition:transform .18s ease, border-color .18s ease; }
  .problem-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
  .problem-card .num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); }
  .problem-card h3{ font-size:17px; margin-top:10px; }
  .problem-card p{ color:var(--text-dim); font-size:14.5px; line-height:1.6; margin-top:8px; }

  /* ================= FITUR ================= */
  .feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:20px; }
  .feature-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:20px; transition:transform .18s ease, border-color .18s ease; }
  .feature-card:hover{ transform:translateY(-3px); border-color:var(--gold); }
  .feature-card .ic{ width:34px; height:34px; border-radius:9px; background:var(--tag-bg); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:12px; }
  .feature-card h3{ font-size:15.5px; }
  .feature-card p{ color:var(--text-dim); font-size:13.5px; line-height:1.55; margin-top:6px; }

  .crm-block{ position:relative; margin-top:28px; border-radius:22px; border:1.5px solid var(--gold-soft); background:var(--bg-raised); padding:30px; box-shadow:var(--shadow); overflow:hidden; }
  .crm-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
  .crm-head h3{ font-size:22px; }
  .crm-badge{ font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--gold); color:var(--ink-900); padding:4px 10px; border-radius:100px; font-weight:600; }
  .crm-body{ display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; }
  .crm-copy{ flex:1 1 260px; display:flex; flex-direction:column; gap:12px; }
  .crm-copy .pt{ font-size:14px; color:var(--text-dim); line-height:1.6; }
  .crm-copy .pt b{ color:var(--text); }

  .stage-pipe{ position:relative; overflow:hidden; flex:1 1 320px; min-width:280px; height:230px; padding:20px 16px; display:flex; gap:12px; border-radius:16px; border:1px solid var(--line); background:var(--bg); }
  .pipe-col{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
  .pipe-col .pipe-head{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); display:flex; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid var(--line); }
  .pipe-col .pipe-head b{ color:var(--accent); font-variant-numeric:tabular-nums; }
  .pipe-body{ position:relative; flex:1; }
  .pipe-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; padding:8px 9px; font-size:11.5px; color:var(--text); box-shadow:0 4px 10px rgba(11,74,67,0.06); }
  .pipe-card small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-dim); margin-top:2px; }
  .pipe-card.new-card{ opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; }
  .pipe-card.new-card.in{ opacity:1; transform:translateY(0); }
  .pipe-mover{ position:absolute; left:0; right:0; z-index:5; background:var(--bg-raised); border:1.4px solid var(--gold); border-radius:9px; padding:8px 9px; font-size:11.5px; color:var(--text); box-shadow:0 10px 22px rgba(217,162,84,0.28); opacity:0; transition:left 1.1s cubic-bezier(.4,0,.2,1), top 1.1s cubic-bezier(.4,0,.2,1), width 1.1s, opacity .4s; }
  .pipe-mover small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gold); margin-top:2px; }
  .ai-flag{ position:absolute; z-index:6; font-family:'IBM Plex Mono',monospace; font-size:10px; background:var(--accent); color:var(--bg); padding:3px 8px; border-radius:100px; opacity:0; transition:opacity .4s; white-space:nowrap; }
  .ai-flag.show{ opacity:1; }
  @media (max-width:560px){ .stage-pipe{ padding:14px 10px; gap:8px; } }

  /* ================= KOMPARASI ================= */
  .cmp-wrap{ overflow-x:auto; margin-top:28px; border-radius:16px; border:1px solid var(--line); }
  table.cmp{ width:100%; border-collapse:collapse; min-width:640px; background:var(--bg-raised); }
  table.cmp th, table.cmp td{ padding:16px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; }
  table.cmp thead th{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); background:var(--bg-alt); }
  table.cmp thead th.win{ color:var(--bg); background:var(--accent); font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:800; text-transform:none; letter-spacing:0; border-left:2px solid var(--gold); border-right:2px solid var(--gold); border-top:2px solid var(--gold); border-radius:10px 10px 0 0; }
  table.cmp .win-col{ background:var(--tag-bg); font-weight:600; color:var(--text); border-left:2px solid var(--gold); border-right:2px solid var(--gold); }
  table.cmp tbody tr:last-child td{ border-bottom:none; }
  table.cmp tbody tr:last-child .win-col{ border-bottom:2px solid var(--gold); border-radius:0 0 10px 10px; }
  .col-head-win{ position:relative; display:flex; align-items:center; gap:8px; }
  .col-head-win svg circle{ fill:var(--bg); } .col-head-win svg path{ fill:var(--bg); }
  .col-head-win .star-glow{ position:absolute; left:-2px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--gold); animation:pinPulse 2.2s ease-out infinite; }
  @media (prefers-reduced-motion:reduce){ .col-head-win .star-glow{ animation:none; opacity:0; } }

  /* ================= PRICING ================= */
  .highlight-box{ margin-top:28px; background:var(--bg-raised); border:1px solid var(--gold-soft); border-radius:16px; padding:22px 24px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
  .highlight-box .icons{ display:flex; gap:10px; flex:0 0 auto; }
  .float-ic{ width:44px; height:44px; border-radius:11px; background:var(--tag-bg); display:flex; align-items:center; justify-content:center; color:var(--accent); animation:floaty 5s ease-in-out infinite; }
  .float-ic:nth-child(2){ animation-delay:1s; } .float-ic:nth-child(3){ animation-delay:2s; }
  .highlight-box .txt h4{ font-size:16px; } .highlight-box .txt p{ color:var(--text-dim); font-size:14px; margin-top:5px; line-height:1.6; }

  .callout{ margin-top:20px; background:var(--tag-bg); border-radius:16px; padding:22px 24px; }
  .callout ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
  .callout li{ font-size:14px; color:var(--text); display:flex; gap:10px; align-items:flex-start; }
  .callout li::before{ content:""; width:6px; height:6px; margin-top:7px; flex-shrink:0; border-radius:50%; background:var(--gold); }

  .price-meta{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-dim); margin-top:18px; }
  .price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:22px; }
  .price-card{ position:relative; background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; padding:26px; text-align:left; }
  .price-card.rec{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--shadow); }
  .rec-badge{ position:absolute; top:-13px; left:24px; background:var(--gold); color:var(--ink-900); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px; }
  .rec-glow{ position:absolute; top:-14px; left:22px; width:120px; height:26px; border-radius:100px; background:var(--gold); opacity:.5; filter:blur(10px); animation:pinPulse 2.4s ease-out infinite; transform-origin:center; }
  .price-card h3{ font-size:17px; }
  .price-card .tag-save{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim); margin-top:4px; }
  .price-card .amount{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:30px; margin-top:14px; font-variant-numeric:tabular-nums; }
  .price-card .amount span{ font-size:13px; font-weight:500; color:var(--text-dim); }
  .price-card .strike{ text-decoration:line-through; color:var(--text-dim); font-size:12.5px; }
  .price-card .dp-note{ font-size:12.5px; color:var(--accent); margin-top:8px; background:var(--tag-bg); padding:8px 10px; border-radius:9px; }
  .price-card ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .price-card li{ font-size:13px; color:var(--text-dim); display:flex; gap:7px; }
  .price-card .btn{ width:100%; margin-top:18px; }
  .disclaimer{ font-size:12.5px; color:var(--text-dim); margin-top:20px; line-height:1.6; max-width:70ch; }

  /* ================= GO-LIVE (journey path) ================= */
  .journey{ position:relative; margin-top:44px; }
  .journey-line-wrap{ position:relative; height:6px; margin:0 6%; }
  .journey-line-bg{ position:absolute; inset:0; background:var(--line); border-radius:4px; }
  .journey-line-fg{ position:absolute; inset:0; background:linear-gradient(90deg, var(--accent-soft), var(--gold)); border-radius:4px; width:100%; overflow:hidden; }
  .journey-line-fg::after{ content:""; position:absolute; top:0; bottom:0; width:36%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation:signalTravel 3.2s linear infinite; }
  @keyframes signalTravel{ from{ left:-40%; } to{ left:104%; } }
  @media (prefers-reduced-motion:reduce){ .journey-line-fg::after{ animation:none; display:none; } }
  .journey-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:-19px; }
  .j-step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .j-pin{ width:38px; height:38px; }
  .j-step h4{ font-size:14.5px; margin-top:2px; }
  .j-step p{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:4px; }
  .j-step .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold); }
  @media (max-width:760px){
    .journey-line-wrap{ display:none; }
    .journey-steps{ grid-template-columns:1fr; gap:22px; text-align:left; }
    .j-step{ flex-direction:row; align-items:flex-start; text-align:left; }
  }
  .golive-cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:44px; background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; padding:26px 28px; }
  .golive-cta h3{ font-size:19px; max-width:26ch; }

  /* ================= PREVIEW SISTEM ================= */
  /* Jendela aplikasi: palet TETAP terang, tidak ikut dark-mode halaman — supaya terasa seperti screenshot sungguhan dari dalam sistem, bukan bagian dari landingpage. */
  .app-frame{
    --bg: var(--cream-50); --bg-alt: var(--cream-100); --bg-raised:#ffffff;
    --text: var(--ink-900); --text-dim:#5B6864;
    --accent: var(--teal-900); --accent-soft: var(--teal-500);
    --gold: var(--gold-500); --gold-soft: var(--gold-300);
    --line: rgba(18,32,29,0.12); --tag-bg: rgba(11,74,67,0.08);
    --shadow: 0 12px 30px rgba(11,74,67,0.10);
    margin-top:26px; border-radius:16px; overflow:hidden;
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 30px 70px -24px rgba(0,0,0,0.45);
    background:var(--bg);
  }
  .app-frame-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#EAEAEA; border-bottom:1px solid rgba(0,0,0,0.08); }
  .app-dot{ width:10px; height:10px; border-radius:50%; }
  .dot-red{ background:#FF5F57; } .dot-yellow{ background:#FEBC2E; } .dot-green{ background:#28C840; }
  .app-frame-url{ margin-left:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8A8A8A; background:#fff; padding:4px 12px; border-radius:6px; border:1px solid rgba(0,0,0,0.07); }
  .app-frame-body{ padding:24px 24px 28px; color:var(--text); }
  .app-frame-body, .app-frame-body *{ color:var(--text); }
  .app-frame-body .text-dim, .app-frame-body .card-title + p, .app-frame-body p.oo-hint, .app-frame-body p.channel-hint, .app-frame-body p.import-note,
  .app-frame-body .preview-stat span, .app-frame-body .source-chip-label, .app-frame-body .oo-stat span,
  .app-frame-body .app-hint, .app-frame-body .preview-table th, .app-frame-body .soon-tag,
  .app-frame-body .preview-tab, .app-frame-body .crm-subtab, .app-frame-body .range-btn,
  .app-frame-body .clickable-badge{ color:var(--text-dim); }
  .app-frame-body .preview-tab.active, .app-frame-body .crm-subtab.active, .app-frame-body .range-btn.active,
  .app-frame-body .live-tag, .app-frame-body .ai-insight-label, .app-frame-body .clickable-badge{ color:var(--accent); }
  .app-frame-body .import-note b{ color:var(--text); }
  .app-frame-body .funnel-step, .app-frame-body .funnel-step span, .app-frame-body .funnel-step b{ color:var(--bg); }
  .app-frame-body .funnel-step:last-child, .app-frame-body .funnel-step:last-child span, .app-frame-body .funnel-step:last-child b{ color:var(--text); }
  .app-hint{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim); margin-bottom:16px; }
  @media (max-width:640px){ .app-frame-body{ padding:18px 16px 22px; } }

  .preview-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:0; border-bottom:1px solid var(--line); padding-bottom:0; }
  .preview-tab{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13.5px; color:var(--text-dim); background:none; border:none; padding:11px 6px; cursor:pointer; position:relative; }
  .preview-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; }
  .preview-tab.active{ color:var(--accent); }
  .preview-tab.active::after{ background:var(--gold); }
  .preview-tab.disabled{ color:var(--text-dim); opacity:.5; cursor:not-allowed; display:inline-flex; align-items:center; gap:6px; }
  .soon-tag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--tag-bg); color:var(--text-dim); padding:2px 7px; border-radius:100px; }
  .crm-preview-top{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; align-items:stretch; }
  .source-chips{ flex:1 1 220px; background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .source-chip-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; width:100%; margin-bottom:2px; }
  .source-chip{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--tag-bg); color:var(--accent); padding:5px 11px; border-radius:100px; }
  .ai-insight-card{ flex:1 1 280px; background:var(--bg-raised); border:1.5px solid var(--gold-soft); border-radius:14px; padding:14px 16px; }
  .ai-insight-label{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--gold); }
  .ai-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:dotPulse 1.6s ease-in-out infinite; }
  @keyframes dotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
  @media (prefers-reduced-motion:reduce){ .ai-dot{ animation:none; } }
  .ai-insight-text{ font-size:13.5px; color:var(--text); line-height:1.55; margin-top:8px; min-height:2.4em; transition:opacity .3s ease; }
  .preview-panel{ display:none; margin-top:26px; }
  .preview-panel.active{ display:block; }

  /* ---- CRM sub-tabs (Pipeline Leads / Performa Marketing) ---- */
  .crm-subtabs{ display:inline-flex; gap:4px; background:var(--bg-alt); border-radius:100px; padding:4px; margin-bottom:20px; }
  .crm-subtab{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim); background:none; border:none; border-radius:100px; padding:8px 16px; cursor:pointer; }
  .crm-subtab.active{ background:var(--bg-raised); color:var(--accent); box-shadow:0 2px 6px rgba(11,74,67,0.08); }
  .crm-subpanel{ display:none; }
  .crm-subpanel.active{ display:block; }

  .range-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
  .range-buttons{ display:flex; gap:8px; }
  .range-btn{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; padding:7px 13px; cursor:pointer; }
  .range-btn.active{ color:var(--accent); border-color:var(--accent-soft); background:var(--tag-bg); font-weight:600; }
  .live-tag{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--accent-soft); }

  .import-note{ font-size:12.5px; color:var(--text-dim); line-height:1.6; margin-top:14px; background:var(--tag-bg); padding:10px 13px; border-radius:10px; }
  .import-note b{ color:var(--text); }

  .card-title{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; margin-bottom:4px; }

  .funnel{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
  .funnel-step{
    width:var(--w); margin-inline:auto; min-height:40px; border-radius:9px;
    background:linear-gradient(90deg, var(--accent), var(--accent-soft));
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2px 10px; padding:8px 16px;
    color:var(--bg); font-size:12.5px; font-weight:600; transition:width .6s ease;
  }
  .funnel-step:last-child{ background:linear-gradient(90deg, var(--gold), var(--gold-300)); }
  .funnel-step b{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:14px; }

  .channel-table tr.channel-row{ cursor:pointer; }
  .channel-table tr.channel-row:hover td{ background:var(--tag-bg); }
  .channel-clickable{ display:inline-flex; align-items:center; gap:6px; }
  .channel-clickable .clickable-badge{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--gold); border:1px solid var(--gold-soft); border-radius:100px; padding:2px 8px; }
  .channel-hint{ font-size:12px; color:var(--text-dim); margin-top:10px; }
  .chan-note{ font-size:11.5px; color:var(--text-dim); font-weight:400; }
  .meta-detail{ margin-top:16px; border-color:var(--gold-soft); }

  .online-offline-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  .oo-stat{ display:flex; align-items:baseline; justify-content:space-between; padding-block:6px; border-bottom:1px solid var(--line); }
  .oo-stat:last-of-type{ border-bottom:none; }
  .oo-stat span{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); }
  .oo-stat b{ font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; }
  .oo-hint{ font-size:11.5px; color:var(--text-dim); margin-top:10px; line-height:1.5; }
  @media (max-width:640px){ .online-offline-grid{ grid-template-columns:1fr; } }
  .preview-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
  .preview-stat{ background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
  .preview-stat span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
  .preview-stat b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; margin-top:6px; font-variant-numeric:tabular-nums; }
  .preview-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:22px; }
  .preview-chart{ width:100%; height:180px; }
  .preview-table{ width:100%; border-collapse:collapse; }
  .preview-table th, .preview-table td{ text-align:left; padding:11px 12px; font-size:13.5px; border-bottom:1px solid var(--line); }
  .preview-table th{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); }
  .preview-table tr:last-child td{ border-bottom:none; }
  .status-pill{ display:inline-block; padding:4px 10px; border-radius:100px; font-size:11.5px; font-weight:600; }
  .status-pill.sold{ background:rgba(11,74,67,0.14); color:var(--accent); }
  .status-pill.dp{ background:rgba(217,162,84,0.18); color:var(--gold); }
  .status-pill.available{ background:var(--tag-bg); color:var(--text-dim); }
  .preview-cta{ margin-top:24px; text-align:center; }
  .preview-pipe{ height:260px; }
  .preview-pipe .pipe-col{ gap:10px; }
  @media (max-width:640px){ .preview-tabs{ overflow-x:auto; flex-wrap:nowrap; } .preview-tab{ white-space:nowrap; } }

  /* ================= FORM PENDAFTARAN ================= */
  .reg-form{ margin-top:32px; background:var(--bg-raised); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow); }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .form-field label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); }
  .form-field input, .form-field select, .form-field textarea{
    font-family:'Inter',sans-serif; font-size:14.5px; color:var(--text);
    background:var(--bg); border:1.5px solid var(--line); border-radius:10px;
    padding:11px 13px; outline:none; transition:border-color .15s ease;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--accent-soft); }
  .form-field textarea{ resize:vertical; font-family:'Inter',sans-serif; }
  .form-note{ font-size:12.5px; color:var(--text-dim); text-align:center; margin-top:14px; line-height:1.6; }
  .form-error{ font-size:13.5px; color:#C0392B; background:rgba(192,57,43,0.1); border:1px solid rgba(192,57,43,0.3); border-radius:10px; padding:11px 14px; margin-top:16px; line-height:1.6; }
  .form-success{ display:none; text-align:center; padding:40px 20px; }
  .form-success.show{ display:block; }
  .form-success .check{ width:56px; height:56px; margin:0 auto 16px; }
  @media (max-width:640px){ .reg-form{ padding:22px; } .form-row{ grid-template-columns:1fr; } }

  /* ================= FAQ ================= */
  .faq-list{ margin-top:28px; display:flex; flex-direction:column; gap:10px; }
  .faq-item{ background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .faq-item summary{ cursor:pointer; list-style:none; padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:15px; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item .chevron{ flex-shrink:0; transition:transform .25s ease; color:var(--gold); }
  .faq-item[open] .chevron{ transform:rotate(180deg); }
  .faq-item .faq-a{ padding:0 20px 18px; color:var(--text-dim); font-size:14.5px; line-height:1.65; }

  /* ================= CLOSING ================= */
  .closing{ position:relative; overflow:hidden; text-align:center; }
  .closing-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .closing h2{ max-width:20ch; }
  .closing .lede{ text-align:center; }
  .closing-chart{ width:220px; height:120px; margin-top:10px; opacity:.9; }

  /* ================= FOOTER ================= */
  footer.site{ border-top:1px solid var(--line); padding-block:44px 30px; }
  .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
  .footer-brand{ display:flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:16px; }
  .footer-brand svg{ width:24px; height:24px; }
  .footer-tagline{ color:var(--text-dim); font-size:13.5px; margin-top:10px; max-width:34ch; line-height:1.6; }
  .footer-col h5{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .footer-col a{ text-decoration:none; font-size:13.5px; color:var(--text); }
  .footer-col a:hover{ color:var(--accent); }
  .footer-bottom{ margin-top:34px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--text-dim); }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } }