:root,[data-theme="dark"]{--bg:#0a0e1a;--bg2:#0f1729;--surface:#121c2e;--border:#25344f;--border2:#344d72;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--nav-bg:rgba(10,14,26,.94);--card-hover:rgba(37,99,235,.08);--theme-toggle-bg:rgba(255,255,255,.07);--theme-toggle-border:#344d72}
[data-theme="light"]{--bg:#f0f4f8;--bg2:#e8eef5;--surface:#ffffff;--border:#cbd5e1;--border2:#94a3b8;--text:#0f172a;--text2:#475569;--text3:#64748b;--nav-bg:rgba(240,244,248,.95);--card-hover:rgba(37,99,235,.04);--theme-toggle-bg:rgba(0,0,0,.05);--theme-toggle-border:#94a3b8}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;transition:background .25s,color .25s}
nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:19px;color:var(--text)}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#06b6d4);display:flex;align-items:center;justify-content:center}
.nav-actions{display:flex;align-items:center;gap:8px}
.back-link{font-size:13px;font-weight:600;color:var(--text2);text-decoration:none;padding:7px 12px;border-radius:8px;border:1px solid var(--border);transition:background .15s,color .15s}
.back-link:hover{background:var(--theme-toggle-bg);color:var(--text)}
.theme-toggle{background:var(--theme-toggle-bg);border:1px solid var(--theme-toggle-border);color:var(--text2);border-radius:9px;padding:6px 10px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;width:36px;height:36px}
.theme-toggle:hover{transform:scale(1.1)}
main{max-width:1100px;margin:0 auto;padding:52px 28px 80px}
.page-header{text-align:center;margin-bottom:52px}
.page-label{font-size:12px;text-transform:uppercase;letter-spacing:3px;color:#3b82f6;font-weight:800;margin-bottom:12px}
.page-title{font-size:clamp(30px,4vw,48px);font-weight:900;letter-spacing:-1.5px;color:var(--text);margin-bottom:12px}
.page-desc{font-size:16px;color:var(--text2);max-width:540px;margin:0 auto;line-height:1.6}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;color:var(--text3);font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:48px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:14px;transition:border-color .2s,transform .2s,background .2s;position:relative;overflow:hidden}
.card:hover{border-color:#3b82f6;transform:translateY(-3px);background:var(--card-hover)}
.card-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.card-icon.blue{background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.25)}
.card-icon.cyan{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25)}
.card-icon.green{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25)}
.card-icon.amber{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25)}
.card-icon.purple{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25)}
.card-icon.rose{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.25)}
.card h3{font-size:17px;font-weight:800;color:var(--text);line-height:1.2}
.card p{font-size:13px;color:var(--text2);line-height:1.6;flex:1}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.card-arrow{font-size:18px;color:var(--text3);transition:transform .2s}
.card:hover .card-arrow{transform:translateX(4px);color:#3b82f6}
.badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.badge-live{background:rgba(0,255,136,.1);color:#00d97e;border:1px solid rgba(0,255,136,.2)}
.badge-beta{background:rgba(37,99,235,.12);color:#60a5fa;border:1px solid rgba(37,99,235,.25)}
.badge-dev{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.25)}
.badge-soon{background:rgba(100,116,139,.1);color:#94a3b8;border:1px solid rgba(100,116,139,.25)}
@media(max-width:600px){main{padding:36px 18px 60px}.grid{grid-template-columns:1fr}}

[data-theme="light"] .badge-live{color:#067647}
[data-theme="light"] .badge-beta{color:#1d4ed8}