/* PCrypt design system — dark, technical, developer-grade (foundersdb-inspired). */
:root{
  --bg:#08090d; --surface:#0e1016; --surface2:#14171f; --line:#23262f; --line2:#2c3040;
  --ink:#e8eaf0; --mut:#9aa1b2; --faint:#6b7280;
  --brand:#6d5dfc; --brand2:#8b7bff; --cyan:#34d3ee; --emerald:#34d399; --danger:#f87171;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
::selection{background:rgba(109,93,252,.35)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;line-height:1.08;margin:0}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ambient background: subtle grid + radial brand glow, fixed behind everything */
.bg-grid::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(109,93,252,.18), transparent 60%),
    radial-gradient(40rem 30rem at 90% 10%, rgba(52,211,238,.08), transparent 60%);
}
.bg-grid::after{
  content:"";position:fixed;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70rem 50rem at 50% 0,#000,transparent 75%);
          mask-image:radial-gradient(70rem 50rem at 50% 0,#000,transparent 75%);
}

.container{max-width:1120px;margin:0 auto;padding:0 24px}
.gradtext{background:linear-gradient(100deg,#fff 10%,var(--brand2) 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--mut)}
.faint{color:var(--faint)}

/* pill / badge */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line2);
  border-radius:999px;background:rgba(255,255,255,.02);font-size:13px;color:var(--mut)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.18s ease;
  white-space:nowrap;font-family:inherit}
.btn:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.btn-primary{background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;box-shadow:0 8px 24px -10px rgba(109,93,252,.8)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 32px -12px rgba(109,93,252,.9)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:#3a3f52}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:13px}
.btn[disabled]{opacity:.55;cursor:default;transform:none;filter:none}

/* surfaces */
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid var(--line);
  border-radius:16px;box-shadow:0 1px 0 0 rgba(255,255,255,.04) inset,0 24px 48px -32px rgba(0,0,0,.9)}
.card-hover{transition:.2s ease}
.card-hover:hover{border-color:#34384a;transform:translateY(-3px);box-shadow:0 1px 0 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(109,93,252,.35)}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(8,9,13,.72);border-bottom:1px solid var(--line)}

/* form inputs */
.input{width:100%;background:var(--surface2);border:1px solid var(--line2);color:var(--ink);border-radius:11px;
  padding:11px 13px;font:inherit;font-size:15px;transition:.15s}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,93,252,.25)}
label.fld{display:block;font-size:13px;color:var(--mut);margin:0 0 7px;font-weight:500}

/* code/terminal */
.term{background:#0b0d13;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.term-dot{width:11px;height:11px;border-radius:50%}
.term pre{margin:0;padding:18px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;line-height:1.7;overflow:auto}
.c-key{color:#8b7bff}.c-str{color:#7ee0a0}.c-com{color:#5b6172}.c-fn{color:#34d3ee}.c-num{color:#fbbf24}.c-red{color:#f87171}

/* before/after walkthrough */
.ba-step{flex:none;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--faint);font-size:12px;font-family:"JetBrains Mono",ui-monospace,monospace;white-space:nowrap;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.ba-step:hover{color:var(--mut);border-color:var(--line2)}
.ba-step.on{color:var(--ink);border-color:#4b40b0;background:rgba(109,93,252,.16)}
.ba-step .n{opacity:.55;font-size:10px}
.ba-nav{width:27px;height:24px;border-radius:7px;border:1px solid var(--line);color:var(--mut);font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:.15s}
.ba-nav:hover{color:var(--ink);border-color:var(--line2);background:rgba(255,255,255,.05)}
#ba-steps{scrollbar-width:none}
#ba-steps::-webkit-scrollbar{height:0}

/* dropzone */
.drop{border:1.5px dashed var(--line2);border-radius:14px;padding:34px;text-align:center;cursor:pointer;
  background:var(--surface);transition:.18s}
.drop:hover,.drop.hot{border-color:var(--brand);background:rgba(109,93,252,.06)}

/* entrance animation */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) both}
.reveal-2{animation-delay:.08s}.reveal-3{animation-delay:.16s}.reveal-4{animation-delay:.24s}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#262a36;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#333848}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}