/* ParadoxAPI — общий тёмный дизайн (Inter, indigo→purple, glow). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#06070b; --bg2:#0b0d14; --card:#11141f; --card2:#161a28;
  --fg:#eef1f8; --muted:#9aa3b8; --faint:#646d82;
  --accent:#7c8cff; --accent2:#b06cff;
  --border:#1d2230; --border2:#2a3142;
  --good:#4ade80; --bad:#ff6b6b; --warn:#fbbf24;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60rem 44rem at 75% -12%, rgba(124,140,255,.16), transparent 60%),
    radial-gradient(52rem 40rem at 8% -6%, rgba(176,108,255,.12), transparent 55%);
  background-attachment:fixed; min-height:100dvh;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.num{font-variant-numeric:tabular-nums;}
a{color:var(--accent); text-decoration:none;}
code,pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}

/* ---------- Navbar ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(6,7,11,.72); border-bottom:1px solid var(--border);}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; color:var(--fg); font-size:1.05rem;}
.brand .dot{width:13px; height:13px; border-radius:50%; background:var(--grad); box-shadow:0 0 18px rgba(124,140,255,.75);}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{color:var(--muted); padding:8px 13px; border-radius:9px; font-size:.92rem; font-weight:500; transition:color .15s, background .15s;}
.nav-links a:hover{color:var(--fg); background:rgba(255,255,255,.04);}
.nav-links a.cta{background:var(--grad); color:#fff; font-weight:600;}
.nav-links a.cta:hover{box-shadow:0 6px 20px rgba(124,140,255,.35);}
.burger{display:none; background:none; border:1px solid var(--border); color:var(--fg); border-radius:9px; padding:7px 10px; cursor:pointer;}
@media(max-width:720px){
  .nav-links{display:none; position:absolute; top:60px; right:16px; left:16px; flex-direction:column; align-items:stretch;
    background:var(--card); border:1px solid var(--border); border-radius:14px; padding:8px;}
  .nav-links.open{display:flex;}
  .burger{display:block;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:12px 22px; border-radius:12px;
  font-weight:600; font-size:.96rem; cursor:pointer; border:0; font-family:inherit; transition:transform .12s, box-shadow .2s, border-color .15s;}
.btn.primary{background:var(--grad); color:#fff; box-shadow:0 8px 28px rgba(124,140,255,.32);}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(124,140,255,.46);}
.btn.secondary{background:rgba(255,255,255,.03); border:1px solid var(--border2); color:var(--fg);}
.btn.secondary:hover{border-color:var(--accent); color:#fff;}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--fg); padding:8px 14px; font-size:.85rem;}
.btn.ghost:hover{border-color:var(--accent);}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- Hero ---------- */
.hero{padding:80px 0 50px; text-align:center;}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--accent);
  border:1px solid var(--border2); background:rgba(124,140,255,.07); padding:6px 14px; border-radius:999px; margin-bottom:24px;}
.badge .pulse{width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good);}
h1.hero-title{font-size:3.4rem; line-height:1.08; margin:0 0 18px; letter-spacing:-.03em; font-weight:800;}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lead{color:var(--muted); font-size:1.2rem; max-width:620px; margin:0 auto;}
.hero-cta{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
@media(max-width:600px){h1.hero-title{font-size:2.4rem;}}

/* ---------- Stat strip ---------- */
.stripe{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:16px; overflow:hidden; margin:44px 0;}
.stripe .cell{background:var(--bg2); padding:22px; text-align:center;}
.stripe .big{font-size:1.9rem; font-weight:800; letter-spacing:-.02em;}
.stripe .cap{color:var(--muted); font-size:.85rem; margin-top:4px;}

/* ---------- Sections ---------- */
section{padding:46px 0;}
.sec-head{text-align:center; max-width:640px; margin:0 auto 34px;}
.sec-head h2{font-size:2rem; letter-spacing:-.02em; margin:0 0 10px;}
.sec-head p{color:var(--muted); margin:0; font-size:1.05rem;}
.eyebrow{color:var(--accent); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:10px;}

/* ---------- Cards grid ---------- */
.grid{display:grid; gap:18px;}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.card{position:relative; background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--border);
  border-radius:18px; padding:24px; transition:border-color .2s, transform .12s;}
.card:hover{border-color:var(--border2); transform:translateY(-3px);}
.card .ico{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px;
  margin-bottom:14px; color:var(--accent); background:rgba(124,140,255,.1); border:1px solid var(--border2);}
