:root {
--navy: #0646b4;
  --navy-dark: #111827;
  --navy-soft: #0b5ee8;
  --cream-accent: #dbeafe;
  --cream: #f4f8ff;
  --white: #ffffff;
  --text: #151922;
  --muted-text: #536179;
  --muted-text-soft: #738198;
  --border: rgba(6, 70, 180, 0.13);
  --border-strong: rgba(6, 70, 180, 0.2);
  --shadow: 0 18px 46px rgba(15, 23, 42, 0.11);
  --surface: rgba(248, 251, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --surface-muted: rgba(239, 246, 255, 0.78);
  --surface-dark: #0b1220;
  --surface-dark-soft: #111827;
  --field-bg: rgba(255, 255, 255, 0.96);
  --accent-border: rgba(6, 70, 180, 0.28);
  --accent-focus: rgba(11, 94, 232, 0.12);
  --success: #1f7a4d;
  --error: #b4232f;
  --smooth-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lift-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gov-green: #1f6b43;
  --gov-green-dark: #114328;
  --gov-green-soft: #2f8958;
  --gov-green-border: rgba(31, 107, 67, 0.16);
  --gov-green-shadow: 0 12px 30px rgba(17, 67, 40, 0.12);
  --gov-green-mist: #f4fbf6;
  --gov-green-accent: #dff1e3;
}

* {
box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
scroll-behavior: smooth;
  scrollbar-width: none;
}

body {
font-family: "Montserrat", sans-serif;
  background:
    radial-gradient(circle at 12% 14%, rgba(6, 70, 180, 0.1) 0 14%, transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(15, 23, 42, 0.06) 0 18%, transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, var(--cream) 52%, #e7eefb 100%);
  color: var(--text);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.36s ease, transform 0.42s var(--lift-ease);
}

body::-webkit-scrollbar {
  display: none;
}

@keyframes surfaceRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes navDrop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



@keyframes tagSpark {
  0% {
    opacity: 0;
    transform: translateX(-110%) skewX(-16deg);
  }

  16%,
  42% {
    opacity: 1;
  }

  54%,
  100% {
    opacity: 0;
    transform: translateX(210%) skewX(-16deg);
  }
}

body.page-is-visible {
opacity: 1;
  transform: translateY(0);
}

.site-header {
position: sticky;
  top: 0;
  z-index: 1000;
  padding: 18px 24px 10px;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98) 0%, rgba(244, 248, 255, 0.94) 100%);
  transition: padding 0.24s var(--smooth-ease);
}

.navbar {
max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.88));
  border: 1px solid rgba(6, 70, 180, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(5px) saturate(120%);
  transform-origin: center center;
  transition:
    padding 0.24s var(--smooth-ease),
    box-shadow 0.24s var(--smooth-ease),
    background-color 0.24s ease,
    border-color 0.24s ease;
  animation: navDrop 0.36s var(--smooth-ease) both;
}

.brand {
display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: gap 0.5s var(--smooth-ease), transform 0.5s var(--smooth-ease);
}

.brand-logo {
width: 58px;
  height: 58px;
  object-fit: contain;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 18px;
  border: 1px solid rgba(6, 70, 180, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  transition: width 0.5s var(--smooth-ease), height 0.5s var(--smooth-ease);
}

.brand-text {
display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--smooth-ease);
}

.brand-title {
color: var(--navy);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: font-size 0.5s var(--smooth-ease);
}

.brand-subtitle {
color: var(--muted-text);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: font-size 0.5s var(--smooth-ease),
    letter-spacing 0.5s var(--smooth-ease);
}

.nav-links {
display: flex;
  align-items: center;
  gap: 28px;
  opacity: 1;
  max-width: 900px;
  overflow: visible;
  white-space: nowrap;
  transform: translateX(0);
  transition: opacity 0.32s ease, max-width 0.5s var(--smooth-ease),
    transform 0.5s var(--smooth-ease);
}

.nav-links a {
position: relative;
  text-decoration: none;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.22s ease, transform 0.28s var(--lift-ease);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-link-active {
color: var(--navy-soft);
  transform: translateY(-2px);
}

.nav-links a.nav-link-active::after {
opacity: 1;
  transform: scaleX(1);
}

.nav-toggle,
.hamburger {
display: none;
}

main {
max-width: 1360px;
  margin: 0 auto;
  padding: 84px 32px 72px;
  position: relative;
  z-index: 1;
}

.site-footer {
width: min(1296px, calc(100% - 64px));
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(6, 70, 180, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(11, 18, 32, 0.98), rgba(17, 24, 39, 0.94)),
    radial-gradient(circle at 16% 0%, rgba(11, 94, 232, 0.24), transparent 34%);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.site-footer::before {
content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--navy-soft), rgba(255, 255, 255, 0.38), transparent);
}

.footer-shell {
display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(140px, 0.7fr) minmax(180px, 0.9fr) minmax(210px, 0.9fr);
  gap: 28px;
  padding: 34px;
}

.footer-brand {
display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 800;
}

.footer-brand img {
width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--white);
  object-fit: contain;
}

.footer-brand-block p,
.footer-links p,
.footer-contact p,
.footer-bottom p {
color: rgba(255, 255, 255, 0.68);
}

.footer-brand-block p {
max-width: 440px;
  margin-top: 14px;
}

.footer-links,
.footer-contact {
display: grid;
  align-content: start;
  gap: 10px;
}

