*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#0f172a;color:#e2e8f0;overflow-x:hidden}
body.app-shell{height:100vh;overflow:hidden}
.shell-layout{display:flex;height:100vh;width:100vw}
.sidebar-panel{width:310px;min-width:310px;height:100vh;background:#111827;box-shadow:8px 0 30px rgba(0,0,0,.25);z-index:20;overflow:hidden;transition:transform .25s ease,width .25s ease,min-width .25s ease}
.sidebar-panel.closed{width:0;min-width:0;overflow:hidden}
.sidebar-panel.open{width:310px;min-width:310px}
.sidebar-frame,.content-frame{border:0;width:100%;height:100%;display:block}
.content-panel{flex:1;min-width:0;height:100vh;background:#0f172a;overflow:hidden}
.menu-toggle{display:none;position:fixed;top:12px;left:12px;z-index:50;border:1px solid rgba(148,163,184,.25);border-radius:999px;background:#1e293b;color:#e2e8f0;padding:10px 14px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.35);cursor:pointer}
.mobile-backdrop{display:none}
.mobile-backdrop.open{display:block;position:fixed;inset:0;background:rgba(2,6,23,.65);z-index:10}
.sidebar-page{background:#111827;min-height:100vh;overflow:auto}
.sidebar{width:100%;min-height:100vh;padding:24px;background:#111827}
.profile{text-align:center}
.profile img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:6px solid #38bdf8;max-width:75vw}
.profile p{color:#94a3b8;line-height:1.6}
nav a{display:block;color:#e2e8f0;text-decoration:none;padding:12px;border-radius:12px;margin-bottom:8px}
nav a:hover,nav a:focus-visible,nav a.active{background:#1e293b;outline:none}
.parent{margin-top:20px;margin-bottom:8px;color:#38bdf8;font-weight:bold}
.submenu{padding-left:15px}
.content-page{background:#0f172a;min-height:100vh;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.content-page::-webkit-scrollbar{width:8px}
.content-page::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:4px}
.page-main{padding:40px;max-width:1200px;margin:0 auto}
.hero{background:linear-gradient(135deg,#1e293b,#111827);padding:45px;border-radius:24px;margin-bottom:30px}
.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.05;margin:0 0 18px}
.hero p{line-height:1.8;color:#cbd5e1}
.card{background:#1e293b;padding:30px;border-radius:22px;margin-bottom:25px}
.card h2{color:#38bdf8}
.card p,.card li{line-height:1.8;color:#cbd5e1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.logo{max-height:90px;max-width:100%;background:white;padding:15px;border-radius:12px;margin-bottom:20px}
.quote,blockquote{border-left:4px solid #38bdf8;padding-left:18px;font-style:italic;color:#cbd5e1;margin-left:0}
.badge{display:inline-block;background:#2563eb;padding:8px 12px;border-radius:999px;margin:5px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.key-wins{margin-top:30px;margin-bottom:30px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.btn{display:inline-block;color:#e2e8f0;text-decoration:none;background:#2563eb;padding:12px 18px;border-radius:999px;font-weight:700}
.btn:hover,.btn:focus-visible{background:#1d4ed8;outline:none}
img{max-width:100%;height:auto}
@media (max-width:800px){
  .menu-toggle{display:block}
  .shell-layout{display:block}
  .sidebar-panel{display:block;position:fixed;top:0;left:0;width:min(310px,85vw);min-width:0;max-width:85vw;height:100vh;transform:translateX(-100%)}
  .sidebar-panel.open{transform:translateX(0);width:min(310px,85vw);min-width:0}
  .sidebar-panel.closed{width:min(310px,85vw);min-width:0}
  .content-panel{height:100vh;width:100vw}
  .page-main{padding-top:68px}
}

@media (max-width:420px){
  .page-main{padding-left:12px;padding-right:12px}
  .hero{padding:28px 20px}
  .hero h1{font-size:32px}
  .card{padding:22px 18px}
  .badge{font-size:14px}
  .logo{max-height:74px}
}