/* American Academy of Sciences — Website Styles */
:root {
  --brand:#0f172a; /* slate-900 */
  --brand-2:#1e293b; /* slate-800 */
  --accent:#0ea5e9; /* sky-500 */
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --panel:#f1f5f9;
  --border:#e2e8f0;
  --radius:16px;
  --shadow:0 12px 30px rgba(2,6,23,.12);
  --container:1180px;
}

*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);background:var(--bg);line-height:1.65}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

header.topbar{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand-badge{width:42px;height:42px;border-radius:12px;background:#020617;display:grid;place-items:center;font-weight:800}
nav a{color:#e2e8f0;margin:0 10px;text-decoration:none;font-weight:600;border-bottom:2px solid transparent;padding-bottom:2px}
nav a:hover{color:#fff;border-color:#94a3b8}

.lang-switch button{background:#fff;border:0;border-radius:10px;padding:8px 10px;margin-left:8px;cursor:pointer;font-weight:700;color:var(--brand)}

.hero{position:relative;overflow:hidden}
.hero img{width:100%;height:62vh;object-fit:cover;display:block;filter:contrast(1.05) saturate(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.65));display:flex;align-items:center}
.hero-content{color:#fff}
.hero h1{font-size:clamp(1.8rem,2.5vw + 1rem,3rem);margin:0 0 10px}
.hero p{max-width:800px;margin:0 0 18px;color:#e2e8f0}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;border:1px solid transparent}
.btn.primary{background:#0ea5e9;color:#001827;border-color:#0ea5e9}
.btn.ghost{background:transparent;border-color:#94a3b8;color:#e2e8f0}

.section{padding:56px 0}
.section h2{font-size:1.75rem;margin:0 0 8px;color:var(--brand)}
.section .lead{color:var(--muted);max-width:900px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .pad{padding:16px}
.card h3{margin:0 0 6px}
.kpi{font-size:1.8rem;font-weight:800}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.gallery-grid a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.gallery-grid img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .25s ease}
.gallery-grid a:hover img{transform:scale(1.03)}

footer{border-top:1px solid var(--border);padding:26px 0;color:#334155;background:#fff}

.lightbox{position:fixed;inset:0;background:rgba(2,6,23,.92);display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox img{max-width:94vw;max-height:86vh;border-radius:14px;box-shadow:var(--shadow)}
.lightbox.active{display:flex}
.lightbox .close{position:absolute;top:20px;right:24px;background:#fff;border:0;border-radius:10px;padding:8px 10px;font-weight:800;cursor:pointer}

@media(max-width: 980px){
  .cards, .gallery-grid{grid-template-columns:1fr 1fr}
}
@media(max-width: 620px){
  nav{display:none}
  .cards, .gallery-grid{grid-template-columns:1fr}
  .hero img{height:48vh}
}