:root {
  --sig-blue: #062489;
  --sig-blue-dark: #041a63;
  --sig-cyan: #0892d4;
  --sig-red: #de0810;
  --ink: #101827;
  --muted: #5f6b7a;
  --soft: #f5f7fa;
  --soft-blue: #edf4fb;
  --line: #dbe3ed;
  --white: #ffffff;
  --cnio-grey: #6f7478;
  --cnio-grey-soft: #eef0f1;
  --ualbany-purple: #46166b;
  --ualbany-purple-soft: #f2edf6;
  --metu-red: #c8102e;
  --metu-red-soft: #fff0f2;
  --ucsd-blue: #006a96;
  --ucsd-blue-soft: #eaf6fb;
  --shadow: 0 18px 42px rgba(6, 36, 137, 0.10);
  --radius: 22px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--white); line-height:1.6; }
a { color:var(--sig-blue); text-decoration:none; }
a:hover { text-decoration:underline; }
em { font-style: italic; }
.skip-link { position:absolute; left:-999px; top:12px; background:var(--sig-blue); color:var(--white); padding:.65rem .9rem; border-radius:999px; z-index:1000; }
.skip-link:focus { left:12px; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom:1px solid rgba(217,226,236,.92); }
.navbar { max-width:var(--max); margin:0 auto; padding:.72rem 1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.brand { display:inline-flex; align-items:center; min-width:0; }
.brand:hover { text-decoration:none; }
.brand img { display:block; width:min(225px, 50vw); height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nav-toggle { display:none; appearance:none; border:1px solid var(--line); background:var(--white); border-radius:999px; padding:.55rem .75rem; font-weight:700; color:var(--ink); }
.nav-links { list-style:none; display:flex; align-items:center; gap:.72rem; margin:0; padding:0; font-size:.91rem; }
.nav-links a { color:var(--ink); font-weight:650; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--sig-blue); text-decoration:none; }
.button, .button-secondary { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.72rem .95rem; font-weight:750; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button { background:var(--sig-blue); color:var(--white); box-shadow:0 12px 26px rgba(6,36,137,.18); }
.button:hover { transform:translateY(-1px); text-decoration:none; background:var(--sig-blue-dark); color:var(--white); }
.nav-links .button, .nav-links .button:hover, .nav-links .button[aria-current="page"] { color:var(--white); }
.button-secondary { color:var(--sig-blue); border-color:var(--line); background:var(--white); }
.button-secondary:hover { transform:translateY(-1px); text-decoration:none; border-color:var(--sig-cyan); }
.hero { background:radial-gradient(circle at 13% 20%, rgba(8,146,212,.16), transparent 28%), linear-gradient(135deg,#f7fbff 0%,#f1f6fb 60%,#fff 100%); border-bottom:1px solid var(--line); }
.hero-inner { max-width:var(--max); margin:0 auto; padding:5.25rem 1.2rem 4.4rem; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.88fr); gap:3rem; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; padding:.32rem .78rem; border:1px solid rgba(6,36,137,.18); background:rgba(255,255,255,.78); border-radius:999px; color:var(--sig-blue); font-weight:750; font-size:.82rem; }
h1,h2,h3 { margin:0; color:var(--ink); line-height:1.12; letter-spacing:-.04em; }
h1 { font-size:clamp(2.35rem, 5.3vw, 4.65rem); margin-top:1rem; }
h2 { font-size:clamp(2rem, 4vw, 3.1rem); }
h3 { font-size:1.24rem; }
.hero p.lead { font-size:clamp(1.06rem,1.6vw,1.24rem); color:var(--muted); max-width:760px; margin:1.15rem 0 1.8rem; }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; }
.logo-panel { background:rgba(255,255,255,.82); border:1px solid rgba(217,226,236,.96); border-radius:32px; padding:1.4rem; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; min-height:270px; }
.logo-panel img { width:100%; max-width:520px; height:auto; }
.section { max-width:var(--max); margin:0 auto; padding:4.25rem 1.2rem; }
.section-narrow { max-width:900px; }
.section-header { display:grid; grid-template-columns:minmax(0,.72fr) minmax(280px,.65fr); gap:1.5rem; align-items:end; margin-bottom:2rem; }
.section-header p { margin:0; color:var(--muted); font-size:1.02rem; }
.grid { display:grid; gap:1rem; }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem; box-shadow:0 14px 34px rgba(6,36,137,.06); }
.card p { color:var(--muted); margin:.75rem 0 1rem; }
.card small { color:var(--muted); }
.card-actions { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1rem; }
.tag { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:.24rem .6rem; font-size:.8rem; font-weight:700; color:var(--muted); background:var(--soft); }
.tool-card, .lab-card { position:relative; overflow:hidden; }
.tool-card::before, .lab-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--sig-blue); }
.tool-card h3, .lab-card h3 { margin-top:.45rem; }
.tool-logo { width:100%; height:94px; object-fit:contain; object-position:left center; margin:.35rem 0 .8rem; display:block; }
.tool-card.lab-cnio::before, .lab-card.lab-cnio::before { background:var(--cnio-grey); }
.tool-card.lab-ualbany::before, .lab-card.lab-ualbany::before { background:var(--ualbany-purple); }
.tool-card.lab-metu::before, .lab-card.lab-metu::before { background:var(--metu-red); }
.lab-card.lab-ucsd::before { background:var(--ucsd-blue); }
.tool-card.lab-cnio .tag, .lab-card.lab-cnio .tag { color:var(--cnio-grey); background:var(--cnio-grey-soft); }
.tool-card.lab-ualbany .tag, .lab-card.lab-ualbany .tag { color:var(--ualbany-purple); background:var(--ualbany-purple-soft); }
.tool-card.lab-metu .tag, .lab-card.lab-metu .tag { color:var(--metu-red); background:var(--metu-red-soft); }
.lab-card.lab-ucsd .tag { color:var(--ucsd-blue); background:var(--ucsd-blue-soft); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; min-width:820px; background:var(--white); }
th, td { text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--soft); color:var(--sig-blue); font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:0; }

