:root{
  --bg: #0b0b0e;
  --surface: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.08);
  --text: #e8e8ea;
  --muted: #b6b6c2;
  --accent: #2fd4d9;

  /* header/footer sizing used to center content precisely */
  --header-height: 64px;
  --footer-height: 56px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7fb; --surface: rgba(0,0,0,.04); --border: rgba(0,0,0,.08);
    --text:#0e1016; --muted:#4b5563; --accent:#14b8a6;
  }
}

/* reserve vertical scrollbar to avoid layout shifts */
html{overflow-y:scroll}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial}

/* keep content below fixed header and above footer (same as homepage) */
body{
  padding-top:var(--header-height);
  padding-bottom:var(--footer-height);
  background:
    radial-gradient(1200px 1200px at 10% -10%, #7c5cff1f, transparent 60%),
    radial-gradient(1000px 1000px at 110% 10%, rgba(255, 215, 84, 0.3), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}

/* navbar — exact same layout/spacing as homepage */
.top-navbar{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:var(--header-height);
  display:flex;
  align-items:center;
  backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent);
  border-bottom:1px solid var(--border);
  z-index:40;
  padding:0 20px;
}
.top-navbar .container{padding:0}
.navbar-brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.smart-nav-icon{height:36px;width:36px;object-fit:cover;border-radius:6px}

.show .navbar-nav .nav-item ,.collapsing .navbar-nav .nav-item {background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 8px;}
.show .navbar-nav .nav-item a ,.collapsing .navbar-nav .nav-item a {display: block; color: #fff; padding: 4px 8px;}
.show .navbar-nav .nav-item a:hover ,.collapsing .navbar-nav .nav-item a:hover {background-color: rgba(34, 34, 34, 0.5);}

/* ensure container width matches homepage */
.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* Page container: centered perfectly between fixed header and footer */
.body-container.section{
  min-height:calc(100vh - var(--header-height) - var(--footer-height));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
}
.middle-div{max-width:980px;width:100%;display:flex;align-items:center;justify-content:center}
.inner-div{
  width:100%;
  text-align:center;
  padding:38px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* Intro image and typography: fixed size to match Blocks */
.smart-intro-image{
  width:120px;
  height:120px;
  max-width:120px;
  max-height:120px;
  object-fit:cover;
  border-radius:18px;
  display:block;
  margin:0 auto 0;
}
h1{font-size:44px;line-height:1.1;margin:10px 0 12px}
h5{font-weight:500;margin:0;color:var(--muted)}
p{color:var(--muted);margin:10px 0}

/* Buttons (Bootstrap still used; subtle overrides) */
.btn{border-radius:12px; padding:10px; width: 144px; font-weight:600}
.btn-light{background:#fff;color:#111;border:0}
.btn-outline-light{color:#fff;border:1px solid rgba(255,255,255,.12);background:transparent}
.row.justify-content-center{margin-top:8px}

/* Bottom navbar */
.bottom-navbar{height:var(--footer-height);background:transparent;border-top:1px solid var(--border);padding:0;position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center}
.bottom-div{padding:6px 10px}
.bottom-div a{color:var(--muted);text-decoration:none}

/* Responsive tweaks */
@media (max-width:740px){
  :root{ --header-height:56px; --footer-height:72px; }
  body{padding-top:var(--header-height); padding-bottom:var(--footer-height);}
  .inner-div{padding:22px}
  h1{font-size:28px}
  .smart-intro-image{width:76px;height:76px}
  .body-container.section{padding:0 12px}
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* adds spacing between buttons */
}

.tag-list a {
  flex: 1 1 auto; /* lets them shrink and wrap */
  min-width: 120px; /* ensures readability */
}