/* ===========================================================
   DocBase — default-theme.css
   Klivolks family theme (tokens/classes match sibling apps —
   kpass.klivolks.com, klivolks.com). Loaded AFTER Bootstrap's
   CSS. Bootstrap supplies grid + utilities only; every visual
   component below uses its own class name (never .btn/.card/
   .navbar) so Bootstrap's component CSS never touches it.
   =========================================================== */

:root{
  --white:#FFFFFF;
  --surface:#F5F7FA;
  --ink:#14171C;
  --muted:#5B6572;
  --line:#E2E6EB;
  --brand:#22A7F0;
  --brand-dark:#1B87C4;
  --brand-tint: rgba(34,167,240,0.1);
  --navy:#0E2A44;
  --navy-2:#12365A;
  --radius-sig: 0 32px 0 32px;   /* signature: matches logo geometry */
  --radius-sig-sm: 0 18px 0 18px;
}

html{scroll-behavior:smooth;color-scheme:light;background:var(--white);}
body{
  font-family:'Inter', -apple-system, sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3,.display{font-family:'Space Grotesk', sans-serif;letter-spacing:-0.02em;font-weight:600;}
.mono{font-family:'JetBrains Mono', monospace;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;}

/* ---------- Header / logo ---------- */
header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.header-row{display:flex;align-items:center;padding:14px 0;gap:28px;}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:21px;font-family:'Space Grotesk',sans-serif;}
.logo-icon{width:30px;height:30px;object-fit:contain;flex:none;}
.logo-suffix{font-size:14px;font-weight:500;color:var(--muted);margin-left:1px;}

.primary-nav{display:flex;gap:4px;align-items:center;flex:1;}
.nav-link-plain{
  font-size:14.5px;font-weight:500;color:var(--muted);padding:10px 12px;border-radius:8px;
  transition:color .15s, background .15s;
}
.nav-link-plain:hover{color:var(--ink);background:var(--surface);}
.header-actions{display:flex;align-items:center;gap:12px;}

/* ---------- Buttons (custom name — no Bootstrap collision) ---------- */
.btn-kl{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14.5px;font-weight:600;padding:10px 20px;border-radius:8px;
  border:1px solid transparent;cursor:pointer;transition:all .15s;
}
.btn-kl-primary{background:var(--ink);color:var(--white);}
.btn-kl-primary:hover{background:var(--brand-dark);}
.btn-kl-ghost{color:var(--ink);border-color:var(--line);}
.btn-kl-ghost:hover{border-color:var(--ink);}
.btn-kl-lg{padding:14px 26px;font-size:15.5px;border-radius:10px;}

/* ---------- Hero ---------- */
.hero{padding:88px 0 72px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:20px;}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--brand);border-radius:2px;}
.hero h1{font-size:clamp(34px,4.6vw,52px);line-height:1.08;max-width:620px;margin-bottom:20px;}
.hero p{font-size:17.5px;color:var(--muted);max-width:520px;margin-bottom:32px;line-height:1.55;}
.hero-art{width:100%;height:auto;}

/* ---------- Hero animation (hero-doc): one 6s loop of a data row
   filling a template, being stamped, and landing on the stored stack.
   Card/panel look matches the Klivolks family; keyframes are kl-*. --- */
.hero-panel{fill:var(--surface);stroke:var(--line);stroke-width:1px;}
.hero-card{fill:var(--white);stroke:var(--line);}
.hero-doc text{font-family:'Inter',sans-serif;}
.hero-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted);}
.hero-key{font-family:'JetBrains Mono',monospace;font-size:8.5px;fill:var(--muted);}
.hero-val{font-size:11px;font-weight:600;fill:var(--ink);}
.hero-flow{fill:none;stroke:var(--brand);stroke-width:2px;stroke-linecap:round;stroke-dasharray:3px 5px;animation:kl-march 1s linear infinite;}

/* Data rows light up in turn. */
.hero-row{fill:var(--brand-tint);stroke:var(--brand);stroke-width:1px;opacity:0;animation:6s ease-in-out infinite;}
.hero-row-1{animation-name:kl-row-1;}
.hero-row-2{animation-name:kl-row-2;}
.hero-row-3{animation-name:kl-row-3;}

/* Template: each slot fills while its row is lit, then sign + seal. */
.hero-sheet{fill:var(--white);stroke:var(--line);}
.hero-sheet-band{fill:var(--brand);}
.hero-sheet-title{font-family:'Space Grotesk',sans-serif !important;font-size:12px;font-weight:600;letter-spacing:.12em;fill:var(--navy);text-anchor:middle;}
.hero-slot{fill:none;stroke:var(--line);stroke-width:1.2px;stroke-dasharray:3px 3px;}
.hero-fill,.hero-sign{transform-box:fill-box;transform:scaleX(0);animation:6s ease-in-out infinite;}
.hero-fill{transform-origin:center;}
.hero-fill-1{fill:var(--navy);animation-name:kl-fill-1;}
.hero-fill-2{fill:var(--brand-dark);animation-name:kl-fill-2;}
.hero-fill-3{fill:var(--muted);animation-name:kl-fill-3;}
.hero-sign{fill:var(--navy);transform-origin:left;animation-name:kl-sign;}
.hero-seal,.hero-seal-tick{transform-box:view-box;transform-origin:280px 292px;transform:scale(0);animation:kl-seal 6s ease-in-out infinite;}
.hero-seal{fill:var(--brand-dark);stroke:var(--brand-tint);stroke-width:4px;}
.hero-seal-tick{fill:none;stroke:var(--white);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;}