.support-card { display:flex; flex-direction:column; min-height:260px; }
.support-card .tag { margin-bottom:.85rem; align-self:flex-start; }
.support-card h3 { margin-top:0; }
.support-card p:not(.support-action) { margin-bottom:1.15rem; }
.support-action { margin-top:auto; margin-bottom:0; }
.support-action .button, .support-action .button-secondary { min-width:190px; }

.notice { background:#f7fbff; border:1px solid #cbdff4; color:#132033; border-radius:var(--radius); padding:1rem 1.1rem; }
.cta { background:var(--sig-blue-dark); color:var(--white); border-radius:32px; padding:2rem; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.4rem; box-shadow:var(--shadow); }
.cta h2 { color:var(--white); }
.cta p { color:rgba(255,255,255,.82); margin:.7rem 0 0; }
.cta .button-secondary { border-color:rgba(255,255,255,.40); color:var(--white); background:transparent; }
.page-title { background:var(--soft); border-bottom:1px solid var(--line); }
.page-title .section { padding-top:3.35rem; padding-bottom:3.35rem; }
.page-title p { max-width:830px; color:var(--muted); font-size:1.08rem; }
.feature-list { margin:.8rem 0 0; padding-left:1.15rem; color:var(--muted); }
.feature-list li { margin:.35rem 0; }
.site-footer { background:var(--sig-blue-dark); color:rgba(255,255,255,.78); margin-top:3rem; border-top:1px solid rgba(255,255,255,.12); }
.footer-inner { max-width:var(--max); margin:0 auto; padding:2.6rem 1.2rem; display:grid; grid-template-columns:1fr auto; gap:2rem; }
.site-footer a { color:var(--white); font-weight:700; }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; align-items:start; }
.footer-brand { display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; min-width:0; }
.footer-brand-top { display:flex; gap:.9rem; align-items:center; min-width:0; }
.footer-brand img { width:min(220px,48vw); height:auto; filter:brightness(1.8); }
.footer-brand strong { display:block; color:var(--white); }
.footer-brand span { display:block; font-size:.9rem; }
.footer-copy { color:rgba(255,255,255,.78); }
.kbd { display:inline-flex; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; padding:.12rem .34rem; border-radius:6px; background:var(--soft); border:1px solid var(--line); color:var(--ink); }
pre.notice { white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-x:auto; }
@media (max-width:1100px) { .brand img { width:min(200px,48vw); } .nav-links { gap:.55rem; font-size:.88rem; } .button, .button-secondary { padding:.68rem .82rem; } }
@media (max-width:1040px) { .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:930px) {
  .nav-toggle { display:inline-flex; }
  .nav-links { position:absolute; left:1rem; right:1rem; top:72px; background:var(--white); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:1rem; display:none; flex-direction:column; align-items:stretch; }
  .nav-links[data-open="true"] { display:flex; }
  .hero-inner, .section-header, .cta, .footer-inner { grid-template-columns:1fr; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .hero-inner { padding-top:3.4rem; }
  .tool-logo { object-position:center; }
}
