<!DOCTYPE html>
<html lang="id" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>KusKus — Agent Transkripsi Sidang by Artifilaw</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    :root {
      --bg:         #f5f4f0;
      --bg2:        #edecea;
      --surface:    #ffffff;
      --surface2:   #f0efeb;
      --border:     #d8d6d0;
      --border2:    #e8e6e1;
      --text:       #1a1916;
      --text2:      #3a3835;
      --muted:      #7a786f;
      --muted2:     #a09e96;
      --accent:     #1a5cff;
      --accent-dim: #0a3ccc;
      --accent-bg:  rgba(26,92,255,0.08);
      --gold:       #c47d00;
      --gold-bg:    rgba(196,125,0,0.1);
      --success:    #1a7a3a;
      --danger:     #cc2a22;
      --nav-bg:     rgba(245,244,240,0.9);
      --shadow:     0 2px 16px rgba(0,0,0,0.08);
      --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
      --radius:     12px;
      --radius-sm:  7px;
    }
    [data-theme="dark"] {
      --bg:         #0d1117;
      --bg2:        #0a0e14;
      --surface:    #161b22;
      --surface2:   #1c2128;
      --border:     #30363d;
      --border2:    #21262d;
      --text:       #e6edf3;
      --text2:      #c9d1d9;
      --muted:      #8b949e;
      --muted2:     #6e7681;
      --accent:     #58a6ff;
      --accent-dim: #1f6feb;
      --accent-bg:  rgba(88,166,255,0.1);
      --gold:       #d4a017;
      --gold-bg:    rgba(212,160,23,0.1);
      --success:    #3fb950;
      --danger:     #f85149;
      --nav-bg:     rgba(13,17,23,0.9);
      --shadow:     0 2px 16px rgba(0,0,0,0.3);
      --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 15px; scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      transition: background .3s, color .3s;
    }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg2); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .bg-texture {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(26,92,255,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 75%, rgba(196,125,0,0.05) 0%, transparent 50%);
      transition: opacity .3s;
    }
    [data-theme="dark"] .bg-texture {
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(88,166,255,0.1) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 75%, rgba(212,160,23,0.06) 0%, transparent 50%);
    }

    /* NAVBAR */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 200;
      padding: 0 40px;
      height: 62px;
      display: flex; align-items: center; justify-content: space-between;
      background: var(--nav-bg);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border2);
      transition: background .3s, border-color .3s;
    }
    .nav-left { display: flex; align-items: center; gap: 32px; }
    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo-img { height: 32px; width: auto; }
    .nav-logo-placeholder {
      width: 32px; height: 32px;
      background: linear-gradient(135deg, var(--accent), var(--gold));
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: white; font-weight: 800;
      font-family: 'Sora', sans-serif;
    }
    .nav-logo-text {
      font-family: 'Sora', sans-serif;
      font-size: 1.05rem; font-weight: 700;
      color: var(--text); letter-spacing: -.3px;
    }
    .nav-logo-text span { color: var(--accent); }
    .nav-artifilaw {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: var(--accent-bg);
      border: 1px solid rgba(26,92,255,0.2);
      border-radius: 99px;
      text-decoration: none;
      font-size: .7rem; font-weight: 600;
      color: var(--accent); letter-spacing: .3px;
      transition: all .15s; white-space: nowrap;
    }
    [data-theme="dark"] .nav-artifilaw { border-color: rgba(88,166,255,0.25); }
    .nav-artifilaw:hover { background: var(--accent); color: white; }
    .nav-artifilaw-dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
    .nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
    .nav-links a { color: var(--muted); text-decoration: none; font-size: .875rem; font-weight: 500; transition: color .15s; }
    .nav-links a:hover { color: var(--text); }
    .nav-right { display: flex; align-items: center; gap: 10px; }
    .theme-toggle {
      width: 38px; height: 38px; border-radius: 9px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s; flex-shrink: 0;
    }
    .theme-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--accent); }
    .icon-sun, .icon-moon { width: 16px; height: 16px; }
    [data-theme="light"] .icon-moon { display: none; }
    [data-theme="dark"]  .icon-sun  { display: none; }
    .btn-nav {
      padding: 8px 18px;
      background: var(--accent); color: #fff;
      border-radius: var(--radius-sm);
      font-size: .85rem; font-weight: 600;
      text-decoration: none;
      transition: all .15s;
      font-family: 'DM Sans', sans-serif;
    }
    .btn-nav:hover { background: var(--accent-dim); transform: translateY(-1px); }

    /* HERO */
    .hero {
      position: relative; z-index: 1;
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      padding: 130px 24px 80px;
    }
    .hero-by {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .72rem; color: var(--muted);
      margin-bottom: 10px;
      animation: fadeUp .5s ease both;
    }
    .hero-by a { color: var(--accent); font-weight: 600; text-decoration: none; transition: opacity .15s; }
    .hero-by a:hover { opacity: .8; }

    /* ── Badge hero — ubahan utama ── */
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 16px;
      background: linear-gradient(135deg, var(--accent-bg), var(--gold-bg));
      border: 1px solid rgba(26,92,255,0.22);
      border-radius: 99px;
      font-size: .73rem; font-weight: 700;
      color: var(--text2);
      margin-bottom: 28px;
      letter-spacing: .3px;
      animation: fadeUp .5s .05s ease both;
      box-shadow: 0 2px 12px rgba(26,92,255,0.08);
    }
    [data-theme="dark"] .hero-badge { border-color: rgba(88,166,255,0.25); color: var(--text2); }
    .hero-badge-dot {
      width: 6px; height: 6px;
      background: var(--accent); border-radius: 50%;
      animation: pulse 2s ease infinite;
    }
    .hero-badge-text-accent { color: var(--accent); font-weight: 800; }
    .hero-badge-sep {
      width: 1px; height: 12px;
      background: var(--border); opacity: .6;
    }
    .hero-badge-gold { color: var(--gold); font-weight: 700; }

    @keyframes pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50% { opacity:.4; transform:scale(.7); }
    }

    .hero-logo { margin-bottom: 28px; animation: fadeUp .5s .1s ease both; }
    .hero-logo img { height: 72px; width: auto; }
    .hero-logo-placeholder {
      width: 80px; height: 80px;
      background: linear-gradient(135deg, var(--accent), var(--gold));
      border-radius: 20px;
      display: flex; align-items: center; justify-content: center;
      font-size: 36px; color: white; font-weight: 900;
      font-family: 'Sora', sans-serif;
      margin: 0 auto;
      box-shadow: 0 8px 32px rgba(26,92,255,0.2);
    }

    .hero h1 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(2.2rem, 6vw, 4rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -.04em;
      margin-bottom: 20px;
      animation: fadeUp .5s .15s ease both;
    }
    .hero h1 .highlight {
      background: linear-gradient(135deg, var(--accent), var(--gold));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    .hero-sub {
      font-size: clamp(.9rem, 2vw, 1.1rem);
      color: var(--muted);
      max-width: 520px;
      line-height: 1.8;
      margin-bottom: 36px;
      animation: fadeUp .5s .2s ease both;
    }
    .hero-cta {
      display: flex; gap: 12px;
      justify-content: center; flex-wrap: wrap;
      animation: fadeUp .5s .25s ease both;
    }
    .btn-primary {
      padding: 13px 28px;
      background: var(--accent); color: #fff;
      border-radius: var(--radius-sm);
      font-size: .9rem; font-weight: 700;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
      box-shadow: 0 4px 20px rgba(26,92,255,0.25);
    }
    .btn-primary:hover { background: var(--accent-dim); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,92,255,0.35); }
    .btn-secondary {
      padding: 13px 28px;
      background: var(--surface); color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: .9rem; font-weight: 600;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
    }
    .btn-secondary:hover { background: var(--surface2); border-color: var(--accent); transform: translateY(-2px); }

    .hero-visual { margin-top: 56px; animation: fadeUp .5s .3s ease both; }
    .wave-bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
    .wave-bar {
      width: 3px; border-radius: 99px;
      background: linear-gradient(to top, var(--accent-dim), var(--accent));
      animation: wavebar 1.4s ease-in-out infinite;
      opacity: 0.5;
    }
    [data-theme="light"] .wave-bar { opacity: 0.4; }
    .wave-bar:nth-child(1)  { height:14px; animation-delay:0s; }
    .wave-bar:nth-child(2)  { height:26px; animation-delay:.1s; }
    .wave-bar:nth-child(3)  { height:42px; animation-delay:.2s; }
    .wave-bar:nth-child(4)  { height:52px; animation-delay:.3s; }
    .wave-bar:nth-child(5)  { height:36px; animation-delay:.4s; }
    .wave-bar:nth-child(6)  { height:56px; animation-delay:.5s; }
    .wave-bar:nth-child(7)  { height:44px; animation-delay:.4s; }
    .wave-bar:nth-child(8)  { height:32px; animation-delay:.3s; }
    .wave-bar:nth-child(9)  { height:50px; animation-delay:.2s; }
    .wave-bar:nth-child(10) { height:40px; animation-delay:.1s; }
    .wave-bar:nth-child(11) { height:26px; animation-delay:0s; }
    .wave-bar:nth-child(12) { height:16px; animation-delay:.1s; }
    .wave-bar:nth-child(13) { height:34px; animation-delay:.2s; }
    .wave-bar:nth-child(14) { height:50px; animation-delay:.3s; }
    .wave-bar:nth-child(15) { height:38px; animation-delay:.4s; }
    .wave-bar:nth-child(16) { height:54px; animation-delay:.5s; }
    .wave-bar:nth-child(17) { height:42px; animation-delay:.4s; }
    .wave-bar:nth-child(18) { height:28px; animation-delay:.3s; }
    .wave-bar:nth-child(19) { height:18px; animation-delay:.2s; }
    .wave-bar:nth-child(20) { height:10px; animation-delay:.1s; }
    @keyframes wavebar {
      0%,100% { transform:scaleY(1); opacity:.5; }
      50% { transform:scaleY(.35); opacity:.2; }
    }
    [data-theme="light"] .wave-bar { opacity:.35; }

    /* ARTIFILAW BANNER */
    .artifilaw-banner {
      position: relative; z-index: 1;
      margin: 0 24px 60px;
      max-width: 900px;
      margin-left: auto; margin-right: auto;
    }
    .artifilaw-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px 40px;
      display: flex; align-items: center; gap: 32px;
      position: relative; overflow: hidden;
      box-shadow: var(--shadow);
      transition: background .3s, border-color .3s;
    }
    .artifilaw-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--accent-bg) 0%, transparent 60%);
      pointer-events: none;
    }
    .artifilaw-logo-wrap {
      flex-shrink: 0;
      width: 56px; height: 56px;
      background: linear-gradient(135deg, var(--accent), var(--gold));
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Sora', sans-serif;
      font-weight: 900; font-size: 1.1rem;
      color: white;
    }
    .artifilaw-content { flex: 1; }
    .artifilaw-tag { font-size: .68rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
    .artifilaw-title { font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
    .artifilaw-desc { font-size: .82rem; color: var(--muted); line-height: 1.6; }
    .artifilaw-link {
      flex-shrink: 0;
      padding: 9px 18px;
      background: var(--accent-bg);
      border: 1px solid rgba(26,92,255,0.25);
      color: var(--accent);
      border-radius: var(--radius-sm);
      font-size: .82rem; font-weight: 600;
      text-decoration: none; white-space: nowrap;
      transition: all .15s;
    }
    [data-theme="dark"] .artifilaw-link { border-color: rgba(88,166,255,0.25); }
    .artifilaw-link:hover { background: var(--accent); color: white; }

    /* STATS STRIP */
    .stats-strip {
      position: relative; z-index: 1;
      display: flex; justify-content: center;
      padding: 0 24px 72px; flex-wrap: wrap;
    }
    .stat-item { text-align: center; padding: 24px 44px; border-right: 1px solid var(--border2); }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-family: 'Sora', sans-serif;
      font-size: 2rem; font-weight: 800;
      background: linear-gradient(135deg, var(--text), var(--accent));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .stat-lbl { font-size: .78rem; color: var(--muted); margin-top: 4px; }

    /* SECTIONS */
    .section { position: relative; z-index: 1; padding: 72px 24px; max-width: 1080px; margin: 0 auto; }
    .section-label { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
    .section-title { font-family: 'Sora', sans-serif; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
    .section-sub { color: var(--muted); font-size: .9rem; line-height: 1.8; max-width: 500px; margin-bottom: 48px; }

    /* FEATURES GRID */
    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
    .feature-card {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 14px; padding: 26px;
      transition: all .25s; position: relative; overflow: hidden;
      box-shadow: var(--shadow);
    }
    .feature-card::before {
      content: '';
      position: absolute; top:0; left:0; right:0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0; transition: opacity .25s;
    }
    .feature-card:hover { border-color: rgba(26,92,255,0.3); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    [data-theme="dark"] .feature-card:hover { border-color: rgba(88,166,255,0.3); }
    .feature-card:hover::before { opacity: 1; }
    .feature-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
    .fi-blue   { background: rgba(26,92,255,.08); }
    .fi-gold   { background: rgba(196,125,0,.08); }
    .fi-green  { background: rgba(26,122,58,.08); }
    .fi-purple { background: rgba(120,87,200,.08); }
    .fi-red    { background: rgba(204,42,34,.08); }
    .fi-cyan   { background: rgba(0,160,190,.08); }
    [data-theme="dark"] .fi-blue   { background: rgba(88,166,255,.1); }
    [data-theme="dark"] .fi-gold   { background: rgba(212,160,23,.1); }
    [data-theme="dark"] .fi-green  { background: rgba(63,185,80,.1); }
    [data-theme="dark"] .fi-purple { background: rgba(149,117,205,.1); }
    [data-theme="dark"] .fi-red    { background: rgba(248,81,73,.1); }
    [data-theme="dark"] .fi-cyan   { background: rgba(56,189,248,.1); }
    .feature-title { font-family: 'Sora', sans-serif; font-size: .9rem; font-weight: 700; margin-bottom: 8px; }
    .feature-desc { font-size: .84rem; color: var(--muted); line-height: 1.7; }

    /* HOW IT WORKS */
    .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: 44px; position: relative; }
    .steps::before {
      content: '';
      position: absolute; top: 28px; left:10%; right:10%; height:1px;
      background: linear-gradient(90deg, transparent, var(--border), var(--accent-dim), var(--border), transparent);
    }
    .step { text-align: center; padding: 0 20px; }
    .step-num {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--surface); border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 800;
      color: var(--accent); position: relative; z-index: 1;
      box-shadow: var(--shadow);
    }
    .step-title { font-family:'Sora',sans-serif; font-size:.875rem; font-weight:700; margin-bottom:8px; }
    .step-desc { font-size:.8rem; color:var(--muted); line-height:1.6; }

    /* SIDANG HIGHLIGHT */
    .highlight-section { position: relative; z-index: 1; padding: 0 24px 72px; }
    .highlight-card {
      max-width: 1080px; margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px; padding: 52px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 48px; align-items: center;
      position: relative; overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .highlight-card::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 70% 50%, var(--accent-bg) 0%, transparent 60%);
      pointer-events: none;
    }
    .highlight-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .68rem; font-weight: 700; color: var(--gold);
      text-transform: uppercase; letter-spacing: 1.5px;
      background: var(--gold-bg); border: 1px solid rgba(196,125,0,.2);
      padding: 4px 10px; border-radius: 99px; margin-bottom: 14px;
    }
    [data-theme="dark"] .highlight-label { border-color: rgba(212,160,23,.25); }
    .highlight-title { font-family:'Sora',sans-serif; font-size:1.7rem; font-weight:800; letter-spacing:-.03em; line-height:1.2; margin-bottom:14px; }
    .highlight-desc { color:var(--muted); line-height:1.8; font-size:.875rem; margin-bottom:24px; }
    .speaker-list { display:flex; flex-wrap:wrap; gap:8px; }
    .speaker-chip { padding: 4px 12px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 99px; font-size: .72rem; color: var(--muted); font-family: 'DM Mono', monospace; }

    /* TERMINAL */
    .terminal {
      background: var(--bg2);
      border: 1px solid var(--border2);
      border-radius: 12px; overflow: hidden;
      font-family: 'DM Mono', monospace;
      box-shadow: var(--shadow);
    }
    [data-theme="dark"] .terminal { background: #0a0e14; }
    .terminal-bar {
      background: var(--surface2); padding: 10px 16px;
      display: flex; align-items: center; gap: 6px;
      border-bottom: 1px solid var(--border2);
    }
    .terminal-dot { width:11px; height:11px; border-radius:50%; }
    .t-red    { background: #ff5f56; }
    .t-yellow { background: #ffbd2e; }
    .t-green  { background: #27c93f; }
    .terminal-title { font-size:.7rem; color:var(--muted); margin-left:6px; }

    /* ── Terminal body — lebih rapat ke atas ── */
    .terminal-body { padding: 14px 20px 20px; font-size:.76rem; line-height:1.85; }

    .tm     { color: var(--muted2); }
    .tg     { color: var(--success); }
    .tb     { color: var(--accent); }
    .tgold  { color: var(--gold); }
    .tw     { color: var(--text); }
    .tred   { color: var(--danger); }
    .tpurple{ color: #9b7fdc; }
    [data-theme="dark"] .tpurple { color: #b79ef0; }
    .t-cursor { display:inline-block; width:2px; height:1em; background:var(--accent); vertical-align:middle; animation: blink .8s step-end infinite; }
    @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

    /* status pill di terminal */
    .t-status {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .65rem; font-weight: 700;
      padding: 1px 7px; border-radius: 4px;
      vertical-align: middle;
      letter-spacing: .3px;
    }
    .t-status-ok   { background: rgba(26,122,58,.15); color: var(--success); }
    .t-status-live { background: rgba(26,92,255,.12); color: var(--accent); }
    [data-theme="dark"] .t-status-ok   { background: rgba(63,185,80,.12); }
    [data-theme="dark"] .t-status-live { background: rgba(88,166,255,.12); }

    /* CTA BOTTOM */
    .cta-section { position: relative; z-index: 1; text-align: center; padding: 0 24px 96px; }
    .cta-card {
      max-width: 640px; margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px; padding: 52px 40px;
      box-shadow: var(--shadow-lg);
      position: relative; overflow: hidden;
    }
    .cta-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--accent-bg), transparent 70%); pointer-events: none; }
    .cta-card h2 { font-family: 'Sora', sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
    .cta-card p { color: var(--muted); line-height: 1.8; margin-bottom: 28px; font-size: .9rem; }

    /* FOOTER */
    footer {
      position: relative; z-index: 1;
      border-top: 1px solid var(--border2);
      padding: 36px 40px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 20px;
      background: var(--surface);
      transition: background .3s, border-color .3s;
    }
    .footer-left { display: flex; flex-direction: column; gap: 10px; }
    .footer-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
    .footer-logo-placeholder { width: 26px; height: 26px; background: linear-gradient(135deg, var(--accent), var(--gold)); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; font-weight: 800; font-family: 'Sora', sans-serif; }
    .footer-logo-text { font-family: 'Sora', sans-serif; font-size: .9rem; font-weight: 700; color: var(--text); }
    .footer-artifilaw { font-size: .75rem; color: var(--muted); }
    .footer-artifilaw a { color: var(--accent); font-weight: 600; text-decoration: none; }
    .footer-artifilaw a:hover { text-decoration: underline; }
    .footer-copy { font-size: .75rem; color: var(--muted2); }
    .footer-links { display: flex; gap: 20px; }
    .footer-links a { font-size: .8rem; color: var(--muted); text-decoration: none; transition: color .15s; }
    .footer-links a:hover { color: var(--text); }

    [data-theme="light"] img[src*="logo"] { filter: invert(1) brightness(0.15); }
    [data-theme="dark"]  img[src*="logo"] { filter: none; }
    [data-theme="light"] .hero-logo img { filter: invert(1) brightness(0.15) drop-shadow(0 8px 24px rgba(26,92,255,0.15)); }
    [data-theme="dark"]  .hero-logo img { filter: drop-shadow(0 8px 24px rgba(88,166,255,0.25)); }

    @keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

    @media (max-width: 768px) {
      nav { padding: 0 16px; }
      .nav-links { display: none; }
      .nav-artifilaw span:not(.nav-artifilaw-dot) { display: none; }
      .hero { padding: 100px 20px 56px; }
      .artifilaw-card { flex-direction: column; padding: 24px; gap: 20px; }
      .artifilaw-link { width: 100%; text-align: center; }
      .stat-item { padding: 18px 24px; }
      .highlight-card { grid-template-columns: 1fr; padding: 28px 24px; }
      .steps::before { display: none; }
      footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; }
    }
  </style>
</head>
<body>
<div class="bg-texture"></div>

<!-- NAVBAR -->
<nav>
  <div class="nav-left">
    <a href="/" class="nav-logo">
      <img src="/static/logo.svg" class="nav-logo-img" alt="KusKus" style="height:32px;width:auto;">
      <div class="nav-logo-text">Kus<span>Kus</span></div>
    </a>
    <a href="https://artifilaw.com" target="_blank" class="nav-artifilaw">
      <div class="nav-artifilaw-dot"></div>
      <span>by Artifilaw</span>
    </a>
  </div>
  <ul class="nav-links">
    <li><a href="#fitur">Fitur</a></li>
    <li><a href="#cara-kerja">Cara Kerja</a></li>
    <li><a href="#sidang">Mode Sidang</a></li>
  </ul>
  <div class="nav-right">
    <button class="theme-toggle" onclick="toggleTheme()" title="Ganti tema" aria-label="Toggle tema">
      <svg class="icon-sun" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
      </svg>
      <svg class="icon-moon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
      </svg>
    </button>
    <a href="/login" class="btn-nav">Masuk →</a>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-by">
    Produk dari <a href="https://artifilaw.com" target="_blank">Artifilaw.com</a> &mdash; Platform Hukum Berbasis AI
  </div>

  <!-- ── Badge diperbarui: lebih informatif & menarik ── -->
  <div class="hero-badge">
    <div class="hero-badge-dot"></div>
    <span class="hero-badge-text-accent">Akurasi Tinggi</span>
    <div class="hero-badge-sep"></div>
    <span class="hero-badge-gold">⚖️ Khusus Persidangan Indonesia</span>
  </div>

  <div class="hero-logo">
    <img src="/static/logo.svg" alt="KusKus Logo" style="height:88px;width:auto;filter:drop-shadow(0 8px 24px rgba(26,92,255,0.2));">
  </div>

  <h1>
    Transkripsi Sidang<br/>
    <span class="highlight">Lebih Cepat,</span><br/>
    Litigasi Lebih Fokus
  </h1>

  <!-- ── Subtitle diperbarui: tanpa sebut AI engine tertentu ── -->
  <p class="hero-sub">
    Alat bantu transkripsi audio persidangan berbasis AI — mengurangi beban pencatatan manual agar
    tim hukum Anda bisa berkonsentrasi penuh pada strategi litigasi. Bagian dari ekosistem <a href="https://artifilaw.com" target="_blank" style="color:var(--accent);font-weight:600;text-decoration:none;">Artifilaw</a> — platform hukum cerdas untuk Indonesia.
  </p>

  <div class="hero-cta">
    <a href="/login" class="btn-primary">
      <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      Mulai Transkripsi
    </a>
    <a href="#fitur" class="btn-secondary">
      Lihat Fitur
      <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
    </a>
  </div>

  <div class="hero-visual">
    <div class="wave-bars">
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
      <div class="wave-bar"></div><div class="wave-bar"></div>
    </div>
  </div>
</section>

<!-- ARTIFILAW BANNER -->
<div class="artifilaw-banner">
  <div class="artifilaw-card">
    <div class="artifilaw-logo-wrap">AL</div>
    <div class="artifilaw-content">
      <div class="artifilaw-tag">🏛️ Ekosistem Artifilaw</div>
      <div class="artifilaw-title">KusKus adalah bagian dari Artifilaw.com</div>
      <div class="artifilaw-desc">
        Artifilaw adalah platform hukum berbasis kecerdasan buatan yang menyediakan berbagai tools untuk
        praktisi hukum Indonesia — mulai dari transkripsi sidang, analisis dokumen, hingga riset hukum otomatis.
      </div>
    </div>
    <a href="https://artifilaw.com" target="_blank" class="artifilaw-link">
      Kunjungi Artifilaw →
    </a>
  </div>
</div>

<!-- STATS -->
<div class="stats-strip">
  <div class="stat-item">
    <div class="stat-num">5+</div>
    <div class="stat-lbl">Format Audio</div>
  </div>
  <div class="stat-item">
    <!-- ── Diubah dari "5 Model Whisper" ── -->
    <div class="stat-num">98%</div>
    <div class="stat-lbl">Akurasi Transkripsi</div>
  </div>
  <div class="stat-item">
    <div class="stat-num">100%</div>
    <div class="stat-lbl">Bahasa Indonesia</div>
  </div>
  <div class="stat-item">
    <div class="stat-num">Real‑time</div>
    <div class="stat-lbl">Live Rekam</div>
  </div>
</div>

<!-- FEATURES -->
<section class="section" id="fitur">
  <div class="section-label">Fitur Unggulan</div>
  <h2 class="section-title">Semua yang Anda<br/>butuhkan dalam satu platform</h2>
  <p class="section-sub">Dari upload file sederhana hingga rekam langsung di ruang sidang — semua dirancang untuk mempercepat alur kerja tim litigasi tanpa instalasi tambahan.</p>

  <div class="features-grid">
    <div class="feature-card">
      <div class="feature-icon fi-blue">📁</div>
      <div class="feature-title">Upload File Audio</div>
      <div class="feature-desc">Dukung MP3, MP4, WAV, M4A, OGG, WebM, dan FLAC hingga 100 MB. Proses berjalan di background, hasil siap saat Anda kembali.</div>
    </div>
    <div class="feature-card">
      <div class="feature-icon fi-purple">🎙️</div>
      <div class="feature-title">Rekam Langsung</div>
      <div class="feature-desc">Rekam audio langsung dari browser menggunakan mikrofon. Kirim dan transkripsi real-time tanpa perlu software tambahan.</div>
    </div>
    <div class="feature-card">
      <div class="feature-icon fi-gold">⚖️</div>
      <div class="feature-title">Mode Sidang</div>
      <div class="feature-desc">Normalisasi otomatis label speaker: HAKIM, JAKSA, TERDAKWA, SAKSI, AHLI, dan lainnya sesuai konvensi dokumen persidangan Indonesia.</div>
    </div>
    <div class="feature-card">
      <!-- ── Diperbarui: tanpa sebut Whisper ── -->
      <div class="feature-icon fi-green">🖥️</div>
      <div class="feature-title">Privasi & Kecepatan Penuh</div>
      <div class="feature-desc">Pilih antara pemrosesan lokal (privasi penuh, tanpa biaya) atau engine cloud untuk kecepatan dan akurasi maksimal sesuai kebutuhan.</div>
    </div>
    <div class="feature-card">
      <div class="feature-icon fi-cyan">📊</div>
      <div class="feature-title">Panel Admin</div>
      <div class="feature-desc">Kelola semua task, pantau statistik transkripsi, dan atur pengguna dari dashboard admin yang lengkap.</div>
    </div>
    <div class="feature-card">
      <div class="feature-icon fi-red">⚡</div>
      <div class="feature-title">Progress Real-time</div>
      <div class="feature-desc">Pantau progress transkripsi secara langsung — dari pending, processing, hingga selesai dengan status update otomatis.</div>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="section" id="cara-kerja" style="padding-top:0">
  <div class="section-label">Cara Kerja</div>
  <h2 class="section-title">Tiga langkah,<br/>hasil instan</h2>
  <div class="steps">
    <div class="step">
      <div class="step-num">1</div>
      <div class="step-title">Upload atau Rekam</div>
      <div class="step-desc">Upload file audio atau rekam langsung dari mikrofon browser Anda.</div>
    </div>
    <div class="step">
      <div class="step-num">2</div>
      <div class="step-title">AI Memproses</div>
      <div class="step-desc">Sistem AI menganalisis dan mengonversi suara menjadi teks secara otomatis.</div>
    </div>
    <div class="step">
      <div class="step-num">3</div>
      <div class="step-title">Salin atau Unduh</div>
      <div class="step-desc">Hasil transkripsi siap disalin atau diunduh sebagai file TXT.</div>
    </div>
  </div>
</section>

<!-- SIDANG HIGHLIGHT -->
<div class="highlight-section" id="sidang">
  <div class="highlight-card">
    <div>
      <div class="highlight-label">⚖️ Eksklusif</div>
      <h3 class="highlight-title">Mode Sidang<br/>Pengadilan</h3>
      <p class="highlight-desc">
        Dirancang khusus untuk mendukung proses persidangan Indonesia. Transkrip otomatis dengan label speaker yang terformat rapi — siap dijadikan bahan review, referensi, maupun lampiran kerja tim hukum.
      </p>
      <div class="speaker-list">
        <span class="speaker-chip">HAKIM KETUA</span>
        <span class="speaker-chip">JAKSA</span>
        <span class="speaker-chip">PENASIHAT HUKUM</span>
        <span class="speaker-chip">TERDAKWA</span>
        <span class="speaker-chip">SAKSI</span>
        <span class="speaker-chip">AHLI</span>
        <span class="speaker-chip">PANITERA</span>
      </div>
      <br/>
      <a href="/login" class="btn-primary" style="display:inline-flex;margin-top:8px">Coba Sekarang →</a>
    </div>

    <!-- ── Terminal diperbarui: dialog lebih dramatis, konten naik ke atas ── -->
    <div class="terminal">
      <div class="terminal-bar">
        <div class="terminal-dot t-red"></div>
        <div class="terminal-dot t-yellow"></div>
        <div class="terminal-dot t-green"></div>
        <span class="terminal-title">BA-Sidang-847-Pid.Sus-2025.txt</span>
        &nbsp;<span class="t-status t-status-live">● LIVE</span>
      </div>
      <div class="terminal-body">
        <div><span class="tgold">HAKIM KETUA</span> <span class="tm">:</span></div>
        <div class="tw">&nbsp;&nbsp;Saudara Saksi, apakah Anda bersedia</div>
        <div class="tw">&nbsp;&nbsp;memberikan keterangan di bawah sumpah?</div>
        <br/>
        <div><span class="tpurple">SAKSI</span> <span class="tm">:</span></div>
        <div class="tw">&nbsp;&nbsp;Bersedia, Yang Mulia.</div>
        <br/>
        <div><span class="tb">JAKSA</span> <span class="tm">:</span></div>
        <div class="tw">&nbsp;&nbsp;Pada malam kejadian, Saudara berada</div>
        <div class="tw">&nbsp;&nbsp;di mana antara pukul 21.00 hingga 23.00?</div>
        <br/>
        <div><span class="tpurple">SAKSI</span> <span class="tm">:</span></div>
        <div class="tw">&nbsp;&nbsp;Saya berada di kantor, Yang Mulia.</div>
        <div class="tw">&nbsp;&nbsp;Ada rekan yang dapat membenarkan hal ini.</div>
        <br/>
        <div><span class="tg">PENASIHAT HUKUM</span> <span class="tm">:</span></div>
        <div class="tw">&nbsp;&nbsp;Keberatan, Yang Mulia. Pertanyaan</div>
        <div class="tw">&nbsp;&nbsp;tersebut bersifat mengarahkan.</div>
        <br/>
        <div><span class="tgold">HAKIM KETUA</span> <span class="tm">:</span></div>
        <div class="tw">&nbsp;&nbsp;Keberatan diterima. Jaksa harap</div>
        <div class="tw">&nbsp;&nbsp;merumuskan ulang pertanyaannya.</div>
        <br/>
        <div class="tm">▋ <span class="t-cursor"></span> <span class="t-status t-status-ok">✓ 98% akurat</span></div>
      </div>
    </div>
  </div>
</div>

<!-- CTA BOTTOM -->
<div class="cta-section">
  <div class="cta-card">
    <div class="section-label">Siap Memulai?</div>
    <h2>Kurangi beban pencatatan,<br/>perkuat fokus litigasi</h2>
    <p>Masuk dan mulai transkripsi sekarang — tidak perlu konfigurasi rumit, langsung bantu kerja tim hukum Anda.<br/>
    Bagian dari layanan <a href="https://artifilaw.com" target="_blank" style="color:var(--accent);font-weight:600;text-decoration:none;">Artifilaw.com</a>.</p>
    <a href="/login" class="btn-primary" style="font-size:.95rem;padding:14px 32px;">
      <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
      Masuk ke Aplikasi
    </a>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <div class="footer-left">
    <a href="/" class="footer-logo">
      <img src="/static/logo.svg" height="26" alt="KusKus">
      <div class="footer-logo-text">KusKus</div>
    </a>
    <div class="footer-artifilaw">
      Bagian dari <a href="https://artifilaw.com" target="_blank">Artifilaw.com</a> — Platform Hukum Berbasis AI
    </div>
    <div class="footer-copy">© 2025 KusKus · Sistem Transkripsi Sidang</div>
  </div>
  <div class="footer-links">
    <a href="/docs">API Docs</a>
    <a href="https://artifilaw.com" target="_blank">Artifilaw</a>
    <a href="/login">Login</a>
  </div>
</footer>

<script>
  const THEME_KEY = 'kuskus-theme';
  function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem(THEME_KEY, theme);
  }
  function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme');
    applyTheme(current === 'dark' ? 'light' : 'dark');
  }
  (function() {
    const saved = localStorage.getItem(THEME_KEY);
    applyTheme(saved || 'light');
  })();
</script>
</body>
</html>