:root {
      --primary: #2E90CE;
      --highlight: #5CAFE0;
      --neutral: #808080;
      --background: #000000;
      --text: #FFFFFF;
      --bright-accent: #7FC4F2;
      --dark-accent: #1F5F8A;

      --radius: 12px;
      --glow-soft: 0 0 6px rgba(108, 196, 255, 0.38);
      --glow-ui: 0 0 12px rgba(108, 196, 255, 0.48);
      --glow-focus: 0 0 18px rgba(158, 223, 255, 0.55);
    }

    * { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;    /* modern enhancement */
}

    html, body {
      margin: 0;
      min-height: 100%;
background: var(--background);
color: var(--text);
      font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.01em;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .page {
      width: min(1200px, 100%);
      padding: 24px 18px 40px;
      box-sizing: border-box;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 0 22px;
      border-bottom: 1px solid var(--dark-accent);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .brand-mark {
      width: 210px;
      max-width: 52vw;
      height: auto;
      display: block;
    }

    .brand-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .brand-tag {
      color: var(--text);
      font-size: 0.92rem;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .nav a {
      color: var(--neutral);
      text-decoration: none;
      font-size: 0.98rem;
      transition: color 160ms ease, text-shadow 160ms ease;
    }

    .nav a:hover,
    .nav a:focus-visible {
      color: var(--highlight);
      text-shadow: var(--glow-soft);
      outline: none;
    }


h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 32px 0 12px;
  color: var(--highlight);
}
    .hero {
      padding: 34px 0 8px;
    }

/* === HERO SPLIT TEST === */

.hero-inner {
  display: flex;
  align-items: flex-start;
  max-height: 300px;
  gap: 2rem;
}

.hero-content {
  flex: 0 0 60%;
}

.hero-media {
  flex: 1;
  display: flex;
    outline: 0px solid red;
  justify-content: center;
}

.hero-media img {
  max-height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

h1 {
      font-family: 'Comfortaa', sans-serif;
      font-weight: 400;
      margin: 0 0 10px;
      color: var(--primary);
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.04;
      letter-spacing: 0em;
      text-wrap: balance;
    }


    

    .hero p {
      max-width: 64ch;
      margin: 0;
      color: var(--text);
      font-size: 1.02rem;
      line-height: 1.6;
    }

    .statusbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: center;
      margin-top: 28px;
      padding: 18px 22px;
      background: #000000;
      border: 1px solid var(--dark-accent);
      border-radius: var(--radius);
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      min-width: 0;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--bright-accent);
      box-shadow: 0 0 10px rgba(158, 223, 255, 0.75);
      flex: 0 0 auto;
    }

    .updates {
      color: var(--neutral);
      text-decoration: none;
      white-space: nowrap;
    }

    .updates:hover,
    .updates:focus-visible {
      color: var(--highlight);
      outline: none;
      text-shadow: var(--glow-soft);
    }

 .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--dark-accent);
}

.footer a {
  color: var(--neutral);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--highlight);
  outline: none;
}

.footer-right {
  display: flex;
  gap: 16px;
}

    @media (max-width: 980px) {
      .topbar {
        flex-direction: column;
        align-items: flex-start;
      }

      .nav {
        width: 100%;
        justify-content: flex-start;
      }

      .statusbar {
        grid-template-columns: 1fr;
      }

      .footer {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      .page {
        padding: 18px 14px 28px;
      }

      .brand {
        align-items: flex-start;
      }

      .brand-mark {
        width: 180px;
        max-width: 64vw;
      }

      .brand-tag {
        white-space: normal;
        font-size: 0.86rem;
      }

      .nav {
        gap: 14px 16px;
      }

      .hero {
        padding-top: 24px;
      }

      .footer {
        grid-template-columns: 1fr;
      }
    }
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
  }

  .hero-media {
    display: none; /* hide for now */
  }
}
/* === TeachTools New Cards === */

.tt-card {
  background: #000000;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  width: 260px;
  padding: 30px;
  text-align: center;
  transition: border .2s ease;
}

.tt-card:hover {
  border-color: var(--highlight);
}


.tt-icon {
  width: 75px;
  height: 75px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  transition: background .2s ease;
}

.tt-card:hover .tt-icon {
  background: var(--highlight);
}

.tt-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  letter-spacing: 0em;
  color: var(--primary);
  margin: 0 0 12px 0;
}

.tt-desc {
  color: var(--text);
  font-size: 16px;
  margin-bottom: 25px;
}

.tt-btn {
  font-weight: 500;
  background: #224E73;
  color: var(--text) !important;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 10px 22px;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s ease;
}

.tt-btn:hover {
  color: var(--highlight);
  border: 2px solid var(--highlight);
}

.tt-btn:active {
  background: var(--primary);
  border: 2px solid var(--bright-accent);
}

/* === FINAL ALIGNMENT FIX === */
.tt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  margin: 40px 0;
  padding: 0;
  max-width: none;
}

.tt-card {
  width: 100%;
  min-height: 260px;
}


/* === ICON ONLY +25% === */
.tt-icon svg {
  width: 40px !important;
  height: 40px !important;
}


/* LINK SYSTEM (FINAL CLEAN) */
a:not(.tt-btn),
a:not(.tt-btn):visited {
  color: var(--neutral);
  text-decoration: none;
}

a:not(.tt-btn):hover,
a:not(.tt-btn):visited:hover {
  color: var(--highlight);
}

a:not(.tt-btn):active,
 a:not(.tt-btn):visited:active {
  color: var(--bright-accent);
  text-decoration: none;
}

.nav a.active {
  color: var(--primary);
}

/* === CONTACT FORM === */

.contact-form {
  margin-top: 30px;
  max-width: 600px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form label {
  font-size: 0.9rem;
  color: var(--text);
}

.contact-form input,
.contact-form textarea {
  background: #000000;
  border: 2px solid #FFFFFF;
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--neutral);
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--primary);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--bright-accent);
}

.contact-form input:active,
.contact-form textarea:active {
  border-color: var(--highlight);
}

.contact-form textarea {
  height: 140px;
  resize: none;
}

.contact-form .tt-btn {
  margin-top: 10px;
  align-self: flex-start;
}
.contact-form section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === SHARED FORM + PANEL SYSTEM === */

.tt-form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tt-form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-label {
  font-size: 0.9rem;
  color: var(--text);
}

.tt-field,
.tt-textarea,
.contact-form input,
.contact-form textarea {
  background: var(--background);
  border: 2px solid var(--text);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tt-field::placeholder,
.tt-textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--neutral);
}

.tt-field:hover,
.tt-textarea:hover,
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--primary);
}

.tt-field:focus,
.tt-textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--bright-accent);
}

.tt-field:active,
.tt-textarea:active,
.contact-form input:active,
.contact-form textarea:active {
  border-color: var(--highlight);
}

.tt-textarea,
.contact-form textarea {
  min-height: 140px;
  resize: none;
}

.tt-panel {
  background: var(--background);
  border: 1px solid var(--dark-accent);
  border-radius: var(--radius);
  padding: 16px;
}

.tt-panel--tight {
  padding: 12px;
}