:root {
    --bg: #191127;
    --surface: #23133a;
    --surface2: #1f1232;
    --border: #3a1c63;
    --accent: #883CF0;
    --accent2: #7c3aed;
    --danger: #ff4060;
    --warn: #ffb800;
    --text: #c8dce8;
    --text-dim: #d6d6d6;
    --glow: 0 0 20px rgba(92, 0, 229, 0.3);
    --glow2: 0 0 20px rgba(111, 0, 255, 0.3);
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Grid BG */
  body::before {
    content:'';
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(103, 0, 229, 0.043) 1px, transparent 1px),
      linear-gradient(90deg, rgba(103, 0, 229, 0.042) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events:none; z-index:0;
  }

  /* ── HEADER ── */
  header {
    position:sticky; top:0; z-index:100;
    background: #180f26;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    display:flex; align-items:center; justify-content:space-between;
    height: 64px;
  }

  .logo {
    display:flex; align-items:center; gap:10px;
    font-family:'Syne',sans-serif; font-weight:800;
    font-size:1.1rem; letter-spacing:0.05em;
    color:#fff;
  }
  .logo-icon {
    width:32px; height:32px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; box-shadow: var(--glow);
  }

  nav { display:flex; gap:1.5rem; }
  nav button {
    background:none; border:none; cursor:pointer;
    color: var(--text-dim); font-family:inherit; font-size:.75rem;
    letter-spacing:.08em; padding:.4rem .8rem; border-radius:6px;
    transition: all .2s; text-transform:uppercase;
  }
  nav button:hover, nav button.active {
    color: var(--accent); background: #23133a9f;
  }

  .header-right { display:flex; align-items:center; gap:1rem; }
  .status-dot {
    width:8px; height:8px; border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.6;transform:scale(1.3)}
  }
  .status-label { font-size:.7rem; color:var(--text-dim); }

  /* ── MAIN LAYOUT ── */
  main { position:relative; z-index:1; }

  /* ── HERO ── */
  .hero {
    padding: 6rem 2rem 4rem;
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:center;
  }

  .hero-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    background: #1f1232; border:1px solid #3a1c63;
    color:var(--accent); font-size:.65rem; letter-spacing:.1em;
    text-transform:uppercase; padding:.35rem .8rem; border-radius:100px;
    margin-bottom:1.5rem;
  }

  h1 {
    font-family:'Syne',sans-serif; font-weight:800;
    font-size:clamp(2rem,4vw,3.2rem); line-height:1.05;
    color:#fff; margin-bottom:1rem;
  }
  h1 span {
    color: var(--accent);
    /* -webkit-background-clip:text; */
     /* -webkit-text-fill-color:transparent; */
  }

  .hero p {
    color:var(--text-dim); font-size:.85rem; line-height:1.8;
    margin-bottom:2rem; max-width:420px;
  }

  .btn-row { display:flex; gap:1rem; flex-wrap:wrap; }
  .btn {
    padding:.75rem 1.6rem; border-radius:8px;
    font-family:inherit; font-size:.75rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
    transition: all .25s; border:none;
  }
  .btn-primary {
    background: var(--accent); color:#050a0f;
    box-shadow: var(--glow);
  }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 30px rgba(137, 0, 229, 0.5); }
  .btn-outline {
    background:transparent; color:var(--accent);
    border:1px solid #3a1c63;
  }
  .btn-outline:hover { background:#1f1232; }

  /* ── TERMINAL WIDGET ── */
  .terminal {
    background: var(--surface); border:1px solid var(--border);
    border-radius:14px; overflow:hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), var(--glow);
  }
  .term-bar {
    background: var(--surface2); padding:.75rem 1rem;
    display:flex; align-items:center; gap:.5rem;
    border-bottom:1px solid var(--border);
  }
  .term-dot { width:10px;height:10px;border-radius:50%; }
  .term-title {
    margin-left:auto; margin-right:auto;
    font-size:.65rem; color:var(--text-dim); letter-spacing:.08em;
  }
  .term-body { padding:1.25rem; font-size:.72rem; line-height:1.9; }
  .term-line { display:flex; align-items:center; gap:.5rem; margin-bottom:.15rem; }
  .term-prompt { color:var(--accent2); }
  .term-cmd { color:#fff; }
  .term-out { color:var(--text-dim); padding-left:1.2rem; }
  .term-ok { color:var(--accent); }
  .term-err { color:var(--danger); }
  .term-warn { color:var(--warn); }

  /* typing cursor */
  .cursor {
    display:inline-block; width:8px; height:13px;
    background:var(--accent); vertical-align:middle;
    animation: blink .8s infinite;
  }
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

  /* ── SECTION ── */
  .section {
    max-width:1200px; margin:0 auto; padding:4rem 2rem;
  }
  .section-header {
    display:flex; align-items:baseline; gap:1rem;
    margin-bottom:2.5rem;
  }
  .section-num {
    font-size:.65rem; color:var(--accent); letter-spacing:.15em;
    text-transform:uppercase; border:1px solid #3a1c63;
    padding:.2rem .6rem; border-radius:4px;
  }
  .section-title {
    font-family:'Syne',sans-serif; font-weight:700;
    font-size:1.6rem; color:#fff;
  }

  /* ── STAT CARDS ── */
  .stats-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
    margin-bottom:3rem;
  }
  .stat-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:1.5rem;
    position:relative; overflow:hidden;
    transition:transform .2s, border-color .2s;
    cursor:default;
  }
  .stat-card:hover {
    transform:translateY(-3px);
    border-color: #5e309d;
  }
  .stat-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:2px;
  }
  .stat-card.green::after { background:linear-gradient(90deg,var(--accent),transparent); }
  .stat-card.blue::after  { background:linear-gradient(90deg,var(--accent2),transparent); }
  .stat-card.red::after   { background:linear-gradient(90deg,var(--danger),transparent); }
  .stat-card.warn::after  { background:linear-gradient(90deg,var(--warn),transparent); }

  .stat-label { font-size:.62rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.6rem; }
  .stat-value { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:#fff; }
  .stat-sub { font-size:.62rem; margin-top:.3rem; }
  .stat-sub.up { color:var(--accent); }
  .stat-sub.down { color:var(--danger); }

  /* ── ACCOUNT TABLE ── */
  .table-wrap {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; overflow:hidden;
  }
  .table-header {
    padding:1rem 1.5rem; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .table-title { font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem; }

  .search-box {
    background: var(--surface2); border:1px solid var(--border);
    border-radius:6px; padding:.45rem .9rem;
    display:flex; align-items:center; gap:.5rem;
    color:var(--text-dim); font-size:.72rem;
  }
  .search-box input {
    background:none; border:none; outline:none;
    color:var(--text); font-family:inherit; font-size:.72rem; width:160px;
  }
  .search-box input::placeholder { color:var(--text-dim); }

  table { width:100%; border-collapse:collapse; }
  thead tr { border-bottom:1px solid var(--border); }
  th {
    text-align:left; padding:.85rem 1.5rem;
    font-size:.62rem; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.1em; font-weight:400;
  }
  tbody tr {
    border-bottom:1px solid #5e309d;
    transition:background .15s; cursor:pointer;
  }
  tbody tr:hover { background:#1f1232; }
  td { padding:.85rem 1.5rem; font-size:.72rem; }

  .badge {
    display:inline-block; padding:.2rem .6rem; border-radius:4px;
    font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  }
  .badge-active { background:#291a3e; color:var(--accent); }
  .badge-inactive { background:rgba(255,64,96,0.12); color:var(--danger); }
  .badge-review { background:rgba(255,184,0,0.12); color:var(--warn); }
  .badge-svc { background:#3a1c6350; color:var(--accent2); }
  .badge-priv { background:rgba(200,100,255,0.12); color:#c864ff; }

  .risk-bar-wrap { display:flex; align-items:center; gap:.6rem; }
  .risk-bar {
    height:4px; border-radius:2px; background:var(--surface2);
    flex:1; overflow:hidden;
  }
  .risk-fill {
    height:100%; border-radius:2px;
    transition:width .4s ease;
  }
  .risk-fill.low  { background:var(--accent); }
  .risk-fill.med  { background:var(--warn); }
  .risk-fill.high { background:var(--danger); }

  /* ── FEATURES GRID ── */
  .features-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
  }
  .feature-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:1.75rem;
    transition:all .25s; cursor:default;
    position:relative; overflow:hidden;
  }
  .feature-card:hover {
    border-color:#5e309d;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transform:translateY(-3px);
  }
  .feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,#2a1647,transparent);
    opacity:0; transition:opacity .25s;
  }
  .feature-card:hover::before { opacity:1; }

  .feature-icon {
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; margin-bottom:1rem;
  }
  .fi-green { background:rgba(0,229,160,0.12); }
  .fi-blue  { background:rgba(0,170,255,0.12); }
  .fi-red   { background:rgba(255,64,96,0.12); }
  .fi-warn  { background:rgba(255,184,0,0.12); }
  .fi-purple{ background:rgba(200,100,255,0.12); }
  .fi-teal  { background:rgba(0,229,200,0.12); }

  .feature-title {
    font-family:'Syne',sans-serif; font-weight:700;
    font-size:.95rem; color:#fff; margin-bottom:.6rem;
  }
  .feature-desc { font-size:.72rem; color:var(--text-dim); line-height:1.8; }

  /* ── TIMELINE ── */
  .timeline { position:relative; padding-left:2rem; }
  .timeline::before {
    content:''; position:absolute; left:.4rem; top:0; bottom:0;
    width:1px; background:var(--border);
  }
  .tl-item {
    position:relative; margin-bottom:1.75rem; padding-left:1.5rem;
  }
  .tl-dot {
    position:absolute; left:-1.62rem; top:.3rem;
    width:10px; height:10px; border-radius:50%;
    border:2px solid;
  }
  .tl-dot.green { background:rgba(0,229,160,0.3); border-color:var(--accent); }
  .tl-dot.blue  { background:rgba(0,170,255,0.3); border-color:var(--accent2); }
  .tl-dot.red   { background:rgba(255,64,96,0.3); border-color:var(--danger); }
  .tl-dot.warn  { background:rgba(255,184,0,0.3); border-color:var(--warn); }

  .tl-time { font-size:.62rem; color:var(--text-dim); margin-bottom:.2rem; }
  .tl-event { font-size:.78rem; color:#fff; }
  .tl-detail { font-size:.68rem; color:var(--text-dim); margin-top:.15rem; }

  /* ── POLICY ACCORDION ── */
  .accordion { display:flex; flex-direction:column; gap:.75rem; }
  .acc-item {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; overflow:hidden;
    transition:border-color .2s;
  }
  .acc-item.open { border-color:#5e309d; }
  .acc-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 1.4rem; cursor:pointer;
    transition:background .15s;
  }
  .acc-head:hover { background:#1f1232; }
  .acc-head-left { display:flex; align-items:center; gap:.8rem; }
  .acc-head-icon { font-size:.95rem; }
  .acc-head-title { font-size:.8rem; color:#fff; font-weight:600; }
  .acc-chevron {
    color:var(--text-dim); font-size:.8rem;
    transition:transform .25s;
  }
  .acc-item.open .acc-chevron { transform:rotate(90deg); }
  .acc-body {
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
  }
  .acc-item.open .acc-body { max-height:300px; }
  .acc-content {
    padding:0 1.4rem 1.2rem;
    font-size:.72rem; color:var(--text-dim); line-height:1.9;
    border-top:1px solid var(--border);
    padding-top:.9rem;
  }
  .acc-content ul { padding-left:1rem; }
  .acc-content li { margin-bottom:.3rem; }

  /* ── DONUT ── */
  .analytics-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  }
  .chart-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:1.75rem;
  }
  .chart-title {
    font-family:'Syne',sans-serif; font-weight:700;
    font-size:.9rem; color:#fff; margin-bottom:1.5rem;
  }
  .donut-wrap {
    display:flex; align-items:center; gap:2rem;
  }
  svg.donut { width:130px; height:130px; transform:rotate(-90deg); flex-shrink:0; }
  .donut-legend { flex:1; display:flex; flex-direction:column; gap:.6rem; }
  .legend-item { display:flex; align-items:center; gap:.6rem; font-size:.68rem; }
  .legend-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
  .legend-label { color:var(--text-dim); flex:1; }
  .legend-val { color:#fff; font-weight:600; }

  /* bar chart */
  .bar-chart { display:flex; flex-direction:column; gap:.7rem; }
  .bar-row { display:flex; align-items:center; gap:.8rem; }
  .bar-label { font-size:.65rem; color:var(--text-dim); width:90px; text-align:right; flex-shrink:0; }
  .bar-track { flex:1; height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; }
  .bar-fill {
    height:100%; border-radius:3px;
    background:linear-gradient(90deg,var(--accent2),var(--accent));
    transition:width .6s ease .1s;
  }
  .bar-num { font-size:.65rem; color:var(--text-dim); width:30px; }

  /* ── CTA ── */
  .cta-section {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(156, 0, 229, 0.05) 100%);
    border:1px solid var(--border); border-radius:20px;
    padding:4rem; text-align:center; margin:4rem 2rem;
    position:relative; overflow:hidden;
  }
  .cta-section::before {
    content:''; position:absolute;
    top:-80px; right:-80px;
    width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(103, 0, 229, 0.08), transparent 70%);
    pointer-events:none;
  }
  .cta-section::after {
    content:''; position:absolute;
    bottom:-80px; left:-80px;
    width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(157, 0, 255, 0.06), transparent 70%);
    pointer-events:none;
  }
  .cta-section h2 {
    font-family:'Syne',sans-serif; font-weight:800;
    font-size:2rem; color:#fff; margin-bottom:.75rem;
  }
  .cta-section p { color:var(--text-dim); font-size:.8rem; margin-bottom:2rem; line-height:1.8; }

  /* ── MODAL ── */
  .modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(12, 5, 15, 0.85); backdrop-filter:blur(8px);
    z-index:1000; align-items:center; justify-content:center;
  }
  .modal-overlay.show { display:flex; }
  .modal {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; width:500px; max-width:90vw;
    box-shadow:0 40px 80px rgba(0, 0, 0, 0.6), var(--glow);
    animation: modalIn .25s ease;
  }
  @keyframes modalIn {
    from{opacity:0;transform:translateY(20px) scale(.97)}
    to{opacity:1;transform:none}
  }
  .modal-head {
    padding:1.5rem; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .modal-title { font-family:'Syne',sans-serif; font-weight:700; color:#fff; }
  .modal-close {
    background:none; border:none; cursor:pointer;
    color:var(--text-dim); font-size:1.1rem;
    width:28px; height:28px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s;
  }
  .modal-close:hover { background:rgba(255,64,96,0.15); color:var(--danger); }
  .modal-body { padding:1.5rem; }
  .form-group { margin-bottom:1rem; }
  .form-label { font-size:.65rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem; display:block; }
  .form-input {
    width:100%; background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; padding:.65rem .9rem;
    color:var(--text); font-family:inherit; font-size:.78rem;
    outline:none; transition:border-color .2s;
  }
  .form-input:focus { border-color:#5e309d; }
  .form-select {
    width:100%; background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; padding:.65rem .9rem;
    color:var(--text); font-family:inherit; font-size:.78rem;
    outline:none; cursor:pointer; appearance:none;
  }
  .modal-foot {
    padding:1.25rem 1.5rem; border-top:1px solid var(--border);
    display:flex; justify-content:flex-end; gap:.75rem;
  }

  /* ── NOTIFICATION ── */
  .notif {
    position:fixed; top:80px; right:1.5rem; z-index:2000;
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:.9rem 1.25rem;
    display:flex; align-items:center; gap:.75rem;
    font-size:.72rem; max-width:320px;
    transform:translateX(120%); transition:transform .3s ease;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
  }
  .notif.show { transform:translateX(0); }
  .notif-icon { font-size:1rem; }
  .notif-text { color:#fff; }
  .notif-sub { font-size:.65rem; color:var(--text-dim); }

  /* ── TABS ── */
  .tabs { display:flex; gap:.5rem; margin-bottom:1.75rem; }
  .tab {
    padding:.5rem 1.1rem; border-radius:6px;
    background:none; border:1px solid transparent;
    cursor:pointer; font-family:inherit; font-size:.7rem;
    color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em;
    transition:all .2s;
  }
  .tab:hover { color:var(--accent); border-color:#5e309d; }
  .tab.active {
    background:#1f1232; color:var(--accent);
    border-color:#5e309d;
  }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }

  /* ── FOOTER ── */
  footer {
    border-top:1px solid var(--border);
    padding:2rem; text-align:center;
    font-size:.65rem; color:var(--text-dim);
    position:relative; z-index:1;
  }

  /* ── RESPONSIVE ── */
  @media(max-width:900px) {
    .hero { grid-template-columns:1fr; gap:2rem; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .features-grid { grid-template-columns:1fr 1fr; }
    .analytics-grid { grid-template-columns:1fr; }
  }
  @media(max-width:600px) {
    .stats-grid { grid-template-columns:1fr 1fr; }
    .features-grid { grid-template-columns:1fr; }
    nav { display:none; }
  }

  /* entry animations */
  .fade-in {
    opacity:0; transform:translateY(18px);
    animation: fadeUp .6s ease forwards;
  }
  @keyframes fadeUp {
    to{opacity:1;transform:none}
  }
  .delay-1{animation-delay:.1s}
  .delay-2{animation-delay:.2s}
  .delay-3{animation-delay:.3s}
  .delay-4{animation-delay:.4s}