/* KVMDR shared header + footer — used by every page on kvmdr.ai and dashboard.kvmdr.ai.
   Edit here once; all pages pick it up. Class prefix kh- (header) / kf- (footer) so page CSS can't clash. */

.kh{--kh-line:#23282f;--kh-muted:#9a958f;--kh-ink:#ecebe8;--kh-accent:#EB622C;--kh-solid:#C2410C;
  position:sticky; top:0; z-index:50; background:rgba(10,12,15,.92); border-bottom:1px solid var(--kh-line);
  font-family:"Hanken Grotesk",system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased}
@media(min-width:900px){.kh{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(10,12,15,.72)}}
.kh *{box-sizing:border-box}
.kh a{color:inherit; text-decoration:none}
.kh-in{max-width:1120px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:66px}
.kh-brand{display:flex; align-items:center}
.kh-brand img{height:30px; width:auto; display:block}
.kh-links{display:flex; gap:30px; font-size:14px; color:var(--kh-muted); font-weight:500}
.kh-links a:hover,.kh-links a.on{color:var(--kh-ink)}
.kh-drop{position:relative}
.kh-drop>a{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.kh-drop>a svg{width:13px; height:13px; transition:transform .15s}
.kh-drop:hover>a svg{transform:rotate(180deg)}
.kh-menu{position:absolute; top:100%; left:0; padding-top:10px; min-width:210px; display:none; z-index:60}
.kh-drop:hover .kh-menu{display:block}
.kh-menu-in{background:#fff; border:1px solid var(--kh-line); border-radius:12px; box-shadow:0 14px 38px rgba(0,0,0,.12); padding:8px; display:flex; flex-direction:column; gap:2px}
.kh-menu-in a{padding:9px 12px; border-radius:8px; color:#0a0c0f !important; font-weight:600; white-space:nowrap; font-size:14px}
.kh-menu-in a:hover{background:var(--kh-solid); color:#fff !important}
.kh-actions{display:flex; align-items:center; gap:12px}
.kh-btn{display:inline-block; background:var(--kh-solid); color:#fff !important; font-weight:700; padding:10px 16px; border-radius:10px; font-size:14px; line-height:1.55; border:0; white-space:nowrap;
  transition:transform .15s, box-shadow .2s, background .15s; box-shadow:0 6px 22px rgba(235,98,44,.32)}
.kh-btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(235,98,44,.45)}
.kh-btn.ghost{background:transparent; color:var(--kh-ink) !important; border:1px solid var(--kh-line); box-shadow:none}
.kh-btn.ghost:hover{border-color:var(--kh-accent); color:var(--kh-accent) !important}
.kh-btn.login{background:#2563EB; box-shadow:none}
.kh-btn.login:hover{background:#1D4ED8; box-shadow:none}
.kh-burger{display:none; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:1px solid var(--kh-line); border-radius:10px; color:#E6EDF3; cursor:pointer; padding:0}
.kh-burger svg{width:22px; height:22px; display:block}
.kh-burger .x{display:none}
.kh-burger[aria-expanded="true"] .x{display:block}
.kh-burger[aria-expanded="true"] .bars{display:none}
.kh-mobile{display:none; border-top:1px solid var(--kh-line); background:rgba(10,12,15,.98)}
.kh-mobile.open{display:block}
.kh-mobile a{display:block; padding:15px 22px; color:#E6EDF3; font-size:16px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.06)}
.kh-mobile a:active{background:rgba(255,255,255,.05)}
.kh-mobile a.sub{padding-left:38px; font-size:15px; font-weight:500; opacity:.85}
.kh-mobile a.cta{margin:14px 22px 20px; border:0; border-radius:10px; text-align:center; background:var(--kh-solid); color:#fff}
.kh-mobile a.demo{margin:0 22px 10px; border:1px solid var(--kh-line); border-radius:10px; text-align:center}
@media(max-width:1000px){.kh-links{gap:20px}}
@media(max-width:760px){
  .kh-links,.kh-btn.login,.kh-btn.ghost{display:none}
  .kh-btn{padding:9px 13px; font-size:13px}
  .kh-actions{margin-left:auto; margin-right:10px}
  .kh-burger{display:inline-flex}
}
@media(min-width:761px){.kh-mobile{display:none !important}}

.kf{border-top:1px solid #23282f; padding:34px 0; margin-top:30px; color:#9a958f; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:13px; line-height:1.55; position:relative; z-index:1}
.kf-in{max-width:1120px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.kf p{margin:0}
.kf-links{font-size:.85rem; line-height:2; opacity:.8}
.kf-links a{color:inherit; text-decoration:none}
.kf-links a:hover{color:#ecebe8}