/* ═══════════════════════════════════════════════════════════════════
   FuiSQL — shared site foundation
   Theme variables, animated mesh background, nav, footer, buttons and
   the generic content-page primitives. Every page under /public links
   this file FIRST; page-specific rules live in each page's own <style>.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── THEME VARIABLES ─────────────────────────────────────────────── */
:root {
  --display:'Outfit',sans-serif;
  --sans:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:8px;--r2:12px;
  --orange:#f5821f;--orange-dim:rgba(245,130,31,0.12);--orange-border:rgba(245,130,31,0.28);
  --blue:#3b82f6;--blue-dim:rgba(59,130,246,0.1);--blue2:#60a5fa;
  --green:#10b981;--green-dim:rgba(16,185,129,0.1);
  --red:#ef4444;--red-dim:rgba(239,68,68,0.1);
  --trans: background .2s ease, color .2s ease, border-color .2s ease;
}

/* DARK theme (default) — glass palette */
[data-theme="dark"] {
  --bg:#05060a;--bg2:rgba(20,22,40,.5);--bg3:rgba(28,30,50,.55);--bg4:rgba(40,42,65,.6);
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);--border3:rgba(255,255,255,.25);
  --text:#f5f5fa;--muted:#6b7090;--muted2:#a8acc8;--muted3:#888da8;
  --nav-bg:rgba(8,10,20,.55);
  --orange:#ff7a45;--orange-dim:rgba(255,122,69,.14);--orange-border:rgba(255,122,69,.4);
  --blue:#5b8def;--blue2:#8fb1ff;--blue-dim:rgba(91,141,239,.14);
  --green:#3ddc97;--green-dim:rgba(61,220,151,.14);
  --code-bg:#0d0d11;
  --dot-color:rgba(255,255,255,0.028);
  --shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
}

/* LIGHT theme — light base, dark type, white-tinted glass */
[data-theme="light"] {
  --text:#0f1222;--muted:#9a9fb8;--muted2:#4b5170;--muted3:#5f6588;
  --orange:#e8611c;--orange-dim:rgba(232,97,28,.10);--orange-border:rgba(232,97,28,.35);
  --blue:#2f6fe0;--blue2:#2458c7;--blue-dim:rgba(47,111,224,.10);
  --green:#12a56f;--green-dim:rgba(18,165,111,.10);
  --bg:#f6f7fb;--bg2:rgba(255,255,255,.72);--bg3:rgba(255,255,255,.82);--bg4:rgba(255,255,255,.95);
  --border:rgba(15,18,34,.08);--border2:rgba(15,18,34,.14);--border3:rgba(15,18,34,.24);
  --nav-bg:rgba(248,248,251,0.9);
  --code-bg:#eceef5;
  --dot-color:rgba(0,0,0,0.04);
  --shadow:0 12px 40px rgba(20,24,60,.10);
}

/* ── BASE ────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{background:transparent;color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;overflow-x:hidden;transition:var(--trans)}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(5,6,10,.3) 100%)}
[data-theme="light"] body::before{background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(244,245,251,.6) 100%)}
h1,h2,h3,h4,h5{font-family:var(--display);line-height:1.15}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--sans)}
input,select,textarea{font-family:var(--sans)}
code{font-family:var(--mono);font-size:.88em;color:var(--orange);background:var(--orange-dim);
  border:1px solid var(--orange-border);padding:1px 6px;border-radius:5px}
kbd{background:var(--bg4);border:1px solid var(--border2);border-radius:4px;
  padding:2px 6px;font-family:var(--mono);font-size:10.5px}
[data-theme="light"] kbd{background:#fff;border-color:rgba(15,18,34,.18)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── ANIMATED MESH BACKGROUND ────────────────────────────────────── */
#mesh-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#05060a}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.mesh-blob.b1{width:600px;height:600px;background:#ff3d8a;top:-15%;left:-10%;animation:drift1 22s ease-in-out infinite}
.mesh-blob.b2{width:520px;height:520px;background:#5b8def;top:10%;right:-15%;animation:drift2 26s ease-in-out infinite}
.mesh-blob.b3{width:580px;height:580px;background:#7c4dff;bottom:-20%;left:20%;animation:drift3 28s ease-in-out infinite}
.mesh-blob.b4{width:480px;height:480px;background:#ff7a45;top:40%;left:40%;animation:drift4 24s ease-in-out infinite}
.mesh-blob.b5{width:420px;height:420px;background:#00d4ff;bottom:5%;right:10%;animation:drift5 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,80px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-100px,140px) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-120px) scale(1.1)}}
@keyframes drift4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-150px,-80px) scale(1.2)}}
@keyframes drift5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(140px,-100px) scale(.95)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/></svg>")}
[data-theme="light"] #mesh-bg{background:#f4f5fb}
[data-theme="light"] .mesh-blob{opacity:.22;filter:blur(110px)}
[data-theme="light"] .grain{opacity:.18}

/* ── NAV ─────────────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:58px;display:flex;align-items:center;padding:0 36px;
  background:rgba(8,10,20,.45);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.04) inset;transition:var(--trans)}
.nav-logo{display:flex;align-items:center;gap:8px;margin-right:auto}
.nav-wordmark{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(135deg,#fff,#a8acc8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-wordmark span{background:linear-gradient(135deg,#ff7a45,#ff3d8a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:13px;color:var(--muted3);font-weight:500;transition:color .15s;text-decoration:none}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.nav-install{color:var(--orange);border:1px solid var(--orange-border);background:var(--orange-dim);
  padding:6px 13px;border-radius:var(--r);font-weight:600;transition:all .15s}
.nav-links a.nav-install:hover{color:#fff;background:var(--orange);border-color:var(--orange)}
/* Theme toggle */
#theme-btn{width:32px;height:18px;border-radius:9px;border:1px solid var(--border2);background:var(--bg3);
  position:relative;cursor:pointer;margin-left:8px;transition:var(--trans);flex-shrink:0}
