/* หน้าแรก FlowKit: คัดจาก CSS หน้าแรก FileKit (<style> ใน FileKit/index.html) เฉพาะกฎที่หน้านี้ใช้ 22/09/2026
   ‼️ เหตุผลของแต่ละกฎอยู่ในคอมเมนต์ของต้นฉบับ FileKit ค้นด้วยชื่อคลาสได้เลย (ไม่คัดคอมเมนต์มาเพราะงบขนาด)
   ‼️ ตัวแปรสีทั้งสองธีมต้องตรงกับ FileKit ทุกตัว tests/accepts.test.mjs เทียบ แก้สีที่ FileKit แล้วคัดมาใหม่
   ‼️ ส่วนท้ายไฟล์คือของ FlowKit เอง (สีตาม data-kind , ผังไอโซเมตริก) */
@font-face{font-family:"FK Fallback";src:local("Leelawadee UI"),local("Tahoma"),local("Arial");
  font-weight:400;size-adjust:97%;ascent-override:92%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"FK Fallback";src:local("Leelawadee UI Bold"),local("LeelawadeeUI-Bold"),local("Tahoma Bold"),local("Arial Bold");
  font-weight:600 700;size-adjust:97%;ascent-override:92%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"FK Sarabun";src:url("/filekit/vendor/fonts/Sarabun-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:fallback}
@font-face{font-family:"FK Sarabun";src:url("/filekit/vendor/fonts/Sarabun-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:fallback}
@font-face{font-family:"FK Sarabun";src:url("/filekit/vendor/fonts/Sarabun-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:fallback}
:root{
  --bg:#101216; --bg-soft:#171a20; --card:#1c2027; --card-hi:#232830;
  --line:#39404e; --line-soft:#2b313d;
  --text:#f0f1f3; --text-dim:#a8adb8; --text-mute:#949ba7;
  --stage:#1b2029; --stage-2:#12161d; --stage-line:#2b323d; --stage-dim:#98a0ae;
  --stage-head:#d5dbe6;  --brand:#6c8cff; --brand-text:#8aa3ff; --brand-2:#9d7bff; --brand-ink:#fff; --focus:#8aa3ff;
  --btn-bg:#f0f1f3; --btn-fg:#101216;
  --ok:#3ddc97; --warn:#ffbe4d; --err:#ff6b81;
  --g-pdf:#e8613c; --g-img:#3ab7d8; --g-doc:#6c8cff; --g-ppt:#c77dff; --g-data:#3ec98a; --g-thai:#ff6b81; --g-powerbi:#e0a72e;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sh1:0 0 0 1px var(--line-soft);
  --sh2:0 0 0 1px var(--line), 0 4px 12px rgba(0,0,0,.4);
  --sh3:0 0 0 1px var(--line), 0 12px 28px rgba(0,0,0,.5);
  --shadow:var(--sh2);
  --t-micro:100ms; --t-panel:220ms; --ease:cubic-bezier(.4,0,.2,1);
  --t-btn:100ms; --ease-snap:cubic-bezier(.25,.46,.45,.94);
  --ease-spring:cubic-bezier(.2,2.2,.4,1);  --t-card:150ms;
  --hairline:rgba(255,255,255,.09);
  --ring-top:inset 0 1px 0 0 rgba(255,255,255,.06);
  --lh:1.75; --lh-tight:1.4;
  --font:"FK Sarabun","FK Fallback","Sarabun","IBM Plex Sans Thai","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){
  --btn-bg:#14161c; --btn-fg:#ffffff;
  --hairline:rgba(16,22,50,.10); --ring-top:inset 0 1px 0 0 rgba(255,255,255,.7);
  --bg:#f6f5f3; --bg-soft:#efeeea; --card:#fff; --card-hi:#faf9f7;
  --line:#e2e0da; --line-soft:#ebe9e4;
  --text:#14161c; --text-dim:#585d68; --text-mute:#626771;
  --ok:#0b6b42; --warn:#8f5200; --err:#ad2740;
  --brand-text:#3a57c8; --focus:#2f50b5;
  --g-pdf:#b03a0a; --g-img:#0e6c86; --g-doc:#3a57c8; --g-ppt:#7b3fc4; --g-data:#0c6440; --g-thai:#b02a43; --g-powerbi:#7a5200;
  --sh1:0 1px 2px rgba(20,26,60,.06), 0 1px 3px rgba(20,26,60,.05);
  --sh2:0 2px 6px rgba(20,26,60,.06), 0 6px 14px rgba(20,26,60,.07);
  --sh3:0 8px 16px rgba(20,26,60,.08), 0 16px 32px rgba(20,26,60,.09);
}
}
:root[data-theme="light"]{
  --btn-bg:#14161c; --btn-fg:#ffffff;
  --hairline:rgba(16,22,50,.10); --ring-top:inset 0 1px 0 0 rgba(255,255,255,.7);
  --bg:#f6f5f3; --bg-soft:#efeeea; --card:#fff; --card-hi:#faf9f7;
  --line:#e2e0da; --line-soft:#ebe9e4;
  --text:#14161c; --text-dim:#585d68; --text-mute:#626771;
  --ok:#0b6b42; --warn:#8f5200; --err:#ad2740;
  --brand-text:#3a57c8; --focus:#2f50b5;
  --g-pdf:#b03a0a; --g-img:#0e6c86; --g-doc:#3a57c8; --g-ppt:#7b3fc4; --g-data:#0c6440; --g-thai:#b02a43; --g-powerbi:#7a5200;
  --sh1:0 1px 2px rgba(20,26,60,.06), 0 1px 3px rgba(20,26,60,.05);
  --sh2:0 2px 6px rgba(20,26,60,.06), 0 6px 14px rgba(20,26,60,.07);
  --sh3:0 8px 16px rgba(20,26,60,.08), 0 16px 32px rgba(20,26,60,.09);
}
@media (prefers-reduced-motion: reduce){
:root{ --t-micro:0ms; --t-panel:0ms;
  --ease-spring:linear }
.pill,.cats{transition:none}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:var(--lh);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
a{color:var(--brand-text)}
button{font-family:inherit}
:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px; border-radius:6px}
[hidden]{display:none !important}
#cats:empty{min-height:56px}
#tools:empty{min-height:949px}
@media (max-width:1023px){
#tools:empty{min-height:1067px}
}
@media (max-width:767px){
#tools:empty{min-height:1196px}
}
.skip{position:absolute; left:-9999px; top:8px; z-index:99;
  background:var(--btn-bg); color:var(--btn-fg); padding:10px 18px; border-radius:999px; font-weight:700; text-decoration:none}
.skip:focus{left:12px}
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--sp3);
  padding:10px clamp(14px,4vw,32px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--t-panel) var(--ease), border-color var(--t-panel) var(--ease);
}
:root[data-scrolled] .top{
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color:var(--line-soft);
}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; border:0; background:none; color:inherit; padding:2px 4px; margin-inline-start:-4px; min-height:40px; font-size:16px; font-weight:700; line-height:1.25}
.brand .mark{
  width:34px;height:34px;border-radius:10px; display:grid;place-items:center; flex:none;
  background:#2f3ea3; color:#fff;
  box-shadow:none;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .brand .mark{background:#4c60d6}
}
:root[data-theme="dark"] .brand .mark{background:#4c60d6}
.mark-svg{width:18px;height:18px;display:block}
.top .spacer{flex:1}
.iconbtn{
  width:38px;height:38px;flex:none; display:grid;place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--text-dim);
  border-radius:999px; font-size:16px; transition:color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.iconbtn:hover{background:var(--card-hi); color:var(--text)}
.top .btn-ico,.iconbtn svg{
  width:17px;height:17px;flex:none;display:block;
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
#theme .th-ic{display:none}
:root[data-theme="light"] #theme .th-light{display:block}
:root[data-theme="dark"] #theme .th-dark{display:block}
@media (prefers-color-scheme: dark){
:root:not([data-theme]) #theme .th-dark{display:block}
}
@media (prefers-color-scheme: light){
:root:not([data-theme]) #theme .th-light{display:block}
}
.iconbtn{box-shadow:var(--ring-top); border-color:var(--text-mute)}
.langsw{display:flex; gap:4px; align-items:center; flex:none}
.langopt{
  min-width:38px; height:38px; padding:0 10px; cursor:pointer; flex:none;
  border:1px solid var(--text-mute); background:transparent; color:var(--text-dim);
  border-radius:999px; font:700 12px/1.4 var(--font); letter-spacing:.04em; font-family:var(--font);
  transition:color var(--t-micro) var(--ease), background var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease);
}
.langopt:hover{color:var(--text); border-color:var(--text)}
.langopt[aria-current="true"]{
  background:var(--btn-bg); color:var(--btn-fg); border-color:transparent; cursor:default;
  box-shadow:var(--ring-top);
}
.langopt:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px}
@media (max-width:560px){
.langopt{min-width:36px; height:36px; padding:0 8px; font-size:11.5px}
}
:root{--page-w:1160px; --page-pad:clamp(14px,4vw,32px)}
main{max-width:var(--page-w); margin:0 auto; padding:clamp(18px,3.4vw,34px) var(--page-pad) 28px}
.hero{
  --card:#181c24; --card-hi:#1f242d; --bg-soft:#12161d;
  --line:#2e3542; --line-soft:#272d38;
  --text:#f0f1f3; --text-dim:#a8adb8; --text-mute:#8f97a6; --brand:#8aa3ff;
  --g-pdf:#e8613c; --g-img:#3ab7d8; --g-doc:#6c8cff; --g-ppt:#c77dff;
  --g-data:#3ec98a; --g-thai:#ff6b81; --g-powerbi:#e0a72e; --brand-text:#8aa3ff;
  position:relative; isolation:isolate; overflow:hidden; color:var(--text);
  margin:var(--sp2) 0 var(--sp3); border-radius:28px;
  padding:clamp(20px,2.4vw,30px) clamp(20px,4vw,48px) clamp(16px,2vw,22px);
  background:#0b0d11;
  box-shadow:0 34px 70px -30px rgba(6,8,14,.6), inset 0 1px 0 0 rgba(255,255,255,.055);
}
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(720px 440px at 78% 22%, rgba(116,142,255,.20), transparent 62%),
             radial-gradient(560px 400px at 4% 100%, rgba(255,255,255,.05), transparent 60%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.042) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.042) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(118% 92% at 50% 0%,#000 28%,transparent 76%);
          mask-image:radial-gradient(118% 92% at 50% 0%,#000 28%,transparent 76%)}
.hero-in{display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(18px,3vw,38px); align-items:center}
.kicker{display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--sp4);
  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--text-mute)}
.kicker{margin-bottom:var(--sp3)}
.kicker s{display:block; width:26px; height:1px; background:var(--line); text-decoration:none}
.hero h1{
  font-size:clamp(24px,3vw,36px); margin:0 0 9px; font-weight:700;
  letter-spacing:calc(1em * -0.034);
  line-height:1.3; padding-block:2px; max-width:19ch; text-wrap:balance;
}
.hero h1 em{font-style:normal; color:#79808e}
:root[lang="en"] .hero h1{max-width:24ch}
.hero .searchwrap{margin:var(--sp3) 0 0; max-width:520px}
.facts{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin-top:var(--sp3)}
.fact{display:flex; align-items:baseline; gap:6px}
.fact span{font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-mute)}
.fact b{font-size:15px; font-weight:700; line-height:1.5; color:var(--text);
  letter-spacing:calc(1em * -0.02)}
@property --sw{syntax:"<percentage>"; inherits:false; initial-value:-32%}
.hero-grain{position:absolute; inset:0; z-index:2; opacity:.4; pointer-events:none;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:860px){
.hero-in{grid-template-columns:1fr}
.hero h1{max-width:none}
}
.searchwrap{max-width:620px; margin:var(--sp5) 0 var(--sp2)}
.search{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:14px 18px 14px 22px;
  box-shadow:var(--sh3), var(--ring-top); transition:border-color var(--t-micro) var(--ease);
}
.search:focus-within{border-color:var(--brand)}
.search input{flex:1; min-width:0; border:0; background:none; color:var(--text); font-size:14.5px; outline:none; font-family:inherit; min-height:24px; padding-block:5px}
.search input::placeholder{color:var(--text-mute)}
.search input::-webkit-search-cancel-button{display:none}
.s-ico{width:19px;height:19px;flex:none;stroke:var(--text-mute);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.search:focus-within .s-ico{stroke:var(--text-dim)}
.search .clear{display:none; border:0; background:none; color:var(--text-mute); cursor:pointer; padding:2px; line-height:0}
.search .clear svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.search.has .clear{display:block}
.hits{ font-size:12.5px; color:var(--text-mute); min-height:19px; margin-top:var(--sp2)}
.cats{
  display:flex; flex-wrap:wrap; gap:var(--sp2);
  padding:var(--sp2) 2px var(--sp3); margin:0 -2px;
}
.cat{
  flex:none; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); background:var(--card); color:var(--text-dim);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; min-height:36px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:color var(--t-btn) var(--ease-snap), border-color var(--t-btn) var(--ease-snap),
             background var(--t-btn) var(--ease-snap);
}
.cat:hover{color:var(--text); border-color:var(--text-mute)}
.cat[aria-pressed="true"]{
  color:var(--ac,var(--brand)); border-color:color-mix(in srgb,var(--ac,var(--brand)) 55%,transparent);
  background:color-mix(in srgb,var(--ac,var(--brand)) 8%,transparent);
}
.cat b{font-weight:700; opacity:.65; margin-inline-start:5px; font-size:12px}
.stage{
  margin-top:var(--sp3); border-radius:26px; padding:18px clamp(16px,3vw,34px) 30px;
  background:linear-gradient(152deg,var(--stage),var(--stage-2));
  box-shadow:0 30px 60px -26px rgba(8,10,16,.45), inset 0 1px 0 0 rgba(255,255,255,.05);
}
.stage-h{display:flex;align-items:baseline;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--stage-dim);
  margin-bottom:var(--sp4)}
.pills{display:flex;flex-wrap:wrap;gap:11px}
.pill{
  display:inline-flex;align-items:center;gap:10px;flex:none;cursor:pointer;text-align:start;
  background:#fff;color:#14161c;border:0;border-radius:13px;padding:10px 17px 10px 10px;
  font:600 14.5px/1.5 var(--font);white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.07), 0 8px 18px -10px rgba(0,0,0,.35);
  transition:transform 320ms var(--ease-spring), box-shadow var(--t-btn) var(--ease-snap);
}
.pill:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ac) 55%,transparent), 0 2px 4px rgba(0,0,0,.09), 0 14px 26px -10px color-mix(in srgb,var(--ac) 50%,rgba(0,0,0,.42))}
.pill:active{transform:translateY(0)}
.pill:focus-visible{outline:2.5px solid #fff; outline-offset:3px}
.pill i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--ac) 13%,#fff); color:var(--ac)}
.ico-svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.pill .ico-svg{width:20px;height:20px;stroke-width:2}
.pill mark{background:color-mix(in srgb,var(--ac) 22%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.pill .new{flex:none;margin-inline-start:2px;padding:1px 7px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,224,154,.42) 0%,rgba(212,168,75,.26) 55%,rgba(212,168,75,.20) 100%);
  color:#7a5c12;
  box-shadow:inset 0 0 0 1px rgba(212,168,75,.55), inset 0 1px 0 rgba(255,255,255,.7);
  font:700 10px/1.4 var(--font);letter-spacing:.04em;text-transform:uppercase}