.card h3{margin:0 0 8px; font-size:1.12rem; letter-spacing:-.01em;}
.card p{color:var(--muted); margin:0; font-size:.95rem;}

/* steps */
.step-num{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:10px;
  background:var(--grad); color:#fff; font-weight:700; margin-bottom:12px;}

/* models */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:10px 16px; font-size:.92rem; font-weight:500;}
.chip .d{width:8px; height:8px; border-radius:50%; background:var(--grad);}

/* code block */
pre.code{background:#080a10; border:1px solid var(--border); border-radius:16px; padding:20px; overflow:auto;
  font-size:.85rem; line-height:1.7;}
.tabs{display:flex; gap:6px; margin-bottom:12px;}
.tab{background:var(--card); border:1px solid var(--border); color:var(--muted); padding:7px 16px; border-radius:9px;
  cursor:pointer; font-size:.88rem; font-weight:500;}
.tab.active{background:var(--grad); color:#fff; border-color:transparent;}
.k{color:#7c8cff;} .s{color:#4ade80;} .p{color:#fbbf24;}

/* faq */
.faq details{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:4px 18px; margin-bottom:10px;}
.faq summary{cursor:pointer; padding:14px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--accent); font-size:1.3rem;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--muted); margin:0 0 16px; font-size:.95rem;}

/* ---------- Panels / inputs (dashboard, admin) ---------- */
.panel{background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--border); border-radius:18px; padding:22px;}
.inputwrap{position:relative; flex:1; min-width:160px;}
.inputwrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--faint);}
input{width:100%; background:#080a10; border:1px solid var(--border); color:var(--fg); padding:13px 14px; border-radius:12px;
  font-size:1rem; font-family:inherit; transition:border-color .15s, box-shadow .15s;}
.inputwrap.icon input{padding-left:42px;}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,140,255,.18);}
.row{display:flex; gap:10px; flex-wrap:wrap;}

/* stat cards (dashboard) */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:22px 0;}
.stat{background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--border); border-radius:16px; padding:20px;}
.stat .label{display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;}
.stat .label svg{color:var(--accent);}
.stat .v{font-size:1.8rem; font-weight:800; margin-top:8px; letter-spacing:-.02em;}

/* progress bar */
.bar{height:8px; background:var(--border); border-radius:99px; overflow:hidden; margin-top:14px;}
.bar > i{display:block; height:100%; background:var(--grad); border-radius:99px;}

/* tables */
table{width:100%; border-collapse:collapse; margin-top:12px; font-size:.9rem;}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--border);}
th{color:var(--muted); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em;}
tbody tr{transition:background .12s;} tbody tr:hover{background:rgba(255,255,255,.02);}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; padding:3px 10px; border-radius:999px; border:1px solid var(--border2);}
.status-active{color:var(--good);} .status-depleted,.status-suspended{color:var(--bad);}
.healthy-true{color:var(--good);} .healthy-false{color:var(--bad);}

/* messages */
.err{display:none; align-items:center; gap:8px; color:var(--bad); margin-top:12px; font-size:.92rem;}
.err.show{display:flex;}
.ok{color:var(--good);} .muted{color:var(--muted);}
.toast{margin-top:10px; font-size:.9rem; min-height:1.2em;}
.keybox{display:flex; gap:10px; align-items:flex-start; background:rgba(124,140,255,.08); border:1px solid var(--accent);
  border-radius:12px; padding:14px; margin-top:12px;}
.keybox svg{color:var(--accent); flex-shrink:0; margin-top:2px;}
.keybox code{word-break:break-all; font-size:.9rem;}

.section-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:36px 0 8px;}
.section-title h2{display:flex; align-items:center; gap:9px; font-size:1.25rem; letter-spacing:-.01em; margin:0;}
.section-title h2 svg{color:var(--accent);}

.page{padding:34px 0 60px;}
.page h1{font-size:1.95rem; letter-spacing:-.02em; margin:6px 0;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border); margin-top:40px; padding:40px 0;}
.foot{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start;}
.foot .col{display:flex; flex-direction:column; gap:8px;}
.foot .col b{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:4px;}
.foot a{color:var(--muted); font-size:.92rem;}
.foot a:hover{color:var(--fg);}
.foot .copy{color:var(--faint); font-size:.85rem; margin-top:24px; text-align:center;}

@media (prefers-reduced-motion: reduce){*{transition:none!important; scroll-behavior:auto!important;}}