:root {
  --main-blue:#3a7bd5;
  --nav-bg:#b3b1ac;
  --active-bg:#f7fafc;
  --active-color:#222;
  --ink:#222;
  --bg:#f7fafc;
  --card:#ffffff;
  --shadow:0 0 16px rgba(60,80,140,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Segoe UI', Arial, sans-serif;background:var(--bg);color:var(--ink)}

/* Sticky research/education bar */
.top-banner{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:#0e1523;
  color:#fff;
  padding:.6rem .75rem;
  text-align:center;
  font-size:.95rem;
}
.top-banner a{color:#bfe0ff;text-decoration:underline}
.top-banner strong{font-weight:800}

/* Header */
header{
  background:var(--main-blue);
  color:#fff;
  text-align:center;
  padding:0.8em 0 0.7em;
}
h1{
  margin:0 0 .2em 0;
  font-size:2.5em;
  font-weight:700;
}
.tagline{font-size:1.05rem;font-weight:400}
.tagline a{color:#c7e2ff}

/* NAV */
nav{
  background:var(--nav-bg);
  border-bottom:2px solid #222;
}
.navbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  max-width:1000px;
  margin:0 auto;
  padding:0 .5rem;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:auto;
}
.navbar::-webkit-scrollbar{height:8px}
.navbar::-webkit-scrollbar-thumb{background:#9fa2a6;border-radius:8px}
.nav-link{
  display:inline-block;
  padding:1em 2em .8em 2em;
  color:#fff;
  font-size:1.2em;
  font-family:'Georgia', serif;
  text-decoration:none;
  font-weight:bold;
  opacity:.92;
  transition:color .14s, background .14s;
  border-radius:.8em .8em 0 0;
  margin:0 .25em;
  white-space:nowrap;
}
.nav-link.active,
.nav-link:hover{
  color:var(--active-color);
  background:var(--active-bg);
  border-bottom:3px solid var(--main-blue);
  opacity:1;
}

/* Main content */
.container{
  max-width:900px;
  margin:2em auto;
  padding:1.5em;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.container h2{color:var(--main-blue);margin-top:1.6em}
.img-section{
  margin:2em 0;
  text-align:center;
}
.img-section img{
  max-width:98%;
  border-radius:12px;
  margin-bottom:.8em;
  box-shadow:0 2px 8px #eee;
}
.aigs-btn{
  display:inline-block;
  margin:2em 0;
  padding:1em 2em;
  font-size:1.05em;
  background:var(--main-blue);
  color:#fff;
  border:none;
  border-radius:8px;
  text-decoration:none;
  transition:background .18s;
}
.aigs-btn:hover{background:#215b99}
.links{text-align:center;margin:2em 0 1em}

.patent-note{
  font-size:1em;
  color:#2a4b80;
  margin-top:.8em;
}
.patent-section{
  background:#e9ecef;
  border-radius:10px;
  margin:2em 0 1.5em;
  padding:1em 2em;
  font-size:1em;
}

/* Footer */
footer{
  padding:1rem 1.25rem;
  text-align:center;
  color:#444;
}
footer a{color:var(--main-blue)}
footer ul{
  list-style:none;
  padding:0;
  margin:1em 0 0;
}

/* Mobile tweaks */
@media (max-width:700px){
  header{padding:1em 0 0.7em;}
  h1{font-size:2em}
  .nav-link{font-size:1.05em;padding:.8em 1.1em .7em 1.1em}
  .container{padding:1.1rem}
}

/* Modals (if you keep them inline on this page) */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.modal{
  background:#fff;
  max-width:860px;
  width:92vw;
  max-height:86vh;
  overflow:auto;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.modal header{background:#0e1523;color:#fff;padding:1rem 1.25rem}
.modal h2{margin:.2rem 0 0 0;font-size:1.35rem}
.modal .body{padding:1rem 1.25rem;color:#222}
.modal .body h3{margin:1.1rem 0 .35rem}
.modal .body p,
.modal .body li{line-height:1.55}
.modal .actions{
  padding:1rem 1.25rem;
  text-align:right;
  background:#f2f5f8;
  border-top:1px solid #e6ecf2;
  border-radius:0 0 14px 14px;
}
.close-btn{
  background:#334155;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:.55rem 1rem;
  cursor:pointer;
}
.close-btn:hover{background:#1f2937}