/* aspSmart.com - lightweight static rebuild (3 main pages + article template)
   Layout inspired by early-2000s corporate software sites.
*/

:root{
  --page-bg:#2f2f2f;
  --content-bg:#ffffff;
  --nav-bg:#0a1d57;
  --nav-border:#06123a;
  --accent:#d01919;
  --link:#0b4aa2;
  --sidebar-bg:#f3f3f3;
  --sidebar-border:#d7d7d7;
  --text:#1b1b1b;
  --muted:#666;
  --maxw: 780px;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --font: Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--page-bg);
  line-height:1.45;
}

/* page frame */
.page{
  width:var(--maxw);
  margin:18px auto 26px;
  background:var(--content-bg);
  box-shadow:var(--shadow);
  border:1px solid #111;
}

/* top header with logo + banner */
.topbar{
  display:flex;
  align-items:stretch;
  height:78px;
  border-bottom:1px solid #cfcfcf;
}
.brand{
  width:210px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
}
.logo-mark{
  width:64px;height:40px;flex:0 0 auto;
  display:block;
}
.brand .wordmark{
  font-weight:700;
  font-size:28px;
  letter-spacing:-.5px;
  color:#0a1d57;
  line-height:1;
}
.brand .wordmark span{
  color:#ff6a00;
}
.banner{
  flex:1 1 auto;
  position:relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.0) 35%, rgba(255,255,255,.65) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, #dfe9ff 0%, #f4f7ff 35%, #e9f1ff 100%);
  overflow:hidden;
}
.banner::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120px 120px at 86% 45%, rgba(10,29,87,.22), rgba(10,29,87,0) 65%),
    radial-gradient(180px 180px at 92% 65%, rgba(10,29,87,.18), rgba(10,29,87,0) 70%),
    linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  pointer-events:none;
}
.banner .person{
  position:absolute;
  right:10px; top:6px;
  width:150px; height:68px;
  opacity:.85;
}
.banner .tagline{
  position:absolute;
  left:16px; top:18px;
  font-size:12px;
  color:#2a2a2a;
}
.banner .tagline strong{
  color:#0a1d57;
}

/* nav */
.nav{
  background:var(--nav-bg);
  border-top:1px solid var(--nav-border);
  border-bottom:1px solid var(--nav-border);
}
.nav ul{
  margin:0;
  padding:0 10px;
  list-style:none;
  display:flex;
  gap:18px;
  align-items:center;
  height:30px;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.nav a:hover{ text-decoration:underline; }
.nav a.active{
  text-decoration:underline;
}

/* layout columns */
.main{
  display:flex;
  min-height:520px;
}
.sidebar{
  width:210px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  padding:12px 10px 16px;
}
.side-title{
  font-weight:700;
  font-size:12px;
  color:#1f1f1f;
  margin:2px 4px 8px;
}
.sidebox{
  background:#fff;
  border:1px solid var(--sidebar-border);
  padding:10px 10px 8px;
  margin:0 4px 12px;
}
.sidebox ul{
  margin:0;
  padding:0;
  list-style:none;
}
.sidebox li{
  margin:4px 0;
}
.sidebox a{
  font-size:12px;
  color:var(--link);
  text-decoration:none;
}
.sidebox a:hover{ text-decoration:underline; }

.content{
  flex:1 1 auto;
  padding:18px 18px 26px;
}

/* headings */
h1,h2,h3{ margin:0 0 10px; line-height:1.15; }
.h1{
  font-size:34px;
  font-weight:800;
  color:var(--accent);
  letter-spacing:.2px;
  margin-bottom:12px;
}
.h2{
  font-size:16px;
  font-weight:800;
  color:#0a1d57;
  margin-top:18px;
}
.hr-red{
  border:0;
  border-top:1px solid rgba(208,25,25,.65);
  margin:10px 0 14px;
}
p{ margin:0 0 12px; }
.small{ font-size:12px; color:var(--muted); }
a{ color:var(--link); }
a:hover{ text-decoration:underline; }

/* feature list blocks similar to screenshot */
.feature-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:10px 0 14px;
}
.feature-logo{
  width:170px;
  flex:0 0 170px;
  border:1px solid #d8d8d8;
  background:linear-gradient(135deg,#ffffff,#f2f2f2);
  padding:10px;
  text-align:center;
}
.feature-logo .product{
  font-weight:800;
  font-size:26px;
  letter-spacing:-.3px;
  color:#0a1d57;
}
.feature-logo .product span{ color:#ff6a00; }
.feature-logo .sub{
  font-size:12px;
  color:#555;
  margin-top:6px;
}
.feature-body{
  flex:1 1 auto;
}
.bullets{
  margin:8px 0 0 0;
  padding-left:18px;
}
.bullets li{
  margin:4px 0;
  font-size:12px;
}
.section{
  margin-top:16px;
}
.section h3{
  font-size:13px;
  font-weight:800;
  color:#0a1d57;
  margin-bottom:6px;
  text-decoration:underline;
}
.section p, .section li{
  font-size:12px;
}
.section ul{
  margin:6px 0 10px;
  padding-left:18px;
}

/* article styling */
.article-meta{
  font-size:12px;
  color:#666;
  margin:0 0 12px;
}
.article-body p{
  font-size:13px;
  margin-bottom:14px;
}
.article-body h2{
  margin-top:18px;
  font-size:16px;
  color:#0a1d57;
}

/* footer */
.footer{
  border-top:1px solid #ddd;
  padding:10px 18px 14px;
  font-size:11px;
  color:#666;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer a{ color:#666; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* responsive */
@media (max-width: 860px){
  :root{ --maxw: 94vw; }
}
@media (max-width: 720px){
  .topbar{ height:auto; flex-direction:column; }
  .brand{ width:auto; }
  .banner{ height:70px; }
  .main{ flex-direction:column; }
  .sidebar{ width:auto; border-right:0; border-bottom:1px solid var(--sidebar-border); }
}