/* BagIdea Office — official site theme */
:root {
  --bg:#070b13; --bg2:#0c1322; --card:#111c30; --card2:#0e1830;
  --line:rgba(255,255,255,0.09); --line2:rgba(255,255,255,0.14);
  --accent:#5ec8ff; --accent2:#a882ff; --gold:#ffce6a;
  --text:#e6edf7; --dim:#8a99b3; --ok:#4ade80;
  --maxw:1120px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* Signature BagIdea Office scrollbar — the same slim blue-glass bar the overlay
   and plugin panels use, so the site matches the app instead of the chunky
   default. (WebKit/Chromium + Firefox.) */
* { scrollbar-width:thin; scrollbar-color:rgba(110,180,255,0.30) transparent; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(110,180,255,0.22); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:rgba(110,180,255,0.45); }
::-webkit-scrollbar-corner { background:transparent; }
body { font-family:'Segoe UI',system-ui,'Noto Sans Thai','Noto Sans Arabic',sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden; }
html[dir="rtl"] body { font-family:'Noto Sans Arabic','Segoe UI',system-ui,sans-serif; }
a { color:var(--accent); text-decoration:none; }
img { max-width:100%; display:block; }
code, kbd { font-family:'Cascadia Code',ui-monospace,Consolas,monospace; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.muted { color:var(--dim); }
.center { text-align:center; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px;
  font-weight:650; cursor:pointer; transition:transform .15s, filter .15s; border:1px solid var(--line2);
  font-size:15px; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.12); }
.btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#05101f; border:none; }
.btn.ghost { background:rgba(255,255,255,0.04); color:var(--text); }

/* nav */
nav { position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(7,11,19,0.78); border-bottom:1px solid var(--line); }
nav .wrap { display:flex; align-items:center; gap:12px; height:62px; }
nav .brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; letter-spacing:.4px; }
nav .brand img { width:30px; height:30px; border-radius:7px; }
nav .brand span { color:var(--accent); }
nav .links { margin-left:auto; display:flex; gap:20px; align-items:center; font-size:14px; }
nav .links a { color:var(--dim); }
nav .links a:hover { color:var(--text); }
html[dir="rtl"] nav .links { margin-left:0; margin-right:auto; }
@media(max-width:760px){ nav .links a.nav-hide { display:none; } }

/* language picker */
.langpick { position:relative; }
.langpick > button { background:rgba(255,255,255,0.05); border:1px solid var(--line2); color:var(--text);
  border-radius:10px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; display:flex; gap:6px; align-items:center; }
.langpick .menu { position:absolute; top:115%; right:0; background:var(--bg2); border:1px solid var(--line2);
  border-radius:12px; padding:6px; min-width:172px; box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:none; max-height:64vh; overflow:auto; z-index:80; }
html[dir="rtl"] .langpick .menu { right:auto; left:0; }
.langpick.open .menu { display:block; }
.langpick .menu button { display:flex; gap:9px; width:100%; text-align:start; background:none; border:none;
  color:var(--text); padding:9px 12px; border-radius:8px; cursor:pointer; font:inherit; font-size:13.5px; }
.langpick .menu button:hover { background:rgba(94,200,255,.12); }
.langpick .menu button.on { color:var(--accent); font-weight:700; }

/* hero */
.hero { position:relative; padding:84px 0 36px; text-align:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(900px 420px at 50% -8%, rgba(94,200,255,.18), transparent 70%),
             radial-gradient(720px 380px at 82% 8%, rgba(168,130,255,.14), transparent 70%); }
