:root{
  --bg: #ffffff;
  --primary: #008080; /* Teal */
  --muted: #6b7280;
  --panel: #f7f9fb;
  --accent: rgba(0,128,128,0.06);
  --max-width: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.app{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:220px;
  padding:28px 20px;
  background:transparent;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hamburger{
  display:none;
  background:transparent;
  border:0;
  color:var(--primary);
  font-size:20px;
  padding:8px;
}
.logo{
  width:88px;
  height:110px; /* taller for house-like logo */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.06);
  background:linear-gradient(180deg,var(--panel),transparent);
  box-shadow: 0 1px 0 rgba(15,23,36,0.02);
}
.nav{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  padding:14px 10px;
  border-bottom:1px solid rgba(15,23,36,0.06);
  border-radius:6px;
}
.nav a:hover{color:var(--primary);background:var(--accent);}
.nav a.active{color:var(--primary);font-weight:600}
.content-wrap{
  flex:1;
  padding:34px 40px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  position:relative;
}
.content{
  width:100%;
  max-width:var(--max-width);
  background:transparent;
  padding:28px 36px;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.8), #fff);
  border-radius:14px;
  padding:28px;
  box-shadow: 0 6px 24px rgba(15,23,36,0.06);
}

/* Products grid/cards */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:12px;
}
.product-card{
  min-height:180px;
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(15,23,36,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.9), #fff);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-meta{
  display:flex;
  gap:12px;
  align-items:center;
}
.product-icon{
  width:36px;height:36px;border-radius:6px;border:2px solid rgba(23,57,74,0.12);background:rgba(0,128,128,0.06);
}
.product-title{
  font-weight:600;color:#12343f;font-size:16px;
}

@media (max-width:880px){
  .product-grid{grid-template-columns:1fr;}
}
h1{margin:0 0 12px 0;font-size:28px}
p.lead{color:var(--muted);margin-top:0}
.tl-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* small responsive tweaks */
@media (max-width:880px){
  .hamburger{display:block}
  .sidebar{width:0;padding:18px;overflow:visible;position:fixed;left:0;top:0;bottom:0;background:rgba(255,255,255,0.98);backdrop-filter: blur(6px);box-shadow: 6px 0 30px rgba(2,6,23,0.08);transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.9,.2,1);z-index:40}
  .sidebar.open{transform:translateX(0);width:220px;padding:28px 20px}
  .nav a{font-size:15px;padding:12px 10px}
  .logo{width:72px;height:96px}
  .content-wrap{padding:20px}
  /* overlay should be above background but below modal menu */
  .tl-overlay{z-index:10}
}

/* hamburger button in top-left of content for mobile */
.topbar{
  position:fixed;left:12px;top:12px;z-index:50;display:flex;align-items:center;gap:8px
}