.footer-links span,
.footer-contact span {
color: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links a,
.footer-action {
color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.24s ease, transform 0.24s var(--lift-ease);
}

.footer-links a:hover,
.footer-action:hover {
color: var(--white);
  transform: translateX(3px);
}

.footer-action {
display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.footer-bottom {
display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.section {
margin-top: 40px;
  position: relative;
}

.page-shell {
margin-top: 0;
}

.page-shell-top {
padding-top: 0;
}

.nav-link-active {
color: var(--navy-soft) !important;
  pointer-events: none;
  cursor: default;
}

.services-grid-spaced {
margin-top: 32px;
}

.auth-form {
display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 4px 0;
  overflow: visible;
}

.form-field-grid {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

.form-field-wide {
grid-column: 1 / -1;
}

.auth-form label {
display: grid;
  gap: 8px;
}

.course-selector-field {
  display: grid;
  gap: 8px;
}

.auth-form label span {
color: var(--navy);
  font-weight: 700;
}

.auth-form .course-selector-field > span {
  color: var(--navy);
  font-weight: 700;
}

.auth-form label small {
color: var(--muted-text-soft);
  font: inherit;
  font-size: 0.78em;
  text-transform: none;
  letter-spacing: 0;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  outline: none;
  font: inherit;
  background: var(--field-bg);
  color: var(--text);
}

.auth-form select {
appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy-soft) 50%),
    linear-gradient(135deg, var(--navy-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.smooth-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.smooth-select {
  position: relative;
  width: 100%;
  z-index: 5;
}

.smooth-select-button {
  width: 100%;
  min-height: 48px;
  padding: 12px 42px 12px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(45deg, transparent 50%, #5ee7ff 50%) calc(100% - 19px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, #5ee7ff 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    rgba(15, 25, 43, 0.96);
  color: #f7fbff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s var(--lift-ease),
    background-color 0.22s ease;
}

.smooth-select-button:hover,
.smooth-select-button:focus-visible,
.smooth-select.is-open .smooth-select-button {
  border-color: rgba(94, 231, 255, 0.38);
  box-shadow:
    0 0 0 4px rgba(94, 231, 255, 0.1),
    0 14px 26px rgba(0, 0, 0, 0.16);
  outline: none;
}

.smooth-select.is-open .smooth-select-button {
  transform: translateY(-1px);
}

.smooth-select-button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

.smooth-select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 4px;
  max-height: min(270px, 54vh);
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(94, 231, 255, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(15, 25, 43, 0.98), rgba(7, 18, 37, 0.98));
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    transform 0.24s var(--smooth-ease);
}

.smooth-select.is-open .smooth-select-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.smooth-select-option {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #dbeafe;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s var(--lift-ease);
}

.smooth-select-option:hover,
.smooth-select-option:focus-visible {
  background: rgba(94, 231, 255, 0.12);
  color: #ffffff;
  outline: none;
  transform: translateX(2px);
}

.smooth-select-option[aria-selected="true"] {
  background: rgba(255, 209, 102, 0.15);
  color: #ffd166;
  font-weight: 800;
}

.course-selector {
  position: relative;
  width: 100%;
  z-index: 6;
}

.course-selector-button {
  width: 100%;
  min-height: 58px;
  padding: 16px 46px 16px 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(45deg, transparent 50%, #5ee7ff 50%) calc(100% - 19px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, #5ee7ff 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    rgba(15, 25, 43, 0.96);
  color: #f7fbff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s var(--lift-ease),
    background-color 0.22s ease;
}

.course-selector-button:hover,
.course-selector-button:focus-visible,
.course-selector.is-open .course-selector-button {
  border-color: rgba(94, 231, 255, 0.38);
  box-shadow:
    0 0 0 4px rgba(94, 231, 255, 0.1),
    0 14px 26px rgba(0, 0, 0, 0.16);
  outline: none;
}

.course-selector.is-open .course-selector-button {
  transform: translateY(-1px);
}

.course-selector-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: min(320px, 58vh);
  padding: 10px;
  overflow: auto;
  border: 1px solid rgba(94, 231, 255, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(15, 25, 43, 0.98), rgba(7, 18, 37, 0.98));
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    transform 0.24s var(--smooth-ease);
}

.course-selector.is-open .course-selector-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.course-selector-search {
  grid-column: 1 / -1;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(94, 231, 255, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f7fbff !important;
  font: inherit;
}

.course-selector-search::placeholder {
  color: rgba(219, 234, 254, 0.48);
}

.course-selector-option {
  display: flex !important;
  min-height: 40px;
  align-items: center;
  gap: 9px !important;
  padding: 10px 11px;
  border-radius: 10px;
  color: #dbeafe;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.course-selector-option:hover,
.course-selector-option:has(input:focus-visible) {
  background: rgba(94, 231, 255, 0.12);
  color: #ffffff;
}

.course-selector-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #ffd166;
}

.course-selector-option span {
  color: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: none;
}

.course-selector-clear {
  grid-column: 1 / -1;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 209, 102, 0.12);
  color: #ffd166;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.auth-form .smooth-select-button {
  min-height: 58px;
  padding: 16px 46px 16px 20px;
  border-radius: 22px;
}

.admin-table .smooth-select {
  min-width: 140px;
}

.admin-table .smooth-select-button {
  min-height: 42px;
  padding-block: 10px;
  border-radius: 12px;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
border-color: var(--accent-border);
  box-shadow: 0 0 0 4px var(--accent-focus);
}

.auth-form textarea {
resize: vertical;
  min-height: 140px;
}

.auth-help {
color: var(--muted-text-soft);
  font-size: 0.82rem;
  line-height: 1.4;
}

.auth-submit {
width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  margin: 2px 0 4px;
}

.section-tag {
position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(23, 25, 29, 0.07);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(6, 70, 180, 0.06);
  transition: color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
}

.section-tag::after {
content: "";
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  pointer-events: none;
  opacity: 0;
}

.page-is-visible .section-tag::after {
animation: tagSpark 1.65s ease-out 0.28s both;
}
.service-card {
position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.service-card::before,
.form-card::before{
content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 4px;
  background: linear-gradient(90deg, rgba(6, 70, 180, 0.78), rgba(11, 94, 232, 0.28), transparent);
  opacity: 0.72;
  transform: scaleX(0.58);
  transform-origin: left center;
  transition: opacity 0.34s ease, transform 0.42s var(--lift-ease);
}
.service-card:hover::before,
.form-card:hover::before{
opacity: 1;
  transform: scaleX(1);
}
.service-card p,
.contact-copy p {
color: var(--muted-text);
}

.contact-section {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.section-heading h2,
.contact-copy h2 {
margin-top: 16px;
  color: var(--navy-dark);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.15;
}

.section-heading p,
.contact-copy p {
margin-top: 14px;
}

.section-heading {
max-width: 860px;
}

.services-grid {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.service-card {
min-height: 200px;
  padding: 24px;
  border-radius: 26px;
}

.service-card,
.form-card{
position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.34));
  animation: surfaceRise 0.54s var(--lift-ease) both;
  transition:
    transform 0.32s var(--lift-ease),
    box-shadow 0.32s var(--lift-ease),
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.service-card:hover,
.form-card:hover {
transform: translateY(-6px);
  border-color: rgba(6, 70, 180, 0.24);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.14);
}

.service-card h3 {
color: var(--navy-dark);
  font-size: 1.3rem;
  margin-bottom: 12px;
  transition: color 0.24s ease, transform 0.3s var(--lift-ease);
}

.service-card:hover h3 {
color: var(--navy);
  transform: translateY(-1px);
}

.contact-copy {
padding: 10px 6px 10px 0;
}

.contact-mini-grid {
display: grid;
  gap: 14px;
  margin-top: 24px;
}

.contact-mini-grid article {
position: relative;
  overflow: hidden;
  padding: 18px;
  background: rgba(248, 251, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.contact-mini-grid strong {
display: block;
  color: var(--navy);
  margin-bottom: 6px;
}

.contact-mini-grid span {
color: var(--muted-text);
}

.contact-mini-grid article {
transition:
    transform 0.24s var(--smooth-ease),
    box-shadow 0.24s var(--smooth-ease),
    border-color 0.24s ease,
    background-color 0.24s ease;
}

.contact-mini-grid article:hover {
transform: translateY(-4px);
  border-color: rgba(6, 70, 180, 0.24);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
}

.service-card:nth-child(2) {
animation-delay: 0.08s;
}

.service-card:nth-child(3) {
animation-delay: 0.16s;
}

.service-card:nth-child(4) {
animation-delay: 0.24s;
}

.form-card {
padding: 30px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

@media (max-width: 1320px) {
.navbar {
flex-wrap: wrap;
}

.hamburger {
display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: auto;
    transition: opacity 0.3s ease;
}

.hamburger span {
width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--navy);
}

.nav-links {
width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 10px;
    white-space: normal;
}

.nav-toggle:checked ~ .nav-links {
display: flex;
    animation: surfaceRise 0.34s var(--smooth-ease) both;
}
}

@media (max-width: 920px) {
.navbar {
flex-wrap: wrap;
}

.hamburger {
display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: auto;
    transition: opacity 0.3s ease;
}

.hamburger span {
width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--navy);
}

.nav-links {
width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 10px;
}

.nav-toggle:checked ~ .nav-links {
display: flex;
    animation: surfaceRise 0.34s var(--smooth-ease) both;
}
.contact-section,
.services-grid{
grid-template-columns: 1fr;
}

.site-footer {
width: min(100% - 32px, 1296px);
}

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

.footer-brand-block {
grid-column: 1 / -1;
}
}

@media (max-width: 640px) {
.site-header {
padding: 14px;
}

.navbar {
padding: 14px 16px;
    border-radius: 22px;
}

.brand-logo {
width: 48px;
    height: 48px;
    border-radius: 14px;
}

.brand-title {
font-size: 1rem;
}

.brand-subtitle {
font-size: 0.62rem;
    letter-spacing: 0.1em;
}

main {
padding: 78px 14px 48px;
}

.site-footer {
width: calc(100% - 28px);
    margin-bottom: 18px;
    border-radius: 24px;
}

.footer-shell {
grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 22px;
}

.footer-bottom {
flex-direction: column;
    padding: 18px 22px;
}

.section {
margin-top: 28px;
}
.service-card {
padding: 22px;
    border-radius: 24px;
}

.page-shell-top {
padding-top: 10px;
}
.auth-submit {
width: 100%;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
}
}

:root {
--navy: #124f9f;
  --navy-dark: #172033;
  --navy-soft: #2873c8;
  --cream-accent: #e7f0fa;
  --cream: #f6f8fb;
  --text: #1d2430;
  --muted-text: #5c6878;
  --border: rgba(23, 32, 51, 0.12);
  --border-strong: rgba(18, 79, 159, 0.22);
  --shadow: 0 14px 34px rgba(23, 32, 51, 0.08);
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-muted: #f3f6fa;
}

html {
scroll-behavior: auto;
}

body {
background: #f6f8fb;
  opacity: 1;
  transform: none;
  transition: none;
}

body.page-is-visible{
opacity: 1;
  transform: none;
}

.site-header {
padding: 0 24px;
  background: rgba(246, 248, 251, 0.96);
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}

.navbar {
padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

.brand {
gap: 12px;
  transition: none;
}

.brand-logo {
width: 52px;
  height: 52px;
  border-radius: 12px;
  border-color: rgba(23, 32, 51, 0.1);
  box-shadow: none;
  transition: none;
}

.brand-title {
color: var(--navy-dark);
  letter-spacing: 0.04em;
  text-transform: none;
  transition: none;
}

.brand-subtitle {
color: var(--muted-text);
  letter-spacing: 0.06em;
  transition: none;
}

.nav-links {
gap: 22px;
  transition: none;
}

.nav-links a {
color: var(--navy-dark);
  transition: color 0.16s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-link-active {
color: var(--navy);
  transform: none;
}

main {
padding-top: 56px;
}

.section {
margin-top: 36px;
}

.section-tag {
padding: 6px 10px;
  border-radius: 6px;
  background: #e7f0fa;
  color: var(--navy);
  box-shadow: none;
  overflow: visible;
}

.section-tag::after,
.page-is-visible .section-tag::after{
display: none;
  animation: none;
}
.contact-section {
align-items: stretch;
}
.service-card,
.form-card,
.contact-mini-grid article {
border-radius: 12px;
  background: #ffffff;
  background-image: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.service-card::before,
.form-card::before{
display: none;
}
.service-card:hover,
.form-card:hover{
transform: none;
  border-color: var(--border-strong);
  box-shadow: 0 16px 38px rgba(23, 32, 51, 0.1);
}
.section-heading h2,
.contact-copy h2 {
color: var(--navy-dark);
}
.footer-action {
border-radius: 8px;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  will-change: auto;
}
.contact-mini-grid article {
border-radius: 10px;
  background: #f3f6fa;
  animation: none;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.service-card h3,
.service-card:hover h3 {
color: var(--navy-dark);
  transform: none;
  transition: none;
}

.site-footer {
width: 100%;
  max-width: none;
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: #172033;
  box-shadow: none;
}

.site-footer::before {
background: var(--navy);
}

.footer-links a,
.footer-action {
transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.footer-links a:hover,
.footer-action:hover {
transform: none;
}

@media (max-width: 1320px) {
.navbar {
flex-wrap: nowrap;
}

.hamburger {
display: none;
}

.nav-links {
width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding-top: 0;
    border-radius: 12px;
    box-shadow: none;
}
}

@media (max-width: 760px) {
.navbar {
flex-wrap: wrap;
}

.hamburger {
display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: auto;
}

.hamburger span {
width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--navy);
}

.nav-links {
width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 10px;
    white-space: normal;
}

.nav-toggle:checked ~ .nav-links {
display: flex;
    animation: none;
}
}

@media (max-width: 640px) {
.site-header {
padding: 0 14px;
}

.navbar {
padding: 12px 0;
    border-radius: 0;
}
.service-card {
border-radius: 12px;
}
}

:root {
--page-bg: #f5f7fb;
  --ink: #172033;
  --line: #dfe6ef;
  --quiet-line: #e8edf4;
  --blue: #155aa8;
  --blue-deep: #0f447f;
  --blue-soft-bg: #edf4fb;
}

body {
background: var(--page-bg);
  color: var(--ink);
}

.site-header {
background: rgba(245, 247, 251, 0.98);
  backdrop-filter: blur(8px);
}

.navbar {
max-width: 1180px;
}

.brand-logo {
width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #ffffff;
  border-color: var(--quiet-line);
}

.brand-title {
font-size: 1.18rem;
  letter-spacing: 0;
}

.brand-subtitle {
margin-top: 1px;
  color: #607086;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.nav-links {
gap: 28px;
}

.nav-links a {
color: #223049;
  font-size: 0.94rem;
}

main {
max-width: 1180px;
  padding-top: 44px;
}
.contact-section {
gap: 24px;
}
.service-card,
.form-card,
.contact-mini-grid article {
border-color: var(--line);
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);
}

.section-tag{
border-radius: 5px;
  background: var(--blue-soft-bg);
  color: var(--blue-deep);
  letter-spacing: 0.05em;
}

.section-heading h2,
.contact-copy h2 {
font-size: clamp(2rem, 3.2vw, 2.85rem);
  line-height: 1.12;
}
.section-heading p,
.contact-copy p,
.service-card p,
.contact-mini-grid span {
color: #536276;
  font-size: 0.98rem;
  line-height: 1.72;
}
.auth-submit {
min-height: 50px;
  border-radius: 7px;
  font-size: 0.98rem;
}
.auth-submit {
background: var(--blue);
}
.auth-submit:hover {
background: var(--blue-deep);
}
.contact-mini-grid article {
background: #f6f8fb;
  border-color: var(--quiet-line);
}
.service-card h3,
.contact-mini-grid strong {
color: var(--blue-deep);
}

.services-grid {
gap: 18px;
}

.service-card,
.form-card {
padding: 28px;
}

.service-card {
min-height: 174px;
}

.service-card h3 {
margin-bottom: 10px;
  font-size: 1.16rem;
}

.auth-form label span {
color: var(--blue-deep);
  font-size: 0.9rem;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
border-color: var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
border-color: rgba(21, 90, 168, 0.55);
  box-shadow: 0 0 0 4px rgba(21, 90, 168, 0.1);
}

.footer-shell,
.footer-bottom {
max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.contact-copy,
.section-heading {
background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.contact-copy {
padding-top: 8px;
  padding-bottom: 8px;
}
.contact-mini-grid article,
.service-card,
.form-card {
box-shadow: none;
}
.contact-mini-grid article,
.service-card {
background: transparent;
  border-color: var(--line);
}

.services-grid {
padding-top: 4px;
}

@media (max-width: 920px) {
main {
padding-top: 34px;
}
.form-card {
padding: 24px;
}
}

@media (max-width: 640px) {
main {
padding-top: 30px;
}

.site-header {
background: rgba(245, 247, 251, 0.98);
}

.navbar {
padding: 10px 0;
}

.brand-logo {
width: 44px;
    height: 44px;
}

.brand-title {
font-size: 1.05rem;
}

.brand-subtitle {
font-size: 0.6rem;
}
.contact-copy h2,
.section-heading h2 {
font-size: 2.05rem;
}
.service-card,
.form-card {
padding: 22px;
}
}
.service-card,
.form-card,
.contact-mini-grid article{
transition: none !important;
}
.service-card:hover,
.form-card:hover,
.contact-mini-grid article:hover{
transform: none !important;
  box-shadow: none !important;
}

@keyframes liveBackgroundPan {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 140px 90px, -110px 70px, 0 0;
  }
}

body {
position: relative;
  overflow-x: hidden;
}

body::before {
content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(21, 90, 168, 0.065) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(25deg, rgba(23, 32, 51, 0.045) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #f8fafc 0%, #f2f6fb 54%, #eef4fa 100%);
  opacity: 0.9;
  animation: liveBackgroundPan 24s linear infinite;
}

#root {
position: relative;
  z-index: 1;
}

.site-header {
border-bottom: 1px solid rgba(23, 32, 51, 0.1);
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar {
min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
gap: 10px;
}

.brand-logo {
width: 46px;
  height: 46px;
  padding: 5px;
  border-radius: 9px;
}

.brand-title {
color: #121b2d;
  font-size: 1.12rem;
  line-height: 1.1;
}

.brand-subtitle {
color: #607086;
  font-size: 0.62rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.nav-links {
gap: 24px;
}

.nav-links a {
color: #1f2b42;
  font-size: 0.92rem;
  font-weight: 800;
}

.nav-links a.nav-link-active {
color: var(--blue) !important;
}

.hamburger {
width: 44px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(21, 90, 168, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.hamburger span {
width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
}

@media (max-width: 760px) {
.navbar {
min-height: 64px;
}

.brand-logo {
width: 42px;
    height: 42px;
}

.brand-title {
font-size: 1.04rem;
}

.brand-subtitle {
font-size: 0.58rem;
}

.nav-links {
margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(23, 32, 51, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
}

.nav-links a {
width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
}

.nav-links a.nav-link-active {
background: #edf4fb;
}

.nav-links a::after {
display: none;
}
}

:root {
--glass-card-bg:
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(239, 246, 255, 0.24)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.84), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(21, 90, 168, 0.12), transparent 46%);
  --glass-card-border: rgba(255, 255, 255, 0.74);
  --glass-card-shadow:
    0 18px 46px rgba(23, 32, 51, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(21, 90, 168, 0.08);
}
.service-card,
.form-card,
.contact-mini-grid article{
background: var(--glass-card-bg) !important;
  border: 1px solid var(--glass-card-border) !important;
  box-shadow: var(--glass-card-shadow) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.service-card,
.form-card {
position: relative;
  isolation: isolate;
}
.service-card::after,
.form-card::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.42), transparent 32%),
    linear-gradient(295deg, transparent 58%, rgba(21, 90, 168, 0.08));
  pointer-events: none;
}

.navbar {
position: relative;
}

.brand {
transform-origin: left center;
  transition: transform 0.34s var(--lift-ease), gap 0.34s var(--lift-ease) !important;
}

.brand:hover,
.brand:focus-visible {
transform: translateY(-1px);
}

.brand-logo {
transition: transform 0.42s var(--lift-ease), box-shadow 0.42s var(--lift-ease) !important;
}

.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
transform: rotate(-3deg) scale(1.06);
  box-shadow: 0 14px 30px rgba(21, 90, 168, 0.18);
}

.nav-links {
gap: 10px;
}

.nav-links a {
position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 999px;
  transition:
    color 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s var(--lift-ease),
    transform 0.28s var(--lift-ease) !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.nav-link-active {
color: var(--blue) !important;
  transform: translateY(-3px) !important;
  outline: none;
}

.hamburger {
transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s var(--lift-ease),
    transform 0.28s var(--lift-ease) !important;
}

.hamburger:hover,
.hamburger:focus-visible {
transform: translateY(-2px) !important;
  border-color: rgba(21, 90, 168, 0.34);
  box-shadow: 0 12px 24px rgba(21, 90, 168, 0.12);
}

.hamburger span {
transition: transform 0.28s var(--lift-ease), opacity 0.24s ease !important;
}

.nav-toggle:checked + .hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked + .hamburger span:nth-child(2) {
opacity: 0;
}

.nav-toggle:checked + .hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
.nav-links {
gap: 8px;
}

.nav-links a {
border-radius: 9px;
    padding: 11px 12px;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.nav-link-active {
transform: translateX(4px) !important;
}
}

body::before {
display: none;
}

.site-header,
.navbar,
.service-card,
.form-card,
.contact-mini-grid article{
backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.service-card,
.form-card,
.contact-mini-grid article{
background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.08) !important;
}
.service-card::after,
.form-card::after,
.contact-mini-grid article::after{
display: none !important;
}

.brand,
.brand-logo,
.nav-links a,
.nav-links a::before,
.nav-links a::after,
.hamburger,
.hamburger span,
.footer-action {
transition-duration: 0.16s !important;
}

.form-honey-field {
display: none !important;
}







.legal-content {
margin-top: 28px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.08);
}

.legal-content h3 {
margin-top: 24px;
  color: var(--navy-dark);
  font-size: 1.08rem;
}

.legal-content h3:first-child {
margin-top: 0;
}

.legal-content p {
margin-top: 10px;
  color: var(--muted-text);
}

.legal-content a {
color: var(--navy);
  font-weight: 700;
}

.brand,
.brand:hover,
.brand:focus-visible {
transform: none !important;
}

.brand-logo,
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
transform: none !important;
  box-shadow: none !important;
}

.nav-links {
gap: 12px;
}

.nav-links a {
padding: 10px 13px;
  border-radius: 8px;
  color: #1f2b42;
  background: transparent;
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
color: #0f447f !important;
  background: #edf4fb;
  outline: none;
  transform: none !important;
}

.nav-links a.nav-link-active {
color: #ffffff !important;
  background: #155aa8;
  transform: none !important;
}

.hamburger:hover,
.hamburger:focus-visible {
transform: none !important;
  box-shadow: none !important;
  background: #edf4fb;
}

@media (max-width: 760px) {
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.nav-link-active {
transform: none !important;
}
}

.about-page main {
max-width: 1220px;
}

.navbar {
border-color: rgba(21, 90, 168, 0.16);
}

.nav-links {
gap: 8px;
}

.nav-links a {
position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #1d2a3f;
  background: transparent;
  transform: none !important;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
color: #0f447f !important;
  border-color: rgba(21, 90, 168, 0.18);
  background: linear-gradient(135deg, #f6fbff 0%, #eaf3ff 100%);
  transform: none !important;
}

.nav-links a:hover::before,
.nav-links a:focus-visible::before {
opacity: 1;
}

.nav-links a.nav-link-active {
color: #ffffff !important;
  border-color: #155aa8;
  background: linear-gradient(135deg, #155aa8 0%, #0f447f 100%);
  box-shadow: 0 8px 18px rgba(21, 90, 168, 0.18) !important;
  transform: none !important;
}

.nav-links a.nav-link-active::before {
opacity: 1;
  background: #ffffff;
}

@media (max-width: 760px) {
.nav-links {
gap: 7px;
}

.nav-links a {
padding: 11px 14px;
}
}

.site-header {
padding-top: 16px;
}

.navbar {
min-height: 78px;
  padding: 12px 16px 12px 14px;
  border: 1px solid rgba(21, 90, 168, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 251, 255, 0.94) 48%, rgba(237, 246, 255, 0.92) 100%);
  box-shadow: 0 18px 42px rgba(23, 32, 51, 0.1);
}

.navbar::before {
content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, #155aa8 0%, #f4b84a 100%);
}

.brand {
min-width: 245px;
  padding: 8px 12px 8px 10px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(21, 90, 168, 0.09);
}

.brand-logo {
width: 50px;
  height: 50px;
  border-radius: 14px;
}

.brand-title {
color: #102241;
}

.brand-subtitle {
color: #155aa8;
}

.nav-links {
margin-left: auto;
  padding: 7px;
  gap: 4px;
  border: 1px solid rgba(21, 90, 168, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.nav-links a {
padding: 10px 15px;
  border-radius: 10px;
}

.hamburger {
margin-left: auto;
}

@media (max-width: 920px) {
.navbar {
border-radius: 14px;
}

.navbar::before {
width: 5px;
    border-radius: 14px 0 0 14px;
}

.brand {
min-width: 0;
}
}

@media (max-width: 760px) {
.site-header {
padding-top: 10px;
}

.navbar {
padding: 10px 12px;
}

.nav-links {
width: 100%;
    margin-left: 0;
    padding: 8px;
    border-radius: 12px;
}
}

.nav-links a {
border: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
  text-underline-offset: 7px;
  transform: none !important;
  transition: color 0.16s ease, font-size 0.16s ease, text-decoration-color 0.16s ease !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
color: #155aa8 !important;
  background: transparent !important;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #155aa8;
  outline: none;
  transform: none !important;
}

.nav-links a.nav-link-active {
color: #155aa8 !important;
  background: transparent !important;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #155aa8;
  box-shadow: none !important;
  transform: none !important;
}

.site-header {
padding-top: 0;
}

.navbar {
width: min(1240px, calc(100% - 48px));
  min-height: 76px;
  margin: 18px auto 0;
  padding: 0 22px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.08);
}

.navbar::before {
display: none;
}

.brand {
min-width: 0;
  padding: 0;
  gap: 12px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-logo {
width: 46px;
  height: 46px;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  background: #ffffff;
}

.brand-title {
font-size: 1.35rem;
  line-height: 1.05;
  color: #102241;
}

.brand-subtitle {
margin-top: 4px;
  color: #155aa8;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.nav-links {
margin-left: auto;
  padding: 0;
  gap: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.nav-links a {
position: relative;
  padding: 26px 0 22px;
  border-radius: 0;
  color: #1f2b42;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-underline-offset: 10px;
  transition: color 0.28s ease, font-size 0.28s ease !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
color: #155aa8 !important;
  font-size: 1.02rem;
  text-decoration: none;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.nav-links a.nav-link-active {
color: #155aa8 !important;
  font-size: 1.02rem;
  text-decoration: none;
}

.nav-links a.nav-link-active::after {
height: 3px;
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

@media (max-width: 760px) {
.navbar {
width: min(100% - 28px, 1240px);
    min-height: 66px;
    margin-top: 12px;
    padding: 10px 14px;
}

.brand-logo {
width: 42px;
    height: 42px;
}

.nav-links {
width: 100%;
    margin-top: 10px;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #e4ebf4;
}

.nav-links a {
padding: 12px 0;
}
}

@keyframes pageEnterSmooth {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.26s ease, transform 0.3s var(--smooth-ease) !important;
}

body.page-is-visible {
opacity: 1;
  transform: translateY(0);
  animation: pageEnterSmooth 0.42s var(--smooth-ease) both;
}

@media (prefers-reduced-motion: reduce) {
body,
body.page-is-visible{
opacity: 1;
    transform: none;
    animation: none;
    transition: none !important;
}
}

.site-header {
position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 10px 24px;
  background: rgba(246, 248, 251, 0.94);
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
  backdrop-filter: blur(14px);
}

.navbar {
width: min(1240px, 100%);
  min-height: 68px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.brand {
flex: 0 0 auto;
}

.nav-links {
flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 760px) {
.site-header {
padding: 8px 14px;
}

.navbar {
width: 100%;
    min-height: 62px;
    margin: 0 auto;
    padding: 0;
}

.nav-links {
width: 100%;
    margin-left: 0;
}
}

.nav-links a {
transition:
    color 0.28s var(--smooth-ease),
    font-size 0.28s var(--smooth-ease),
    letter-spacing 0.28s var(--smooth-ease) !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
letter-spacing: 0.01em;
}







.site-header {
position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #dfe6ef;
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.navbar {
width: min(1240px, 100%);
  min-height: 76px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand {
padding: 0;
  background: transparent;
  box-shadow: none;
}

.brand-logo {
border: 1px solid #dfe6ef;
  background: #ffffff;
}

.nav-links {
padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 760px) {
.site-header {
padding: 0 18px;
}

.navbar {
min-height: 68px;
}

.nav-links {
border-top: 1px solid #e4ebf4;
}
}

body,
body.page-is-visible{
opacity: 1;
  transform: none;
  animation: none;
}

#root {
opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.26s ease, transform 0.3s var(--smooth-ease);
}

body.page-is-visible #root {
opacity: 1;
  transform: translateY(0);
}

body:not(.page-content-reveal) #root {
opacity: 0;
  transform: translateY(14px) scale(0.992);
}

body.page-content-reveal.page-is-visible #root {
opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.46s ease,
    transform 0.56s var(--smooth-ease);
}

#root {
transition: opacity 0.36s ease, transform 0.44s var(--smooth-ease);
}





body:not(.page-content-reveal) #root {
opacity: 0;
  transform: translateY(14px) scale(0.992);
}

body.page-content-reveal.page-is-visible #root {
opacity: 1;
  transform: translateY(0) scale(1);
}





:root {
--material-shadow-1: 0 8px 22px rgba(23, 32, 51, 0.08);
  --material-shadow-2: 0 16px 38px rgba(23, 32, 51, 0.12);
  --material-shadow-3: 0 24px 58px rgba(21, 90, 168, 0.18);
}
.service-card,
.form-card,
.contact-mini-grid article,
.legal-content {
border: 1px solid rgba(223, 230, 239, 0.92);
  box-shadow: var(--material-shadow-1);
  transition:
    box-shadow 0.28s var(--smooth-ease),
    transform 0.28s var(--smooth-ease),
    border-color 0.28s ease;
}
.service-card,
.contact-mini-grid article {
background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.84));
}

.service-card:hover,
.contact-mini-grid article:hover {
transform: translateY(-4px);
  border-color: rgba(21, 90, 168, 0.18);
  box-shadow: var(--material-shadow-2);
}

.nav-links a[href="#/counseling"],
.footer-action[href="#/counseling"]{
position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #155aa8 0%, #0f447f 56%, #102241 100%) !important;
  box-shadow:
    0 16px 34px rgba(21, 90, 168, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-links a[href="#/counseling"] {
min-height: 34px;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  overflow: visible;
  box-shadow:
    0 4px 10px rgba(21, 90, 168, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-links a[href="#/counseling"]::before,
.nav-links a[href="#/counseling"]::after {
content: none;
}

.nav-links a[href="#/counseling"]::before,
.footer-action[href="#/counseling"]::before{
content: "";
  position: absolute;
  inset: -40% auto -40% -45%;
  z-index: -1;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  animation: counselingSheen 3.2s ease-in-out infinite;
}

.nav-links a[href="#/counseling"]::after,
.footer-action[href="#/counseling"]::after{
content: "";
  position: absolute;
  inset: auto 16px 7px;
  height: 2px;
  border-radius: 999px;
  background: #f4b84a;
  opacity: 0.88;
  transform: none;
}

.nav-links a[href="#/counseling"]:hover,
.nav-links a[href="#/counseling"]:focus-visible,
.footer-action[href="#/counseling"]:hover,
.footer-action[href="#/counseling"]:focus-visible {
transform: translateY(-3px) !important;
  box-shadow:
    0 22px 48px rgba(21, 90, 168, 0.36),
    0 0 0 4px rgba(244, 184, 74, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.nav-links a[href="#/counseling"]:hover,
.nav-links a[href="#/counseling"]:focus-visible {
transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(21, 90, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@keyframes counselingSheen {
  0%,
  52% {
    left: -45%;
  }

  78%,
  100% {
    left: 112%;
  }
}

@keyframes ctaIdleBreath {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 16px 34px rgba(21, 90, 168, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  50% {
    transform: translateY(-2px);
    box-shadow:
      0 21px 44px rgba(21, 90, 168, 0.34),
      0 0 0 4px rgba(244, 184, 74, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

@keyframes ctaIdleUnderline {
  0%,
  100% {
    opacity: 0.72;
    transform: scaleX(0.72);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}
.auth-submit,
.footer-action[href="#/counseling"] {
animation: ctaIdleBreath 3.6s ease-in-out infinite;
  transform-origin: center;
}

.nav-links a[href="#/counseling"] {
animation: none;
  transform-origin: center;
}

.nav-links a[href="#/counseling"]::after,
.footer-action[href="#/counseling"]::after{
animation: ctaIdleUnderline 2.8s ease-in-out infinite;
  transform-origin: center;
}
.auth-submit:hover,
.auth-submit:focus-visible,
.footer-action[href="#/counseling"]:hover,
.footer-action[href="#/counseling"]:focus-visible,
.nav-links a[href="#/counseling"]:hover,
.nav-links a[href="#/counseling"]:focus-visible {
animation-play-state: paused;
}

.home-page main {
max-width: 1440px;
  padding: 56px 48px 82px;
}

.section-tag{
display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 6px;
  background: #e7f0fa;
  color: var(--blue-deep);
  line-height: 1.2;
}

.site-header {
animation: navDrop 0.36s var(--smooth-ease) both;
}

.brand,
.brand-logo,
.nav-links a,
.hamburger,
.hamburger span,
.footer-action {
transition-duration: 0.24s !important;
}
.service-card,
.form-card,
.contact-mini-grid article{
transition:
    transform 0.3s var(--lift-ease),
    box-shadow 0.3s var(--lift-ease),
    border-color 0.24s ease,
    filter 0.3s ease !important;
}
.service-card:hover,
.form-card:hover,
.contact-mini-grid article:hover{
transform: translateY(-4px) !important;
  box-shadow: var(--material-shadow-2) !important;
}

@media (max-width: 980px) {
.home-page main {
padding: 36px 24px 64px;
}
}

@media (max-width: 620px) {
.home-page main {
padding: 28px 18px 56px;
}

.course-selector-list {
  grid-template-columns: 1fr;
}
}

@media (prefers-reduced-motion: reduce) {

.nav-links a[href="#/counseling"]::before,
.footer-action[href="#/counseling"]::before,
.auth-submit,
.footer-action[href="#/counseling"],
.nav-links a[href="#/counseling"],
.nav-links a[href="#/counseling"]::after,
.footer-action[href="#/counseling"]::after {
animation: none;
}
}

.nav-links a[href="#/counseling"]::before,
.nav-links a[href="#/counseling"]::after,
.nav-links a[href="#/counseling"].nav-link-active::before,
.nav-links a[href="#/counseling"].nav-link-active::after {
content: none !important;
  display: none !important;
  animation: none !important;
}

.nav-links a[href="#/counseling"],
.nav-links a[href="#/counseling"].nav-link-active {
min-height: 34px;
  padding: 6px 18px !important;
  box-shadow:
    0 4px 10px rgba(21, 90, 168, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transform: none !important;
}

.nav-links a[href="#/counseling"]:hover,
.nav-links a[href="#/counseling"]:focus-visible {
box-shadow:
    0 6px 14px rgba(21, 90, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Dark bright theme */
:root {
  --page-bg: #050914;
  --ink: #f7fbff;
  --line: rgba(118, 199, 255, 0.2);
  --quiet-line: rgba(255, 255, 255, 0.1);
  --blue: #18b7ff;
  --blue-deep: #7dd3fc;
  --blue-soft-bg: rgba(24, 183, 255, 0.14);
  --navy: #18b7ff;
  --navy-dark: #f7fbff;
  --navy-soft: #5ee7ff;
  --cream-accent: rgba(94, 231, 255, 0.14);
  --cream: #070d1c;
  --white: #ffffff;
  --text: #eef7ff;
  --muted-text: #a9bbd0;
  --muted-text-soft: #c4d3e5;
  --border: rgba(94, 231, 255, 0.18);
  --border-strong: rgba(94, 231, 255, 0.36);
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
  --surface: rgba(10, 18, 36, 0.88);
  --surface-strong: rgba(13, 24, 48, 0.96);
  --surface-muted: rgba(20, 34, 62, 0.78);
  --field-bg: rgba(8, 15, 31, 0.94);
  --accent-border: rgba(94, 231, 255, 0.48);
  --accent-focus: rgba(24, 183, 255, 0.2);
  --success: #3cff9a;
  --error: #ff5c88;
  --material-shadow-1: 0 14px 34px rgba(0, 0, 0, 0.32);
  --material-shadow-2: 0 22px 54px rgba(0, 0, 0, 0.42);
  --material-shadow-3: 0 28px 72px rgba(24, 183, 255, 0.24);
  --glass-card-bg:
    linear-gradient(145deg, rgba(13, 24, 48, 0.94), rgba(7, 13, 28, 0.86)),
    radial-gradient(circle at 12% 0%, rgba(24, 183, 255, 0.18), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(244, 184, 74, 0.16), transparent 44%);
  --glass-card-border: rgba(94, 231, 255, 0.22);
  --glass-card-shadow:
    0 20px 52px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html {
  background: #050914;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(24, 183, 255, 0.18), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(244, 184, 74, 0.16), transparent 26%),
    linear-gradient(180deg, #050914 0%, #071225 52%, #030711 100%) !important;
  color: var(--text);
}

body::before {
  display: block;
  background:
    repeating-linear-gradient(115deg, rgba(94, 231, 255, 0.06) 0 1px, transparent 1px 118px),
    repeating-linear-gradient(25deg, rgba(244, 184, 74, 0.05) 0 1px, transparent 1px 96px);
  opacity: 0.65;
}

.site-header,
.site-header:is(:hover, :focus-within) {
  border-bottom-color: rgba(94, 231, 255, 0.16);
  background: rgba(5, 9, 20, 0.9) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand-logo,
.footer-brand img {
  background: #ffffff;
  border-color: rgba(94, 231, 255, 0.3);
  box-shadow: 0 12px 28px rgba(24, 183, 255, 0.16);
}

.brand-title,
.nav-links a,
.section-heading h2,
.contact-copy h2{
  color: #f7fbff !important;
}

.brand-subtitle,
.section-heading p,
.contact-copy p,
.service-card p,
.contact-mini-grid span,
.auth-help {
  color: #a9bbd0 !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.nav-link-active {
  color: #5ee7ff !important;
}

.section-tag{
  background: rgba(24, 183, 255, 0.14) !important;
  color: #8be9ff !important;
  border: 1px solid rgba(94, 231, 255, 0.18);
}
.service-card,
.form-card,
.contact-mini-grid article,
.legal-content{
  background: var(--glass-card-bg) !important;
  border-color: var(--glass-card-border) !important;
  box-shadow: var(--glass-card-shadow) !important;
}
.contact-copy,
.section-heading{
  background: transparent !important;
  box-shadow: none !important;
}
.service-card h3,
.contact-mini-grid strong,
.auth-form label span {
  color: #8be9ff !important;
}
.auth-submit,
.footer-action[href="#/counseling"],
.nav-links a[href="#/counseling"]{
  background:
    linear-gradient(135deg, #00c2ff 0%, #2563eb 54%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 42px rgba(24, 183, 255, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}
.auth-submit:hover,
.footer-action[href="#/counseling"]:hover,
.nav-links a[href="#/counseling"]:hover {
  box-shadow:
    0 24px 58px rgba(24, 183, 255, 0.34),
    0 0 0 4px rgba(244, 184, 74, 0.14) !important;
}

.nav-links a[href="#/counseling"]::after,
.footer-action[href="#/counseling"]::after,
.site-footer::before {
  background: #ffd166 !important;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  background: var(--field-bg) !important;
  border-color: rgba(94, 231, 255, 0.2) !important;
  color: #f7fbff !important;
}

.auth-form input::placeholder,
.auth-form textarea::placeholder {
  color: #7286a0;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  border-color: rgba(94, 231, 255, 0.58) !important;
  box-shadow: 0 0 0 4px rgba(24, 183, 255, 0.16) !important;
}

.site-footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(24, 183, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #070d1c 0%, #0c1730 100%) !important;
  border-top: 1px solid rgba(94, 231, 255, 0.16);
}

.footer-brand-block p,
.footer-links p,
.footer-contact p,
.footer-bottom p,
.footer-links a,
.footer-action {
  color: rgba(238, 247, 255, 0.72);
}

.footer-links span,
.footer-contact span,
.footer-brand {
  color: #ffffff;
}

@media (max-width: 760px) {
  .nav-links {
    background: rgba(8, 15, 31, 0.96) !important;
    border-color: rgba(94, 231, 255, 0.18);
  }

  .nav-links a.nav-link-active {
    background: rgba(24, 183, 255, 0.12);
  }

  .hamburger {
    background: rgba(10, 18, 36, 0.86);
    border-color: rgba(94, 231, 255, 0.24);
  }

  .hamburger span {
    background: #5ee7ff;
  }
}

.form-card {
  border-radius: 28px !important;
}
.dashboard-page {
  display: grid;
  gap: 24px;
}

.auth-card-narrow {
  max-width: 520px;
  justify-self: end;
  width: 100%;
}

.auth-alert {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(94, 231, 255, 0.18);
  border-radius: 16px;
  color: #dce8f8;
  background: rgba(94, 231, 255, 0.08);
  font-size: 0.9rem;
  line-height: 1.6;
}

.auth-alert[data-type="error"] {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}

.auth-alert[data-type="success"] {
  border-color: rgba(52, 211, 153, 0.34);
  background: rgba(52, 211, 153, 0.1);
  color: #bbf7d0;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}

.dashboard-header h2 {
  margin: 12px 0 8px;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.05;
}

.dashboard-header p,
.dashboard-empty,
.form-card p {
  color: var(--muted-text);
}

[data-college-login-action] {
  align-self: center;
  width: auto;
  min-width: 0;
  min-height: 48px;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

.dashboard-grid,
.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.admin-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.college-browser,
.admin-college-layout {
  margin-top: 22px;
}

.college-locked-panel {
  position: relative;
  min-height: 360px;
}

.college-locked-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  filter: blur(7px);
  opacity: 0.44;
  pointer-events: none;
  user-select: none;
}

.college-lock-message {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(92%, 440px);
  transform: translate(-50%, -50%);
  padding: 26px;
  border: 1px solid rgba(255, 209, 102, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(14, 24, 42, 0.96), rgba(8, 15, 28, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  text-align: center;
  z-index: 2;
}

.college-lock-message h3 {
  margin: 10px 0 8px;
  color: var(--text);
  font-size: 1.55rem;
}

.college-lock-message p {
  margin: 0 0 18px;
}

.college-browser-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 20px;
}

.college-browser-head h3 {
  margin: 10px 0 8px;
  color: var(--text);
  font-size: 1.6rem;
}

.college-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.72fr);
  gap: 12px;
  width: min(100%, 540px);
}

.college-search {
  display: grid;
  gap: 8px;
  width: 100%;
}

.college-search span {
  color: #aebbd0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.college-search input,
.college-search select {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  background: rgba(15, 25, 43, 0.96);
  color: #f7fbff;
  font: inherit;
}

.college-search select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #5ee7ff 50%),
    linear-gradient(135deg, #5ee7ff 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.college-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.college-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(94, 231, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 100%;
}

.college-card-media,
.college-overview-media {
  overflow: hidden;
  border: 1px solid rgba(94, 231, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.college-card-media {
  aspect-ratio: 16 / 9;
}

.college-card-media img,
.college-overview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.college-card-media img.college-default-photo,
.college-overview-media img.college-default-photo {
  object-fit: contain;
  object-position: center;
  background: #f8fbff;
}

.college-card-top,
.college-card-actions,
.admin-college-item,
.admin-college-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.college-card-top,
.admin-college-item {
  justify-content: space-between;
  align-items: flex-start;
}

.college-card-top div,
.admin-college-item div {
  display: grid;
  gap: 5px;
}

.college-card strong,
.admin-college-item strong {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.35;
}

.college-card span,
.admin-college-item span,
.admin-college-item small,
.college-card dd {
  color: var(--muted-text);
}

.college-card p {
  margin: 0;
  min-height: 3.2em;
  line-height: 1.6;
}

.college-card mark {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #07101f;
  background: #ffd166;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: capitalize;
}

.college-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.college-card dl div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
}

.college-card dt {
  color: #aebbd0;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.college-card dd {
  margin: 0;
}

.college-card-actions {
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: auto;
}

.modal-is-open {
  overflow: hidden;
}

.education-popup-is-open {
  overflow: hidden;
}

.education-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 7, 18, 0.68);
  backdrop-filter: blur(14px);
}

.education-popup-panel {
  position: relative;
  width: min(100%, 560px);
  max-height: min(88vh, 680px);
  overflow-y: auto;
  display: grid;
  gap: 18px;
  padding: 34px;
  border: 1px solid rgba(94, 231, 255, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.99));
  color: var(--text);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44);
}

.education-popup-panel h2 {
  max-width: 430px;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.75rem, 4vw, 2.55rem);
  line-height: 1.08;
}

.education-popup-panel p {
  margin: 0;
  color: var(--muted-text);
  font-size: 1rem;
  line-height: 1.72;
}

.education-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.education-popup-close:focus-visible,
.education-popup-close:hover {
  border-color: rgba(94, 231, 255, 0.42);
  background: rgba(94, 231, 255, 0.1);
  outline: none;
}

.education-popup-close i {
  font-size: 1.35rem;
}

.education-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.education-popup-actions .hero-primary,
.education-popup-actions .hero-secondary {
  min-height: 46px;
}

.college-overview-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(12px);
  z-index: 1000;
}

.college-overview-panel {
  position: relative;
  width: min(100%, 1080px);
  max-height: min(90vh, 820px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 32px;
  border: 1px solid rgba(94, 231, 255, 0.2);
  border-radius: 26px;
  background-clip: padding-box;
  scroll-padding-block: 26px;
  background:
    linear-gradient(135deg, rgba(14, 24, 42, 0.98), rgba(8, 15, 28, 0.99));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
}

.college-overview-panel::-webkit-scrollbar {
  display: none;
}

.college-overview-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.college-overview-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: stretch;
}

.college-overview-media {
  min-height: 360px;
  height: 100%;
}

.college-overview-head {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 6px 44px 0 0;
}

.college-overview-head h3 {
  margin: 10px 0 8px;
  color: var(--text);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.08;
}

.college-overview-head p,
.college-overview-description {
  color: var(--muted-text);
}

.college-overview-head mark {
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  color: #07101f;
  background: #ffd166;
  font-size: 0.78rem;
  font-weight: 800;
}

.college-overview-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.college-overview-snapshot article {
  display: grid;
  gap: 7px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(94, 231, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.college-overview-snapshot span {
  color: #aebbd0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.college-overview-snapshot strong {
  color: var(--text);
  line-height: 1.35;
}

.college-overview-section {
  margin-top: 24px;
}

.college-overview-section h4 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1rem;
}

.college-overview-description {
  margin: 0;
  min-height: 76px;
  padding: 16px;
  border: 1px solid rgba(94, 231, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  line-height: 1.7;
}

.college-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.college-overview-grid div {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(94, 231, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.college-overview-grid dt {
  color: #aebbd0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.college-overview-grid dd {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

.college-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.admin-college-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 22px;
}

.admin-college-list {
  display: grid;
  gap: 12px;
}

.admin-college-item {
  padding: 14px;
  border: 1px solid rgba(94, 231, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.admin-college-actions {
  flex: 0 0 auto;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.profile-card {
  margin-top: 22px;
}

.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.profile-card-head h3 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 1.35rem;
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-detail-grid div {
  padding: 14px;
  border: 1px solid rgba(94, 231, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.profile-detail-grid dt {
  margin-bottom: 5px;
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-detail-grid dd {
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .profile-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .education-popup-backdrop {
    align-items: end;
    padding: 12px;
  }

  .education-popup-panel {
    width: 100%;
    padding: 28px 22px 22px;
    border-radius: 18px;
  }

  .education-popup-panel h2 {
    padding-right: 40px;
    font-size: 1.8rem;
  }

  .education-popup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .education-popup-actions .hero-primary,
  .education-popup-actions .hero-secondary {
    width: 100%;
  }
}

.file-dropzone {
  position: relative;
  min-height: 138px;
  padding: 16px;
  border: 1.5px dashed rgba(94, 231, 255, 0.45);
  border-radius: 16px;
  background: rgba(8, 18, 34, 0.96);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.file-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-dropzone strong {
  display: block;
  margin-top: 14px;
  max-width: calc(100% - 48px);
  color: #f8fbff;
  font-size: 0.96rem;
  line-height: 1.35;
}

.file-dropzone small {
  display: block;
  margin-top: 8px;
  max-width: calc(100% - 48px);
  color: #b8c7dc;
  overflow-wrap: anywhere;
}

.file-dropzone::after {
  content: "+";
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #28b8ff;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

.file-dropzone.is-dragging,
.file-dropzone.has-file {
  border-color: #5ee7ff;
  background: rgba(8, 30, 54, 0.98);
  transform: translateY(-1px);
}

.file-dropzone.is-dragging strong,
.file-dropzone.has-file strong {
  color: #ffffff;
}

.file-dropzone.is-dragging small,
.file-dropzone.has-file small {
  color: #dbeafe;
}

.file-dropzone.has-file::after {
  content: "OK";
  background: var(--success);
  font-size: 0.78rem;
}

.request-list {
  display: grid;
  gap: 12px;
}

.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(94, 231, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.request-row div {
  display: grid;
  gap: 5px;
}

.request-row strong,
.form-card h3,
.admin-stats strong {
  color: var(--text);
}

.request-row span,
.admin-stats span {
  color: var(--muted-text);
  font-size: 0.9rem;
}

.request-row mark {
  padding: 7px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(21, 90, 168, 0.82);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-stats strong {
  display: block;
  margin-top: 10px;
  font-size: 2.5rem;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.admin-table th,
.admin-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(94, 231, 255, 0.12);
  text-align: left;
  color: var(--text);
}

.admin-table th {
  color: var(--muted-text);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admin-table select {
  min-width: 140px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 231, 255, 0.2);
  border-radius: 12px;
  color: var(--text);
  background: var(--field-bg);
  font: inherit;
}

@media (max-width: 920px) {
  .dashboard-grid,
  .admin-stats,
  .college-grid,
  .college-locked-grid,
  .admin-college-layout {
    grid-template-columns: 1fr;
  }

  .auth-card-narrow {
    max-width: none;
    justify-self: stretch;
  }

  .dashboard-header {
    align-items: stretch;
    flex-direction: column;
  }

  .college-browser-head,
  .admin-college-item {
    align-items: stretch;
    flex-direction: column;
  }

  .college-search {
    width: 100%;
  }

  .college-filter-row {
    width: 100%;
  }

  .college-card {
    gap: 14px;
    padding: 16px;
  }

  .college-card-top {
    align-items: stretch;
    flex-direction: column;
  }

  .college-card mark {
    justify-self: start;
    width: fit-content;
  }

  .admin-college-actions {
    flex-wrap: wrap;
  }

  .college-card p {
    min-height: 0;
  }

  .college-overview-panel {
    padding: 24px 18px;
  }

  .college-overview-hero {
    grid-template-columns: 1fr;
  }

  .college-overview-media {
    min-height: 240px;
  }

  .college-overview-head {
    padding-right: 48px;
  }

  .college-overview-snapshot {
    grid-template-columns: 1fr;
  }

  .college-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .college-browser {
    padding: 18px !important;
  }

  .college-browser-head {
    gap: 14px;
    margin-bottom: 16px;
  }

  .college-browser-head h3 {
    font-size: 1.28rem;
    line-height: 1.25;
  }

  .college-search input {
    min-height: 46px;
    border-radius: 14px;
  }

  .college-filter-row {
    grid-template-columns: 1fr;
  }

  .college-search select {
    min-height: 46px;
    border-radius: 14px;
  }

  .college-card {
    border-radius: 18px;
  }

  .college-card-media {
    border-radius: 14px;
  }

  .college-card strong {
    font-size: 1rem;
  }

  .college-card span,
  .college-card dd {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .college-card dl {
    gap: 8px;
  }

  .college-card dl div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(94, 231, 255, 0.08);
  }

  .college-card dl div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .college-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .college-overview-backdrop {
    align-items: stretch;
    padding: 10px;
  }

  .college-overview-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 18px;
    border-radius: 22px;
  }

  .college-overview-close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    z-index: 3;
  }

  .college-overview-hero {
    gap: 16px;
  }

  .college-overview-media {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }

  .college-overview-head {
    gap: 14px;
    padding: 0;
  }

  .college-overview-head h3 {
    margin: 8px 0 6px;
    font-size: 1.75rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .college-overview-head p {
    margin: 0;
    line-height: 1.45;
  }

  .college-overview-snapshot {
    gap: 8px;
  }

  .college-overview-snapshot article {
    min-height: 0;
    padding: 13px;
  }

  .college-overview-section {
    margin-top: 18px;
  }

  .college-overview-description {
    min-height: 0;
    padding: 14px;
  }

  .college-overview-grid {
    gap: 10px;
  }

  .college-overview-grid div {
    padding: 13px;
  }

  .college-overview-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.auth-form {
  gap: 26px;
}

.auth-form label span {
  color: #aebbd0 !important;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.auth-form label small {
  color: #7f90a8 !important;
  letter-spacing: 0.08em;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  min-height: 58px;
  padding: 16px 20px;
  border-radius: 22px;
  background: rgba(15, 25, 43, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  color: #f7fbff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.auth-form input::placeholder,
.auth-form textarea::placeholder {
  color: rgba(203, 213, 225, 0.62);
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  border-color: rgba(255, 209, 102, 0.5) !important;
  box-shadow:
    0 0 0 4px rgba(255, 209, 102, 0.12),
    0 0 28px rgba(24, 183, 255, 0.12) !important;
}

.auth-submit {
  min-height: 64px;
  border-radius: 22px !important;
  color: #060914 !important;
  background: linear-gradient(135deg, #ffd84d 0%, #ffb329 48%, #fb8c00 100%) !important;
  box-shadow:
    0 18px 42px rgba(251, 140, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.auth-submit:hover,
.auth-submit:focus-visible {
  background: linear-gradient(135deg, #ffe66d 0%, #ffc13d 48%, #ff9800 100%) !important;
  box-shadow:
    0 24px 58px rgba(251, 140, 0, 0.32),
    0 0 0 4px rgba(255, 209, 102, 0.16) !important;
}

.auth-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  margin: 8px 0 0;
  color: #b9c5d8 !important;
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
}

.auth-help a {
  color: #5ee7ff;
  font-weight: 800;
  text-decoration: none;
  text-underline-offset: 4px;
  border-bottom: 1px solid rgba(94, 231, 255, 0.42);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.auth-help a:hover,
.auth-help a:focus-visible {
  color: #ffd166;
  border-color: rgba(255, 209, 102, 0.72);
}

.auth-help span {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.auth-help span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  align-self: center;
  margin: 0 4px;
  border-radius: 999px;
  background: rgba(185, 197, 216, 0.5);
}

@media (max-width: 760px) {
  .form-field-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .auth-form label span {
    letter-spacing: 0.16em;
  }

  .auth-help {
    font-size: 0.86rem;
  }
}

.brand-logo,
.footer-brand img {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)) !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* Performance pass: preserve the theme while reducing repaint-heavy effects. */
body::before {
  animation: none !important;
  opacity: 0.45;
}

.site-header,
.navbar,
.brand-logo,
.footer-brand img{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.service-card,
.form-card,
.contact-mini-grid article,
.legal-content{
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease !important;
}
.service-card:hover,
.form-card:hover,
.contact-mini-grid article:hover,
.service-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}
.auth-submit,
.footer-action[href="#/counseling"] {
  animation: none !important;
}

.nav-links a[href="#/counseling"]::before,
.footer-action[href="#/counseling"]::before,
.nav-links a[href="#/counseling"]::after,
.footer-action[href="#/counseling"]::after{
  animation: none !important;
}

body:not(.page-content-reveal) #root,
body.page-content-reveal.page-is-visible #root{
  transition: opacity 0.2s ease, transform 0.22s ease !important;
}

body:not(.page-content-reveal) #root {
  opacity: 0;
  transform: translateY(14px) scale(0.992);
  transition: opacity 0.36s ease, transform 0.44s var(--smooth-ease) !important;
}

body.page-content-reveal.page-is-visible #root {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.36s ease, transform 0.44s var(--smooth-ease) !important;
}

.nav-links a[href="#/counseling"],
.nav-links a[href="#/counseling"].nav-link-active {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 42px;
  padding: 9px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, #18c8ff 0%, #2563eb 52%, #7447ff 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  line-height: 1;
  text-shadow: none !important;
  transform: none !important;
}

.nav-links a[href="#/login"],
.nav-links a[href="#/login"].nav-link-active {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 42px;
  margin-left: -12px;
  padding: 9px 24px !important;
  border: 1px solid rgba(94, 231, 255, 0.72) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(#050914, #050914) padding-box,
    linear-gradient(135deg, #18c8ff 0%, #2563eb 52%, #7447ff 100%) border-box !important;
  color: #5ee7ff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 18px rgba(94, 231, 255, 0.1) !important;
  line-height: 1;
  text-shadow: none !important;
  transform: none !important;
}

.nav-links a[href="#/counseling"]::before,
.nav-links a[href="#/counseling"]::after,
.nav-links a[href="#/login"]::before,
.nav-links a[href="#/login"]::after {
  content: none !important;
  display: none !important;
}

.nav-links a[href="#/counseling"]:hover,
.nav-links a[href="#/counseling"]:focus-visible {
  background:
    linear-gradient(#050914, #050914) padding-box,
    linear-gradient(135deg, #18c8ff 0%, #2563eb 52%, #7447ff 100%) border-box !important;
  border-color: transparent !important;
  color: #5ee7ff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 18px rgba(94, 231, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

.nav-links a[href="#/login"]:hover,
.nav-links a[href="#/login"]:focus-visible {
  border-color: transparent !important;
  background:
    linear-gradient(135deg, rgba(24, 200, 255, 0.22), rgba(116, 71, 255, 0.2)) padding-box,
    linear-gradient(135deg, #18c8ff 0%, #2563eb 52%, #7447ff 100%) border-box !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(94, 231, 255, 0.14) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-shell,
  .section,
  .footer-shell {
    width: min(100%, 100vw);
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .page-shell-top {
    padding-top: 112px !important;
  }

  .site-header {
    padding: 10px 12px !important;
  }

  .navbar {
    width: 100% !important;
    min-height: 62px;
    padding: 10px 12px !important;
    gap: 10px;
  }

  .brand {
    min-width: 0;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-title,
  .brand-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-links {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 14px !important;
    align-items: stretch !important;
  }

  .nav-links a,
  .nav-links a[href="#/counseling"],
  .nav-links a[href="#/login"],
  .nav-links a[href="#/counseling"].nav-link-active,
  .nav-links a[href="#/login"].nav-link-active {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .dashboard-header,
  .section-heading,
  .contact-copy,
  .form-card,
  .college-browser,
  .legal-content {
    text-align: left;
  }

  .dashboard-header {
    gap: 14px;
  }

  .dashboard-header h2,
  .section-heading h2,
  .contact-copy h2 {
    overflow-wrap: anywhere;
  }

  .dashboard-header [data-college-login-action] {
    align-self: stretch;
    width: 100%;
    min-height: 50px;
  }
  .auth-submit,
  .footer-action {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .form-card,
  .contact-mini-grid article,
  .service-card,
  .request-row,
  .admin-stats article,
  .admin-college-item {
    border-radius: 18px !important;
  }

  .form-card {
    padding: 18px !important;
  }

  .form-field-grid,
  .contact-mini-grid,
  .services-grid,
  .dashboard-grid,
  .admin-stats {
    grid-template-columns: 1fr !important;
  }

  .auth-form {
    gap: 18px !important;
  }

  .auth-form input,
  .auth-form select,
  .auth-form textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .auth-help {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .request-row {
    align-items: stretch;
    flex-direction: column;
  }

  .request-row mark {
    width: fit-content;
  }

  .admin-table-wrap {
    margin-inline: -2px;
    border-radius: 18px;
  }

  .admin-table {
    min-width: 680px;
  }

  .admin-college-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  .footer-shell,
  .footer-bottom {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .page-shell,
  .section,
  .footer-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: 0.62rem;
  }

  .dashboard-header h2 {
    font-size: 1.9rem;
  }

  .form-card,
  .college-browser,
  .college-overview-panel {
    padding: 16px !important;
  }

  .college-overview-head h3 {
    font-size: 1.55rem;
  }
}

/* Site-wide glassmorphism refresh and loader-free page transitions. */
:root {
  --glass-bg: rgba(255, 255, 255, 0.56);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.66);
  --glass-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  --glass-shadow-soft: 0 14px 38px rgba(15, 23, 42, 0.09);
}

html {
  background: #eef5fb;
}

body {
  background:
    radial-gradient(circle at 8% 10%, rgba(24, 200, 255, 0.22), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(244, 184, 74, 0.2), transparent 28%),
    radial-gradient(circle at 52% 82%, rgba(21, 90, 168, 0.16), transparent 36%),
    linear-gradient(135deg, #f8fbff 0%, #edf6fb 46%, #f7f2e5 100%) !important;
  color: #172033;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 38%),
    repeating-linear-gradient(115deg, rgba(21, 90, 168, 0.055) 0 1px, transparent 1px 124px),
    repeating-linear-gradient(25deg, rgba(244, 184, 74, 0.05) 0 1px, transparent 1px 112px) !important;
  opacity: 1 !important;
}

#root {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.26s ease,
    transform 0.32s var(--smooth-ease),
    filter 0.32s ease !important;
}

body.page-route-leave #root {
  opacity: 0;
  transform: translateY(14px) scale(0.992);
  filter: blur(6px);
}

body.page-route-enter #root {
  animation: glassPageIn 0.48s var(--smooth-ease) both;
}

@keyframes glassPageIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.992);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.site-header {
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.76), rgba(247, 251, 255, 0.34)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
}

.navbar,
.nav-links {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.38)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

.navbar {
  padding: 12px 18px !important;
  border-radius: 24px !important;
}

.brand-logo,
.footer-brand img {
  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}
.service-card,
.form-card,
.profile-card,
.college-browser,
.college-card,
.college-locked-panel,
.college-lock-message,
.college-overview-panel,
.college-overview-snapshot article,
.college-overview-grid div,
.admin-stats article,
.admin-college-item,
.admin-table-wrap,
.request-row,
.legal-content,
.contact-copy,
.contact-mini-grid article,
.section-heading{
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
.section-heading h2,
.contact-copy h2,
.dashboard-header h2,
.service-card h3,
.college-browser-head h3,
.college-overview-head h3,
.legal-content h3 {
  color: #102241 !important;
  text-shadow: none !important;
}
.section-heading p,
.contact-copy p,
.service-card p,
.dashboard-header p,
.college-card p,
.legal-content p {
  color: #42516a !important;
}

.nav-links a {
  color: #172033 !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-link-active {
  color: #0f9fb8 !important;
}
.site-footer,
.site-footer p,
.site-footer span,
.site-footer a {
  color: rgba(255, 255, 255, 0.86) !important;
}
.contact-copy,
.section-heading {
  padding: 34px !important;
  border-radius: 28px !important;
}
.form-card,
.service-card,
.college-browser,
.legal-content,
.college-overview-panel {
  border-radius: 28px !important;
}
.contact-mini-grid article,
.college-card,
.request-row,
.admin-college-item,
.college-overview-snapshot article,
.college-overview-grid div {
  border-radius: 20px !important;
}
.site-footer {
  background:
    linear-gradient(145deg, rgba(14, 28, 52, 0.82), rgba(6, 15, 31, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

.site-footer {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin: 24px auto 32px !important;
  border-radius: 28px !important;
  overflow: hidden;
}
.college-card-media,
.college-overview-media {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
}

.section-tag,
.college-card mark,
.college-overview-head mark,
.request-row mark {
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.smooth-select-button,
.college-search input,
.college-search select,
.admin-table select {
  background: rgba(255, 255, 255, 0.54) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 24px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.smooth-select-button:focus-visible,
.college-search input:focus,
.college-search select:focus {
  border-color: rgba(21, 90, 168, 0.42) !important;
  box-shadow:
    0 0 0 4px rgba(21, 90, 168, 0.1),
    0 14px 30px rgba(15, 23, 42, 0.1) !important;
}

.smooth-select-list,
.college-overview-backdrop{
  background: rgba(238, 246, 251, 0.44) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}
.auth-submit,
.footer-action,
.college-overview-close {
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  box-shadow:
    0 16px 34px rgba(21, 90, 168, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}
.service-card:hover,
.form-card:hover,
.college-card:hover,
.contact-mini-grid article:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.84) !important;
  box-shadow: var(--glass-shadow) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.page-route-leave #root,
  body.page-route-enter #root {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Smooth browsing polish */
html {
  -webkit-overflow-scrolling: touch;
}

#root {
  transition: opacity 0.16s ease, transform 0.18s var(--smooth-ease);
  will-change: opacity, transform;
}

body.page-route-leave #root {
  opacity: 0;
  transform: translateY(8px);
  filter: none !important;
}

body.page-route-enter #root {
  animation: smoothPageIn 0.22s var(--smooth-ease) both !important;
}

@keyframes smoothPageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.brand-logo {
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  #root {
    transition: none;
    will-change: auto;
  }

  body.page-route-leave #root,
  body.page-route-enter #root {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 980px) {
  .navbar {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .nav-links {
    width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px !important;
    white-space: normal !important;
  }

  .nav-links a {
    font-size: 0.88rem !important;
  }
}

@media (max-width: 760px) {
  .site-footer {
    width: calc(100% - 24px) !important;
    margin-bottom: 18px !important;
  }

  .navbar {
    border-radius: 20px !important;
  }
  .contact-copy,
  .section-heading,
  .form-card,
  .service-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }
}

/* Dark glassmorphism finish. */
:root {
  --glass-bg: rgba(8, 15, 31, 0.58);
  --glass-bg-strong: rgba(10, 20, 42, 0.74);
  --glass-border: rgba(148, 213, 255, 0.18);
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  --glass-shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.26);
}

html {
  background: #050914;
}

body {
  background:
    radial-gradient(circle at 8% 10%, rgba(24, 200, 255, 0.2), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(116, 71, 255, 0.2), transparent 28%),
    radial-gradient(circle at 58% 86%, rgba(244, 184, 74, 0.13), transparent 34%),
    linear-gradient(135deg, #030711 0%, #071225 48%, #0b1020 100%) !important;
  color: #eaf6ff;
}

body::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.055), transparent 38%),
    repeating-linear-gradient(115deg, rgba(94, 231, 255, 0.055) 0 1px, transparent 1px 124px),
    repeating-linear-gradient(25deg, rgba(255, 209, 102, 0.045) 0 1px, transparent 1px 112px) !important;
  opacity: 0.86 !important;
}

.site-header {
  background: linear-gradient(180deg, rgba(3, 7, 17, 0.72), rgba(3, 7, 17, 0.22)) !important;
  border-bottom-color: rgba(148, 213, 255, 0.1) !important;
}

.navbar,
.nav-links,
.service-card,
.form-card,
.profile-card,
.college-browser,
.college-card,
.college-locked-panel,
.college-lock-message,
.college-overview-panel,
.college-overview-snapshot article,
.college-overview-grid div,
.admin-stats article,
.admin-college-item,
.admin-table-wrap,
.request-row,
.legal-content,
.contact-copy,
.contact-mini-grid article,
.section-heading{
  background:
    linear-gradient(145deg, rgba(12, 24, 49, 0.74), rgba(5, 10, 23, 0.48)) !important;
  border-color: var(--glass-border) !important;
  box-shadow:
    var(--glass-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.brand-logo,
.footer-brand img,
.section-tag,
.college-card mark,
.college-overview-head mark,
.request-row mark {
  background: rgba(8, 18, 39, 0.64) !important;
  border-color: rgba(94, 231, 255, 0.18) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #5ee7ff !important;
}
.section-heading h2,
.contact-copy h2,
.dashboard-header h2,
.service-card h3,
.college-browser-head h3,
.college-overview-head h3,
.legal-content h3,
.college-card strong,
.admin-college-item strong,
.contact-mini-grid strong,
.brand-title {
  color: #f4fbff !important;
}
.section-heading p,
.contact-copy p,
.service-card p,
.dashboard-header p,
.college-card p,
.legal-content p,
.contact-mini-grid span,
.college-card span,
.college-card dd,
.admin-college-item span,
.admin-college-item small,
.dashboard-empty,
.auth-help,
.brand-subtitle {
  color: rgba(223, 240, 255, 0.78) !important;
}

.nav-links a {
  color: rgba(234, 246, 255, 0.86) !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-link-active {
  color: #5ee7ff !important;
}

.auth-form label span,
.college-search span,
.college-card dt,
.college-overview-grid dt,
.college-overview-snapshot span {
  color: #94d5ff !important;
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.smooth-select-button,
.college-search input,
.college-search select,
.admin-table select {
  background: rgba(3, 9, 21, 0.52) !important;
  border-color: rgba(148, 213, 255, 0.2) !important;
  color: #f4fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

.auth-form input::placeholder,
.auth-form textarea::placeholder,
.college-search input::placeholder {
  color: rgba(223, 240, 255, 0.46) !important;
}

.smooth-select-list,
.college-overview-backdrop{
  background: rgba(3, 7, 17, 0.58) !important;
}

.smooth-select-option {
  color: #eaf6ff !important;
}

.smooth-select-option:hover,
.smooth-select-option:focus-visible,
.smooth-select-option[aria-selected="true"] {
  background: rgba(94, 231, 255, 0.12) !important;
  color: #ffffff !important;
}
.auth-submit,
.nav-links a[href="#/counseling"],
.footer-action[href="#/counseling"] {
  background:
    linear-gradient(135deg, rgba(24, 200, 255, 0.92), rgba(37, 99, 235, 0.86) 52%, rgba(116, 71, 255, 0.88)) !important;
  color: #ffffff !important;
}
.college-card-media,
.college-overview-media {
  border-color: rgba(148, 213, 255, 0.16) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
}
.service-card:hover,
.form-card:hover,
.college-card:hover,
.contact-mini-grid article:hover{
  border-color: rgba(94, 231, 255, 0.28) !important;
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px rgba(94, 231, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Header should read as one full-width dark glass bar, not a floating card. */
.site-header,
.site-header:is(:hover, :focus-within) {
  width: 100% !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(5, 10, 23, 0.9), rgba(5, 10, 23, 0.76)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(94, 231, 255, 0.16) !important;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

.navbar {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  padding: 12px 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-links {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-links a {
  padding: 8px 4px !important;
  border-radius: 0 !important;
}

.nav-links a.nav-link-active {
  color: #5ee7ff !important;
}

.nav-links a.nav-link-active::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: #5ee7ff;
  opacity: 1;
  transform: none;
}

.brand {
  min-width: 220px !important;
  gap: 12px !important;
}

.brand-logo {
  width: 56px !important;
  height: 56px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(94, 231, 255, 0.24) !important;
}

.brand-text {
  gap: 4px !important;
}

.brand-title {
  font-size: clamp(1.45rem, 2vw, 1.78rem) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #f8fbff !important;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.brand-subtitle {
  font-size: clamp(0.68rem, 0.95vw, 0.82rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(210, 225, 242, 0.76) !important;
}

.hamburger {
  background: transparent !important;
  border-color: rgba(94, 231, 255, 0.28) !important;
}

.hamburger span {
  background: #5ee7ff !important;
}

@media (max-width: 980px) {
  .navbar {
    width: 100% !important;
    padding: 10px 18px !important;
    flex-wrap: wrap !important;
  }

  .brand {
    min-width: 0 !important;
  }

  .brand-title {
    font-size: 1.35rem !important;
  }

  .brand-subtitle {
    font-size: 0.68rem !important;
  }

  .nav-links {
    width: 100% !important;
    padding: 4px 0 2px !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding: 0 !important;
  }

  .navbar {
    min-height: 64px !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
  }

  .brand {
    gap: 10px !important;
  }

  .brand-logo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
  }

  .nav-links {
    margin-top: 8px !important;
    padding: 10px 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nav-links a,
  .nav-links a[href="#/counseling"],
  .nav-links a[href="#/login"],
  .nav-links a[href="#/counseling"].nav-link-active,
  .nav-links a[href="#/login"].nav-link-active {
    width: auto !important;
    min-width: max-content !important;
    margin-left: 0 !important;
  }
}

/* Footer should be a full-width site section, not a floating card. */
.site-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(5, 10, 23, 0.84), rgba(3, 7, 17, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(94, 231, 255, 0.14) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

.footer-shell,
.footer-bottom {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (max-width: 760px) {
  .site-footer {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .footer-shell,
  .footer-bottom {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

main {
  padding-bottom: 0 !important;
}

/* Homepage admission guidance hero */
.home-page main {
  max-width: none;
  padding: 0 !important;
  width: 100%;
  overflow-x: clip;
}

.admission-hero {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  padding: 90px 24px;
  background: #07071a;
  color: #ffffff;
  text-align: center;
  isolation: isolate;
}

.home-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 24%, rgba(94, 234, 212, 0.12), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(129, 140, 248, 0.16), transparent 28%),
    radial-gradient(circle at 52% 86%, rgba(16, 185, 129, 0.1), transparent 30%);
}

.home-stars span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  color: hsl(var(--hue), 88%, 68%);
  animation: homeStarTravel var(--travel, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.home-stars span::before {
  content: "";
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 10px currentColor,
    0 0 24px color-mix(in srgb, currentColor 72%, transparent);
  animation: homeStarPulse var(--pulse, 1.8s) ease-in-out infinite alternate;
  animation-delay: var(--pulse-delay, 0s);
  will-change: opacity, transform;
}

.home-stars span:nth-child(1) { --x: 6%; --y: 26%; --hue: 188; --size: 3px; --travel: 9s; --pulse: 1.3s; --delay: -0.4s; }
.home-stars span:nth-child(2) { --x: 15%; --y: 72%; --hue: 219; --size: 2px; --travel: 12s; --pulse: 1.8s; --delay: -2.2s; }
.home-stars span:nth-child(3) { --x: 24%; --y: 38%; --hue: 158; --size: 4px; --travel: 10s; --pulse: 1.5s; --delay: -4.4s; }
.home-stars span:nth-child(4) { --x: 32%; --y: 14%; --hue: 244; --size: 2px; --travel: 13s; --pulse: 2s; --delay: -1.5s; }
.home-stars span:nth-child(5) { --x: 41%; --y: 80%; --hue: 184; --size: 3px; --travel: 11s; --pulse: 1.6s; --delay: -3.6s; }
.home-stars span:nth-child(6) { --x: 50%; --y: 28%; --hue: 263; --size: 2px; --travel: 8.5s; --pulse: 1.4s; --delay: -5s; }
.home-stars span:nth-child(7) { --x: 59%; --y: 66%; --hue: 169; --size: 4px; --travel: 14s; --pulse: 2.1s; --delay: -0.8s; }
.home-stars span:nth-child(8) { --x: 71%; --y: 20%; --hue: 202; --size: 3px; --travel: 10.5s; --pulse: 1.5s; --delay: -2.7s; }
.home-stars span:nth-child(9) { --x: 83%; --y: 50%; --hue: 236; --size: 2px; --travel: 9.5s; --pulse: 1.7s; --delay: -4.8s; }
.home-stars span:nth-child(10) { --x: 94%; --y: 82%; --hue: 151; --size: 3px; --travel: 13.5s; --pulse: 1.25s; --delay: -1.9s; }
.home-stars span:nth-child(11) { --x: 12%; --y: 48%; --hue: 276; --size: 2px; --travel: 11.5s; --pulse: 1.9s; --delay: -6s; }
.home-stars span:nth-child(12) { --x: 27%; --y: 88%; --hue: 190; --size: 3px; --travel: 9.8s; --pulse: 1.45s; --delay: -3.1s; }
.home-stars span:nth-child(13) { --x: 38%; --y: 55%; --hue: 160; --size: 2px; --travel: 12.8s; --pulse: 2.2s; --delay: -5.4s; }
.home-stars span:nth-child(14) { --x: 47%; --y: 8%; --hue: 225; --size: 4px; --travel: 10.2s; --pulse: 1.35s; --delay: -2.4s; }
.home-stars span:nth-child(15) { --x: 56%; --y: 90%; --hue: 252; --size: 2px; --travel: 14.5s; --pulse: 1.75s; --delay: -7.1s; }
.home-stars span:nth-child(16) { --x: 65%; --y: 40%; --hue: 146; --size: 3px; --travel: 8.8s; --pulse: 1.55s; --delay: -1.1s; }
.home-stars span:nth-child(17) { --x: 77%; --y: 76%; --hue: 204; --size: 2px; --travel: 11.8s; --pulse: 2.05s; --delay: -4.4s; }
.home-stars span:nth-child(18) { --x: 88%; --y: 16%; --hue: 270; --size: 3px; --travel: 9.2s; --pulse: 1.3s; --delay: -6.6s; }
.home-stars span:nth-child(19) { --x: 5%; --y: 94%; --hue: 176; --size: 4px; --travel: 13.2s; --pulse: 1.85s; --delay: -0.7s; }
.home-stars span:nth-child(20) { --x: 20%; --y: 10%; --hue: 232; --size: 2px; --travel: 10.8s; --pulse: 1.5s; --delay: -5.9s; }
.home-stars span:nth-child(21) { --x: 31%; --y: 68%; --hue: 184; --size: 3px; --travel: 12.2s; --pulse: 1.25s; --delay: -2.6s; }
.home-stars span:nth-child(22) { --x: 44%; --y: 42%; --hue: 154; --size: 2px; --travel: 9.7s; --pulse: 1.95s; --delay: -4.9s; }
.home-stars span:nth-child(23) { --x: 53%; --y: 60%; --hue: 281; --size: 4px; --travel: 14.8s; --pulse: 1.4s; --delay: -8.2s; }
.home-stars span:nth-child(24) { --x: 69%; --y: 6%; --hue: 168; --size: 2px; --travel: 11.2s; --pulse: 2.15s; --delay: -3.7s; }
.home-stars span:nth-child(25) { --x: 82%; --y: 69%; --hue: 196; --size: 3px; --travel: 9.4s; --pulse: 1.65s; --delay: -1.9s; }
.home-stars span:nth-child(26) { --x: 96%; --y: 32%; --hue: 242; --size: 2px; --travel: 13.8s; --pulse: 1.2s; --delay: -6.8s; }
.home-stars span:nth-child(27) { --x: 10%; --y: 62%; --hue: 140; --size: 3px; --travel: 10.4s; --pulse: 1.8s; --delay: -3.3s; }
.home-stars span:nth-child(28) { --x: 22%; --y: 24%; --hue: 206; --size: 2px; --travel: 12.5s; --pulse: 1.55s; --delay: -5.1s; }
.home-stars span:nth-child(29) { --x: 36%; --y: 84%; --hue: 188; --size: 4px; --travel: 9.1s; --pulse: 2s; --delay: -0.2s; }
.home-stars span:nth-child(30) { --x: 59%; --y: 17%; --hue: 260; --size: 2px; --travel: 11.9s; --pulse: 1.35s; --delay: -7.8s; }

@keyframes homeStarTravel {
  from {
    transform: translate3d(-14vw, 12vh, 0);
  }

  to {
    transform: translate3d(32vw, -24vh, 0);
  }
}

@keyframes homeStarPulse {
  from {
    opacity: 0.16;
    transform: scale(0.72);
  }

  to {
    opacity: 0.78;
    transform: scale(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stars span,
  .home-stars span::before {
    animation: none !important;
  }
}

.admission-hero-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(76px);
  opacity: 0.72;
  pointer-events: none;
}

.admission-hero-orb-one {
  top: -140px;
  left: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 68%);
}

.admission-hero-orb-two {
  right: -130px;
  bottom: 130px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.26), transparent 70%);
}

.admission-hero-orb-three {
  top: -180px;
  right: 14%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 72%);
}

.admission-hero-inner {
  width: min(920px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.admission-hero-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
}

.admission-hero-badge span {
  color: #10b981;
}

.admission-hero h1 {
  max-width: 860px;
  margin: 22px auto 0;
  color: #ffffff;
  font-size: clamp(2.8rem, 6vw, 4.7rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

.admission-hero h1 span {
  background: linear-gradient(90deg, #818cf8, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admission-hero p {
  max-width: 760px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  line-height: 1.7;
}

.admission-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.admission-hero-primary,
.admission-hero-secondary {
  display: inline-flex;
  position: relative;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform 0.22s var(--lift-ease),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

.admission-hero-primary {
  border: 1px solid rgba(99, 102, 241, 0.6);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.28);
}

.admission-hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admission-hero-primary:hover,
.admission-hero-primary:focus-visible {
  color: #ffffff;
  transform: translateY(-3px);
  border-color: rgba(129, 140, 248, 0.9);
  background: linear-gradient(135deg, #7477ff, #5b55f1);
  box-shadow:
    0 18px 42px rgba(79, 70, 229, 0.34),
    0 0 32px rgba(99, 102, 241, 0.34);
}

.admission-hero-secondary:hover,
.admission-hero-secondary:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.32);
}

.admission-hero-primary:focus-visible,
.admission-hero-secondary:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.45);
  outline-offset: 4px;
}

.admission-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 28px auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.92rem;
  font-weight: 800;
}

.admission-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.055));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(0);
  transition:
    transform 0.22s var(--lift-ease),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

.admission-hero-trust > span:hover {
  transform: translateY(-2px);
  border-color: rgba(52, 211, 153, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.14);
}

.admission-hero-trust span span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #34d399;
  color: #34d399;
  font-size: 0;
  line-height: 0;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

@media (max-width: 640px) {
  .admission-hero {
    padding: 60px 18px;
  }

  .admission-hero-orb {
    filter: blur(58px);
  }

  .admission-hero-orb-one {
    width: 250px;
    height: 250px;
  }

  .admission-hero-orb-two {
    width: 280px;
    height: 280px;
  }

  .admission-hero-orb-three {
    width: 230px;
    height: 230px;
  }

  .admission-hero-badge {
    padding: 7px 12px;
    font-size: 0.7rem;
  }

  .admission-hero h1 {
    font-size: 2.15rem;
    line-height: 1.08;
  }

  .admission-hero p {
    font-size: 15px;
  }

  .admission-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admission-hero-primary,
  .admission-hero-secondary {
    width: 100%;
  }

  .admission-hero-trust {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }

  .admission-hero-trust span {
    justify-content: center;
  }
}

.student-stories {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: 74px clamp(18px, 4vw, 72px) 82px;
  background: transparent;
  color: #ffffff;
}

.student-stories-header,
.testimonial-card,
.testimonial-grid,
.testimonial-stats {
  position: relative;
  z-index: 1;
}

.student-stories-header {
  max-width: 860px;
  margin: 0 auto 36px;
  text-align: center;
}

.student-stories-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.student-stories-badge span {
  color: #34d399;
}

.student-stories-header h2 {
  margin: 20px auto 0;
  color: #ffffff;
  font-size: clamp(2.15rem, 4.6vw, 3.65rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0;
}

.student-stories-header h2 span,
.testimonial-stats strong {
  background: linear-gradient(90deg, #818cf8, #34d399);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.student-stories-header p {
  max-width: 720px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
  line-height: 1.7;
}

.testimonial-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.testimonial-featured {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 38px);
}

.testimonial-quote-mark {
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 1;
  color: rgba(129, 140, 248, 0.4);
}

.testimonial-quote {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
}

.testimonial-stars {
  margin-top: 18px;
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 2px;
}

.testimonial-divider {
  height: 1px;
  margin: 18px 0;
  background: rgba(255, 255, 255, 0.06);
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.testimonial-avatar-indigo {
  background: linear-gradient(135deg, #6366f1, #818cf8);
}

.testimonial-avatar-green {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.testimonial-avatar-warm {
  background: linear-gradient(135deg, #f472b6, #fb923c);
}

.testimonial-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.testimonial-person strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.testimonial-person p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.45;
}

.testimonial-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1080px, 100%);
  margin: 18px auto 0;
}

.testimonial-grid .testimonial-card {
  padding: 24px;
}

.testimonial-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(1080px, 100%);
  margin: 18px auto 0;
}

.testimonial-stats article {
  display: grid;
  gap: 6px;
  min-height: 96px;
  align-content: center;
  justify-items: center;
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.testimonial-stats strong {
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
}

.testimonial-stats span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .home-page main {
    overflow-x: hidden;
  }

  .admission-hero,
  .student-stories {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .student-stories {
    padding: 54px 18px 62px;
  }

  .student-stories-header,
  .testimonial-featured,
  .testimonial-grid,
  .testimonial-stats {
    width: 100%;
  }

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

  .testimonial-stats {
    gap: 8px;
  }

  .testimonial-stats article {
    min-height: 78px;
    padding: 14px 8px;
  }

  .testimonial-stats strong {
    font-size: 1.25rem;
  }

  .testimonial-stats span {
    font-size: 10px;
  }
}

/* About page dark glassmorphism refresh */
.about-page {
  background:
    radial-gradient(circle at 0% 8%, rgba(99, 102, 241, 0.4), transparent 28%),
    radial-gradient(circle at 100% 18%, rgba(99, 102, 241, 0.22), transparent 30%),
    radial-gradient(circle at 0% 86%, rgba(16, 185, 129, 0.3), transparent 32%),
    #07071a !important;
  color: #ffffff;
}

.about-page::before {
  display: none !important;
}

.about-page .site-header {
  background: rgba(7, 7, 26, 0.72) !important;
}

.about-glass-main {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 84px 0 0 !important;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.about-glass-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(78px);
  opacity: 0.72;
  pointer-events: none;
}

.about-glass-orb-indigo {
  top: -140px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 68%);
}

.about-glass-orb-green {
  bottom: 130px;
  left: -130px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.26), transparent 70%);
}

.about-glass-header {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

.about-glass-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.about-glass-badge span {
  color: #34d399;
}

.about-glass-header h1 {
  max-width: 860px;
  margin: 22px auto 0;
  color: #ffffff;
  font-size: clamp(2.55rem, 5.6vw, 4.55rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

.about-gradient-text {
  background: linear-gradient(90deg, #818cf8, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-glass-header p,
.about-story-body p,
.about-founder-card blockquote,
.about-value-card p,
.about-glass-cta p {
  color: rgba(255, 255, 255, 0.55);
}

.about-glass-header p {
  max-width: 840px;
  margin: 20px auto 0;
  font-size: 1.05rem;
  line-height: 1.8;
}

.about-glass-section {
  position: relative;
  z-index: 1;
  margin-top: 72px;
}

body.about-page [data-scroll-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 0.72s var(--smooth-ease) var(--reveal-delay, 0ms),
    transform 0.72s var(--smooth-ease) var(--reveal-delay, 0ms),
    filter 0.72s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

body.about-page [data-scroll-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.about-glass-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.about-glass-stats {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.about-stat-card {
  padding: 26px;
  text-align: center;
}

.about-stat-card strong {
  display: block;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 900;
  line-height: 1;
}

.about-stat-card span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.94rem;
  font-weight: 800;
}

.about-story-glass {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 30px;
  align-items: start;
}

.about-story-glass h2,
.about-section-title {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.about-story-body {
  padding: 30px;
}

.about-story-body p {
  font-size: 1rem;
  line-height: 1.85;
}

.about-story-body p + p {
  margin-top: 18px;
}

.about-founder-card {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 30px;
}

.about-founder-avatar {
  display: inline-flex;
  width: 82px;
  height: 82px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #34d399);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 18px 42px rgba(52, 211, 153, 0.16);
}

.about-founder-card h2 {
  color: #ffffff;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
}

.about-founder-card p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 800;
}

.about-founder-card blockquote {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.8;
}

.about-values-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.about-value-card {
  padding: 26px;
}

.about-value-card i {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 1.55rem;
}

.about-value-card h3 {
  margin-top: 18px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
}

.about-value-card p {
  margin-top: 10px;
  font-size: 0.96rem;
  line-height: 1.75;
}

.about-icon-green {
  color: #34d399;
}

.about-icon-purple {
  color: #818cf8;
}

.about-icon-pink {
  color: #f472b6;
}

.about-icon-orange {
  color: #fb923c;
}

.about-glass-cta {
  width: 100%;
  margin: 72px auto 88px;
  padding: 36px 28px;
  text-align: center;
}

.about-glass-cta h2 {
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.1;
}

.about-glass-cta p {
  margin-top: 12px;
  font-size: 1rem;
}

.about-glass-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 15px 28px;
  border: 1px solid rgba(99, 102, 241, 0.6);
  border-radius: 50px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.28);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.22s var(--lift-ease),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.about-glass-button:hover,
.about-glass-button:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(129, 140, 248, 0.9);
  background: linear-gradient(135deg, #7477ff, #5b55f1);
  color: #ffffff;
  box-shadow:
    0 18px 42px rgba(79, 70, 229, 0.34),
    0 0 32px rgba(99, 102, 241, 0.34);
}

.about-glass-button:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.45);
  outline-offset: 4px;
}

@media (max-width: 820px) {
  .about-glass-main {
    padding-top: 58px !important;
  }

  .about-glass-section {
    margin-top: 48px;
  }

  .about-glass-stats,
  .about-story-glass,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-story-glass {
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.about-page [data-scroll-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (max-width: 560px) {
  .about-glass-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-glass-header h1 {
    font-size: 2.15rem;
  }

  .about-glass-header p,
  .about-story-body p,
  .about-founder-card blockquote {
    font-size: 0.95rem;
  }

  .about-stat-card,
  .about-story-body,
  .about-founder-card,
  .about-value-card,
  .about-glass-cta {
    padding: 22px;
  }

  .about-founder-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-founder-avatar {
    margin: 0 auto;
  }
}

/* About page: remove the old centered-page gutters on the dark glass layout. */
body.about-page,
body.about-page #root {
  width: 100%;
  max-width: none !important;
  overflow-x: hidden;
}

body.about-page .about-glass-main {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 84px clamp(18px, 4vw, 72px) 0 !important;
  overflow: hidden;
}

body.about-page .about-glass-header,
body.about-page .about-glass-stats,
body.about-page .about-story-glass,
body.about-page .about-founder-card,
body.about-page .about-values-grid,
body.about-page .about-glass-cta {
  max-width: 100% !important;
}

body.about-page::before {
  display: none !important;
}

body.about-page::after {
  display: none !important;
}

body.about-page .about-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(129, 140, 248, 0.12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(52, 211, 153, 0.09), transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(244, 114, 182, 0.08), transparent 28%);
}

body.about-page .about-stars span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  color: hsl(var(--hue), 92%, 72%);
  animation: aboutStarTravel var(--travel, 9s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

body.about-page .about-stars span::before {
  content: "";
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 10px currentColor,
    0 0 22px currentColor,
    0 0 38px color-mix(in srgb, currentColor 62%, transparent);
  animation: aboutStarBlink var(--blink, 1.7s) ease-in-out infinite alternate;
  animation-delay: var(--blink-delay, 0s);
  will-change: opacity, transform;
}

body.about-page .about-stars span:nth-child(1) { --x: 7%; --y: 18%; --hue: 190; --size: 3px; --travel: 8s; --blink: 1.2s; --delay: -0.4s; }
body.about-page .about-stars span:nth-child(2) { --x: 16%; --y: 72%; --hue: 44; --size: 2px; --travel: 11s; --blink: 1.8s; --delay: -2.1s; }
body.about-page .about-stars span:nth-child(3) { --x: 24%; --y: 34%; --hue: 326; --size: 4px; --travel: 9s; --blink: 1.4s; --delay: -4.2s; }
body.about-page .about-stars span:nth-child(4) { --x: 34%; --y: 12%; --hue: 218; --size: 2px; --travel: 12s; --blink: 2s; --delay: -1.2s; }
body.about-page .about-stars span:nth-child(5) { --x: 42%; --y: 78%; --hue: 155; --size: 3px; --travel: 10s; --blink: 1.6s; --delay: -3.5s; }
body.about-page .about-stars span:nth-child(6) { --x: 51%; --y: 26%; --hue: 275; --size: 2px; --travel: 7.5s; --blink: 1.3s; --delay: -5s; }
body.about-page .about-stars span:nth-child(7) { --x: 61%; --y: 63%; --hue: 8; --size: 4px; --travel: 13s; --blink: 2.1s; --delay: -0.9s; }
body.about-page .about-stars span:nth-child(8) { --x: 72%; --y: 20%; --hue: 188; --size: 3px; --travel: 9.5s; --blink: 1.5s; --delay: -2.8s; }
body.about-page .about-stars span:nth-child(9) { --x: 84%; --y: 48%; --hue: 255; --size: 2px; --travel: 8.5s; --blink: 1.7s; --delay: -4.8s; }
body.about-page .about-stars span:nth-child(10) { --x: 94%; --y: 82%; --hue: 58; --size: 3px; --travel: 12.5s; --blink: 1.25s; --delay: -1.7s; }
body.about-page .about-stars span:nth-child(11) { --x: 12%; --y: 44%; --hue: 286; --size: 2px; --travel: 10.5s; --blink: 1.9s; --delay: -6s; }
body.about-page .about-stars span:nth-child(12) { --x: 28%; --y: 88%; --hue: 172; --size: 3px; --travel: 8.8s; --blink: 1.45s; --delay: -3.1s; }
body.about-page .about-stars span:nth-child(13) { --x: 39%; --y: 52%; --hue: 36; --size: 2px; --travel: 11.8s; --blink: 2.2s; --delay: -5.4s; }
body.about-page .about-stars span:nth-child(14) { --x: 48%; --y: 6%; --hue: 225; --size: 4px; --travel: 9.2s; --blink: 1.35s; --delay: -2.4s; }
body.about-page .about-stars span:nth-child(15) { --x: 57%; --y: 90%; --hue: 318; --size: 2px; --travel: 13.5s; --blink: 1.75s; --delay: -7.1s; }
body.about-page .about-stars span:nth-child(16) { --x: 66%; --y: 38%; --hue: 142; --size: 3px; --travel: 7.8s; --blink: 1.55s; --delay: -1.1s; }
body.about-page .about-stars span:nth-child(17) { --x: 76%; --y: 74%; --hue: 204; --size: 2px; --travel: 10.8s; --blink: 2.05s; --delay: -4.4s; }
body.about-page .about-stars span:nth-child(18) { --x: 88%; --y: 14%; --hue: 340; --size: 3px; --travel: 8.2s; --blink: 1.3s; --delay: -6.6s; }
body.about-page .about-stars span:nth-child(19) { --x: 4%; --y: 92%; --hue: 70; --size: 4px; --travel: 12.2s; --blink: 1.85s; --delay: -0.7s; }
body.about-page .about-stars span:nth-child(20) { --x: 19%; --y: 8%; --hue: 262; --size: 2px; --travel: 9.8s; --blink: 1.5s; --delay: -5.9s; }
body.about-page .about-stars span:nth-child(21) { --x: 31%; --y: 66%; --hue: 184; --size: 3px; --travel: 11.2s; --blink: 1.25s; --delay: -2.6s; }
body.about-page .about-stars span:nth-child(22) { --x: 44%; --y: 40%; --hue: 24; --size: 2px; --travel: 8.7s; --blink: 1.95s; --delay: -4.9s; }
body.about-page .about-stars span:nth-child(23) { --x: 53%; --y: 58%; --hue: 300; --size: 4px; --travel: 13.8s; --blink: 1.4s; --delay: -8.2s; }
body.about-page .about-stars span:nth-child(24) { --x: 69%; --y: 4%; --hue: 160; --size: 2px; --travel: 10.2s; --blink: 2.15s; --delay: -3.7s; }
body.about-page .about-stars span:nth-child(25) { --x: 82%; --y: 67%; --hue: 48; --size: 3px; --travel: 8.4s; --blink: 1.65s; --delay: -1.9s; }
body.about-page .about-stars span:nth-child(26) { --x: 96%; --y: 30%; --hue: 232; --size: 2px; --travel: 12.8s; --blink: 1.2s; --delay: -6.8s; }
body.about-page .about-stars span:nth-child(27) { --x: 9%; --y: 60%; --hue: 128; --size: 3px; --travel: 9.4s; --blink: 1.8s; --delay: -3.3s; }
body.about-page .about-stars span:nth-child(28) { --x: 22%; --y: 22%; --hue: 350; --size: 2px; --travel: 11.5s; --blink: 1.55s; --delay: -5.1s; }
body.about-page .about-stars span:nth-child(29) { --x: 36%; --y: 82%; --hue: 198; --size: 4px; --travel: 8.1s; --blink: 2s; --delay: -0.2s; }
body.about-page .about-stars span:nth-child(30) { --x: 59%; --y: 15%; --hue: 285; --size: 2px; --travel: 10.9s; --blink: 1.35s; --delay: -7.8s; }
body.about-page .about-stars span:nth-child(31) { --x: 74%; --y: 89%; --hue: 90; --size: 3px; --travel: 12.9s; --blink: 1.7s; --delay: -2.2s; }
body.about-page .about-stars span:nth-child(32) { --x: 86%; --y: 37%; --hue: 12; --size: 2px; --travel: 9.1s; --blink: 1.45s; --delay: -4.6s; }
body.about-page .about-stars span:nth-child(33) { --x: 47%; --y: 32%; --hue: 215; --size: 3px; --travel: 11.7s; --blink: 2.05s; --delay: -6.3s; }
body.about-page .about-stars span:nth-child(34) { --x: 64%; --y: 72%; --hue: 330; --size: 2px; --travel: 8.6s; --blink: 1.25s; --delay: -3.9s; }

body.about-page .about-glass-orb-indigo {
  animation: aboutOrbFloat 14s ease-in-out infinite alternate;
}

body.about-page .about-glass-orb-green {
  animation: aboutOrbFloat 18s ease-in-out infinite alternate-reverse;
}

@keyframes aboutStarBlink {
  0% {
    opacity: 0.12;
    transform: scale(0.75);
  }

  100% {
    opacity: 0.95;
    transform: scale(1.35);
  }
}

@keyframes aboutStarTravel {
  from {
    transform: translate3d(-18vw, 18vh, 0);
  }

  to {
    transform: translate3d(36vw, -32vh, 0);
  }
}

@keyframes aboutOrbFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(28px, -18px, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.about-page .about-stars span,
  body.about-page .about-glass-orb-indigo,
  body.about-page .about-glass-orb-green {
    animation: none !important;
  }
}

@media (max-width: 820px) {
  body.about-page .about-glass-main {
    padding-top: 58px !important;
  }
}

@media (max-width: 560px) {
  body.about-page .about-glass-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Site page transition effect */
:root {
  --route-header-height: 72px;
}

.route-transition-layer {
  display: none !important;
}

.site-header {
  z-index: 3000 !important;
}

body.page-route-leave,
body.page-route-enter {
  overflow-x: hidden !important;
}

body.page-route-leave #root,
body.page-route-enter #root {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

body.page-route-leave #root main,
body.page-route-leave #root .site-footer,
body.page-route-enter #root main,
body.page-route-enter #root .site-footer {
  animation: none !important;
  transition:
    opacity 0.18s ease,
    transform 0.2s var(--smooth-ease),
    filter 0.2s ease !important;
}

body.page-route-leave .site-header,
body.page-route-enter .site-header,
body.page-route-leave .navbar,
body.page-route-enter .navbar {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition:
    background-color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

body.page-route-leave #root main,
body.page-route-leave #root .site-footer {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.992) !important;
  filter: blur(10px) saturate(0.92) brightness(0.96) !important;
}

body.route-dir-back.page-route-leave #root main,
body.route-dir-back.page-route-leave #root .site-footer {
  transform: translateY(-10px) scale(0.992) !important;
}

body.page-route-enter #root main,
body.page-route-enter #root .site-footer {
  animation: routeBlurFadeIn 0.34s var(--smooth-ease) both !important;
}

body.route-dir-back.page-route-enter #root main,
body.route-dir-back.page-route-enter #root .site-footer {
  animation-name: routeBlurFadeInBack !important;
}

@keyframes routeBlurFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
    filter: blur(10px) saturate(0.92) brightness(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1) brightness(1);
  }
}

@keyframes routeBlurFadeInBack {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.992);
    filter: blur(10px) saturate(0.92) brightness(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1) brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-transition-layer,
  body.page-route-leave .route-transition-layer,
  body.page-route-enter .route-transition-layer,
  body.page-route-leave #root,
  body.page-route-enter #root,
  body.page-route-leave #root main,
  body.page-route-leave #root .site-footer,
  body.page-route-enter #root main,
  body.page-route-enter #root .site-footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .route-transition-layer {
    opacity: 0 !important;
  }
}

@media (max-width: 760px) {
  :root {
    --route-header-height: 65px;
  }
}

/* Keep the newer Home/About scenes clean by removing the old global backdrop. */
html,
body {
  background: #07071a !important;
}

body::before {
  display: none !important;
}

body.services-page {
  background: #07071a !important;
  color: #ffffff;
}

body.services-page .site-header {
  background: rgba(7, 7, 26, 0.82);
}

body.services-page,
body.services-page #root {
  width: 100%;
  max-width: none !important;
  overflow-x: hidden;
}

.services-glass-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: 100vh;
  padding: 42px clamp(18px, 4vw, 72px) 72px;
  background: #07071a;
}

.services-glass-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(78px);
  opacity: 0.8;
  pointer-events: none;
}

.services-glass-orb-indigo {
  top: -150px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45), transparent 68%);
}

.services-glass-orb-green {
  right: -150px;
  bottom: -120px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35), transparent 70%);
}

.services-glass-orb-pink {
  top: -130px;
  right: -110px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25), transparent 70%);
}

.services-glass-header,
.services-offer-grid,
.services-scholarship-highlight,
.services-free-cta {
  position: relative;
  z-index: 1;
}

.services-glass-header {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.services-glass-badge,
.services-scholarship-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.services-glass-badge {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
}

.services-glass-badge span {
  color: #34d399;
}

.services-glass-header h1 {
  max-width: 920px;
  margin: 16px auto 0;
  color: #ffffff;
  font-size: clamp(2.25rem, 4.5vw, 3.65rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

.services-gradient-text {
  background: linear-gradient(90deg, #818cf8, #34d399);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-glass-header p {
  max-width: 820px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
  line-height: 1.65;
}

.services-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1080px, 100%);
  margin: 40px auto 0;
}

.services-offer-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.services-offer-card:hover,
.services-offer-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(99, 102, 241, 0.16);
}

.services-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.55rem;
}

.services-offer-card h2 {
  margin-top: 18px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.services-offer-card p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  line-height: 1.75;
}

.services-fee-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 6px 10px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.services-scholarship-highlight {
  overflow: hidden;
  width: min(1080px, 100%);
  margin: 72px auto 0;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(99, 102, 241, 0.12));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.services-scholarship-highlight::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.2), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.services-scholarship-content {
  position: relative;
  z-index: 1;
}

.services-scholarship-badge {
  padding: 8px 13px;
  border: 1px solid rgba(52, 211, 153, 0.24);
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

.services-scholarship-highlight h2 {
  max-width: 820px;
  margin-top: 20px;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.services-scholarship-highlight > .services-scholarship-content > p {
  max-width: 820px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 1rem;
  line-height: 1.8;
}

.services-scholarship-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.services-scholarship-mini-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.services-scholarship-mini-card h3 {
  color: #34d399;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.3;
}

.services-scholarship-mini-card p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
  line-height: 1.65;
}

.services-scholarship-button,
.services-free-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.services-scholarship-button {
  margin-top: 28px;
  padding: 14px 24px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  font-size: 0.95rem;
}

.services-scholarship-button:hover,
.services-scholarship-button:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(52, 211, 153, 0.62);
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  box-shadow: 0 16px 36px rgba(52, 211, 153, 0.16);
}

.services-free-cta {
  width: min(1080px, 100%);
  margin: 72px auto 0;
  padding: 36px 28px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.1);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.services-free-cta p {
  max-width: 780px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.28rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.24;
}

.services-free-button {
  margin-top: 24px;
  padding: 15px 28px;
  border: 1px solid rgba(99, 102, 241, 0.6);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.28);
  font-size: 1rem;
}

.services-free-button:hover,
.services-free-button:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(129, 140, 248, 0.9);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.34), 0 0 32px rgba(99, 102, 241, 0.34);
}

@media (max-width: 820px) {
  .services-glass-main {
    padding-top: 34px;
  }

  .services-offer-grid,
  .services-free-cta,
  .services-scholarship-highlight {
    margin-top: 34px;
  }

  .services-offer-grid,
  .services-scholarship-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .services-glass-main {
    padding-right: 14px;
    padding-left: 14px;
  }

  .services-glass-header h1 {
    font-size: 2rem;
  }

  .services-glass-header p {
    font-size: 0.95rem;
  }

  .services-offer-card,
  .services-scholarship-highlight,
  .services-free-cta {
    padding: 22px;
  }
}

body.colleges-page {
  overflow-x: hidden;
  background: #07071a !important;
  color: #ffffff;
}

body.colleges-page::before,
body.colleges-page::after {
  display: none !important;
}

body.colleges-page .site-header {
  background: rgba(7, 7, 26, 0.82) !important;
}

body.colleges-page,
body.colleges-page #root {
  width: 100%;
  max-width: none !important;
}

.colleges-glass-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100vh;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 42px clamp(18px, 4vw, 72px) 78px;
  background: #07071a;
}

.colleges-glass-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(78px);
  opacity: 0.8;
  pointer-events: none;
}

.colleges-glass-orb-indigo {
  top: -150px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45), transparent 68%);
}

.colleges-glass-orb-green {
  right: -150px;
  bottom: -120px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35), transparent 70%);
}

.colleges-glass-orb-pink {
  top: -130px;
  right: -110px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25), transparent 70%);
}

.colleges-glass-shell,
.colleges-glass-header,
body.colleges-page .college-browser {
  position: relative;
  z-index: 1;
}

.colleges-glass-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.colleges-glass-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin: 0 auto 34px;
}

.colleges-header-copy {
  max-width: 820px;
}

.colleges-glass-badge,
.colleges-mini-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
}

.colleges-glass-badge {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.78rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.colleges-glass-badge span {
  color: #34d399;
}

.colleges-glass-header h1 {
  max-width: 920px;
  margin: 16px 0 0;
  color: #ffffff !important;
  font-size: clamp(2.25rem, 4.5vw, 3.65rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: none !important;
}

.colleges-glass-header p {
  max-width: 780px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 1rem;
  line-height: 1.65;
}

.colleges-login-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 50px;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399 !important;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.colleges-login-button:hover,
.colleges-login-button:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(52, 211, 153, 0.62);
  background: rgba(52, 211, 153, 0.2);
  box-shadow: 0 16px 36px rgba(52, 211, 153, 0.16);
}

body.colleges-page .college-browser {
  margin-top: 0 !important;
  padding: clamp(20px, 3vw, 30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 70px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.colleges-page .college-browser-head {
  align-items: end;
  margin-bottom: 22px;
}

.colleges-mini-label {
  padding: 7px 11px;
  border: 1px solid rgba(129, 140, 248, 0.3);
  background: rgba(129, 140, 248, 0.12);
  color: #818cf8 !important;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
}

body.colleges-page .college-browser-head h3 {
  margin: 14px 0 8px;
  color: #ffffff !important;
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: none !important;
}

body.colleges-page .college-browser-head p,
body.colleges-page .dashboard-empty {
  color: rgba(255, 255, 255, 0.56) !important;
}

body.colleges-page .college-filter-row {
  gap: 12px;
  width: min(100%, 560px);
}

body.colleges-page .college-search span {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

body.colleges-page .college-search input,
body.colleges-page .college-search select,
body.colleges-page .smooth-select-button {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.colleges-page .college-search input::placeholder {
  color: rgba(255, 255, 255, 0.36) !important;
}

body.colleges-page .college-search input:focus,
body.colleges-page .college-search select:focus,
body.colleges-page .smooth-select-button:focus-visible {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16) !important;
}

body.colleges-page .college-grid,
body.colleges-page .college-locked-grid {
  gap: 18px;
}

body.colleges-page .college-card {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

body.colleges-page .college-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(99, 102, 241, 0.16) !important;
}

body.colleges-page .college-card-media {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

body.colleges-page .college-card strong {
  color: #ffffff !important;
}

body.colleges-page .college-card p,
body.colleges-page .college-card span,
body.colleges-page .college-card dd {
  color: rgba(255, 255, 255, 0.56) !important;
}

body.colleges-page .college-card dt {
  color: rgba(129, 140, 248, 0.86) !important;
}

body.colleges-page .college-card mark {
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
  box-shadow: none !important;
}

body.colleges-page .college-lock-message {
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(99, 102, 241, 0.12)) !important;
  color: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.colleges-page .college-lock-message h3 {
  color: #ffffff !important;
}

body.colleges-page .college-lock-message p {
  color: rgba(255, 255, 255, 0.58) !important;
}

body.colleges-page .college-lock-message .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

body.colleges-page .college-lock-message .hero-primary,
body.colleges-page .college-lock-message .hero-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body.colleges-page .hero-primary {
  border-color: rgba(99, 102, 241, 0.6) !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.28) !important;
}

body.colleges-page .hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

body.colleges-page .college-lock-message .hero-primary:hover,
body.colleges-page .college-lock-message .hero-primary:focus-visible,
body.colleges-page .college-lock-message .hero-secondary:hover,
body.colleges-page .college-lock-message .hero-secondary:focus-visible {
  transform: translateY(-2px);
}

body.colleges-page .college-lock-message .hero-primary:hover,
body.colleges-page .college-lock-message .hero-primary:focus-visible {
  box-shadow: 0 20px 46px rgba(79, 70, 229, 0.38) !important;
}

body.colleges-page .college-lock-message .hero-secondary:hover,
body.colleges-page .college-lock-message .hero-secondary:focus-visible {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.colleges-page .college-lock-message .hero-primary:focus-visible,
body.colleges-page .college-lock-message .hero-secondary:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.42);
  outline-offset: 3px;
}

@media (max-width: 920px) {
  .colleges-glass-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .colleges-login-button {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .colleges-glass-main {
    padding-top: 34px;
  }

  body.colleges-page .college-browser-head {
    align-items: stretch;
    flex-direction: column;
  }

  body.colleges-page .college-filter-row {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .colleges-glass-main {
    padding-right: 14px;
    padding-left: 14px;
  }

  .colleges-glass-header h1 {
    font-size: 2rem;
  }

  body.colleges-page .college-browser {
    padding: 18px !important;
  }
}

body.colleges-page .college-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

body.colleges-page .college-card {
  grid-template-rows: auto auto auto auto;
  gap: 12px;
  padding: 14px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

body.colleges-page .college-card::before,
body.colleges-page .college-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

body.colleges-page .college-card::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 28%),
    radial-gradient(circle at 18% 10%, rgba(94, 231, 255, 0.24), transparent 36%),
    radial-gradient(circle at 92% 0%, rgba(129, 140, 248, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  opacity: 0.9;
}

body.colleges-page .college-card::after {
  top: -35%;
  left: -20%;
  width: 72%;
  height: 70%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(26px);
  opacity: 0.55;
  transform: rotate(-14deg);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

body.colleges-page .college-card > * {
  position: relative;
  z-index: 1;
}

body.colleges-page .college-card-media {
  aspect-ratio: 16 / 8.5;
}

body.colleges-page .college-card-top {
  gap: 10px;
}

body.colleges-page .college-card strong {
  font-size: 0.98rem !important;
  line-height: 1.25;
}

body.colleges-page .college-card span {
  font-size: 0.86rem;
  line-height: 1.35;
}

body.colleges-page .college-card p {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

body.colleges-page .college-card dl {
  gap: 7px;
}

body.colleges-page .college-card dl div {
  grid-template-columns: 70px 1fr;
  gap: 10px;
}

body.colleges-page .college-card dt {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

body.colleges-page .college-card dd {
  font-size: 0.86rem;
  line-height: 1.35;
}

body.colleges-page .college-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.colleges-page .college-card-actions .hero-primary,
body.colleges-page .college-card-actions .hero-secondary {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 0.84rem;
}

body.colleges-page .college-card:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.5);
  outline-offset: 4px;
}

body.colleges-page .college-card {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 18px 48px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(94, 231, 255, 0.035) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
}

body.colleges-page .college-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(148, 163, 255, 0.42) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(15, 23, 42, 0.36),
    0 0 34px rgba(94, 231, 255, 0.12) !important;
}

body.colleges-page .college-card:hover::after {
  opacity: 0.75;
  transform: translate(18%, 14%) rotate(-8deg);
}

body.colleges-page .college-card-media {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

body.colleges-page .college-card mark {
  border-color: rgba(52, 211, 153, 0.38) !important;
  background: rgba(52, 211, 153, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(52, 211, 153, 0.12) !important;
}

/* Browse colleges refinement */
body.colleges-page {
  background:
    radial-gradient(circle at 18% -10%, rgba(45, 212, 191, 0.16), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(99, 102, 241, 0.14), transparent 30%),
    linear-gradient(180deg, #070816 0%, #0b1020 48%, #08111c 100%) !important;
}

body.colleges-page .home-stars,
body.colleges-page .colleges-glass-orb {
  display: none !important;
}

.colleges-glass-main {
  padding: 28px clamp(18px, 4vw, 56px) 64px;
  background: transparent !important;
}

.colleges-glass-shell {
  width: min(1320px, 100%);
}

.colleges-glass-header {
  margin-bottom: 20px;
  padding: 18px 0 4px;
}

.colleges-header-copy {
  max-width: 760px;
}

.colleges-glass-badge {
  padding: 7px 12px;
  border-color: rgba(94, 231, 255, 0.16);
  background: rgba(94, 231, 255, 0.08);
  color: rgba(238, 248, 255, 0.84);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.colleges-glass-header h1 {
  max-width: 720px;
  margin-top: 12px;
  font-size: clamp(1.95rem, 3.5vw, 3.05rem);
  line-height: 1.06;
}

.colleges-glass-header p {
  max-width: 660px;
  margin-top: 10px;
  color: rgba(229, 237, 246, 0.64) !important;
  font-size: 0.96rem;
  line-height: 1.6;
}

body.colleges-page .college-browser {
  padding: clamp(16px, 2vw, 22px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 70px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

body.colleges-page .college-browser-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.colleges-mini-label {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(94, 231, 255, 0.78) !important;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.colleges-page .college-browser-head h3 {
  margin: 7px 0 5px;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.15;
}

body.colleges-page .college-browser-head p {
  max-width: 540px;
  margin: 0;
  font-size: 0.9rem;
}

body.colleges-page .college-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, 0.75fr);
  gap: 10px;
  width: 100%;
}

body.colleges-page .college-search {
  gap: 7px;
}

body.colleges-page .college-search input,
body.colleges-page .college-search select,
body.colleges-page .smooth-select-button {
  min-height: 42px;
  border-radius: 12px !important;
  background: rgba(7, 12, 26, 0.48) !important;
}

body.colleges-page .college-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

body.colleges-page .college-card {
  gap: 10px;
  padding: 10px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.2) !important;
}

body.colleges-page .college-card::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 24% 0%, rgba(94, 231, 255, 0.16), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(129, 140, 248, 0.16), transparent 34%);
  opacity: 0.75;
}

body.colleges-page .college-card::after {
  opacity: 0.32;
}

body.colleges-page .college-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 42px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(94, 231, 255, 0.08) !important;
}

body.colleges-page .college-card-media {
  aspect-ratio: 16 / 9.3;
  border-radius: 13px !important;
}

body.colleges-page .college-card-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 0 2px 2px;
}

body.colleges-page .college-card strong {
  font-size: 0.94rem !important;
}

body.colleges-page .college-card span {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.78rem;
}

body.colleges-page .college-card mark {
  padding: 5px 8px;
  font-size: 0.66rem;
}

@media (min-width: 1280px) {
  body.colleges-page .college-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 860px) {
  body.colleges-page .college-browser-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 620px) {
  .colleges-glass-main {
    padding-top: 22px;
  }

  body.colleges-page .college-filter-row {
    grid-template-columns: 1fr;
  }

  body.colleges-page .college-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1180px) {
  body.colleges-page .college-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 640px) {
  body.colleges-page .college-grid {
    grid-template-columns: 1fr;
  }

  body.colleges-page .college-card {
    padding: 16px !important;
  }
}

body.colleges-page .college-locked-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

body.colleges-page .college-lock-message {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 46px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(94, 231, 255, 0.18), transparent 34%),
    radial-gradient(circle at 96% 0%, rgba(52, 211, 153, 0.16), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 22px 60px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden;
}

body.colleges-page .college-lock-message h3 {
  max-width: 620px;
  margin: 18px 0 12px;
  color: #ffffff !important;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

body.colleges-page .college-lock-message p {
  max-width: 560px;
  margin: 0;
  color: rgba(229, 237, 246, 0.68) !important;
  font-size: 1rem;
  line-height: 1.65;
}

body.colleges-page .college-lock-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

body.colleges-page .college-lock-highlights span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(7, 12, 26, 0.34);
  color: rgba(238, 248, 255, 0.82) !important;
  font-size: 0.82rem;
  font-weight: 800;
}

body.colleges-page .college-lock-highlights i {
  color: #5ee7ff;
  font-size: 1rem;
}

body.colleges-page .college-lock-message .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 28px;
}

body.colleges-page .college-lock-message .hero-primary,
body.colleges-page .college-lock-message .hero-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px !important;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

body.colleges-page .college-locked-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.colleges-page .college-locked-card {
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

body.colleges-page .college-locked-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(94, 231, 255, 0.14), transparent 34%),
    radial-gradient(circle at 98% 12%, rgba(129, 140, 248, 0.14), transparent 32%);
  pointer-events: none;
}

body.colleges-page .college-locked-card > * {
  position: relative;
  z-index: 1;
}

body.colleges-page .college-locked-icon {
  grid-row: span 3;
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(94, 231, 255, 0.2);
  border-radius: 14px;
  background: rgba(94, 231, 255, 0.1);
  color: #5ee7ff;
  font-size: 1.35rem;
}

body.colleges-page .college-locked-card strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}

body.colleges-page .college-locked-card p {
  margin: 5px 0 0;
  color: rgba(229, 237, 246, 0.62);
  font-size: 0.86rem;
  line-height: 1.45;
}

body.colleges-page .college-locked-card span {
  margin-top: 10px;
  color: rgba(52, 211, 153, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.colleges-page .college-locked-preview[hidden] {
  display: none !important;
}

body.colleges-page .college-locked-preview:not([hidden]) {
  display: block;
}

@media (max-width: 920px) {
  body.colleges-page .college-locked-panel {
    grid-template-columns: 1fr;
  }

  body.colleges-page .college-lock-message {
    min-height: 0;
  }

  body.colleges-page .college-locked-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.colleges-page .college-locked-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body.colleges-page .college-lock-message {
    padding: 22px !important;
  }

  body.colleges-page .college-lock-message h3 {
    font-size: 1.7rem;
  }

  body.colleges-page .college-lock-message .hero-actions,
  body.colleges-page .college-lock-message .hero-primary,
  body.colleges-page .college-lock-message .hero-secondary {
    width: 100%;
  }
}

body.login-page {
  overflow-x: hidden;
  background: #07071a !important;
  color: #ffffff;
}

body.login-page::before,
body.login-page::after {
  display: none !important;
}

body.login-page .site-header {
  background: rgba(7, 7, 26, 0.82) !important;
}

body.login-page,
body.login-page #root {
  width: 100%;
  max-width: none !important;
}

.login-glass-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw !important;
  max-width: none !important;
  min-height: calc(100vh - 72px);
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: clamp(56px, 8vw, 108px) clamp(18px, 5vw, 78px) clamp(70px, 9vw, 118px);
  background:
    linear-gradient(145deg, rgba(16, 185, 129, 0.1), transparent 32%),
    linear-gradient(315deg, rgba(99, 102, 241, 0.18), transparent 48%),
    #07071a;
}

.login-stars {
  z-index: 0;
  opacity: 0.68;
}

.login-glass-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: clamp(34px, 7vw, 96px);
  width: min(1120px, 100%);
  margin: 0 auto;
  align-items: center;
}

.login-intro {
  max-width: 680px;
}

.login-glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.login-glass-badge span {
  color: #34d399;
}

.login-intro h1 {
  max-width: 720px;
  margin: 18px 0 0;
  color: #ffffff !important;
  font-size: clamp(2.45rem, 5vw, 4.35rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: none !important;
}

.login-intro h1 span {
  color: #818cf8;
}

.login-intro > p {
  max-width: 640px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 1rem;
  line-height: 1.75;
}

.login-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
}

.login-benefits article {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  font-weight: 700;
}

.login-benefits i {
  color: #34d399;
  font-size: 1.1rem;
}

body.login-page .login-card {
  width: 100%;
  max-width: 470px;
  padding: clamp(22px, 4vw, 30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 70px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.login-page .login-card:hover {
  transform: none;
}

.login-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}

.login-card-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  font-size: 1.35rem;
}

.login-card-heading span:not(.login-card-icon) {
  display: block;
  color: #818cf8;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-card-heading h2 {
  margin: 5px 0 0;
  color: #ffffff !important;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1.1;
}

body.login-page .auth-form {
  gap: 18px;
}

body.login-page .auth-form label span {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

body.login-page .auth-form input {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24) !important;
  color: #ffffff !important;
  box-shadow: none;
}

body.login-page .auth-form select,
body.login-page .auth-form .smooth-select-button {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.login-page .auth-form input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

body.login-page .auth-form input:focus,
body.login-page .auth-form select:focus,
body.login-page .auth-form .smooth-select-button:focus-visible {
  border-color: rgba(99, 102, 241, 0.58) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16) !important;
}

body.login-page .auth-submit {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(99, 102, 241, 0.64) !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.28) !important;
}

body.login-page .auth-submit:hover,
body.login-page .auth-submit:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #818cf8, #6366f1) !important;
  box-shadow: 0 22px 48px rgba(79, 70, 229, 0.36) !important;
}

body.login-page .auth-help {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.56) !important;
}

body.login-page .auth-help a {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}

.login-card-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.login-card-note i {
  color: #34d399;
  font-size: 1rem;
}

body.signup-page .signup-glass-shell {
  grid-template-columns: minmax(0, 0.92fr) minmax(540px, 1.08fr);
  gap: clamp(34px, 5vw, 74px);
}

body.signup-page .signup-card {
  max-width: 660px;
}

body.admin-page {
  overflow-x: hidden;
  background: #07071a !important;
  color: #ffffff;
}

body.admin-page::before,
body.admin-page::after {
  display: none !important;
}

body.admin-page .site-header {
  background: rgba(7, 7, 26, 0.86) !important;
}

body.admin-page .dashboard-page {
  width: min(1380px, calc(100% - 36px));
  max-width: none;
  margin: 0 auto;
  padding: 44px 0 78px;
}

body.admin-page .dashboard-header {
  align-items: center;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 56px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.admin-page .dashboard-header h2 {
  margin: 12px 0 6px;
  color: #ffffff !important;
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  letter-spacing: 0;
}

body.admin-page .dashboard-header p,
body.admin-page .dashboard-empty,
body.admin-page .form-card p {
  color: rgba(255, 255, 255, 0.56) !important;
}

body.admin-page .section-tag {
  border: 1px solid rgba(129, 140, 248, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(129, 140, 248, 0.12) !important;
  color: #a5b4fc !important;
  letter-spacing: 0.04em;
}

body.admin-page .form-card,
body.admin-page .admin-stats article,
body.admin-page .admin-college-item,
body.admin-page .request-row {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 52px rgba(0, 0, 0, 0.14) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.admin-page .form-card:hover,
body.admin-page .admin-college-item:hover {
  transform: none !important;
  border-color: rgba(129, 140, 248, 0.24) !important;
}

body.admin-page .admin-stats {
  gap: 14px;
  margin-top: 18px;
}

body.admin-page .admin-stats article {
  position: relative;
  min-height: 116px;
  padding: 20px;
  overflow: hidden;
}

body.admin-page .admin-stats article::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.74);
}

body.admin-page .admin-stats span {
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.admin-page .admin-stats strong {
  display: block;
  margin-top: 12px;
  color: #ffffff !important;
  font-size: 2.35rem;
}

body.admin-page .profile-card,
body.admin-page .admin-college-layout,
body.admin-page .admin-table-wrap {
  margin-top: 18px;
}

body.admin-page .form-card {
  padding: 22px !important;
}

body.admin-page .form-card h3,
body.admin-page .profile-card-head h3 {
  color: #ffffff !important;
}

body.admin-page .profile-detail-grid div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

body.admin-page .profile-detail-grid dt {
  color: rgba(255, 255, 255, 0.44);
  letter-spacing: 0.08em;
}

body.admin-page .profile-detail-grid dd {
  color: rgba(255, 255, 255, 0.86);
}

body.admin-page .auth-form {
  gap: 18px;
}

body.admin-page .auth-form label span {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

body.admin-page .auth-form .course-selector-field > span {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.admin-page .auth-form input,
body.admin-page .auth-form select,
body.admin-page .auth-form textarea,
body.admin-page .smooth-select-button,
body.admin-page .course-selector-button,
body.admin-page .admin-table select {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}

body.admin-page .auth-form input,
body.admin-page .auth-form select,
body.admin-page .smooth-select-button,
body.admin-page .course-selector-button {
  min-height: 50px;
  padding: 13px 14px;
}

body.admin-page .course-selector-button {
  padding-right: 42px;
}

body.admin-page .smooth-select {
  z-index: 30;
}

body.admin-page .smooth-select.is-open,
body.admin-page .course-selector.is-open {
  z-index: 80;
}

body.admin-page .smooth-select-list,
body.admin-page .course-selector-list {
  border-color: rgba(94, 231, 255, 0.22);
  border-radius: 12px;
  background: #07111f !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.admin-page .course-selector-option input {
  width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 4px !important;
}

body.admin-page .course-selector-option span {
  color: inherit !important;
  font-size: 0.88rem !important;
  letter-spacing: 0 !important;
}

body.admin-page .auth-form textarea {
  padding: 13px 14px;
}

body.admin-page .auth-form input::placeholder,
body.admin-page .auth-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

body.admin-page .auth-form input:focus,
body.admin-page .auth-form select:focus,
body.admin-page .auth-form textarea:focus,
body.admin-page .smooth-select-button:focus-visible,
body.admin-page .course-selector-button:focus-visible,
body.admin-page .admin-table select:focus {
  border-color: rgba(99, 102, 241, 0.58) !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16) !important;
}

body.admin-page .file-dropzone {
  border: 1px dashed rgba(52, 211, 153, 0.32) !important;
  border-radius: 10px !important;
  background: rgba(52, 211, 153, 0.055) !important;
}

body.admin-page .file-dropzone:hover,
body.admin-page .file-dropzone.is-dragging {
  border-color: rgba(52, 211, 153, 0.62) !important;
  background: rgba(52, 211, 153, 0.1) !important;
}

body.admin-page .file-dropzone strong {
  color: rgba(255, 255, 255, 0.82);
}

body.admin-page .file-dropzone small,
body.admin-page .admin-college-item span,
body.admin-page .admin-college-item small {
  color: rgba(255, 255, 255, 0.48) !important;
}

body.admin-page .hero-primary,
body.admin-page .auth-submit {
  border: 1px solid rgba(99, 102, 241, 0.64) !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(79, 70, 229, 0.25) !important;
}

body.admin-page .hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

body.admin-page .admin-logout-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 17px;
  border-color: rgba(248, 113, 113, 0.22) !important;
  background: rgba(248, 113, 113, 0.08) !important;
  color: #fca5a5 !important;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body.admin-page .admin-logout-button i {
  font-size: 1.05rem;
}

body.admin-page .admin-logout-button:hover,
body.admin-page .admin-logout-button:focus-visible {
  border-color: rgba(248, 113, 113, 0.52) !important;
  background: rgba(248, 113, 113, 0.16) !important;
  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.2) !important;
}

body.admin-page .admin-logout-button:focus-visible {
  outline: 3px solid rgba(248, 113, 113, 0.24);
  outline-offset: 3px;
}

body.admin-page .hero-primary:hover,
body.admin-page .hero-secondary:hover {
  transform: translateY(-2px);
}

body.admin-page .admin-college-item {
  padding: 15px;
}

body.admin-page .admin-college-item strong {
  color: #ffffff !important;
}

body.admin-page .admin-table-wrap {
  overflow-x: auto;
}

body.admin-page .admin-table {
  min-width: 760px;
}

body.admin-page .admin-table th {
  color: #a5b4fc;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

body.admin-page .admin-table th,
body.admin-page .admin-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.admin-page .admin-table td {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 760px) {
  body.admin-page .dashboard-page {
    width: min(100% - 28px, 1380px);
    padding-top: 28px;
  }

  body.admin-page .dashboard-header {
    align-items: stretch;
    padding: 18px;
  }

  body.admin-page .form-card {
    padding: 17px !important;
  }
}

@media (max-width: 820px) {
  .login-glass-shell {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body.login-page .login-card {
    max-width: 560px;
    justify-self: start;
  }

  body.signup-page .signup-glass-shell {
    grid-template-columns: 1fr;
  }

  body.signup-page .signup-card {
    max-width: 660px;
  }
}

@media (max-width: 520px) {
  .login-glass-main {
    padding: 42px 16px 64px;
  }

  .login-intro h1 {
    font-size: 2.45rem;
  }

  .login-intro > p {
    font-size: 0.94rem;
  }

  .login-benefits {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }
}

body:has([data-counseling-form]) {
  overflow-x: hidden;
  background: #07071a !important;
  color: #ffffff;
}

body:has([data-counseling-form])::before,
body:has([data-counseling-form])::after {
  display: none !important;
}

body:has([data-counseling-form]) main {
  position: relative;
  isolation: isolate;
  background: #07071a;
}

body:has([data-counseling-form]) .contact-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0;
}

body:has([data-counseling-form]) .contact-section::before,
body:has([data-counseling-form]) .contact-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

body:has([data-counseling-form]) .contact-section::before {
  top: 18px;
  right: 24px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%);
}

body:has([data-counseling-form]) .contact-section::after {
  bottom: 22px;
  left: 24px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
}

body:has([data-counseling-form]) .contact-section > *,
body:has([data-counseling-form]) .section > * {
  position: relative;
  z-index: 1;
}

body:has([data-counseling-form]) .contact-copy,
body:has([data-counseling-form]) .form-card,
body:has([data-counseling-form]) .contact-mini-grid article,
body:has([data-counseling-form]) .section-heading,
body:has([data-counseling-form]) .service-card {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body:has([data-counseling-form]) .contact-copy,
body:has([data-counseling-form]) .section-heading {
  padding: 30px !important;
}

body:has([data-counseling-form]) h1,
body:has([data-counseling-form]) h2,
body:has([data-counseling-form]) h3,
body:has([data-counseling-form]) .contact-mini-grid strong,
body:has([data-counseling-form]) .service-card h3 {
  color: #ffffff !important;
  text-shadow: none !important;
}

body:has([data-counseling-form]) .contact-copy h2,
body:has([data-counseling-form]) .section-heading h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: 0;
}

body:has([data-counseling-form]) .section-tag {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #34d399 !important;
  letter-spacing: 0.05em;
}

body:has([data-counseling-form]) .contact-copy p,
body:has([data-counseling-form]) .section-heading p,
body:has([data-counseling-form]) .service-card p,
body:has([data-counseling-form]) .contact-mini-grid span {
  color: rgba(255, 255, 255, 0.55) !important;
}

body:has([data-counseling-form]) [data-counseling-form] label span,
body:has([data-counseling-form]) [data-counseling-form] label small {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body:has([data-counseling-form]) [data-counseling-form] input,
body:has([data-counseling-form]) [data-counseling-form] textarea,
body:has([data-counseling-form]) [data-counseling-form] select {
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
}

body:has([data-counseling-form]) [data-counseling-form] input:focus,
body:has([data-counseling-form]) [data-counseling-form] textarea:focus,
body:has([data-counseling-form]) [data-counseling-form] select:focus {
  border-color: rgba(99, 102, 241, 0.5) !important;
  outline: none !important;
  box-shadow: none !important;
}

body:has([data-counseling-form]) [data-counseling-form] input::placeholder,
body:has([data-counseling-form]) [data-counseling-form] textarea::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

body:has([data-counseling-form]) [data-counseling-form] select,
body:has([data-counseling-form]) [data-counseling-form] select option {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #050510 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body:has([data-counseling-form]) .smooth-select-button {
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
}

body:has([data-counseling-form]) .smooth-select-button:focus-visible {
  border-color: rgba(99, 102, 241, 0.5) !important;
  outline: none !important;
}

body:has([data-counseling-form]) .smooth-select-list {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #050510 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body:has([data-counseling-form]) .auth-submit,
body:has([data-counseling-form]) .hero-primary {
  padding: 11px 28px !important;
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

body:has([data-counseling-form]) .hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: none !important;
}

body:has([data-counseling-form]) .auth-help,
body:has([data-counseling-form]) .auth-alert {
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 11px;
}

body:has([data-counseling-form]) .whatsapp-float {
  border-radius: 50px !important;
  background: #25d366 !important;
  color: #ffffff !important;
}

body.counseling-page {
  overflow-x: hidden;
  background: #07071a !important;
  color: #ffffff;
}

body.counseling-page,
body.counseling-page #root {
  width: 100%;
  max-width: none !important;
}

body.counseling-page .site-header {
  background: rgba(7, 7, 26, 0.82) !important;
}

.counseling-glass-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100vh;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 42px clamp(18px, 4vw, 72px) 78px;
  background: #07071a;
}

.counseling-glass-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(78px);
  opacity: 0.8;
  pointer-events: none;
}

.counseling-glass-orb-indigo {
  top: -150px;
  right: -110px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45), transparent 68%);
}

.counseling-glass-orb-green {
  bottom: -120px;
  left: -150px;
  width: 430px;
  height: 430px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.32), transparent 70%);
}

.counseling-glass-orb-pink {
  top: 18%;
  left: 18%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.2), transparent 70%);
}

body.counseling-page .counseling-glass-section,
body.counseling-page .counseling-process-section {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

body.counseling-page .counseling-glass-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 24px;
  align-items: stretch;
  padding: 0 !important;
}

body.counseling-page .counseling-process-section {
  margin-top: 34px;
  padding: 0 !important;
}

body.counseling-page .contact-copy,
body.counseling-page .form-card,
body.counseling-page .contact-mini-grid article,
body.counseling-page .section-heading,
body.counseling-page .service-card {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.counseling-page .contact-copy,
body.counseling-page .form-card,
body.counseling-page .section-heading {
  padding: clamp(24px, 3vw, 34px) !important;
}

body.counseling-page .contact-copy {
  display: grid;
  align-content: center;
}

body.counseling-page .section-tag {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #34d399 !important;
  letter-spacing: 0.05em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.counseling-page .contact-copy h2 {
  max-width: 720px;
  margin-top: 18px;
  color: #ffffff !important;
  font-size: clamp(2.25rem, 4.5vw, 3.65rem) !important;
  font-weight: 900;
  line-height: 1.06 !important;
  letter-spacing: 0;
  text-shadow: none !important;
}

body.counseling-page .section-heading h2 {
  color: #ffffff !important;
  font-size: clamp(1.8rem, 3.4vw, 2.55rem) !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

body.counseling-page .contact-copy h2::first-line,
body.counseling-page .section-heading h2::first-line {
  color: #ffffff;
}

body.counseling-page .contact-copy p,
body.counseling-page .section-heading p,
body.counseling-page .service-card p,
body.counseling-page .contact-mini-grid span,
body.counseling-page .auth-help {
  color: rgba(255, 255, 255, 0.55) !important;
}

body.counseling-page .contact-mini-grid {
  grid-template-columns: 1fr;
}

body.counseling-page .contact-mini-grid article {
  padding: 18px !important;
}

body.counseling-page .contact-mini-grid strong,
body.counseling-page .service-card h3 {
  color: #ffffff !important;
  font-size: 0.95rem;
}

body.counseling-page .auth-form {
  gap: 18px;
}

body.counseling-page .auth-form label span,
body.counseling-page .auth-form label small {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.counseling-page .auth-form input,
body.counseling-page .auth-form textarea,
body.counseling-page .auth-form select,
body.counseling-page .smooth-select-button {
  min-height: 46px;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
}

body.counseling-page .auth-form input:focus,
body.counseling-page .auth-form textarea:focus,
body.counseling-page .auth-form select:focus,
body.counseling-page .smooth-select-button:focus-visible {
  border-color: rgba(99, 102, 241, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.13) !important;
}

body.counseling-page .auth-form input::placeholder,
body.counseling-page .auth-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

body.counseling-page .auth-form select,
body.counseling-page .auth-form select option,
body.counseling-page .smooth-select-list {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: #050510 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body.counseling-page .auth-submit,
body.counseling-page .hero-primary {
  min-height: 50px;
  padding: 11px 28px !important;
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.28) !important;
}

body.counseling-page .hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

body.counseling-page .services-grid {
  gap: 18px;
  margin-top: 22px;
}

body.counseling-page .auth-alert {
  color: rgba(255, 255, 255, 0.65) !important;
}

@media (max-width: 920px) {
  body.counseling-page .counseling-glass-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .counseling-glass-main {
    padding: 34px 14px 62px;
  }

  body.counseling-page .contact-copy,
  body.counseling-page .form-card,
  body.counseling-page .section-heading,
  body.counseling-page .service-card {
    padding: 22px !important;
  }
}

@media (max-width: 920px) {
  body:has([data-counseling-form]) .contact-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body:has([data-counseling-form]) .contact-copy,
  body:has([data-counseling-form]) .section-heading,
  body:has([data-counseling-form]) .form-card,
  body:has([data-counseling-form]) .service-card {
    padding: 22px !important;
  }

  body:has([data-counseling-form]) .contact-copy h2,
  body:has([data-counseling-form]) .section-heading h2 {
    font-size: 2rem;
  }
}

/* Shared admin-inspired action system */
:where(
  .hero-primary,
  .hero-secondary,
  .admission-hero-primary,
  .admission-hero-secondary,
  .about-glass-button,
  .services-scholarship-button,
  .services-free-button,
  .colleges-login-button,
  .footer-action
) {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px !important;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

:where(
  .hero-primary,
  .admission-hero-primary,
  .about-glass-button,
  .services-free-button
) {
  border: 1px solid rgba(99, 102, 241, 0.64) !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(79, 70, 229, 0.25) !important;
}

:where(
  .hero-secondary,
  .admission-hero-secondary,
  .services-scholarship-button,
  .colleges-login-button,
  .footer-action
) {
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

:where(
  .hero-primary,
  .admission-hero-primary,
  .about-glass-button,
  .services-free-button
):hover,
:where(
  .hero-primary,
  .admission-hero-primary,
  .about-glass-button,
  .services-free-button
):focus-visible {
  transform: translateY(-2px);
  border-color: rgba(129, 140, 248, 0.9) !important;
  background: linear-gradient(135deg, #7174f3, #5b52e8) !important;
  box-shadow: 0 18px 38px rgba(79, 70, 229, 0.34) !important;
}

:where(
  .hero-secondary,
  .admission-hero-secondary,
  .services-scholarship-button,
  .colleges-login-button,
  .footer-action
):hover,
:where(
  .hero-secondary,
  .admission-hero-secondary,
  .services-scholarship-button,
  .colleges-login-button,
  .footer-action
):focus-visible {
  transform: translateY(-2px);
  border-color: rgba(129, 140, 248, 0.42) !important;
  background: rgba(129, 140, 248, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24) !important;
}

:where(
  .hero-primary,
  .hero-secondary,
  .admission-hero-primary,
  .admission-hero-secondary,
  .about-glass-button,
  .services-scholarship-button,
  .services-free-button,
  .colleges-login-button,
  .footer-action
):focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.34);
  outline-offset: 3px;
}

:where(
  .hero-primary,
  .hero-secondary,
  .admission-hero-primary,
  .admission-hero-secondary,
  .about-glass-button,
  .services-scholarship-button,
  .services-free-button,
  .colleges-login-button,
  .footer-action
):active {
  transform: translateY(0);
}

:where(button.hero-primary, button.hero-secondary, .auth-submit):disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none !important;
  box-shadow: none !important;
}

.footer-action[href="#/counseling"] {
  min-height: 44px;
  padding: 11px 17px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
  animation: none !important;
}

.footer-action[href="#/counseling"]::before,
.footer-action[href="#/counseling"]::after {
  content: none !important;
  display: none !important;
}

.colleges-login-button {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

.nav-links a[href="#/counseling"],
.nav-links a[href="#/counseling"].nav-link-active {
  border: 1px solid rgba(99, 102, 241, 0.64) !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.22) !important;
}

.nav-links a[data-account-nav],
.nav-links a[data-account-nav].nav-link-active {
  display: inline-flex !important;
  min-width: 126px !important;
  padding: 11px 18px !important;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(94, 231, 255, 0.22) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(12, 24, 49, 0.82), rgba(5, 10, 23, 0.64)) !important;
  color: rgba(234, 246, 255, 0.9) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.nav-links a[data-account-nav] i {
  color: #5ee7ff;
  font-size: 1.06rem;
}

.nav-links a[data-account-nav]:hover,
.nav-links a[data-account-nav]:focus-visible,
.nav-links a[data-account-nav].nav-link-active {
  border-color: rgba(94, 231, 255, 0.5) !important;
  background:
    linear-gradient(135deg, rgba(24, 200, 255, 0.2), rgba(37, 99, 235, 0.16)),
    linear-gradient(135deg, rgba(12, 24, 49, 0.88), rgba(5, 10, 23, 0.7)) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 30px rgba(37, 99, 235, 0.22),
    0 0 22px rgba(94, 231, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 560px) {
  .admission-hero-actions,
  .college-card-actions,
  .college-overview-actions {
    gap: 10px;
  }

  .admission-hero-actions > *,
  .college-card-actions > *,
  .college-overview-actions > * {
    width: 100%;
  }
}

/* Student dashboard finish */
body.student-dashboard-page {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(24, 200, 255, 0.2), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(116, 71, 255, 0.22), transparent 28%),
    radial-gradient(circle at 58% 90%, rgba(244, 184, 74, 0.13), transparent 34%),
    linear-gradient(135deg, #030711 0%, #071225 48%, #0b1020 100%) !important;
}

body.student-dashboard-page::before,
body.student-dashboard-page::after {
  display: none !important;
}

.account-glass-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0 0 72px;
}

.account-glass-main .dashboard-page {
  position: relative;
  z-index: 1;
}

.account-stars {
  position: absolute;
  z-index: 0;
}

.account-glass-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(78px);
  opacity: 0.78;
  pointer-events: none;
}

.account-glass-orb-indigo {
  top: -150px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.42), transparent 68%);
}

.account-glass-orb-cyan {
  right: -150px;
  bottom: -120px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(24, 200, 255, 0.25), transparent 70%);
}

.account-glass-orb-gold {
  top: 24%;
  right: 12%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.14), transparent 70%);
}

body.student-dashboard-page .dashboard-page {
  width: min(1180px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 44px clamp(14px, 3vw, 28px) 78px;
}

body.student-dashboard-page .dashboard-header,
body.student-dashboard-page .form-card {
  border: 1px solid rgba(148, 213, 255, 0.2) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(12, 24, 49, 0.82), rgba(5, 10, 23, 0.62)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

body.student-dashboard-page .dashboard-header {
  align-items: center;
  padding: 24px 26px;
}

body.student-dashboard-page .dashboard-header h2 {
  margin: 12px 0 6px;
  color: #f4fbff !important;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

body.student-dashboard-page .dashboard-header p,
body.student-dashboard-page .form-card p,
body.student-dashboard-page .dashboard-empty {
  color: rgba(223, 240, 255, 0.72) !important;
}

body.student-dashboard-page .profile-card {
  margin-top: 0;
  padding: 24px !important;
}

body.student-dashboard-page .profile-card-head h3 {
  color: #f4fbff !important;
}

body.student-dashboard-page .profile-detail-grid div {
  border: 1px solid rgba(148, 213, 255, 0.14) !important;
  border-radius: 16px !important;
  background: rgba(3, 9, 21, 0.32) !important;
}

body.student-dashboard-page .profile-detail-grid dt {
  color: rgba(148, 213, 255, 0.84) !important;
}

body.student-dashboard-page .profile-detail-grid dd {
  color: rgba(244, 251, 255, 0.92) !important;
}

body.student-dashboard-page .dashboard-grid {
  align-items: stretch;
  gap: 22px;
}

body.student-dashboard-page .dashboard-grid > .form-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: 26px !important;
}

body.student-dashboard-page .dashboard-grid h3 {
  margin: 0 0 10px;
  color: #f4fbff !important;
  font-size: 1.3rem;
}

body.student-dashboard-page .dashboard-grid p {
  max-width: 520px;
  margin: 0;
  line-height: 1.7;
}

body.student-dashboard-page .dashboard-counseling-button {
  align-self: flex-start;
  width: fit-content;
  min-height: 52px;
  margin-top: 28px;
  padding: 14px 22px !important;
  border: 1px solid rgba(94, 231, 255, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(24, 200, 255, 0.96), rgba(37, 99, 235, 0.92) 54%, rgba(116, 71, 255, 0.94)) !important;
  box-shadow:
    0 16px 34px rgba(37, 99, 235, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.student-dashboard-page .dashboard-counseling-button i {
  font-size: 1.05rem;
  transition: transform 0.2s ease;
}

body.student-dashboard-page .dashboard-counseling-button:hover,
body.student-dashboard-page .dashboard-counseling-button:focus-visible {
  border-color: rgba(94, 231, 255, 0.7) !important;
  background:
    linear-gradient(135deg, #25cffb, #3477ee 54%, #8056ff) !important;
  box-shadow:
    0 20px 42px rgba(37, 99, 235, 0.34),
    0 0 24px rgba(94, 231, 255, 0.16) !important;
}

body.student-dashboard-page .dashboard-counseling-button:hover i,
body.student-dashboard-page .dashboard-counseling-button:focus-visible i {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .nav-links a[data-account-nav],
  .nav-links a[data-account-nav].nav-link-active {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.student-dashboard-page .dashboard-page {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 28px;
  }

  .account-glass-main {
    padding-inline: 0;
  }

  body.student-dashboard-page .dashboard-header,
  body.student-dashboard-page .profile-card,
  body.student-dashboard-page .dashboard-grid > .form-card {
    padding: 20px !important;
  }

  body.student-dashboard-page .dashboard-grid > .form-card {
    min-height: 0;
  }

  body.student-dashboard-page .dashboard-counseling-button {
    width: 100%;
  }
}

/* Final brand wordmark polish. */
.brand {
  gap: 12px !important;
}

.brand-logo {
  width: 56px !important;
  height: 56px !important;
}

.brand-text {
  gap: 4px !important;
}

.brand-title {
  color: #ffffff !important;
  font-family: "Cinzel", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.42rem, 2vw, 1.74rem) !important;
  font-weight: 600 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.brand-subtitle {
  position: relative;
  width: max-content;
  color: #ffffff !important;
  font-size: clamp(0.62rem, 0.9vw, 0.76rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.brand-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  opacity: 0.95;
}

@media (max-width: 760px) {
  .brand-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .brand-title {
    font-size: 1.28rem !important;
    letter-spacing: 0.07em !important;
  }

  .brand-subtitle {
    font-size: 0.58rem !important;
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 420px) {
  .brand-logo {
    width: 46px !important;
    height: 46px !important;
  }

  .brand-title {
    font-size: 1.08rem !important;
    letter-spacing: 0.06em !important;
  }

  .brand-subtitle {
    font-size: 0.52rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* Keep the navbar completely outside route transitions. */
.site-header,
.navbar,
.brand,
.brand-logo,
.brand-text,
.brand-title,
.brand-subtitle,
.hamburger,
.hamburger span,
.nav-links {
  animation: none !important;
}

.site-header {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.navbar {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

body.page-route-leave .site-header,
body.page-route-enter .site-header,
body.page-route-leave .site-header *,
body.page-route-enter .site-header * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}