:root{
  --blue:#4a82d7; --blue-soft:#e8f0fb;
  --ink:#1d2733; --muted:#5b6a7c;
  --bg:#ffffff; --bg-soft:#f4f7fb; --border:#e3e9f2;
  --purple:#7a1fd0; --flow:#6b5bff; --red:#ff6b6b; --green:#4ea624; --gray:#9aa4b1;
  --code-bg:#1b2e4d; --code-ink:#dbe7f6; --code-dim:#7d93b5;
  --radius:14px;
  --font-display: 'Ubuntu','Baloo 2',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px;width: stretch;}
img,svg{vertical-align:middle}
a{color:var(--blue-dark);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--blue);width: 120px;}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px}
.plugfy-logo-header-blue{display:none;}
.plugfy-logo-header-white{display:none;}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.site-nav a{padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:500;font-size:.95rem}
.site-nav a:hover{background:var(--blue-soft);text-decoration:none}
.site-nav a.active{color:var(--blue-dark);background:var(--blue-soft)}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:1.05rem; color: var(--code-dim);}
@media(max-width:940px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:10px 16px 16px}
  .site-nav.open{display:flex}
}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:600;text-decoration:none;border:2px solid transparent;font-size:1rem}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{border-color:var(--blue);color:var(--blue-dark);background:#fff}
.btn-outline:hover{background:var(--blue-soft)}
.btn-ghost{border:1px solid var(--border)!important;border-radius:10px}
.hero{background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%);padding:72px 0 56px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-family:var(--font-display);font-size:clamp(2.1rem,4.5vw,3.1rem);line-height:1.12;margin:0 0 18px}
.hero h1 em{color:var(--blue);font-style:normal}
.hero p.lead{font-size:1.2rem;color:var(--muted);margin:0 0 28px;max-width:34em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.page-hero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding:56px 0 40px;border-bottom:1px solid var(--border)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 10px}
.page-hero p{font-size:1.15rem;color:var(--muted);margin:0;max-width:46em}
section.block{padding:56px 0}
section.block.alt{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
h2.section-title{font-family:var(--font-display);font-size:1.9rem;margin:0 0 8px}
p.section-sub{color:var(--muted);margin:0 0 32px;max-width:52em}
h3{font-family:var(--font-display);font-size:1.25rem;margin:1.6em 0 .5em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.card h3{margin:0 0 8px;font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.97rem}
.card .icon{font-size:1.6rem;margin-bottom:10px;display:block}
.tax{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.tax .t{border-radius:var(--radius);padding:20px;border:1px solid var(--border);background:#fff}
.tax .t b{display:block;font-family:var(--font-display);font-size:1.2rem;margin-bottom:6px}
.tax .t p{margin:0;font-size:.92rem;color:var(--muted)}
.t-solution b{color:var(--red)}.t-project b{color:var(--gray)}.t-plug b{color:var(--purple)}.t-flow b{color:var(--flow)}.t-fy b{color:var(--green)}
pre{background:var(--code-bg);color:var(--code-ink);padding:20px 22px;overflow-x:auto;font-family:var(--font-mono);font-size:.88rem;line-height:1.6;margin:0;}
code{font-family:var(--font-mono)}
p code,li code,td code{background:var(--blue-soft);color:var(--blue-dark);padding:2px 6px;border-radius:6px;font-size:.86em}
.codebox{margin:20px 0;border-radius:var(--radius);overflow:clip;display: grid;}
.codebox .bar{background:#4a6a96;color:var(--code-ink);font-family:var(--font-mono);font-size:.75rem;padding:8px 16px;display:flex;justify-content:space-between;align-items:center}
.codebox .bar button{background:var(--code-bg);border:1px solid #2a3c58;color:var(--code-ink);border-radius:6px;padding:2px 10px;cursor:pointer;font-size:.72rem}
.codebox .bar button:hover{color:#fff;border-color:#4a6a96}
pre .c{color:#6f87a8}pre .k{color:#7fb4ff}pre .s{color:#a8e08f}pre .f{color:#ffd479}
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border)}
th{background:var(--bg-soft);font-weight:600}
tr:hover td{background:var(--bg-soft)}
.badge{display:inline-block;font-size:.72rem;font-weight:600;border-radius:99px;padding:2px 10px;vertical-align:middle}
.badge.ok{background:#e4f5df;color:#2c7a12}
.badge.plan{background:#fff3d6;color:#946200}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:940px){.two-col{grid-template-columns:1fr}}
/* .prose{max-width:760px} */
.prose ul{padding-left:1.3em}
.prose li{margin:.35em 0}
blockquote{margin:20px 0;padding:14px 20px;border-left:4px solid var(--blue);background:var(--blue-soft);border-radius:0 10px 10px 0;color:var(--ink)}
.footnote{color:var(--muted);font-size:.88rem}
.site-footer{background:#101b2b;color:#b9c6d8;margin-top:72px;padding:48px 0 32px;font-size:.93rem}
.site-footer a{color:#dce7f5}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:#fff;font-family:var(--font-display);margin:0 0 12px;font-size:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:6px 0}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#fff;margin-bottom:10px;width: 100px;}
.footer-brand svg{width:26px;height:26px}
.footer-bottom{border-top:1px solid #24344c;margin-top:36px;padding-top:20px;color:#8496ad;font-size:.85rem}
/* .codebox.terminal > pre {
    background: #131313;
    color: #81f19d; 
} */
.codebox.terminal > .bar {
    background: #515151;
    color: #fff;
}
.codebox.terminal .bar > button {
    background: var(--term-bg-button);
    border-color: #818181;
}


/* =========================
   DARK / LIGHT MODE
   ========================= */

/* Manual override */
html[data-theme="light"]{
  --ink:#1d2733;
  --muted:#5b6a7c;

  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --border:#e3e9f2;

  --blue-soft:#e8f0fb;

  --code-bg:#1b2e4d;
  --code-ink:#dbe7f6;
  --code-dim:#7d93b5;
  --term-bg-button:#f3f3f3;
  --code-bg-button:#fcfcfc;
  --blue-dark:#2f5fae;
  --plugfy-logo-header-blue: block;
  --plugfy-logo-header-white: none;

}

.plugfy-logo-header-blue{
  display: var(--plugfy-logo-header-blue);
}

.plugfy-logo-header-white{
  display: var(--plugfy-logo-header-white);
}

html[data-theme="dark"]{
  --ink:#edf3fb;
  --muted:#b3c1d2;

  --bg:#0f1723;
  --bg-soft:#182433;
  --border:#2a394d;

  --blue-soft:#233954;

  --code-bg:#262d3d;
  --code-ink:#dce8ff;
  --code-dim:#90a7cb;
  --term-bg-button:#1b1b1b;
  --code-bg-button:#1b1b1b;
  --blue-dark:#4a82d7;
  --plugfy-logo-header-blue: none;
  --plugfy-logo-header-white: block;

}

/* Smooth transition */
body,
.site-header,
.card,
.tax .t,
.btn-outline,
table td,
table th {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Theme aware surfaces */
.site-header{
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

@media(max-width:940px){
  .site-nav{
    background: var(--bg);
  }
}

.hero{
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}

.card,
.tax .t{
  background: var(--bg);
}

.btn-outline{
  background: var(--bg);
}

tr:hover td{
  background: var(--bg-soft);
}

/* Theme toggle button */
.theme-toggle{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:.25s;
  flex-shrink:0;
}

.theme-toggle:hover{
  background:var(--bg-soft);
}

.theme-toggle span{
  position:absolute;
  transition:.25s;
}

.icon-light{ opacity:1; }
.icon-dark{ opacity:0; }

html[data-theme="dark"] .icon-light{ opacity:0; }
html[data-theme="dark"] .icon-dark{ opacity:1; }



/* ===== Professional code themes ===== */
:root{
 --code-bg-light:#f7f9fc;
 --code-bar-light:#cce3ff;
 --code-border-light:#ffffff;
 --term-bg-light:#1e1e1e;
 --term-bar-light:#4d4d4d ;

 --code-bg-dark:#13182b;
 --code-bar-dark:#27325d;
 --code-border-dark:#252a31;
 --term-bg-dark:#050505;
 --term-bar-dark:#161616 !important;
}

.codebox{
 border:1px solid var(--border);
 box-shadow:0px 0px 12px 0px rgb(0 0 0 / 20%);
}

.codebox pre{
 background:var(--code-bg-light);
 color:#1f2937;
}

.codebox .bar{
 background:var(--code-bar-light);
 color:#334155;
 border-bottom:1px solid var(--code-border-light);
}

.codebox .bar button{
 background: var(--code-bg-button);
 border:1px solid var(--code-border-light);
 color:#475569;
}

.codebox .bar button:hover{
 background:rgb(31, 31, 31);
}

/* .codebox.terminal pre{
 background:var(--term-bg-light)!important;
 color:#86efac!important;
} */

.codebox.terminal .bar{
 background:var(--term-bar-light)!important;
 color:white!important;
}

pre .k{color:#7c3aed;}
pre .f{color:#2563eb;}
pre .s{color:#b45309;}
pre .c{color:#7a8598;}

html[data-theme="dark"] .codebox{
 border-color:var(--code-border-dark);
}

html[data-theme="dark"] .codebox pre{
 background:var(--code-bg-dark);
 color:#dbe7f6;
}

html[data-theme="dark"] .codebox .bar{
 background:var(--code-bar-dark);
 color:#dbe7f6;
 border-bottom:1px solid var(--code-border-dark);
}

html[data-theme="dark"] .codebox .bar button{
 border-color:#3d4c63;
}

html[data-theme="dark"] .codebox .bar button:hover{
 background:#2b3648;
 color: #fff;
}

html[data-theme="dark"] .codebox.terminal pre{
 background:var(--term-bg-dark)!important;
 color:#86efac!important;
}

html[data-theme="dark"] .codebox.terminal .bar{
 background:var(--term-bar-dark)!important;
}

@media(max-width:940px){
  .theme-toggle {
    margin-left: auto;
    margin-right: 20px;
    position: absolute;
    right: inherit;
  }
}