:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #0f1525;
    --bg-card: #131929;
    --bg-card2: #161d30;
    --border: #1e2a42;
    --border-light: #243050;
    --text-primary: #e8edf8;
    --text-secondary: #8a9bbf;
    --text-muted: #4a5a7a;
    --accent-green: #00d4a0;
    --accent-green-dim: rgba(0,212,160,0.12);
    --accent-blue: #3b82f6;
    --accent-blue-dim: rgba(59,130,246,0.12);
    --accent-orange: #f59e0b;
    --accent-orange-dim: rgba(245,158,11,0.12);
    --accent-red: #ef4444;
    --accent-red-dim: rgba(239,68,68,0.12);
    --accent-purple: #a855f7;
    --wajar: #00d4a0;
    --perhatian: #f59e0b;
    --tinggi: #ef4444;
    --font: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  html[data-theme="light"] {
    --bg-primary: #f4f6fb;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card2: #f0f3fa;
    --border: #dde3f0;
    --border-light: #cbd5ea;
    --text-primary: #101828;
    --text-secondary: #3d4a63;
    --text-muted: #6b7690;
    --accent-green: #059669;
    --accent-blue: #2563eb;
    --accent-orange: #d97706;
    --accent-red: #dc2626;
    --accent-purple: #9333ea;
    --wajar: #059669;
    --perhatian: #d97706;
    --tinggi: #dc2626;
    --accent-green-dim: rgba(5,150,105,0.10);
    --accent-blue-dim: rgba(37,99,235,0.10);
    --accent-orange-dim: rgba(217,119,6,0.10);
    --accent-red-dim: rgba(220,38,38,0.10);
    --teks-di-atas-aksen: #ffffff;
  }
  html[data-theme="light"] .hero-badge,
  html[data-theme="light"] .badge-my { color: #047857; }
  html[data-theme="light"] .nav-logo svg path[fill="url(#lg2)"] { opacity: 0.85; }
  html[data-theme="light"] .nav-link.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(5,150,105,.28), inset 0 1px 0 rgba(255,255,255,.18);
  }
  html[data-theme="light"] .btn-download:not(.secondary),
  html[data-theme="light"] .chat-send,
  html[data-theme="light"] .year-tab.active {
    color: var(--teks-di-atas-aksen);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

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

  body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
  }

  .navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
  }
  .nav-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .nav-logo {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .nav-title { font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; }
  .nav-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  .nav-links { display: flex; align-items: center; gap: 4px; }
  .nav-link {
    padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer; transition: all 0.15s; text-decoration: none;
    white-space: nowrap;
  }
  .nav-link:hover { background: var(--border); color: var(--text-primary); }
  .nav-link.active { background: var(--accent-blue-dim); color: var(--accent-blue); }
  .nav-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
  .btn-sirup {
    padding: 7px 12px; background: var(--accent-green-dim);
    border: 1px solid rgba(0,212,160,0.25); color: var(--accent-green);
    border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font);
    white-space: nowrap;
  }
  .btn-theme {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card2); color: var(--text-secondary); cursor: pointer; font-size: 15px; flex-shrink: 0;
  }
  .btn-theme:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
  .btn-theme-mobile {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card2); color: var(--text-secondary); cursor: pointer; font-size: 13px; margin-top: 6px;
  }

  .hamburger {
    display: none;
    flex-direction: column; gap: 5px; cursor: pointer; padding: 6px;
    background: none; border: none;
  }
  .hamburger span {
    width: 22px; height: 2px; background: var(--text-secondary); border-radius: 2px; display: block; transition: all 0.25s;
  }
  .mobile-menu {
    display: none; position: fixed; top: 52px; left: 0; right: 0;
    background: var(--bg-secondary); border-bottom: 1px solid var(--border);
    padding: 12px 16px; z-index: 99; flex-direction: column; gap: 4px;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu .nav-link { padding: 10px 14px; font-size: 13px; border-radius: 8px; }

  .main { padding: 20px 16px; max-width: 1400px; margin: 0 auto; width: 100%; }

  .hero {
    text-align: center; margin-bottom: 24px; padding: 32px 16px 28px;
    background: var(--bg-secondary); border-radius: 16px; border: 1px solid var(--border);
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent);
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,212,160,0.08); border: 1px solid rgba(0,212,160,0.2);
    border-radius: 20px; padding: 5px 14px; font-size: 11.5px; color: var(--accent-green);
    font-weight: 500; margin-bottom: 16px; font-family: var(--mono);
    flex-wrap: wrap; justify-content: center;
  }
  .hero-badge::before { content: '◀'; font-size: 10px; }
  .hero-badge::after { content: '▶'; font-size: 10px; }
  .hero h1 {
    font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--text-primary);
    margin-bottom: 12px; letter-spacing: -0.5px;
  }
  .hero h1 span { color: var(--accent-green); }
  .hero p { font-size: 13px; color: var(--text-secondary); max-width: 520px; margin: 0 auto 16px; line-height: 1.6; }
  .hero-disclaimer-stack {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .hero-disclaimer {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px; padding: 8px 14px; font-size: 11.5px; color: var(--accent-orange);
    text-align: left; max-width: 480px; width: fit-content; margin: 0 auto;
    line-height: 1.5;
  }
  .hero-disclaimer::before { content: '⚠'; flex-shrink: 0; }
  .hero-disclaimer-info {
    display: flex; align-items: flex-start; gap: 6px;
    background: var(--accent-blue-dim); border: 1px solid rgba(59,130,246,0.25);
    border-radius: 8px; padding: 6px 12px; font-size: 10.5px; color: var(--accent-blue);
    text-align: left; max-width: 480px; width: fit-content; margin: 0 auto;
    line-height: 1.5;
  }
  .hero-disclaimer-info::before { content: 'ⓘ'; flex-shrink: 0; }
  .hero-disclaimer-info b { font-weight: 700; }

  .cari-cepat { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
  .cari-cepat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.8px; }
  .cari-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .cari-input-wrap { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; }
  .cari-input-wrap input { background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font); font-size: 13px; width: 100%; }
  .cari-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
  .cari-chip { padding: 6px 13px; border-radius: 16px; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-light); color: var(--text-secondary); background: var(--bg-card2); white-space: nowrap; transition: all .12s; }
  .cari-chip:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
  .cari-chip.merah { border-color: rgba(239,68,68,0.3); color: var(--accent-red); }
  .cari-chip.merah.aktif { background: var(--accent-red-dim, rgba(239,68,68,0.15)); }
  .cari-chip.aktif { background: var(--accent-blue-dim, rgba(59,130,246,0.15)); border-color: var(--accent-blue); color: var(--accent-blue); }
  .cari-panel { display: none; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
  .cari-panel.open { display: block; }
  .cari-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .cari-panel-title { font-size: 13px; font-weight: 700; }
  .cari-panel-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
  .item-terbesar-box { background: var(--bg-card2); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px; }
  .item-terbesar-nama { font-size: 12.5px; font-weight: 700; line-height: 1.4; margin-bottom: 6px; }
  .item-terbesar-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
  .item-terbesar-spek { font-size: 10.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; padding: 6px 8px; background: var(--bg-card); border-radius: 6px; }
  .item-terbesar-pagu { font-size: 16px; font-weight: 800; color: var(--accent-orange); }
  .mini-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 12px; }
  .mini-table th { text-align: left; padding: 6px 8px; color: var(--text-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
  .mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
  .mini-table td.num, .mini-table th.num { text-align: right; font-family: var(--mono); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

  .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
  .stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 14px; text-align: center;
  }
  .stat-number { font-size: 26px; font-weight: 800; font-family: var(--mono); margin-bottom: 4px; }
  .stat-number.green { color: var(--accent-green); }
  .stat-number.orange { color: var(--accent-orange); }
  .stat-number.red { color: var(--accent-red); }
  .stat-number.blue { color: var(--accent-blue); }
  .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }

  .section-title {
    font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
  }
  .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  .ringkasan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
  .ringkasan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 14px; }
  .ringkasan-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
  .ringkasan-value { font-size: 20px; font-weight: 800; font-family: var(--mono); margin-bottom: 4px; }
  .ringkasan-value.green { color: var(--accent-green); }
  .ringkasan-value.orange { color: var(--accent-orange); }
  .ringkasan-value.blue { color: var(--accent-blue); }
  .ringkasan-sub { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
  .ringkasan-sub.up { color: var(--accent-green); }
  .ringkasan-sub.warn { color: var(--accent-orange); }
  .ringkasan-sub.danger { color: var(--accent-red); }

  .ringkasan-grid2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
  .alert-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
  .alert-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
  .alert-value { font-size: 18px; font-weight: 800; font-family: var(--mono); margin-bottom: 4px; }
  .alert-value.green { color: var(--accent-green); }
  .alert-value.orange { color: var(--accent-orange); }
  .alert-value.blue { color: var(--accent-blue); }
  .badge-my { display:inline-block; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:4px; background:rgba(99,140,255,0.15); color:var(--accent-blue); white-space:nowrap; }
  .alert-sub { font-size: 11px; }
  .alert-sub.danger { color: var(--accent-red); }
  .alert-sub.warn { color: var(--accent-orange); }
  .alert-sub.ok { color: var(--accent-green); }

  .chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 24px; }
  .chart-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 14px; }
  .bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-bottom: 8px; }
  .bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
  .bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; }
  .bar.wajar { background: var(--accent-green); opacity: 0.85; }
  .bar.current { background: var(--accent-blue); opacity: 0.9; }
  .bar-label { font-size: 10px; color: var(--text-muted); font-family: var(--mono); }
  .bar-val { font-size: 10px; color: var(--text-secondary); font-weight: 600; }

  .table-section { margin-bottom: 24px; }
  .table-disclaimer {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15);
    border-radius: 8px; padding: 8px 12px; font-size: 11px; color: var(--accent-orange); margin-bottom: 12px;
  }
  .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .table-scroll::-webkit-scrollbar { height: 4px; }
  .table-scroll::-webkit-scrollbar-track { background: var(--border); }
  .table-scroll::-webkit-scrollbar-thumb { background: var(--accent-blue); border-radius: 2px; }
  .data-table { width: 100%; min-width: 1180px; border-collapse: collapse; background: var(--bg-card); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
  .data-table thead tr { background: var(--bg-card2); border-bottom: 1px solid var(--border); }
  .data-table th {
    padding: 11px 12px; text-align: center; font-size: 10.5px; font-weight: 700;
    color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase;
    white-space: nowrap;
  }
  .data-table th:nth-child(1) { width: 19%; }
  .data-table th:nth-child(2) { width: 8%; }
  .data-table th:nth-child(3) { width: 8%; }
  .data-table th:nth-child(4) { width: 13%; }
  .data-table th:nth-child(5) { width: 9%; }
  .data-table th:nth-child(6) { width: 27%; }
  .data-table th:nth-child(7) { width: 10%; }
  .data-table th:nth-child(8) { width: 6%; }
  .data-table td { padding: 12px 12px; font-size: 12px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
  .data-table td:nth-child(1),
  .data-table td:nth-child(4),
  .data-table td:nth-child(6),
  .data-table td:nth-child(7) { text-align: left; }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table tr:hover td { background: rgba(255,255,255,0.02); }
  .paket-name { font-weight: 600; color: var(--text-primary); margin-bottom: 3px; font-size: 12px; }
  .paket-opd { font-size: 10.5px; color: var(--text-muted); }
  .pagu-val { font-family: var(--mono); font-weight: 700; font-size: 12px; white-space: nowrap; color: var(--text-primary); display: block; text-align: right; }
  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
  .badge.wajar { background: rgba(0,212,160,0.12); color: var(--accent-green); border: 1px solid rgba(0,212,160,0.2); }
  .badge.perhatian { background: rgba(245,158,11,0.12); color: var(--accent-orange); border: 1px solid rgba(245,158,11,0.2); }
  .badge.tinggi { background: rgba(239,68,68,0.12); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.2); }
  .badge.epurchasing { background: rgba(59,130,246,0.10); color: var(--accent-blue); border: 1px solid rgba(59,130,246,0.18); }
  .badge.langsung { background: rgba(168,85,247,0.10); color: var(--accent-purple); border: 1px solid rgba(168,85,247,0.18); }
  .badge.tender { background: rgba(245,158,11,0.10); color: var(--accent-orange); border: 1px solid rgba(245,158,11,0.18); }
  .badge.seleksi { background: rgba(168,85,247,0.10); color: var(--accent-purple); border: 1px solid rgba(168,85,247,0.18); }
  .alasan-text { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 5px; }
  .aturan-badge { display: inline-block; padding: 2px 7px; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.15); border-radius: 4px; font-size: 9.5px; color: var(--accent-blue); font-family: var(--mono); margin-top: 3px; }
  .rekomendasi-text { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
  .rekomendasi-text::before { content: '💡 '; }
  .kode-rup { font-family: var(--mono); font-size: 10.5px; color: var(--accent-purple); font-weight: 600; }
  .kode-rup-label { font-size: 9.5px; color: var(--text-muted); margin-bottom: 2px; }

  .bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
  .opd-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .opd-rank { font-size: 10px; color: var(--text-muted); font-family: var(--mono); width: 16px; text-align: center; }
  .opd-info { flex: 1; min-width: 0; }
  .opd-name { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .opd-bar-wrap { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .opd-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-green)); }
  .opd-value { font-size: 11.5px; font-family: var(--mono); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

  .chatbot-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; }
  .chat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .chat-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, var(--accent-green), var(--accent-blue)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .chat-title { font-weight: 700; font-size: 13px; }
  .chat-status { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--accent-green); }
  .chat-status::before { content: ''; width: 6px; height: 6px; background: var(--accent-green); border-radius: 50%; }
  .chat-messages { flex: 1; margin-bottom: 12px; }
  .chat-msg { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
  .chat-msg strong { color: var(--accent-green); }
  .chat-msg p { margin-bottom: 6px; }
  .chat-msg p:last-child { margin-bottom: 0; }
  .chat-msg + .chat-msg { margin-top: 10px; }
  .chat-msg-user { background: var(--accent-blue-dim, rgba(59,130,246,0.1)); border-color: rgba(59,130,246,0.25); margin-left: 20%; }
  .chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .chat-chip { padding: 5px 11px; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 20px; font-size: 11px; color: var(--accent-blue); cursor: pointer; }
  .chat-input-row { display: flex; gap: 8px; }
  .chat-input { flex: 1; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--text-primary); font-family: var(--font); outline: none; min-width: 0; }
  .chat-send { padding: 9px 14px; background: var(--accent-green); color: #0a0e1a; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); flex-shrink: 0; white-space: nowrap; }

  .footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; gap: 6px; }
  .footer-brand { font-weight: 700; color: var(--accent-green); }

  .mb20 { margin-bottom: 20px; }
  .mb24 { margin-bottom: 24px; }

  .tab-page { display: none; }
  .tab-page.active { display: block; }
  .nav-link { cursor: pointer; }

  .attn-badge {
    display: flex; align-items: flex-start; gap: 6px;
    background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.22);
    border-radius: 7px; padding: 7px 9px; margin-top: 7px;
  }
  .attn-badge .ic { flex-shrink: 0; font-size: 12px; line-height: 1.4; }
  .attn-badge-title { font-size: 10px; font-weight: 700; color: var(--accent-orange); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
  .attn-badge-text { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }

  .attn-mini {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
    color: var(--accent-orange); font-size: 9.5px; font-weight: 700;
    padding: 3px 8px; border-radius: 20px; white-space: nowrap;
  }
  .uraian-text { font-size: 11px; color: var(--text-secondary); line-height: 1.5; max-width: 190px; }
  .spesifikasi-text { font-size: 10.5px; color: var(--accent-blue); margin-top: 4px; font-weight: 600; }

  .na-value { font-size: 15px; font-weight: 700; color: var(--text-muted); font-family: var(--mono); }
  .na-sub { font-size: 10.5px; color: var(--text-muted); }

  .filter-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
  .filter-chip {
    font-size: 11px; padding: 6px 13px; border-radius: 7px; border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; background: var(--bg-card); font-family: var(--font);
  }
  .filter-chip.active { background: var(--accent-blue-dim); border-color: rgba(59,130,246,0.3); color: var(--accent-blue); font-weight: 600; }

  .opd-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .opd-table th { padding: 11px 14px; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; background: var(--bg-card2); border-bottom: 1px solid var(--border); }
  .opd-table th.num, .opd-table td.num { text-align: right; }
  .opd-table td { padding: 12px 14px; font-size: 12px; border-bottom: 1px solid var(--border); }
  .opd-table tr:last-child td { border-bottom: none; }
  .opd-table tr:hover td { background: rgba(255,255,255,0.02); }
  .opd-table .rank { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
  .opd-table .opd-name-cell { font-weight: 600; }

  .laporan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 800px) { .laporan-grid { grid-template-columns: 1fr; } }
  .laporan-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  }
  .laporan-card.highlight { border-color: rgba(59,130,246,0.35); background: linear-gradient(180deg, rgba(59,130,246,0.05), var(--bg-card)); }
  .laporan-info h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
  .laporan-info p { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; }
  .laporan-meta { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: var(--text-muted); font-family: var(--mono); flex-wrap: wrap; }
  .laporan-card .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .laporan-card .btn-download { flex: 1; text-align: center; white-space: nowrap; }
  .btn-download {
    padding: 11px 20px; background: var(--accent-green); color: #06231a; border: none;
    border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: var(--font);
    white-space: nowrap; display: flex; align-items: center; gap: 8px;
  }
  .btn-download:hover { opacity: 0.9; }
  .btn-download.secondary { background: var(--bg-card2); color: var(--text-primary); border: 1px solid var(--border); }
  .btn-pdf-action {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .btn-pdf-action:hover {
    background: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: #ffffff !important;
    opacity: 1;
  }
  .watermark-preview {
    background: var(--bg-primary); border: 1px dashed var(--border-light); border-radius: 10px;
    padding: 14px 16px; font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); line-height: 1.8; overflow-x: auto;
  }
  .watermark-preview .wm-tag { color: var(--accent-green); }

  .rincian-panel { display: none; background: var(--bg-card2); border: 1px solid var(--border-light); border-radius: 10px; padding: 16px 18px; margin: -8px 0 16px; }
  .rincian-panel.open { display: block; }
  .rincian-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; flex-wrap: wrap; }
  .rincian-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  @media(max-width:600px){ .rincian-grid{ grid-template-columns: 1fr; } }
  .rincian-grid > div { display: flex; justify-content: space-between; gap: 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px; font-size: 11.5px; }
  .rincian-grid span { color: var(--text-muted); }
  .rincian-grid b { font-family: var(--mono); }
  .rincian-grid b.orange { color: var(--accent-orange); }
  .rincian-grid b.blue { color: var(--accent-blue); }
  .btn-download.sm { padding: 6px 12px; font-size: 11px; }
  .paket-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
  .paket-pager-label { font-size: 12px; color: var(--text-secondary); font-family: var(--mono); }
  .paket-pager button:disabled { opacity: 0.35; cursor: not-allowed; }

  .year-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  .year-tab { font-size: 11px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; font-family: var(--mono); }
  .year-tab.active { background: var(--accent-orange); border-color: var(--accent-orange); color: #2a1400; font-weight: 700; }

  .search-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .search-input-wrap { flex: 1; min-width: 220px; position: relative; }
  .search-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
  .search-input {
    width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px 10px 34px; font-size: 12.5px; color: var(--text-primary); font-family: var(--font); outline: none;
  }
  .search-input:focus { border-color: var(--accent-blue); }

  .quick-chip { padding: 5px 11px; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 20px; font-size: 11px; color: var(--accent-blue); cursor: pointer; }
  .quick-chip:hover { background: rgba(59,130,246,0.16); }

  @media (max-width: 600px) {
    body { font-size: 12px; }

    .navbar { padding: 0 12px; height: 50px; }
    .nav-sub { display: none; }
    .nav-links { display: none; }
    .btn-sirup { display: none; }
    .hamburger { display: flex; }

    .hero { padding: 22px 14px 18px; margin-bottom: 16px; border-radius: 12px; }
    .hero h1 { font-size: 20px; letter-spacing: -0.3px; }
    .hero p { font-size: 12px; }
    .hero-badge { font-size: 10.5px; padding: 4px 12px; }

    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
    .stat-card { padding: 14px 10px; border-radius: 10px; }
    .stat-number { font-size: 22px; }
    .stat-label { font-size: 10.5px; }

    .ringkasan-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
    .ringkasan-grid2 { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
    .ringkasan-card { padding: 14px 12px; border-radius: 10px; }
    .ringkasan-value { font-size: 18px; }
    .alert-card { padding: 12px; border-radius: 10px; }
    .alert-value { font-size: 17px; }

    .bar-chart { height: 65px; gap: 5px; }
    .bar-val { font-size: 9px; }
    .bar-label { font-size: 9px; }
    .chart-card { padding: 14px 12px; border-radius: 10px; }

    .table-section { margin-bottom: 16px; }
    .table-scroll { border-radius: 10px; }
    .data-table { min-width: 1100px; }
    .data-table td,
    .data-table th { padding: 10px 10px; }

    .bottom-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
    .opd-name { font-size: 11.5px; }
    .opd-value { font-size: 11px; }

    .chatbot-card { padding: 14px; }
    .chat-chips { gap: 5px; }
    .chat-chip { font-size: 10.5px; padding: 4px 10px; }

    .footer { flex-direction: column; text-align: center; font-size: 10px; padding: 12px 14px; }

    .main { padding: 12px 12px; }
  }

  @media (min-width: 601px) and (max-width: 900px) {
    body { font-size: 12.5px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .main { padding: 16px 16px; }
    .hero h1 { font-size: 26px; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-number { font-size: 24px; }
    .ringkasan-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ringkasan-grid2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bottom-row { grid-template-columns: 1fr; gap: 12px; }
    .bar-chart { height: 75px; }
  }

  @media (min-width: 1280px) {
    .main { padding: 28px 28px; }
    .hero h1 { font-size: 36px; }
    .stat-number { font-size: 28px; }
    .ringkasan-value { font-size: 22px; }
    .bar-chart { height: 100px; }
  }


  :root {
    --bg-primary: #08111f;
    --bg-secondary: rgba(11, 23, 40, 0.86);
    --bg-card: rgba(17, 32, 53, 0.72);
    --bg-card2: rgba(23, 42, 68, 0.70);
    --border: rgba(148, 163, 184, 0.16);
    --border-light: rgba(148, 163, 184, 0.24);
    --text-primary: #f4f7fb;
    --text-secondary: #b7c3d6;
    --text-muted: #7e8da5;
    --accent-green: #35d39e;
    --accent-blue: #5b8cff;
    --accent-orange: #f6ae4b;
    --accent-red: #ff6673;
    --accent-purple: #ae7dff;
  }
  html[data-theme="light"] {
    --bg-primary: #f5f7fb;
    --bg-secondary: rgba(255,255,255,.92);
    --bg-card: rgba(255,255,255,.88);
    --bg-card2: #eef2f8;
    --border: rgba(51,65,85,.12);
    --border-light: rgba(51,65,85,.18);
    --text-primary: #142033;
    --text-secondary: #536176;
    --text-muted: #8490a3;
  }
  body {
    background:
      radial-gradient(circle at 10% -10%, rgba(91,140,255,.18), transparent 30%),
      radial-gradient(circle at 90% 10%, rgba(53,211,158,.10), transparent 28%),
      var(--bg-primary);
  }
  .navbar {
    height: 66px; padding: 0 28px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
  }
  .nav-brand { gap: 12px; }
  .nav-logo { width: 40px; height: 40px; padding: 2px; border-radius: 12px; background: linear-gradient(135deg, rgba(53,211,158,.14), rgba(91,140,255,.14)); }
  .nav-title { font-size: 16px; letter-spacing: -.3px; }
  .nav-sub { font-size: 10px; letter-spacing: .2px; }
  .nav-links { gap: 3px; background: var(--bg-card2); padding: 4px; border: 1px solid var(--border); border-radius: 12px; }
  .nav-link { padding: 8px 13px; border-radius: 8px; }
  .nav-link.active { background: var(--accent-blue); color: #fff; box-shadow: 0 5px 14px rgba(91,140,255,.25); }
  .nav-link:hover { background: var(--accent-blue-dim); color: var(--accent-blue); }
  html[data-theme="light"] .nav-link:hover {
    background: var(--accent-green-dim);
    color: var(--accent-green);
  }
  .btn-sirup, .btn-download { border-radius: 10px; box-shadow: 0 8px 18px rgba(53,211,158,.12); }
  .btn-theme { width: 38px; height: 38px; border-radius: 10px; }
  .main { max-width: 1440px; padding: 28px; }
  .hero {
    text-align: left; min-height: 280px; padding: 42px 46px;
    display: flex; flex-direction: column; justify-content: center;
    border-radius: 24px; border-color: var(--border);
    background:
      linear-gradient(110deg, rgba(8,17,31,.84) 0%, rgba(8,17,31,.70) 50%, rgba(91,140,255,.10) 100%),
      var(--bg-secondary);
    box-shadow: 0 24px 60px rgba(0,0,0,.12);
  }
  .hero::after { content:''; position:absolute; width:320px; height:320px; right:-90px; top:-110px; border-radius:50%; border:1px solid rgba(91,140,255,.18); box-shadow: 0 0 0 35px rgba(91,140,255,.035), 0 0 0 70px rgba(53,211,158,.025); }
  .hero-badge { width: fit-content; background: rgba(53,211,158,.10); border-color: rgba(53,211,158,.22); }
  .hero h1 { max-width: 680px; font-size: clamp(30px,4vw,46px); letter-spacing: -1.5px; }
  .hero p { max-width: 650px; margin: 0 0 18px; font-size: 14px; }
  .hero-disclaimer-stack { align-items: flex-start; }
  .hero-disclaimer, .hero-disclaimer-info { margin: 0; max-width: 680px; }

  .hero-disclaimer-info {
    background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(5,150,105,.08));
    border: 1px solid rgba(52,211,153,.45);
    color: #86efac;
    padding: 11px 15px;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(16,185,129,.08);
  }
  .hero-disclaimer-info::before { color: #34d399; font-size: 13px; }
  .hero-disclaimer-info b { color: #bbf7d0; }


  .regulasi-box {
    position: relative; overflow: hidden;
    padding: 12px 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(5,150,105,.07));
    border: 1px solid rgba(52,211,153,.42);
    color: #a7f3d0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(16,185,129,.07);
  }
  .regulasi-box::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, #6ee7b7, #10b981);
  }
  .regulasi-title {
    font-size: 10.5px; line-height: 1.4; font-weight: 700; color: #d1fae5;
    letter-spacing: .1px; margin-bottom: 4px;
  }
  .regulasi-text {
    font-size: 10.5px; line-height: 1.55; color: #a7f3d0;
  }
  .regulasi-text b { color: #ecfdf5; font-weight: 700; }

  html[data-theme="light"] {
    --bg-primary: #f4f7f8;
    --bg-secondary: rgba(255,255,255,.96);
    --bg-card: rgba(255,255,255,.96);
    --bg-card2: #edf3f2;
    --border: rgba(15,81,67,.12);
    --border-light: rgba(15,81,67,.18);
    --text-primary: #102a2a;
    --text-secondary: #526967;
    --text-muted: #758884;
  }
  html[data-theme="light"] body {
    background: radial-gradient(circle at 0% 0%, rgba(16,185,129,.11), transparent 30%),
                radial-gradient(circle at 100% 0%, rgba(59,130,246,.08), transparent 25%),
                #f4f7f8;
  }
  html[data-theme="light"] .navbar {
    background: rgba(255,255,255,.88);
    border-bottom-color: rgba(15,81,67,.12);
    box-shadow: 0 8px 28px rgba(15,81,67,.07);
  }
  html[data-theme="light"] .hero {
    background: linear-gradient(120deg, #f8fffc 0%, #eef9f5 52%, #edf4ff 100%);
    border-color: rgba(16,185,129,.16);
    box-shadow: 0 22px 50px rgba(15,81,67,.08);
  }
  html[data-theme="light"] .hero::after { border-color: rgba(16,185,129,.16); }
  html[data-theme="light"] .hero-disclaimer-info,
  html[data-theme="light"] .regulasi-box {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf7);
    border-color: rgba(5,150,105,.28);
    color: #166534;
    box-shadow: 0 10px 24px rgba(5,150,105,.06);
  }
  html[data-theme="light"] .hero-disclaimer-info b,
  html[data-theme="light"] .regulasi-title,
  html[data-theme="light"] .regulasi-text b { color: #065f46; }
  html[data-theme="light"] .regulasi-text { color: #27715a; }
  html[data-theme="light"] .nav-links { background: #f1f6f5; border-color: rgba(15,81,67,.10); }
  html[data-theme="light"] .stat-card,
  html[data-theme="light"] .ringkasan-card,
  html[data-theme="light"] .alert-card,
  html[data-theme="light"] .cari-cepat,
  html[data-theme="light"] .chart-card,
  html[data-theme="light"] .chatbot-card,
  html[data-theme="light"] .laporan-card { box-shadow: 0 10px 26px rgba(15,81,67,.06); }

  .hero { overflow: hidden; }
  .hero::before { height: 3px; background: linear-gradient(90deg, transparent, #34d399, #60a5fa, #a78bfa, transparent); opacity: .9; }
  .cari-cepat, .chart-card, .chatbot-card, .laporan-card,
  .stat-card, .ringkasan-card, .alert-card {
    box-shadow: 0 14px 36px rgba(3,7,18,.08), inset 0 1px 0 rgba(255,255,255,.035);
  }
  .cari-cepat, .chart-card, .chatbot-card, .laporan-card { border-color: rgba(148,163,184,.18); }
  .section-title::after { background: linear-gradient(90deg, var(--border), transparent); }
  .btn-download:not(.secondary), .btn-sirup {
    background: linear-gradient(135deg, #10b981, #059669);
    border: 1px solid rgba(110,231,183,.28);
    box-shadow: 0 10px 24px rgba(5,150,105,.22), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .btn-download:not(.secondary):hover, .btn-sirup:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .data-table tr:hover td, .opd-table tr:hover td { background: rgba(91,140,255,.045); }
  .cari-cepat, .chart-card, .chatbot-card, .laporan-card { border-radius: 18px; background: var(--bg-card); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.05); }
  .cari-cepat { padding: 20px; border-color: var(--border-light); }
  .cari-input-wrap, .search-input, .chat-input { border-radius: 12px; }
  .cari-input-wrap { padding: 13px 16px; }
  .cari-chip, .filter-chip, .quick-chip, .chat-chip { border-radius: 999px; }
  .stats-row { gap: 14px; }
  .stat-card, .ringkasan-card, .alert-card {
    position: relative; overflow: hidden; border-radius: 16px;
    background: var(--bg-card); border-color: var(--border);
    box-shadow: 0 10px 26px rgba(0,0,0,.045);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .stat-card:hover, .ringkasan-card:hover, .alert-card:hover { transform: translateY(-3px); border-color: rgba(91,140,255,.34); box-shadow: 0 16px 34px rgba(0,0,0,.09); }
  .stat-card::before { content:''; position:absolute; left:0; top:0; width:100%; height:3px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-green)); opacity:.85; }
  .stat-number { font-size: 28px; letter-spacing: -1px; }
  .section-title { margin-top: 6px; margin-bottom: 14px; font-size: 10.5px; color: var(--text-muted); }
  .ringkasan-card { padding: 19px 18px; }
  .ringkasan-value { font-size: 23px; }
  .rincian-panel { border-radius: 14px; background: var(--bg-card2); }
  .data-table, .opd-table { border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.045); }
  .data-table thead tr, .opd-table th { background: color-mix(in srgb, var(--bg-card2) 88%, transparent); }
  .data-table td { padding-top: 14px; padding-bottom: 14px; }
  .badge { border-radius: 999px; padding: 4px 10px; }
  .bottom-row { gap: 18px; }
  .chat-avatar { border-radius: 12px; box-shadow: 0 8px 18px rgba(91,140,255,.18); }
  .footer { margin-top: 24px; background: transparent; border-top-color: var(--border); }
  @media (max-width: 900px) {
    .navbar { padding: 0 16px; }
    .main { padding: 18px 16px; }
    .hero { padding: 30px 24px; min-height: auto; }
    .hero::after { opacity:.55; }
  }
  @media (max-width: 600px) {
    .navbar { height: 58px; }
    .mobile-menu { top:58px; backdrop-filter: blur(18px); }
    .main { padding: 14px 12px; }
    .hero { padding: 26px 18px; border-radius: 18px; text-align:left; }
    .hero h1 { font-size: 27px; }
    .hero p { font-size: 12px; }
    .hero-disclaimer-stack { align-items: stretch; }
    .hero-disclaimer, .hero-disclaimer-info { width:100%; }
    .stats-row { gap: 10px; }
    .stat-card { padding: 15px 10px; }
    .cari-cepat { padding: 15px; border-radius: 14px; }
  }

  .btn-sirup {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
  }
  .btn-sirup:hover, .btn-sirup:focus { color: #ffffff !important; }
  html[data-theme="light"] .btn-sirup { color: #ffffff !important; }


html[data-theme="light"] {
  --bg-primary: #E2E7ED;
  --bg-secondary: #EDF1F5;
  --bg-card: #EDF1F5;
  --bg-card2: #D7DEE6;
  --border: #C7D0DA;
  --border-light: #B8C3CF;
  --text-primary: #17212B;
  --text-secondary: #465464;
  --text-muted: #6B7887;
}
html[data-theme="light"] body { background: var(--bg-primary); }
html[data-theme="light"] .navbar { background: rgba(237,241,245,.94); border-bottom-color:#C7D0DA; box-shadow:0 6px 22px rgba(44,62,80,.08); }
html[data-theme="light"] .hero { background: linear-gradient(135deg,#EDF1F5 0%,#E8EEF3 52%,#E2E9EF 100%); border-color:#C7D0DA; box-shadow:0 18px 45px rgba(44,62,80,.10); }
html[data-theme="light"] .stat-card, html[data-theme="light"] .ringkasan-card, html[data-theme="light"] .alert-card, html[data-theme="light"] .chart-card, html[data-theme="light"] .laporan-card { box-shadow:0 8px 24px rgba(44,62,80,.07); }
html[data-theme="light"] .btn-sirup { color:#fff !important; text-shadow:0 1px 1px rgba(0,0,0,.12); }



  .hero {
    display:grid !important; grid-template-columns:minmax(0, 1.38fr) minmax(330px,.72fr);
    align-items:center; column-gap:20px; min-height:390px !important; padding:42px 46px !important;
    isolation:isolate;
  }
  .hero > :not(.hero-3d-visual){ position:relative; z-index:3; }
  .hero-copy { min-width:0; }
  .hero-3d-visual { position:relative; z-index:2; height:350px; display:flex; align-items:center; justify-content:center; perspective:1200px; }
  .hero-3d-stage { position:relative; width:330px; height:330px; transform-style:preserve-3d; transform:rotateX(4deg) rotateY(-7deg); animation:heroFloat 5.5s ease-in-out infinite; }
  .hero-3d-glow { position:absolute; inset:32px; border-radius:50%; background:radial-gradient(circle, rgba(0,229,190,.26), rgba(24,113,255,.13) 42%, transparent 72%); filter:blur(24px); transform:translateZ(-25px); }
  .hero-3d-orbit { position:absolute; left:50%; top:53%; width:355px; height:118px; border:2px solid rgba(0,229,190,.42); border-radius:50%; transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-12deg) translateZ(-8px); box-shadow:0 0 22px rgba(0,229,190,.22); }
  .hero-3d-orbit::before,.hero-3d-orbit::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#27e7c0;box-shadow:0 0 14px #27e7c0;}
  .hero-3d-orbit::before{left:11%;top:44%;}.hero-3d-orbit::after{right:10%;top:42%;background:#3b82f6;box-shadow:0 0 14px #3b82f6;}
  .hero-logo-layer,.hero-logo-front{position:absolute;inset:14px;width:302px;height:302px;object-fit:contain;left:50%;top:50%;transform-style:preserve-3d;filter:drop-shadow(0 25px 25px rgba(0,0,0,.5));}
  .hero-logo-layer{transform:translate(-50%,-50%) translate3d(0,0,-8px);opacity:.35;filter:brightness(.42) saturate(1.4) drop-shadow(0 7px 0 rgba(4,31,61,.8));}
  .hero-logo-layer.l1{transform:translate(-50%,-50%) translate3d(8px,8px,-5px);opacity:.55;}
  .hero-logo-layer.l2{transform:translate(-50%,-50%) translate3d(5px,5px,-2px);opacity:.72;}
  .hero-logo-layer.l3{transform:translate(-50%,-50%) translate3d(2px,2px,1px);opacity:.9;}
  .hero-logo-front{transform:translate(-50%,-50%) translateZ(12px);filter:drop-shadow(0 20px 18px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(0,226,190,.18));}
  html[data-theme="light"] .hero-logo-layer {
    filter: brightness(.55) saturate(1.5) drop-shadow(0 0 16px rgba(52,211,153,.85)) drop-shadow(0 7px 10px rgba(16,185,129,.5));
  }
  html[data-theme="light"] .hero-logo-front {
    filter: drop-shadow(0 0 28px rgba(16,185,129,.6)) drop-shadow(0 0 14px rgba(110,231,183,.55));
  }
  .hero-logo-highlight{position:absolute;inset:34px;border-radius:42%;background:linear-gradient(125deg,rgba(255,255,255,.15),transparent 27%,transparent 70%,rgba(0,217,255,.08));transform:translateZ(22px);pointer-events:none;mix-blend-mode:screen;}
  .hero-3d-shadow{position:absolute;left:50%;bottom:0;width:240px;height:28px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(9px);}
  @keyframes heroFloat{0%,100%{transform:rotateX(4deg) rotateY(-7deg) translateY(0)}50%{transform:rotateX(6deg) rotateY(-4deg) translateY(-9px)}}
  .hero h1 { position:relative; z-index:4; }
  .hero p,.hero-disclaimer-stack { position:relative; z-index:4; }
  @media (max-width:900px){
   .hero{grid-template-columns:1fr; min-height:0 !important; padding:30px 24px !important;}
   .hero-3d-visual{height:320px;order:-1;margin:-8px 0 0;}
   .hero-3d-stage{transform:scale(.82) rotateX(4deg) rotateY(-7deg);}
   .hero-copy{z-index:4;text-align:left;}
  }
  @media (max-width:600px){
   .hero{padding:22px 18px 24px !important;}
   .hero-3d-visual{height:260px;}
   .hero-3d-stage{transform:scale(.64) rotateX(4deg) rotateY(-7deg);}
  }

  .hero-3d-shadow, .hero-3d-orbit { display:none !important; }
  .hero-3d-stage { height:320px; }
  .hero-logo-layer { filter:drop-shadow(0 22px 28px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(0,226,190,.14)); }