/* KK15 — shared menu (desktop + mobile drawer) and footer */
:root{--s-accent:#5b3df5;--s-soft:#f1edff;--s-text:#1c1d2e;--s-muted:#6b7089;--s-line:#e6e8f2}

/* top bar on pages that do not have the app header styles */
.site-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:12px clamp(14px,3vw,28px);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--s-line);font-family:'Space Grotesk',system-ui,sans-serif}
.site-top .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--s-text)}
.site-top .brand img{border-radius:11px}
.site-top h1,.site-top .bname{display:block;margin:0;font-size:18px;font-weight:700;line-height:1.1;color:var(--text,#1c1d2e)}.site-top h1 em,.site-top .bname em{font-style:normal;color:var(--s-accent)}
.site-top .brand p{margin:2px 0 0;font-size:12px;color:var(--s-muted)}
.site-top .topnav{display:flex;gap:2px;flex-wrap:nowrap;margin-left:auto;align-items:center}
.site-top .topnav a{color:var(--s-muted);text-decoration:none;font-size:14px;font-weight:500;padding:8px 11px;border-radius:10px;white-space:nowrap}
.site-top .topnav a.acct,.site-top .topnav a.cta{margin-left:6px}
@media (max-width:1280px){.site-top .brand p{display:none}}
.site-top .topnav a:hover,.site-top .topnav a.on{background:var(--s-soft);color:var(--s-accent)}

.topnav a.cta{background:var(--s-accent);color:#fff!important}
.topnav a.cta:hover{opacity:.9}
.topnav a.hot{background:linear-gradient(135deg,#ff7e5f,#a46bff);color:#fff!important}

/* hamburger */
.menu-btn{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--s-line);background:#fff;border-radius:12px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:18px;height:2px;background:var(--s-text);border-radius:2px}
@media (max-width:1060px){
  header.top .topnav{display:none!important}
  .menu-btn{display:flex}
  header.top{flex-wrap:wrap}
}
.m-menu{position:fixed;inset:0;z-index:90;background:rgba(20,22,50,.35);display:flex;justify-content:flex-end}
.m-menu[hidden]{display:none}
.m-panel{width:min(330px,88vw);height:100%;background:#fff;box-shadow:-20px 0 60px rgba(20,22,50,.2);padding:16px;overflow:auto;font-family:'Space Grotesk',system-ui,sans-serif;animation:mIn .2s ease-out}
@keyframes mIn{from{transform:translateX(30px);opacity:0}}
.m-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.m-head img{border-radius:10px}.m-head b{font-size:17px}.m-head em{font-style:normal;color:var(--s-accent)}
.m-x{margin-left:auto;border:0;background:#f3f4f9;width:36px;height:36px;border-radius:10px;font-size:16px;cursor:pointer}
.m-panel nav{display:flex;flex-direction:column;gap:4px}
.m-panel nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:var(--s-text);text-decoration:none;font-weight:600;font-size:15px}
.m-panel nav a i{font-style:normal;width:30px;height:30px;display:grid;place-items:center;background:#f3f4f9;border-radius:9px;font-size:15px}
.m-panel nav a.on,.m-panel nav a:hover{background:var(--s-soft);color:var(--s-accent)}
.m-panel nav a.cta{background:var(--s-accent);color:#fff;margin-top:6px}.m-panel nav a.cta i{background:rgba(255,255,255,.2)}
.m-panel nav a.hot{background:linear-gradient(135deg,#ff7e5f,#a46bff);color:#fff}.m-panel nav a.hot i{background:rgba(255,255,255,.2)}
.m-note{margin:16px 4px 0;font-size:13px;color:var(--s-muted);line-height:1.5}
html.menu-open{overflow:hidden}

/* footer */
.site-foot{margin-top:48px;background:#14152b;color:#c9cbe0;font-family:'Space Grotesk',system-ui,sans-serif;text-align:left;font-size:14px}
.sf-in{max-width:1240px;margin:0 auto;padding:44px clamp(16px,3vw,28px) 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.site-foot h4{margin:4px 0 12px;color:#fff;font-size:14px;letter-spacing:.3px}
.site-foot a{display:block;color:#c9cbe0;text-decoration:none;padding:4px 0;transition:color .15s}
.site-foot a:hover{color:#fff}
.sf-logo{display:flex!important;align-items:center;gap:10px;color:#fff!important;font-weight:700;font-size:18px;margin-bottom:10px}
.sf-logo img{border-radius:11px}.sf-logo em{font-style:normal;color:#a99bff}
.sf-brand p{margin:0 0 12px;line-height:1.6;color:#a3a6c2;max-width:360px}
.sf-mail{color:#fff!important;font-weight:600}
.sf-loc{display:block;color:#a3a6c2;padding-top:4px}
.sf-warn{max-width:1240px;margin:0 auto;padding:14px clamp(16px,3vw,28px);border-top:1px solid #2a2c4a;font-size:12.5px;color:#a3a6c2;line-height:1.6}
.sf-bot{max-width:1240px;margin:0 auto;padding:14px clamp(16px,3vw,28px) 24px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#8f92b0;border-top:1px solid #2a2c4a}
.sf-bot a{display:inline;color:#a99bff;padding:0}
.sf-in{grid-template-columns:1.4fr 1.35fr 1fr 1fr 1fr}
.site-foot .sf-mails a{font-size:13px;line-height:1.35;padding:5px 0;word-break:break-all}
.site-foot .sf-mails a b{color:#fff}
.site-foot .sf-mails a small{display:block;color:#8f92b0;font-size:11.5px;word-break:normal}
.sf-in .sf-mails a::before{content:"✉"!important}
@media (max-width:1100px){.sf-in{grid-template-columns:1fr 1fr 1fr}.sf-brand{grid-column:1/-1}}
@media (max-width:860px){.sf-in{grid-template-columns:1fr 1fr}.sf-brand,.sf-mails{grid-column:1/-1}}
@media (max-width:480px){.sf-in{grid-template-columns:1fr}}
/* keep Kanak's floating button above the footer text on phones */
@media (max-width:600px){.site-foot{padding-bottom:70px}}

/* login page body is a flex row: put the footer on its own full-width row */
.auth-page{flex-wrap:wrap}
.auth-page .site-foot{flex:0 0 100%;width:100%;margin-top:0;position:relative;z-index:1}

/* footer v2: call-to-action band, social icons, back to top, livelier links */
.sf-cta{max-width:1240px;margin:0 auto;padding:28px clamp(16px,3vw,28px);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-bottom:1px solid #2a2c4a}
.sf-cta b{display:block;color:#fff;font-size:20px;margin-bottom:4px}.sf-cta span{color:#a3a6c2}
.sf-cta-b{display:flex;gap:10px;flex-wrap:wrap}
.site-foot a.sf-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border-radius:12px;border:1px solid #3a3d63;color:#fff;font-weight:600;transition:transform .15s,background .15s}
.site-foot a.sf-btn:hover{transform:translateY(-2px);background:#24264a}
.site-foot a.sf-btn.pri{background:linear-gradient(135deg,#5b3df5,#8b6cff);border-color:transparent}
.site-foot a.sf-btn.wa{background:#25d366;border-color:transparent;color:#0b3d1f}
.sf-in div:not(.sf-brand):not(.sf-social) a{position:relative;width:max-content;max-width:100%}
.sf-in div:not(.sf-brand):not(.sf-social) a::before{content:"›";margin-right:6px;color:#6f63c9;transition:margin .15s}
.sf-in div:not(.sf-brand):not(.sf-social) a:hover::before{margin-right:10px;color:#a99bff}
.sf-social{display:flex;gap:10px;margin-top:14px}
.site-foot .sf-social a{width:40px;height:40px;border-radius:12px;display:grid!important;place-items:center;padding:0;transition:transform .15s,box-shadow .15s}
.site-foot .sf-social a:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.sf-top{border:1px solid #3a3d63;background:transparent;color:#c9cbe0;border-radius:10px;padding:6px 12px;cursor:pointer;font:600 12.5px inherit;font-family:inherit}
.sf-top:hover{background:#24264a;color:#fff}
.sf-bot{align-items:center}
@media (max-width:600px){.sf-cta-b{width:100%}.site-foot a.sf-btn{flex:1 1 100%;justify-content:center}}
/* social icons in the top bar and in the mobile menu */
.top-social,.m-social{display:flex;gap:6px;align-items:center}
.top-social{margin-left:8px}
.top-social a,.m-social a{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 8px rgba(20,22,50,.12)}
.top-social a:hover,.m-social a:hover{transform:translateY(-2px) scale(1.06)}
.m-social{padding:4px 4px 0;gap:10px}.m-social a{width:42px;height:42px;border-radius:12px}
@media (max-width:980px){.top-social{margin-left:auto}.top-social+.menu-btn{margin-left:8px}}
@media (max-width:420px){.top-social a{width:28px;height:28px;border-radius:8px}.top-social svg{width:14px;height:14px}}@media (max-width:600px){.top-social{display:none}}
@media (max-width:980px){header.top .brand{order:1;flex:1 1 auto;min-width:0}header.top .menu-btn{order:2;margin-left:auto}header.top .top-social{order:2}header.top>*:not(.brand):not(.menu-btn):not(.top-social){order:3}}
