/* Sociflux — shared styles for the marketing site, docs, and console. */
:root {
  --bg:#0b0f14; --bg2:#0d1117; --panel:#161b22; --panel2:#1b222c; --line:#283041;
  --fg:#e6e9ef; --mut:#8b95a5; --acc:#25c2a0; --acc2:#1f9d82; --acc3:#3ad6b4;
  --warn:#d8b34a; --blue:#4aa3d8; --red:#e06c6c; --purple:#a78bfa;
  --radius:14px; --maxw:1140px;
  --grad:linear-gradient(135deg,#25c2a0,#3ad6b4 55%,#4aa3d8);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--fg); background:var(--bg);
  font:15px/1.65 system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:var(--acc); text-decoration:none; }
a:hover { color:var(--acc3); }
h1,h2,h3 { letter-spacing:-.02em; line-height:1.18; }
code, pre, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.muted { color:var(--mut); }
.center { text-align:center; }

/* nav */
.nav { position:sticky; top:0; z-index:30; backdrop-filter:blur(10px);
  background:rgba(11,15,20,.78); border-bottom:1px solid var(--line); }
.nav .inner { display:flex; align-items:center; gap:22px; height:62px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; color:var(--fg); }
.brand .logo { width:22px; height:22px; display:block; border-radius:6px; }
.brand b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* platform cards (landing) */
.pf { display:flex; flex-direction:column; gap:10px; }
.pf-head { display:flex; align-items:center; gap:10px; }
.pf-head h3 { margin:0; font-size:18px; }
.pf-ic { font-size:22px; line-height:1; }
.pf-badge { margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
.pf-badge.live { color:#04130f; background:var(--grad); border-color:transparent; }
.pf-soon { opacity:.62; }
.pf-soon:hover { opacity:.85; }
.pf-live { border-color:var(--acc2); }
.pf-link { font-size:13.5px; font-weight:600; color:var(--acc); margin-top:auto; }
.pf-link:hover { color:var(--acc3); }
.nav .links { display:flex; gap:20px; margin-left:8px; }
.nav .links a { color:var(--mut); font-weight:500; font-size:14px; }
.nav .links a:hover { color:var(--fg); }
.nav .grow { flex:1; }
.nav .actions { display:flex; gap:10px; align-items:center; }
@media (max-width:760px){ .nav .links{ display:none; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:700; cursor:pointer; border:none; border-radius:10px;
  padding:10px 18px; background:var(--grad); color:#04130f; transition:.15s; }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); color:#04130f; }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--acc2); color:var(--fg); filter:none; }
.btn.sm { padding:7px 13px; font-size:13px; border-radius:9px; }
.btn.lg { padding:14px 26px; font-size:16px; }
.btn[disabled]{ opacity:.5; cursor:default; transform:none; }
.btn.danger { background:transparent; color:var(--red); border:1px solid #4a2a2e; }
.btn.danger:hover { background:#2a1518; filter:none; }

/* hero */
.hero { padding:84px 0 60px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:-40% 0 auto; height:560px;
  background:radial-gradient(60% 60% at 50% 0%, rgba(37,194,160,.16), transparent 70%); pointer-events:none; }
.hero h1 { font-size:54px; margin:0 0 18px; }
.hero h1 .g { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:19px; color:var(--mut); max-width:680px; margin:0 auto 30px; }
.hero .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.pillrow { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.pill { font-size:12.5px; color:var(--mut); border:1px solid var(--line); border-radius:30px;
  padding:6px 14px; background:var(--panel); }
.pill b { color:var(--acc3); }
@media (max-width:680px){ .hero h1{ font-size:38px; } .hero{ padding:54px 0 40px; } }

/* sections */
section { padding:56px 0; }
.eyebrow { color:var(--acc); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
h2.sec { font-size:34px; margin:8px 0 12px; }
.sub { color:var(--mut); font-size:17px; max-width:640px; }

/* feature grid */
.grid { display:grid; gap:18px; }
.grid.c3 { grid-template-columns:repeat(3,1fr); }
.grid.c2 { grid-template-columns:repeat(2,1fr); }
.grid.c4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid.c3,.grid.c4{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.card .ic { font-size:24px; }
.card h3 { font-size:17px; margin:12px 0 6px; }
.card p { color:var(--mut); font-size:14px; margin:0; }

/* code blocks */
pre.code { background:#0a0e13; border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  overflow:auto; font-size:13px; line-height:1.6; color:#d4dae3; }
pre.code .k { color:var(--acc3); } pre.code .s { color:#e3b341; } pre.code .c { color:#6b7585; }
.codewrap { position:relative; }
.copybtn { position:absolute; top:10px; right:10px; background:var(--panel2); border:1px solid var(--line);
  color:var(--mut); border-radius:7px; padding:4px 10px; font-size:12px; cursor:pointer; }
.copybtn:hover { color:var(--fg); border-color:var(--acc2); }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
@media (max-width:980px){ .plans{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .plans{ grid-template-columns:1fr; } }
.plan { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  display:flex; flex-direction:column; position:relative; }
.plan.pop { border-color:var(--acc2); box-shadow:0 0 0 1px var(--acc2), 0 14px 40px rgba(37,194,160,.12); }
.plan .badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--grad);
  color:#04130f; font-size:11.5px; font-weight:800; padding:4px 12px; border-radius:20px; }
.plan h3 { margin:0 0 2px; font-size:20px; }
.plan .price { font-size:38px; font-weight:800; margin:10px 0 2px; }
.plan .price span { font-size:14px; color:var(--mut); font-weight:500; }
.plan ul { list-style:none; padding:0; margin:16px 0; flex:1; }
.plan li { padding:7px 0; color:var(--mut); font-size:14px; border-bottom:1px solid var(--line); }
.plan li::before { content:"✓ "; color:var(--acc); font-weight:800; }
.plan li:last-child { border-bottom:none; }
.cycle-toggle { display:inline-flex; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:30px; }
.cyc { font:inherit; font-weight:700; font-size:14px; cursor:pointer; color:var(--mut); background:transparent; border:none;
  padding:8px 18px; border-radius:24px; display:inline-flex; align-items:center; gap:8px; }
.cyc.on { background:var(--grad); color:#04130f; }
.cyc .save { font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; background:rgba(37,194,160,.16); color:var(--acc3); }
.cyc.on .save { background:rgba(4,19,15,.18); color:#04130f; }

/* tables */
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
th { color:var(--mut); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }

/* footer */
footer { border-top:1px solid var(--line); padding:40px 0; color:var(--mut); font-size:13.5px; margin-top:40px; }
footer .cols { display:flex; gap:60px; flex-wrap:wrap; }
footer a { color:var(--mut); display:block; padding:4px 0; }
footer a:hover { color:var(--fg); }
footer h4 { color:var(--fg); font-size:13px; margin:0 0 8px; }

/* badges / status */
.tag { font-size:11px; padding:2px 9px; border-radius:20px; border:1px solid var(--line); color:var(--mut); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:#48505e; margin-right:6px; }
.dot.on { background:var(--acc); box-shadow:0 0 0 3px rgba(37,194,160,.18); }
.s-queued{color:var(--warn);} .s-running{color:var(--blue);} .s-done{color:var(--acc);} .s-error{color:var(--red);}
.hide { display:none !important; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--panel2);
  border:1px solid var(--acc2); color:var(--fg); padding:11px 18px; border-radius:10px; z-index:100;
  box-shadow:0 10px 30px rgba(0,0,0,.4); }

/* forms */
label.fld { display:block; font-size:13px; color:var(--fg); margin:12px 0 5px; font-weight:600; }
input, select, textarea { font:inherit; color:var(--fg); background:#0e141b; border:1px solid var(--line);
  border-radius:9px; padding:9px 11px; width:100%; }
input:focus, select:focus { outline:none; border-color:var(--acc2); }
.inline { display:flex; gap:8px; }
.inline > * { flex:1; }

/* language switcher */
.langsw { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.langsw button { background:transparent; color:var(--mut); border:none; padding:5px 9px; cursor:pointer;
  font-size:12px; font-weight:600; width:auto; border-radius:0; }
.langsw button:hover { color:var(--fg); filter:none; transform:none; }
.langsw button.on { background:var(--acc); color:#08120f; }