/* Finished copy shrinks onto the stack; the stack bumps as it lands. */
.hero-fly{opacity:0;transform-box:view-box;transform-origin:244px 202px;animation:kl-fly 6s ease-in-out infinite;}
.hero-fill-static{fill:var(--navy);opacity:.75;}
.hero-seal-static{fill:var(--brand-dark);}
.hero-stack{fill:var(--white);stroke:var(--line);}
.hero-stack-2{opacity:.8;}
.hero-stack-3{opacity:.55;}
.hero-stack-top{animation:kl-land 6s ease-in-out infinite;}
.hero-stack-line{fill:var(--navy);}
.hero-stack-line-mid{fill:var(--brand-dark);}
.hero-stack-line-soft{fill:var(--muted);}
.hero-seal-tick-static{fill:none;stroke:var(--white);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;}
.hero-pdf{fill:var(--brand-tint);stroke:var(--brand);stroke-width:1px;}
.hero-pdf-text{font-family:'JetBrains Mono',monospace !important;font-size:7.5px;font-weight:600;fill:var(--brand-dark);text-anchor:middle;}
.hero-file{font-family:'JetBrains Mono',monospace !important;font-size:10.5px;fill:var(--ink);opacity:0;animation:6s ease-in-out infinite;}
.hero-file-3{animation-name:kl-file-before;}
.hero-file-4{animation-name:kl-file-after;}

@keyframes kl-march{to{stroke-dashoffset:-8px}}
@keyframes kl-row-1{0%,3%{opacity:0}7%,17%{opacity:1}21%,to{opacity:0}}
@keyframes kl-row-2{0%,19%{opacity:0}23%,33%{opacity:1}37%,to{opacity:0}}
@keyframes kl-row-3{0%,35%{opacity:0}39%,49%{opacity:1}53%,to{opacity:0}}
@keyframes kl-fill-1{0%,9%{transform:scaleX(0)}15%,90%{transform:scaleX(1)}96%,to{transform:scaleX(0)}}
@keyframes kl-fill-2{0%,25%{transform:scaleX(0)}31%,90%{transform:scaleX(1)}96%,to{transform:scaleX(0)}}
@keyframes kl-fill-3{0%,41%{transform:scaleX(0)}47%,90%{transform:scaleX(1)}96%,to{transform:scaleX(0)}}
@keyframes kl-sign{0%,50%{transform:scaleX(0)}54%,90%{transform:scaleX(1)}96%,to{transform:scaleX(0)}}
@keyframes kl-seal{0%,54%{transform:scale(0)}58%{transform:scale(1.25)}61%,90%{transform:scale(1)}96%,to{transform:scale(0)}}
@keyframes kl-fly{0%,62%{opacity:0;transform:none}64%{opacity:1;transform:none}78%{opacity:1;transform:translate(132px,-29px) scale(.516)}81%,to{opacity:0;transform:translate(132px,-29px) scale(.516)}}
@keyframes kl-land{0%,77%{transform:none}81%{transform:translateY(4px)}86%,to{transform:none}}
@keyframes kl-file-before{0%,78%{opacity:1}80%,to{opacity:0}}
@keyframes kl-file-after{0%,79%{opacity:0}82%,97%{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hero-doc *{animation:none!important;}
  .hero-fill,.hero-sign{transform:scaleX(1);}
  .hero-seal,.hero-seal-tick{transform:scale(1);}
  .hero-file-4{opacity:1;}
}

/* ---------- 404 (not-found-content.html): the hero's certificate,
   left blank — slots pulse as if searching, a 404 seal in place of
   the stamp. Reuses hero-panel/sheet/slot from above. ------------- */
.not-found{min-height:calc(100vh - 140px);display:flex;align-items:center;}
.nf-path{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.9em;color:var(--ink);word-break:break-all;}
.nf-slot{animation:kl-nf-search 2.4s ease-in-out infinite;}
.nf-slot-2{animation-delay:.3s;}
.nf-slot-3{animation-delay:.6s;}
.nf-sign{fill:var(--line);}
.nf-seal{fill:var(--white);stroke:var(--brand);stroke-width:2px;stroke-dasharray:4px 4px;transform-box:fill-box;transform-origin:center;animation:kl-nf-spin 12s linear infinite;}
.nf-seal-text{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;fill:var(--brand-dark);text-anchor:middle;}
@keyframes kl-nf-search{0%,100%{stroke:var(--line)}50%{stroke:var(--brand)}}
@keyframes kl-nf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nf-art *{animation:none!important;}}

/* ---------- How it works ---------- */
.steps{padding:72px 0;background:var(--surface);}
.section-head{max-width:600px;margin-bottom:44px;}
.section-head h2{font-size:clamp(24px,2.8vw,30px);margin-bottom:10px;}
.section-head p{color:var(--muted);font-size:15.5px;}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sig-sm);padding:26px 24px;height:100%;}
.step .step-no{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;background:var(--brand-tint);color:var(--brand-dark);
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;margin-bottom:14px;
}
.steps-plain{background:var(--white);}
.step h3{font-size:16.5px;margin-bottom:8px;}
.step p{font-size:14px;color:var(--muted);line-height:1.55;margin:0;}

/* ---------- Bundled-with strip ---------- */
.bundled{padding:52px 0;text-align:center;}
.bundled p{font-size:13px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
.bundled-apps{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.bundled-apps span{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);
  border:1px solid var(--line);border-radius:20px;padding:7px 16px;
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:24px 0;}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);}
.footer-row a{color:var(--muted);}
.footer-row a:hover{color:var(--ink);}

@media (max-width:767px){
  .primary-nav{display:none;}
  .hero{padding:56px 0 48px;text-align:left;}
}