body{margin:0;font-family:system-ui;background:#060a12;color:#d9e6f5}
header{display:flex;align-items:center;gap:16px;padding:16px 32px;
background:linear-gradient(180deg,#071322,#060a12);border-bottom:1px solid #133654}
header img{height:44px}
nav a{margin-right:14px;color:#9fdfff;text-decoration:none;font-size:13px}
.hero{padding:48px 32px;background:url('assets/branding.png') center/cover no-repeat}
.hero h1{font-size:42px;margin:0 0 12px}
.section{padding:40px 32px;max-width:1100px;margin:auto}
.card{background:#0b1a2d;border:1px solid #133654;border-radius:16px;padding:20px;margin-bottom:20px}
footer{padding:32px;text-align:center;color:#93a9c2;font-size:12px}

/* ---- View Spec modals (console-like) ---- */
.spec-actions{ display:flex; justify-content:flex-end; margin: 8px 0 10px; }
.spec-btn{
  border-radius: 12px;
  padding: 10px 14px;
  border:1px solid rgba(21,210,255,.45);
  background: rgba(6,10,18,.35);
  color: rgba(217,230,245,.92);
  cursor:pointer;
}
.spec-btn:hover{ box-shadow: 0 0 0 1px rgba(21,210,255,.18), 0 10px 40px rgba(21,210,255,.10); }

.modal{ position: fixed; inset:0; z-index:60; display:none; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.60); backdrop-filter: blur(6px); }

.modal-card{
  position: relative;
  width: min(980px, calc(100% - 40px));
  max-height: min(86vh, 860px);
  margin: 7vh auto 0;
  border-radius: 22px;
  border:1px solid rgba(19,54,84,.75);
  background: linear-gradient(180deg, rgba(11,26,45,.95), rgba(8,20,37,.92));
  box-shadow: 0 40px 120px rgba(0,0,0,.70);
  overflow:hidden;
}
.modal-head{
  padding: 14px 16px 12px;
  border-bottom:1px solid rgba(19,54,84,.65);
  background: radial-gradient(900px 220px at 20% 0%, rgba(21,210,255,.18), transparent 60%);
  position:relative;
}
.modal-title{ display:flex; align-items:center; gap:10px; }
.spec-badge{
  font-size:11px; letter-spacing:.12em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(21,210,255,.45);
  color: rgba(21,210,255,.95);
  background: rgba(6,10,18,.25);
  font-family: var(--mono);
}
.spec-name{ font-size:14px; font-weight:700; }

.modal-meta{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(19,54,84,.65);
  background: rgba(6,10,18,.35);
  font-size:11px;
  color: rgba(217,230,245,.86);
}
.chip-ready{ border-color: rgba(34,197,94,.35); }
.pulse-dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: pulse 1.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.modal-x{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px;
  border-radius: 12px;
  border:1px solid rgba(19,54,84,.65);
  background: rgba(6,10,18,.30);
  color: rgba(217,230,245,.88);
  font-size:20px;
  cursor:pointer;
}
.modal-x:hover{ border-color: rgba(21,210,255,.55); }

.modal-body{
  padding: 14px 16px 16px;
  overflow:auto;
  max-height: calc(min(86vh, 860px) - 74px);
}
.spec-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
.spec-section{
  border:1px solid rgba(19,54,84,.55);
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: rgba(6,10,18,.25);
}
.spec-label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(147,169,194,.92);
  margin-bottom:6px;
}
.spec-text{
  font-size:13px;
  line-height:1.7;
  color: rgba(217,230,245,.84);
}

.runtime-strip{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(21,210,255,.25);
  background: radial-gradient(700px 180px at 10% 0%, rgba(21,210,255,.14), transparent 55%),
              rgba(11,26,45,.30);
}
.runtime-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.runtime-label{ font-size:12px; color: rgba(217,230,245,.78); }
.runtime-bar{
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border:1px solid rgba(19,54,84,.65);
  background: rgba(6,10,18,.30);
  overflow:hidden;
}
.runtime-fill{
  display:block; height:100%;
  width: 38%;
  background: linear-gradient(90deg, rgba(21,210,255,.0), rgba(21,210,255,.65), rgba(43,247,214,.55));
  animation: progressSweep 2.6s ease-in-out infinite;
}
@keyframes progressSweep{
  0%{ transform: translateX(-60%); width: 30%; opacity:.55; }
  50%{ transform: translateX(60%); width: 55%; opacity: .95; }
  100%{ transform: translateX(160%); width: 30%; opacity:.55; }
}

/* light animation that echoes "runtime state" across the page */
.kicker .dot{ animation: dotGlow 2.8s ease-in-out infinite; }
@keyframes dotGlow{
  0%,100%{ transform: scale(1); filter: brightness(1); }
  50%{ transform: scale(1.12); filter: brightness(1.15); }
}

/* ---- CTA buttons under hero ---- */
.hero-cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.hero-cta .btn.cta{
  border-radius: 14px;
  padding: 12px 16px;
  border:1px solid rgba(21,210,255,.55);
  background: rgba(21,210,255,.14);
  color: rgba(217,230,245,.94);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hero-cta .btn.cta.ghost{
  border-color: rgba(19,54,84,.75);
  background: rgba(6,10,18,.25);
}

/* ---- Step 2: Make Schools landing unmistakable ---- */
.nav-schools{ position:relative; }
.nav-badge{
  margin-left:8px;
  font-size:10px;
  letter-spacing:.12em;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(21,210,255,.55);
  background: rgba(21,210,255,.16);
  color: rgba(217,230,245,.92);
  font-family: var(--mono);
}
.schools-callout{
  margin: 10px 0 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border:1px solid rgba(21,210,255,.35);
  background: radial-gradient(700px 180px at 10% 0%, rgba(21,210,255,.16), transparent 55%),
              rgba(11,26,45,.32);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.schools-callout-title{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(147,169,194,.92);
  margin-bottom:6px;
}
.schools-callout-text{
  font-size:13px;
  line-height:1.6;
  color: rgba(217,230,245,.82);
  max-width: 78ch;
}
.schools-callout-actions{ display:flex; gap:10px; }

/* ---- Top-nav primary Schools button ---- */
.nav-primary{
  padding: 10px 14px;
  border-radius: 14px;
  border:1px solid rgba(21,210,255,.65);
  background: rgba(21,210,255,.18);
  color: rgba(217,230,245,.96);
  font-size:12px;
  font-weight:600;
}
.nav-primary:hover{
  box-shadow: 0 0 0 1px rgba(21,210,255,.25), 0 10px 40px rgba(21,210,255,.12);
}

.nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nav a{color:#9fdfff;text-decoration:none;font-size:13px;padding:8px 10px;border-radius:999px;border:1px solid rgba(19,54,84,.65);background: rgba(11,26,45,.20)}
.nav a:hover{border-color: rgba(21,210,255,.55)}

/* ---- Tabs: Education agents ---- */
.tabs{ margin-top: 14px; }
.tabs-head{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding: 10px;
  border-radius: 18px;
  border:1px solid rgba(19,54,84,.65);
  background: rgba(11,26,45,.28);
}
.tab-btn{
  appearance:none;
  border:1px solid rgba(19,54,84,.75);
  background: rgba(6,10,18,.20);
  color: rgba(217,230,245,.88);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor:pointer;
}
.tab-btn:hover{ border-color: rgba(19,54,84,.75); }
.tab-btn.is-active{
  border-color: rgba(21,210,255,.45);
  background: rgba(6,10,18,.20);
  box-shadow: none;
}

.tab-panel{ display:none; margin-top: 12px; }
.tab-panel.is-active{ display:block; }

/* ---- Education agents list ---- */
.agent-list{ display:grid; gap:10px; margin-top: 12px; }
.agent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(19,54,84,.65);
  background: rgba(8,20,37,.55);
}
.agent-row-title{ font-size: 13px; font-weight: 700; }

/* ---- Typical agent cards ---- */
.agent-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .agent-grid{ grid-template-columns: 1fr; } }
.agent-card{
  border:1px solid rgba(19,54,84,.65);
  background: rgba(8,20,37,.62);
  border-radius: 18px;
  overflow:hidden;
}
.agent-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  background: rgba(11,26,45,.35);
  border-bottom:1px solid rgba(19,54,84,.55);
}
.agent-card-title{ font-size: 13px; font-weight: 700; }
.agent-card-body{ padding: 12px; }
.agent-card-kicker{
  font-size: 11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(147,169,194,.92);
  margin-bottom: 8px;
}
.agent-card-text{ font-size: 13px; line-height: 1.65; color: rgba(217,230,245,.80); }

/* ==== Step 4f: Make ALL View Spec modals match Institutional Compliance & Reporting (size + runtime animation) ==== */
.modal-card{
  width: min(980px, calc(100% - 40px));
  height: min(86vh, 860px);
  max-height: min(86vh, 860px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-head{
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(19,54,84,.65);
  background: radial-gradient(900px 240px at 18% 0%, rgba(21,210,255,.18), transparent 62%),
              linear-gradient(180deg, rgba(11,26,45,.95), rgba(8,20,37,.88));
}

.modal-title{ gap: 12px; }

.modal-meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.modal-body{
  flex: 1 1 auto;
  overflow: auto;                     /* modal scrollbar */
  padding: 14px 16px 14px;
  background: linear-gradient(180deg, rgba(6,10,18,.12), rgba(6,10,18,.22));
}

/* Section panels */
.spec-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.spec-section{
  border: 1px solid rgba(19,54,84,.55);
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(6,10,18,.18);
}
.spec-label{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(147,169,194,.92);
  margin-bottom: 10px;
}
.spec-text{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(217,230,245,.84);
}

/* Runtime strip at bottom (like screenshot) */
.runtime-strip{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(19,54,84,.55);
  background: rgba(6,10,18,.18);
}
.runtime-row{
  display: flex;
  align-items: center;
  gap: 12px;
}
.runtime-label{
  font-size: 12px;
  color: rgba(217,230,245,.78);
  white-space: nowrap;
}
.runtime-bar{
  flex: 1 1 auto;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(19,54,84,.65);
  background: rgba(11,26,45,.35);
  overflow: hidden;
  position: relative;
}
/* Filled base */
.runtime-fill{
  display:block;
  height:100%;
  width: 78%; /* filled amount similar to screenshot */
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(21,210,255,.30), rgba(21,210,255,.40), rgba(43,247,214,.34));
  position: relative;
  overflow: hidden;
}
/* Moving sheen (the 'Institutional' look) */
.runtime-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  animation: titanSheen 2.8s ease-in-out infinite;
}
@keyframes titanSheen{
  0%{ transform: translateX(-120%); opacity:.45; }
  40%{ opacity:.90; }
  100%{ transform: translateX(140%); opacity:.45; }
}

/* Scrollbar styling inside modal */
.modal-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(21,210,255,.28) rgba(6,10,18,.20);
}
.modal-body::-webkit-scrollbar{ width: 10px; }
.modal-body::-webkit-scrollbar-track{
  background: rgba(6,10,18,.20);
  border-left: 1px solid rgba(19,54,84,.35);
}
.modal-body::-webkit-scrollbar-thumb{
  background: rgba(21,210,255,.22);
  border: 1px solid rgba(21,210,255,.22);
  border-radius: 999px;
}
.modal-body::-webkit-scrollbar-thumb:hover{
  background: rgba(21,210,255,.32);
}

/* Make the close button match the screenshot size/feel */
.modal-x{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

/* ==== Step 4g: Keep ALL modals visually identical to Institutional (fixed frame + pinned runtime) ==== */
.modal-card{
  height: min(86vh, 860px);
}
.modal-body{
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* scrolling happens inside spec-grid */
  height: calc(min(86vh, 860px) - 74px);
  max-height: calc(min(86vh, 860px) - 74px);
  padding: 14px 16px 14px;
}
.spec-grid{
  flex: 1 1 auto;
  overflow: auto;                   /* long specs scroll here */
  padding-right: 2px;               /* keep scrollbar off text */
}

/* Pinned runtime strip (always visible like Institutional) */
.runtime-strip{
  flex: 0 0 auto;
  margin-top: 12px;
}

/* Scrollbar styling for the spec area */
.spec-grid{
  scrollbar-width: thin;
  scrollbar-color: rgba(21,210,255,.28) rgba(6,10,18,.20);
}
.spec-grid::-webkit-scrollbar{ width: 10px; }
.spec-grid::-webkit-scrollbar-track{
  background: rgba(6,10,18,.20);
  border-left: 1px solid rgba(19,54,84,.35);
}
.spec-grid::-webkit-scrollbar-thumb{
  background: rgba(21,210,255,.22);
  border: 1px solid rgba(21,210,255,.22);
  border-radius: 999px;
}
.spec-grid::-webkit-scrollbar-thumb:hover{
  background: rgba(21,210,255,.32);
}


/* ==== Step 6: Flatten agent tiles (no hover/glow) ==== */

/* Education agent rows */
.agent-row:hover,
.agent-card:hover{
  box-shadow: none !important;
  transform: none !important;
  border-color: rgba(19,54,84,.65) !important;
}

/* View Spec buttons inside agent areas */
.agent-row .spec-btn:hover,
.agent-card .spec-btn:hover{
  box-shadow: none !important;
  background: rgba(6,10,18,.35) !important;
  border-color: rgba(21,210,255,.45) !important;
}


/* ==== Step 6: Emphasise top nav with glow ==== */
.nav a{
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.nav a:hover{
  border-color: rgba(21,210,255,.75);
  box-shadow:
    0 0 0 1px rgba(21,210,255,.35),
    0 0 24px rgba(21,210,255,.25);
  background: rgba(21,210,255,.14);
}

/* ==== Step 7c: Center hero text (hero has no container) ==== */
.hero{
  text-align: center !important;
}
.hero p{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 68ch;
}

/* ==== Step 7c: Remove hover/glow from Education tab pills ==== */
.tab-btn{
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
}
.tab-btn:hover{
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  border-color: rgba(19,54,84,.75) !important;
  background: rgba(6,10,18,.20) !important;
}

/* ==== Step 7d: Disable ALL hover/active effects on education tabs (no confusion) ==== */
.tab-btn,
.tab-btn.is-active{
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
}

.tab-btn:hover,
.tab-btn:active,
.tab-btn.is-active:hover{
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  background: rgba(6,10,18,.20) !important;
  border-color: rgba(19,54,84,.75) !important;
  color: rgba(217,230,245,.90) !important;
}