:root{--bg:#0f172a;--surface:#111827;--text:#e5e7eb;--muted:#9ca3af;--primary:#60a5fa;--accent:#8b5cf6;--ring:#93c5fd}
*{box-sizing:border-box}
body{margin:0;background:#0e1322;color:var(--text);font-family:Inter,system-ui,Arial,sans-serif;line-height:1.5}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.95}

/* buttons */
a.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border:1px solid #2b3447;border-radius:.5rem;background:#151c2f;transition:.15s ease}
a.btn:hover{background:#1a2240;border-color:#344059}
a.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
a.btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#0b1020;border-color:transparent;font-weight:600}
a.btn.primary:hover{filter:saturate(1.05) brightness(1.05)}

/* header */
.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(16,23,42,.6);display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #1f2937;z-index:10}
.brand{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:14px;align-items:center}
.nav a{padding:.25rem .25rem;border-radius:.375rem}
.nav a.active{color:#dbeafe}
.nav a:hover{background:rgba(148,163,184,.08)}

.page main{padding:40px 20px;max-width:1100px;margin:0 auto}
.hero{padding:40px 0}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);max-width:680px}
.cta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}

.features{margin-top:48px}
.grid{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid li{background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.grid li .title{display:flex;align-items:center;gap:10px;font-weight:700}
.grid li .title .icon{width:28px;height:28px;flex:0 0 28px;display:block;opacity:.92}
.grid li .desc{color:var(--muted)}
.grid li .more{margin-top:6px;color:#bfdbfe}

.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#0f172a;border:1px solid #253045;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.card .actions{margin-top:8px}
.card.featured{border-color:transparent;background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(139,92,246,.18));box-shadow:0 0 0 1px rgba(96,165,250,.25) inset}
.price{margin-top:6px;font-size:18px;font-weight:700}

.section-title{font-size:28px;margin:28px 0 12px}
.quickstart pre{background:#0b1020;border:1px solid #1f2937;border-radius:8px;padding:10px;overflow:auto;margin:8px 0;color:#cbd5e1}
.quickstart code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.muted{color:var(--muted)}
.footer{padding:28px 20px;border-top:1px solid #1f2937;color:var(--muted);text-align:center}
.footer .links{margin-top:8px;display:flex;gap:16px;justify-content:center}

/* hover for cards */
.grid li{transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;will-change:transform}
.grid li:hover,.grid li:focus-within{background:#121a2e;border-color:#334155;transform:translateY(-3px) scale(1.01);box-shadow:0 14px 32px rgba(0,0,0,.35),0 0 0 1px rgba(96,165,250,.35) inset}

/* responsive */
@media (max-width: 1024px){
  .grid{grid-template-columns:1fr}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:38px}
}
@media (max-width: 640px){
  .cols{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .hero{padding:28px 0}
}

/* --- Mobile hamburger navigation --- */
.menu{display:none;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid #2b3447;border-radius:.5rem;background:#151c2f;color:var(--text);cursor:pointer}
.menu:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.menu .burger{position:relative;display:block;width:22px;height:2px;background:#e5e7eb;border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.menu .burger:before,.menu .burger:after{content:"";position:absolute;left:0;width:22px;height:2px;background:#e5e7eb;border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.menu .burger:before{top:-6px}
.menu .burger:after{top:6px}
.header.open .menu .burger{background:transparent}
.header.open .menu .burger:before{transform:translateY(6px) rotate(45deg)}
.header.open .menu .burger:after{transform:translateY(-6px) rotate(-45deg)}

@media (min-width: 769px){
  .menu{display:none!important}
  .nav{display:flex!important;position:static!important;background:transparent!important;padding:0!important;border:0!important;flex-direction:row!important;gap:14px!important}
}
@media (max-width: 768px){
  .header{position:sticky;top:0;z-index:20}
  .menu{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:56px;background:rgba(16,23,42,.98);padding:12px 16px;border-bottom:1px solid #1f2937;flex-direction:column;gap:10px}
  .header.open .nav{display:flex}
  .nav a.btn{width:100%;justify-content:center}
}

/* Auth modal */
#auth-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1000; }
#auth-modal.open { display: flex; animation: fadeIn .15s ease-out }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.auth-card { background: #0f172a; color: var(--text); padding: 20px 20px; border-radius: 14px; width: min(460px, 94%); border: 1px solid #253045; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(96,165,250,.12) inset; transform: translateY(6px) scale(.98); animation: pop .18s ease-out forwards }
@keyframes pop { to { transform: translateY(0) scale(1) } }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 12px; align-items: center }
.auth-tabs button { padding: 6px 10px; border: 1px solid #2b3447; background: #151c2f; color: var(--text); border-radius: 8px; cursor: pointer }
.auth-tabs button.active { background: linear-gradient(135deg,var(--primary),var(--accent)); border-color: transparent; color: #0b1020; font-weight: 600 }
.auth-fields { display: grid; gap: 10px }
.auth-fields label { display: grid; gap: 6px; font-size: 14px; color: #cbd5e1 }
.auth-fields input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #2b3447; background: #0b1020; color: var(--text) }
.auth-fields input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.25) }
.auth-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; justify-content: flex-start }
#auth-error { color: #fecaca; background: #7f1d1d; border: 1px solid #991b1b; padding: 6px 8px; border-radius: 8px; margin: 6px 0 10px; font-size: 13px }
#auth-error:empty { display: none }
button.btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid #2b3447; border-radius: .5rem; background: #151c2f; color: var(--text); cursor: pointer; transition: .15s ease }
button.btn:hover { background: #1a2240; border-color: #344059 }
button.btn.primary { background: linear-gradient(135deg,var(--primary),var(--accent)); color: #0b1020; border-color: transparent; font-weight: 600 }

/* Navigation auth buttons default */
#nav-logout, #nav-dashboard { display: none }