#theme-btn::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:var(--orange);transition:transform .2s ease}
[data-theme="light"] #theme-btn::after{transform:translateX(14px)}
/* Admin nav button (home page only, but styled here so the nav is one unit) */
#adminNavBtn{background:transparent;border:1px solid var(--border2);border-radius:var(--r);
  color:var(--muted3);cursor:pointer;margin-left:4px;transition:all .2s;flex-shrink:0}
#adminNavBtn:hover{border-color:var(--orange-border);color:var(--orange)}
#adminNavBtn.authed{border-color:var(--orange-border);color:var(--orange);background:var(--orange-dim)}
/* Mobile nav: hamburger button (injected by site.js) toggles the links as a dropdown panel */
.nav-toggle{display:none}
@media(max-width:600px){
  #nav{padding:0 16px}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;margin-right:-8px;
    padding:0 10px;background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
  #nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav.open .nav-toggle span:nth-child(2){opacity:0}
  #nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 16px 16px;max-height:calc(100vh - 58px);overflow-y:auto;
    background:var(--bg);border-bottom:1px solid var(--border2);box-shadow:0 12px 32px rgba(0,0,0,.35)}
  #nav.open .nav-links{display:flex}
  .nav-links a{font-size:15px;padding:13px 4px;border-bottom:1px solid var(--border2)}
  .nav-links a.nav-install{margin-top:14px;padding:12px 13px;text-align:center;border:1px solid var(--orange-border)}
  #theme-btn{margin:16px 0 0 4px}
}
/* Small uppercase labels are 10px on desktop; bump them for readability on phones, and let the footer links wrap cleanly */
@media(max-width:600px){
  .form-lbl,.stat-lbl,.chart-lbl,.plan-name,.co-plan,.result-label,.arch-k,.why-hd,.tbl-hdr-title,.data-tbl th,
  .mid-help,.plan-rev-name,.badge,.key-val{font-size:11.5px!important}
  .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;font-size:13px}
  .foot-links .sep{display:none}
}
/* iOS Safari zooms the page when a focused field is under 16px */
@media(max-width:600px){input,select,textarea{font-size:16px!important}}
[data-theme="light"] #nav{background:rgba(248,249,253,.72);border-bottom:1px solid rgba(15,18,34,.08);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
[data-theme="light"] .nav-wordmark{background:linear-gradient(135deg,#0f1222,#3a3f66);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .nav-wordmark span{background:linear-gradient(135deg,#e8611c,#e0306f);-webkit-background-clip:text;background-clip:text}

/* ── SECTION PRIMITIVES ──────────────────────────────────────────── */
section{position:relative;z-index:1;background:transparent}
.wrap{max-width:1060px;margin:0 auto;padding:100px 28px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.section-title{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.025em;margin-bottom:12px;
  background:linear-gradient(180deg,#fff,#9ea3c9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-sub{color:var(--muted2);font-size:16px;max-width:520px;line-height:1.7;margin-bottom:52px}
[data-theme="light"] .section-title{background:linear-gradient(180deg,#0f1222,#3a3f66);-webkit-background-clip:text;background-clip:text}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;
  background:linear-gradient(135deg,#ff7a45,#ff3d8a);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;
  box-shadow:0 8px 32px rgba(255,61,138,.4),0 1px 0 rgba(255,255,255,.3) inset;
  font-family:var(--display);font-size:15px;font-weight:600;transition:transform .12s,box-shadow .15s;cursor:pointer;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,61,138,.55),0 1px 0 rgba(255,255,255,.3) inset;text-decoration:none}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;
  background:rgba(255,255,255,.04);backdrop-filter:blur(20px);color:#f5f5fa;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  font-family:var(--display);font-size:15px;font-weight:500;transition:all .15s;cursor:pointer;text-decoration:none}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);text-decoration:none}
[data-theme="light"] .btn-primary{color:#fff}
[data-theme="light"] .btn-ghost{background:rgba(255,255,255,.6);border:1px solid rgba(15,18,34,.16);color:var(--text)}
[data-theme="light"] .btn-ghost:hover{background:rgba(255,255,255,.9);border-color:rgba(15,18,34,.28)}

/* ── GLASS CARD (generic) ────────────────────────────────────────── */
.glass{background:rgba(255,255,255,.03);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.05) inset;transition:transform .3s,background .3s,border-color .3s}
.glass.hover:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);transform:translateY(-3px)}
.glass.accent{border-color:rgba(255,61,138,.5);
  background:linear-gradient(180deg,rgba(255,61,138,.08),rgba(255,255,255,.03));
  box-shadow:0 12px 48px rgba(255,61,138,.2),0 1px 0 rgba(255,255,255,.08) inset}
[data-theme="light"] .glass{background:rgba(255,255,255,.62);border:1px solid rgba(15,18,34,.09);
  box-shadow:0 6px 24px rgba(20,24,60,.07),0 1px 0 rgba(255,255,255,.9) inset}
[data-theme="light"] .glass.hover:hover{background:rgba(255,255,255,.85);border-color:rgba(15,18,34,.16)}
[data-theme="light"] .glass.accent{border-color:rgba(224,48,111,.45);
  background:linear-gradient(180deg,rgba(224,48,111,.07),rgba(255,255,255,.75));box-shadow:0 12px 40px rgba(224,48,111,.14)}

/* ── CONTENT PAGE PRIMITIVES (contact, team, terms, …) ───────────── */
.page-wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:120px 28px 90px}
.page-wrap.wide{max-width:1060px}
.page-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;margin-bottom:24px;
  background:rgba(255,255,255,.04);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);border-radius:100px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a8acc8;
  animation:fadeUp .5s ease both}
.page-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#3ddc97;box-shadow:0 0 10px #3ddc97}
.page-title{font-size:clamp(38px,6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-bottom:18px;
  background:linear-gradient(180deg,#fff 0%,#9ea3c9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:fadeUp .5s .08s ease both}
.page-title span{background:linear-gradient(135deg,#ff7a45 0%,#ff3d8a 50%,#c44dff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-lead{font-size:17px;color:var(--muted2);max-width:640px;line-height:1.7;margin-bottom:48px;padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.08);animation:fadeUp .5s .16s ease both}
.page-lead a{color:var(--orange)}
.page-lead a:hover{text-decoration:underline}
.page-body{animation:fadeUp .5s .24s ease both}
.page-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.page-h2{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;margin-bottom:26px;
  background:linear-gradient(180deg,#fff,#9ea3c9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.callout{background:var(--orange-dim);border:1px solid var(--orange-border);border-radius:12px;
  padding:14px 18px;font-size:13.5px;color:var(--text);line-height:1.6}
.callout strong{color:var(--orange)}
[data-theme="light"] .page-badge{background:rgba(255,255,255,.6);border:1px solid rgba(15,18,34,.12);color:var(--muted2)}
[data-theme="light"] .page-badge::before{background:var(--green);box-shadow:0 0 8px rgba(18,165,111,.6)}
[data-theme="light"] .page-title{background:linear-gradient(180deg,#0f1222 0%,#3a3f66 100%);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .page-title span{background:linear-gradient(135deg,#e8611c 0%,#e0306f 50%,#8a3fe0 100%);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .page-lead{border-bottom-color:rgba(15,18,34,.08)}
[data-theme="light"] .page-h2{background:linear-gradient(180deg,#0f1222,#3a3f66);-webkit-background-clip:text;background-clip:text}

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(255,255,255,.06);padding:32px 28px;text-align:center;
  position:relative;z-index:1;background:rgba(8,10,20,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:var(--trans)}
.foot-brand{font-family:var(--display);font-size:16px;font-weight:700;margin-bottom:6px}
.foot-brand span{color:var(--orange)}
footer p{font-size:12px;color:var(--muted);line-height:1.7}
.foot-links{margin-top:8px;font-size:12px}
.foot-links a{color:var(--muted3);text-decoration:none;transition:color .15s}
.foot-links a:hover{color:var(--orange);text-decoration:none}
.foot-links .sep{color:var(--muted);margin:0 8px}
.foot-copy{margin-top:4px;opacity:.3;font-size:11px}
[data-theme="light"] footer{background:rgba(248,249,253,.8);border-top:1px solid rgba(15,18,34,.08)}