.hero h1 { font-size:clamp(34px,6vw,62px); line-height:1.08; font-weight:850; letter-spacing:-.6px; }
.hero h1 .grad { background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub { font-size:clamp(16px,2.3vw,21px); color:var(--dim); max-width:720px; margin:18px auto 0; }
.hero .cta { margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.badges { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; color:var(--dim); font-size:13px; }
.badges span { background:rgba(255,255,255,.04); border:1px solid var(--line); padding:5px 13px; border-radius:999px; }
.shot { margin:48px auto 0; max-width:980px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line2); box-shadow:0 34px 90px rgba(0,0,0,.62); }

/* sections */
section { padding:72px 0; border-top:1px solid var(--line); }
h2.title { font-size:clamp(26px,4vw,40px); font-weight:820; text-align:center; letter-spacing:-.4px; }
h2.title + .lead { text-align:center; color:var(--dim); max-width:720px; margin:14px auto 0; font-size:17px; }
.eyebrow { text-align:center; color:var(--accent); font-weight:700; letter-spacing:2px; font-size:12.5px; text-transform:uppercase; }

/* feature grid */
.grid { display:grid; gap:18px; margin-top:42px; }
.grid.c3 { grid-template-columns:repeat(3,1fr); }
.grid.c2 { grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .grid.c3 { grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .grid.c3,.grid.c2 { grid-template-columns:1fr; } }
.feat { background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line);
  border-radius:16px; padding:22px; transition:border-color .2s, transform .2s; }
.feat:hover { border-color:var(--accent); transform:translateY(-3px); }
.feat .ic { font-size:26px; }
.feat h3 { margin:12px 0 7px; font-size:18px; font-weight:720; }
.feat p { color:var(--dim); font-size:14.5px; }

/* split rows (image + text) */
.split { display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center; margin-top:46px; }
.split:nth-of-type(even) .txt { order:2; }
@media(max-width:820px){ .split { grid-template-columns:1fr; } .split .txt { order:0 !important; } }
.split img { border-radius:14px; border:1px solid var(--line2); box-shadow:0 22px 60px rgba(0,0,0,.5); }
.split h3 { font-size:24px; font-weight:780; margin-bottom:10px; }
.split p { color:var(--dim); }
.split ul { margin:14px 0 0; padding-inline-start:20px; color:var(--dim); }
.split ul li { margin:6px 0; }

/* install steps */
.steps { counter-reset:s; margin-top:40px; display:grid; gap:16px; max-width:860px; margin-inline:auto; }
.step { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; position:relative; padding-inline-start:64px; }
.step::before { counter-increment:s; content:counter(s); position:absolute; inset-inline-start:18px; top:18px;
  width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#05101f; font-weight:800; display:flex; align-items:center; justify-content:center; }
.step h4 { font-size:17px; margin-bottom:6px; }
.step p { color:var(--dim); font-size:14.5px; }
.note { background:rgba(94,200,255,.07); border:1px solid rgba(94,200,255,.3); border-radius:12px;
  padding:14px 18px; color:#bfe3ff; font-size:14px; max-width:860px; margin:18px auto 0; }
.note.warn { background:rgba(255,206,106,.08); border-color:rgba(255,206,106,.35); color:#ffe2a8; }

/* code block */
pre { background:#05080f; border:1px solid var(--line2); border-radius:12px; padding:16px 18px;
  overflow:auto; font-size:13.5px; line-height:1.7; }
pre code { color:#cfe3ff; white-space:pre; }
.codecap { font-size:12px; color:var(--dim); margin:0 0 -8px 4px; }
:not(pre) > code { background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:6px;
  padding:1px 6px; font-size:.92em; color:#cfe3ff; }

/* CLI table */
.cli { margin-top:34px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cli .row { display:grid; grid-template-columns:minmax(190px,260px) 1fr; gap:12px; padding:11px 18px; border-top:1px solid var(--line); font-size:14px; }
.cli .row:first-child { border-top:none; }
.cli .row:hover { background:rgba(255,255,255,.025); }
.cli .row code { color:var(--accent); background:none; border:none; padding:0; font-weight:600; }
.cli .row .d { color:var(--dim); }
.cli .grouphdr { background:rgba(94,200,255,.06); color:var(--accent); font-weight:700; padding:10px 18px; font-size:12.5px; letter-spacing:1px; text-transform:uppercase; border-top:1px solid var(--line); }
@media(max-width:640px){ .cli .row { grid-template-columns:1fr; gap:3px; } }

/* sponsors */
/* Honored-sponsor wall: real logos on light cards so any logo reads on dark. */
.sp-thanks { text-align:center; margin:36px 0 14px; letter-spacing:2px; text-transform:uppercase;
  font-size:12px; color:var(--dim); }
.sponsor-wall { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.sp-logo { display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 34px;
  transition:transform .15s, box-shadow .15s; }
.sp-logo:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.sp-logo img { height:84px; width:auto; display:block; }
.sp-logo.gold { border-color:rgba(255,206,106,.7); box-shadow:0 0 44px rgba(255,206,106,.14); }
.sp-badge { font-size:12px; font-weight:800; color:#caa23a; letter-spacing:.5px; }
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
@media(max-width:760px){ .tiers { grid-template-columns:1fr; } }
.tier { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 22px; text-align:center; }
.tier.gold { border-color:rgba(255,206,106,.5); box-shadow:0 0 40px rgba(255,206,106,.08) inset; }
.tier .crown { font-size:30px; }
.tier h3 { margin:10px 0 4px; font-size:20px; }
.tier .price { color:var(--accent); font-weight:800; font-size:15px; }
.tier ul { list-style:none; margin:16px 0 0; color:var(--dim); font-size:14px; }
.tier ul li { padding:5px 0; border-top:1px dashed var(--line); }
.sponsor-cta { text-align:center; margin-top:38px; }

/* founder / footer */
.founder { display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; max-width:680px; margin:34px auto 0; }
.founder .av { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#05101f; font-weight:800; flex:none; }
.founder .name { font-weight:750; font-size:18px; }
.founder .role { color:var(--dim); font-size:14px; }
footer { border-top:1px solid var(--line); padding:48px 0 60px; color:var(--dim); font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; }
footer a { color:var(--dim); } footer a:hover { color:var(--text); }
footer .col h4 { color:var(--text); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
footer .col a { display:block; padding:3px 0; }
.copyright { text-align:center; color:var(--dim); font-size:13px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }

/* docs layout */
.docwrap { display:grid; grid-template-columns:248px 1fr; gap:40px; max-width:1180px; margin:0 auto; padding:34px 22px 80px; align-items:start; }
.docnav { position:sticky; top:80px; max-height:calc(100vh - 96px); overflow:auto; font-size:14px; }
.docnav h4 { color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:1px; margin:18px 0 8px; }
.docnav a { display:block; color:var(--dim); padding:5px 10px; border-radius:8px; border-inline-start:2px solid transparent; }
.docnav a:hover { color:var(--text); background:rgba(255,255,255,.03); }
.docnav a.active { color:var(--accent); border-inline-start-color:var(--accent); background:rgba(94,200,255,.06); }
.doc h1 { font-size:34px; font-weight:820; margin-bottom:6px; }
.doc h2 { font-size:25px; font-weight:780; margin:42px 0 12px; padding-top:14px; border-top:1px solid var(--line); scroll-margin-top:78px; }
.doc h3 { font-size:18px; margin:24px 0 8px; }
.doc p { color:#c7d2e2; margin:10px 0; }
.doc ul, .doc ol { margin:10px 0; padding-inline-start:24px; color:#c7d2e2; }
.doc li { margin:6px 0; }
.fixlist { list-style:none; padding-inline-start:0 !important; }
.fixlist li { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:8px 0; }
.fixlist b { color:var(--accent); }
.fixlist code { display:inline-block; margin-top:4px; word-break:break-all; }
.doc img { border-radius:12px; border:1px solid var(--line2); margin:18px 0; box-shadow:0 18px 50px rgba(0,0,0,.45); }
.doc table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.doc th, .doc td { text-align:start; padding:9px 12px; border:1px solid var(--line); vertical-align:top; }
.doc th { background:rgba(94,200,255,.07); color:var(--accent); }
.doc .tag { display:inline-block; background:rgba(94,200,255,.12); color:var(--accent); border-radius:6px; padding:1px 8px; font-size:12px; font-weight:600; }
@media(max-width:900px){ .docwrap { grid-template-columns:1fr; } .docnav { position:static; max-height:none; border-bottom:1px solid var(--line); padding-bottom:14px; } }

.toplink { position:fixed; inset-inline-end:20px; bottom:20px; background:var(--accent); color:#05101f;
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40; }
.toplink.show { opacity:1; pointer-events:auto; }