.stage-f{color:var(--stage-dim);font-size:13px;margin-top:var(--sp5)}
.door{display:none}
@media (max-width:640px){
.door{display:flex; align-items:center; gap:10px; margin-top:var(--sp4); padding:11px 14px; min-height:48px; border-radius:12px;
    border:1px dashed rgba(255,255,255,.32); color:#fff; text-decoration:none; font-size:13px; line-height:1.5}
.door b{flex:none; font-size:15px; font-weight:700; letter-spacing:.01em}
.door b span{font-weight:400}
.door > span{flex:1; min-width:0; color:var(--stage-dim)}
.door i{flex:none; font-style:normal; color:var(--stage-dim)}
.door:focus-visible{outline:2.5px solid #fff; outline-offset:2px}
}
.trust{max-width:1096px;margin:var(--sp6) auto 0;padding:0 var(--sp4)}
.trust-eye{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:color-mix(in srgb,var(--brand) 65%,var(--text))}
.trust-h{margin:0 0 var(--sp4);font-size:clamp(19px,2.2vw,25px);font-weight:700;line-height:1.45;color:var(--text)}
.trust-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.trust-card{padding:14px 16px;border-radius:var(--r-md,12px);
  border:1px solid var(--line-soft);background:var(--bg-soft)}
.trust-card b{display:block;font-size:13.5px;font-weight:700;line-height:1.5;margin-bottom:5px;color:var(--text)}
.trust-card span{display:block;font-size:12.5px;line-height:1.7;color:var(--text-dim)}
@media (max-width:640px){
.trust{margin-top:var(--sp5)}
.trust-card{padding:13px 14px}
}
.stage .empty{color:var(--stage-dim)}
.stage .empty b{color:#fff}
.pill-group{width:100%;display:flex;align-items:center;gap:12px;margin:var(--sp5) 0 var(--sp2);
  font-size:15px;font-weight:700;letter-spacing:0;color:var(--stage-head)}
.pill-group:first-child{margin-top:0}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion: reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
.pill-group s{flex:1;height:1px;background:var(--stage-line);text-decoration:none}
.empty{color:var(--text-mute); text-align:center; padding:var(--sp7) var(--sp4); line-height:1.9}
.empty b{display:block; color:var(--text); font-size:16px; margin-bottom:6px}
.empty .btn-soft{margin-top:var(--sp3)}
.btn-soft{
  border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer;
  border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600; min-height:40px;
}
.btn-soft:hover{background:var(--card-hi)}
@media (max-width:620px){
.hero{border-radius:20px; margin-inline:-4px; padding:20px 16px 20px}
.hero .searchwrap{max-width:none}
.facts{gap:6px 16px}
.fact b{font-size:14px}
.fact span{font-size:9.5px; letter-spacing:.1em}
.cats{gap:5px; padding:var(--sp1) 2px var(--sp2)}
.cat{padding:4px 9px; font-size:12px; border-radius:9px}
.cat b{margin-inline-start:4px; font-size:10.5px}
.stage{margin-top:var(--sp2)}
.stage{padding:22px 14px 26px;border-radius:20px;margin-inline:-4px}
.pills{gap:8px}
.pill{flex:1 1 calc(50% - 4px); min-width:0; white-space:normal; padding:9px 12px 9px 9px;
    font-size:13px; line-height:1.45; align-items:center; border-radius:11px}
.pill i{width:26px;height:26px;border-radius:7px}
.pill .ico-svg{width:18px;height:18px}
.pill .new{margin-inline-start:auto}
.pill-group{margin:var(--sp4) 0 var(--sp1); font-size:14px}
.stage-h{font-size:11px; margin-bottom:var(--sp4)}
.cats{position:sticky; top:57px; z-index:15; background:var(--bg); margin-inline:calc(clamp(14px,4vw,32px) * -1); padding-inline:clamp(14px,4vw,32px);
    transition:transform .2s var(--ease-snap,ease), opacity .2s var(--ease-snap,ease)}
:root[data-hidecats] .cats{transform:translateY(-100%); opacity:0; pointer-events:none}
}
footer{position:relative; padding:18px; text-align:center; color:var(--text-mute); font-size:12.5px}
footer a{color:inherit; text-decoration:underline; text-decoration-color:var(--line);
  text-underline-offset:3px; border-radius:4px;
  display:inline-block; padding:10px 6px; min-height:36px; box-sizing:border-box}
footer a:hover{color:var(--text); text-decoration-color:currentColor}
footer::before{content:""; position:absolute; inset-inline:0; top:0; height:1px; background:var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.network{background:linear-gradient(152deg,var(--stage),var(--stage-2)); border-top:3px solid var(--stage-line);
  padding:20px 16px 14px; margin-top:8px}
.sites{list-style:none; margin:0 auto; padding:0; max-width:1160px; display:flex; flex-wrap:wrap; justify-content:center; gap:4px}
.sites a{display:inline-flex; align-items:baseline; gap:.28em; height:34px; padding:10px 20px; box-sizing:content-box;
  color:#fff; opacity:.62; text-decoration:none; font-size:15px; line-height:34px; letter-spacing:.01em; white-space:nowrap;
  border-radius:6px; transition:opacity var(--t-micro,.1s) ease}
.sites a span{font-weight:400}
.sites a b{font-weight:700}
.sites a.self,.sites a:hover,.sites a:focus-visible{opacity:1}
.sites a:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media (max-width:640px){
.network{display:none}
}
@media (max-width:640px){
.cat{padding-inline:8px; font-size:12.5px; gap:4px; min-width:36px; justify-content:center}
.cat b{display:none}
.cats{gap:6px}
.hero{padding-block:14px}
}
.sites a{position:relative; padding-inline:16px}
.sites a .ico{width:17px; height:17px; flex:none; align-self:center; display:block}
@media (prefers-reduced-motion: reduce){
}

/* ══ ของ FlowKit เอง (ไม่มีในหน้าแรก FileKit) ══════════════════════════════════════════════ */
/* การ์ดกับโลโก้เป็นลิงก์ (แผน D4) ไม่ใช่ปุ่มแบบ FileKit ต้องไม่มีเส้นใต้ */
a.pill,a.brand{text-decoration:none}
/* ‼️ ชื่อการ์ดตัดบรรทัดได้แค่ที่ช่องว่าง (home.js ห่อวลีละก้อน) Chrome ตัดคำไทยกลางคำประสม
   เช่น ผู้รับผิด|ชอบ บนจอมือถือสองคอลัมน์ (เห็นเองกับตา 22/09/2026) */
.pill .w{white-space:nowrap}
/* ‼️ สีประจำหมวดผ่าน data-kind: CSP ของหน้านี้ไม่มี unsafe-inline ใส่ style="--ac:..." ในแท็กแบบ FileKit ไม่ได้
   ใช้ตัวแปรสีตระกูลเครื่องมือของ FileKit ชุดเดิม ผ่านคอนทราสต์ทั้งสองธีมมาแล้ว */
[data-kind="all"]{--ac:var(--text)}
[data-kind="steps"]{--ac:var(--g-doc)}
[data-kind="org"]{--ac:var(--g-ppt)}
[data-kind="system"]{--ac:var(--g-img)}
[data-kind="timeline"]{--ac:var(--g-powerbi)}
[data-kind="pa"]{--ac:var(--g-data)}
[data-kind="other"]{--ac:var(--text-dim)}

/* ── ภาพหัวเว็บ: โลโก้ FlowKit 3 มิติ (พี่ปอนด์เคาะ 23/09/2026) วัสดุเดียวกับปึกกระดาษของ FileKit
   ‼️ ห้าม filter หรือ opacity ที่ .hero3d (ฉาก 3 มิติจะถูกแบนทิ้ง) , ของที่ขยับทุกเฟรมเป็น transform เท่านั้น
   จุดแสงในท่อเป็น SMIL ใน SVG (ไม่ใช่ JS) , ลดการเคลื่อนไหว = นิ่งและซ่อนจุดแสง
   ‼️ เคยมีกล่องที่สองลอยขึ้นตอนแสงถึง (c-lift) พี่ปอนด์สั่งเอาออก 23/09/2026 "เอาแค่วิ่ง ๆ พอ ไม่ต้องยกขึ้น" ── */
.hero3d{position:relative; height:clamp(190px,22vw,290px); display:grid; place-items:center; perspective:1200px; perspective-origin:52% 42%;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)); transition:transform 280ms var(--ease)}
.hero3d::before{content:""; position:absolute; width:86%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(150,170,255,.28), rgba(150,170,255,0) 66%)}
.hero3d .plane{position:relative; width:clamp(170px,19vw,250px); aspect-ratio:1; transform-style:preserve-3d; transform:rotateX(56deg) rotateZ(-38deg)}
.hero3d .lay{position:absolute; border-radius:inherit; background:linear-gradient(rgba(4,6,10,var(--dim,0)), rgba(4,6,10,var(--dim,0))),linear-gradient(147deg,#fff 0%,#e8edf7 24%,#b4bfd6 52%,#dbe1ee 68%,#fbfcff 100%); box-shadow:0 24px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.95); transform:translateZ(var(--z,0px))}
.hero3d .face{box-shadow:0 26px 48px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,1), inset 1.5px 0 0 rgba(255,255,255,.7), inset -1.5px -1.5px 0 rgba(150,170,255,.5); overflow:hidden}
@property --sw{syntax:"<percentage>"; inherits:false; initial-value:-32%}
.hero3d .face::after{content:""; position:absolute; inset:-45%; background:linear-gradient(112deg, transparent calc(var(--sw) - 13%), rgba(255,255,255,.9) var(--sw), transparent calc(var(--sw) + 13%)); animation:h3-sweep 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes h3-sweep{0%,64%{--sw:-32%} 100%{--sw:132%}}
.hero3d .contact{position:absolute; width:clamp(170px,19vw,250px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.62) 0%, rgba(0,0,0,.46) 26%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.1) 66%, transparent 80%);
  transform:rotateX(56deg) rotateZ(-38deg) translateZ(-26px) scale(1.12,.8)}
.hero3d svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
@media (max-width:860px){ .hero3d{display:none} }
@media (prefers-reduced-motion: reduce){ .hero3d *,.hero3d *::after{animation:none!important} .hero3d .spark{display:none} }
.hero3d-c .tile{position:absolute; width:37.5%; height:30%; border-radius:12%/15%; transform-style:preserve-3d}
.hero3d-c .t1{left:7.50%; top:7.50%}
.hero3d-c .t2{left:55.00%; top:50.00%}
.hero3d-c .lay{inset:0}
.hero3d-c .plane{width:clamp(200px,23vw,300px)}
.hero3d-c .l1{--z:0px; --dim:.54} .hero3d-c .l2{--z:5px; --dim:.44} .hero3d-c .l3{--z:10px; --dim:.33} .hero3d-c .l4{--z:15px; --dim:.2} .hero3d-c .face{--z:20px; --dim:0}
.hero3d-c .wire{transform:translateZ(var(--z,10px))} .hero3d-c .w1{--z:4px} .hero3d-c .w2{--z:8px} .hero3d-c .w3{--z:12px}
.hero3d-c .pipe{fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round} .hero3d-c .w1 .pipe{stroke:#4c5468} .hero3d-c .w2 .pipe{stroke:#7d879e} .hero3d-c .w3 .pipe{stroke:url(#wm)}
.hero3d-c .spark{mix-blend-mode:normal}
.hero3d-c .t2 .face::after{animation-delay:-3s}

/* ‼️ โลโก้บนหัวเว็บเป็นม่วงของ FlowKit (พี่ปอนด์ 23/09/2026 "สีดำทั้งคู่เลย ไอคอนอ่ะ" = เดิมเป็นสี่เหลี่ยมสีเดียวกับ FileKit ทั้งสองเว็บ)
   FileKit = สี่เหลี่ยมเข้มตัว F , FlowKit = สี่เหลี่ยมม่วงกล่องสองกล่อง ให้ตรงกับไอคอนแท็บ (assets/icons/favicon.svg) */
.brand .mark{background:#6c4fd1; color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .mark{background:#7c5ce0} }
:root[data-theme="dark"] .brand .mark{background:#7c5ce0}

/* ‼️ แถบเว็บในเครือแบบ sqlbi (พี่ปอนด์ขอ 23/09/2026 จากหน้า sqlbi.com): FileKit กับ FlowKit มีไอคอนติดชื่อ , ทุกอันมีป้ายบอกตอนชี้
   ป้ายทำด้วย CSS ล้วน (content:attr(data-tip)) สลับภาษาด้วย :root[lang="en"] ไม่ต้องแตะสคริปต์แปลภาษาที่ถูก hash ไว้ใน CSP
   ระยะข้างลดจาก 20 เป็น 16 พิกเซล เพราะไอคอนทำให้แถบยาวขึ้น 42 พิกเซล แล้ว BKK Dashboard ตกบรรทัด (วัดจริงที่จอ 1280) */
.sites a{position:relative; padding-inline:16px}
.sites a .ico{width:17px; height:17px; flex:none; align-self:center; display:block}
/* 3 sites bar 23/09/2026 (see index.html comment) */
.sites a{opacity:1; color:rgba(255,255,255,.64)}
.sites a.self,.sites a:hover,.sites a:focus-visible{color:#fff}
.sites .ico-file{color:#8fa0ff} .sites .ico-flow{color:#b59dff} .sites .ico-learn{color:#ff8a7c}
.sites a span+b{margin-left:-.28em}   /* ชื่อติดกัน FileKit (พี่ปอนด์ 23/09/2026) ตัวบางกับตัวหนายังแยกน้ำหนัก */

@media (max-width:640px){ .network{display:block} .sites a{padding-inline:12px} }


/* หน้า 404 ใช้ไฟล์นี้ร่วม */
.notfound{max-width:var(--page-w); margin:0 auto; padding:clamp(40px,12vh,140px) var(--page-pad)}