
:root{
  --brand: #3B82F6;
  --brand-ink: #0b1220;
  --bg: #0b0e14;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --card: #111827;
  --border: #1f2937;
  --success: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--text);background:linear-gradient(180deg,#0b0e14, #0b0e14 60%, #0f1624)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(11,14,20,.7);border-bottom:1px solid var(--border);z-index:10}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.3px}
.brand .logo{width:28px;height:28px;border-radius:8px;background:radial-gradient(120% 120% at 30% 20%, var(--brand) 0%, #ffffff33 60%, transparent 60%), linear-gradient(135deg, var(--brand), #ffffff22)}
.brand span{font-size:18px}
.nav a{padding:10px 12px;border-radius:10px;color:var(--muted)}
.nav a:hover{background:#ffffff10;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:var(--brand);color:#0b0e14;font-weight:700;border:0;cursor:pointer;transition:.2s box-shadow,.2s transform}
.btn:hover{box-shadow:0 8px 24px #00000066;transform:translateY(-1px)}
.btn.secondary{background:#ffffff10;color:var(--text);border:1px solid #ffffff22}
.hero{padding:56px 0 32px;border-bottom:1px solid var(--border);background:
radial-gradient(600px 200px at 10% -10%, #ffffff10, transparent 60%),
radial-gradient(600px 200px at 90% -10%, #ffffff0a, transparent 60%)}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 14px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 24px}
.grid{display:grid;gap:16px}
.grid.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:24px 0 8px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.section{padding:32px 0;border-bottom:1px solid var(--border)}
.section h2{margin:0 0 12px;font-size:26px}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;background:#00000033;border:1px solid #ffffff22;border-bottom-width:2px;padding:2px 6px;border-radius:8px}
.footer{padding:28px 0;color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#ffffff10;border:1px solid #ffffff22;color:var(--text);font-weight:600;font-size:12px}
.list li{margin:8px 0;color:var(--muted)}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.small{font-size:12px;color:var(--muted)}
main{min-height:50vh}
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.tabbar a{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#ffffff08;color:var(--text)}
.tabbar a:hover{background:#ffffff12}
.anchor{scroll-margin-top:80px}
/* Fullscreen loader */
.bootloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:radial-gradient(50% 50% at 50% 30%, #ffffff10, transparent 70%), #0b0e14;
  transition:opacity .25s ease;
}
.bootloader .spinner{
  width:36px; height:36px; border:3px solid rgba(255,255,255,.25);
  border-top-color:rgba(255,255,255,.9); border-radius:50%;
  animation:spin 1s linear infinite;
}
.bootloader .txt{ color:#e5e7eb; font-weight:600 }
@keyframes spin{ to{ transform:rotate(360deg)} }
html.ready .bootloader{ opacity:0; pointer-events:none }
/* Логотип в шапке */
.header .logo{
  width:40px; height:40px;
  background-image:none;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:8px;
}
.header .logo{ display:inline-block; vertical-align:middle; object-fit:contain; border-radius:8px; }
