<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dark Pricing Table</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0B0F19;font-family:Inter,system-ui,sans-serif;min-height:100vh;
display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
.toggle-wrap{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.toggle-label{font-size:13px;color:#9BA3BF;font-weight:500}
.toggle{width:44px;height:24px;background:#1E2333;border-radius:999px;position:relative;
cursor:pointer;transition:background .2s;border:none}
.toggle.on{background:linear-gradient(135deg,#6C63FF,#8B5CF6)}
.toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;
background:#F0F4FF;border-radius:50%;transition:transform .2s}
.toggle.on .toggle-knob{transform:translateX(20px)}
.badge-save{background:rgba(0,212,170,.12);color:#00D4AA;font-size:10px;font-weight:700;
padding:2px 8px;border-radius:999px;border:1px solid rgba(0,212,170,.2)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;width:100%}
.plan{background:#111827;border:1px solid #1E2333;border-radius:20px;padding:28px;
display:flex;flex-direction:column;gap:16px;transition:border-color .2s,transform .2s}
.plan:hover{transform:translateY(-4px)}
.plan--featured{background:linear-gradient(145deg,#0F1629,#131b2e);
border-color:rgba(108,99,255,.4);
box-shadow:0 0 0 1px rgba(108,99,255,.15),0 20px 60px rgba(108,99,255,.15)}
</style>
</head>
<body>
<div class="toggle-wrap">
<span class="toggle-label">Monthly</span>
<button class="toggle" id="toggle" onclick="switchBilling()">
<div class="toggle-knob"></div>
</button>
<span class="toggle-label">Annual</span>
<span class="badge-save">Save 20%</span>
</div>
<!-- Full source unlocked with Pro — flowtive.site/#pricing -->
</body>
</html>