:root{
  --brand-yellow: #2563eb;
  --brand-green: #94a3b8;

  --brand-primary: var(--brand-yellow);
  --brand-secondary: var(--brand-green);

  --white: #ffffff;
  --ink: #0f172a;

  --overlayTop: rgba(0,0,0,0.68);
  --overlayBot: rgba(0,0,0,0.40);

  --shadow: 0 18px 50px rgba(0,0,0,0.35);
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

.login-btn{
  margin-left:12px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  background: var(--brand-yellow);
  color:#ffffff;
  box-shadow:0 16px 34px rgba(0,0,0,0.25);
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 160ms ease;
}

.login-btn:hover{
  background: var(--brand-green);
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(0,0,0,0.35);
}

.login-btn:active{
  transform:translateY(1px);
}
body{
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--white);
  background: #000;
}

/* HERO */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 20% 25%,
      color-mix(in srgb, var(--brand-yellow) 35%, transparent),
      transparent 60%
    ),
    radial-gradient(
      circle at 80% 75%,
      color-mix(in srgb, var(--brand-green) 35%, transparent),
      transparent 60%
    ),
    linear-gradient(0deg, rgba(0,0,0,0.20), rgba(0,0,0,0.20)),
    url("assets/bg.png") center/cover no-repeat;
  z-index:0;
}

.hero__bg::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(
      circle at 30% 40%,
      color-mix(in srgb, var(--brand-yellow) 30%, transparent),
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 60%,
      color-mix(in srgb, var(--brand-green) 30%, transparent),
      transparent 60%
    );
  filter: blur(80px);
  opacity:0.65;
  animation: bgGlowMove 18s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes bgGlowMove{
  0%{
    transform: translate(-2%, -2%) scale(1);
  }
  50%{
    transform: translate(2%, 3%) scale(1.05);
  }
  100%{
    transform: translate(-1%, 2%) scale(1.02);
  }
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--overlayTop), var(--overlayBot));
}

/* Decorative layers */
.decor{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.decor--grid{
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  mask-image: radial-gradient(circle at 40% 35%, black 0%, transparent 65%);
}

.decor--blob{
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(28px);
  opacity: 0.34;
  inset: auto;
  animation: float 9s ease-in-out infinite;
}

.decor--blob1{
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand-yellow) 62%, transparent), transparent 60%);
  left: -160px;
  top: 140px;
}

.decor--blob2{
  background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.26), transparent 60%);
  right: -170px;
  bottom: -190px;
  animation-duration: 12s;
}

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-18px) scale(1.03); }
}

/* FIXED HEADER (always present) */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 18px 42px;

  background: transparent;
  border-bottom: 1px solid transparent;

  transition: background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
}

/* Glass ONLY when scrolled */
.topbar.is-scrolled{
  background: rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

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



.brand__logo{
  width: 55px;
  height: 55px;
  object-fit: contain;
  flex: 0 0 55px;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.brand__logo.is-loaded{
  opacity: 1;
}


.brand__text{ display: none; }

@media (min-width: 720px){
  .brand__text{ display: block; }
  .brand__name{ font-weight: 800; line-height: 1.15; }
  .brand__sub{ font-size: 12px; opacity: 0.85; }
}

.brand--highlight{
  color: var(--brand-yellow);
}

/* ===== NAV LINKS ===== */
.nav__link{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 700;
  margin-left: 24px;
  position: relative;

  transition: color 180ms ease;
}

/* Hover color */
.nav__link:hover{
  color: var(--brand-yellow);
}

/* Underline animation base */
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:3px;
  border-radius:999px;
  background: var(--brand-yellow);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

/* Show underline on hover */
.nav__link:hover::after{
  transform: scaleX(1);
}

/* Keep underline when active */
.nav__link.is-active::after{
  transform: scaleX(1);
}

/* CONTENT */
.hero__content{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;

  padding: 120px 16px 60px; /* space for fixed header */
  min-height: 100vh;
}

.hero__center{
  width: min(900px, 92vw);
  text-align: center;
}

.hero__title{
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.08;

  margin: 6px 0 46px;  /* increased bottom spacing */
}

.accent{ color: var(--brand-yellow); }

/* SEARCH */
.search{
  width: min(740px, 100%);
  margin: 0 auto;
}

.search__bar{
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;

  background: rgba(255,255,255,0.97);
  border-radius: 999px;
  padding: 10px 12px;

  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
  border: 1px solid rgba(0,0,0,0.05);

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

/* Subtle lift on hover */
.search__bar:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.28);
  border-color: rgba(0,0,0,0.08);
}

/* Glow + stronger lift on focus */
.search__bar:focus-within{
  transform: translateY(-4px);
  box-shadow:
    0 26px 55px rgba(0,0,0,0.32),
    0 0 0 3px rgba(37,99,235,0.22);
}

.search__icon{
  display: grid;
  place-items: center;
}

.search__icon img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform 200ms ease;
}

.search__bar:hover .search__icon img{
  transform: scale(1.08);
}

.search__bar input{
  border: none;
  outline: none;
  font-size: 16px;
  padding: 12px 10px;
  background: transparent;
  color: #111;
  transition: transform 200ms ease;
}

.search__bar:hover input{
  transform: translateX(2px);
}

#searchBtn{
  background: var(--brand-green);
  color: #ffffff;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

#searchBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,86,0,0.35);
}

#searchBtn:active{
  transform: translateY(1px);
}

/* RESULTS */
.results{
  margin-top: 16px;
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.result-card{
  display: grid;
  gap: 4px;
  background: rgba(255,255,255,0.96);
  color: #111;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.result-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.result-title{
  font-weight: 800;
  line-height: 1.15;
}

.result-meta{
  font-size: 13px;
  opacity: 0.78;
}

/* RESPONSIVE */
@media (max-width: 720px){
  .topbar{ padding: 14px 16px; }
}

@media (max-width: 520px){
  .brand__logo{ height: 40px; }
  .nav__link{ margin-left: 14px; }
}

.brand__school{
  color: var(--brand-yellow);
  font-weight: 800;
}

.brand__subtitle{
  color: var(--brand-green);
  font-weight: 500;
}

/* FOOTER: darker + lowkey */
.site-footer{
  position: relative;
  z-index: 2;
  margin-top: 0;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  border-top: 1px solid rgba(255,255,255,0.10);
}

.site-footer__inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 28px 20px 24px;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 36px;
  align-items: start;
}

.site-footer__col{
  min-width: 0;
}

.site-footer__col--right{
  justify-self: end;
  width: min(360px, 100%);
}

.site-footer__title{
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.site-footer__text{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

.site-footer__fineprint{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}

.site-footer__row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer__social{
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  font-weight: 600;
  transition: color 180ms ease, opacity 180ms ease;
}

.site-footer__social:hover{
  color: var(--brand-green);
}

.site-footer__dot{
  color: rgba(255,255,255,0.40);
}

@media (max-width: 820px){
  .site-footer__inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .site-footer__col--right{
    justify-self: start;
    width: 100%;
  }
}

/* Footer contact items layout */
.site-footer__item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.site-footer__icon{
  flex-shrink: 0;
  margin-top: 2px;
  color: #bababa;
}

.site-footer__label{
  font-size: 13px;
  font-weight: 700;
  color: #bababa;
  margin-bottom: 2px;
}

/* ===== Search loading bar (thin, yellow -> green) ===== */
.search-loader{
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.25);
  margin-top: 10px;
}

.search-loader__bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-green));
  animation: searchFill 0.9s ease-in-out infinite;
}

/* ===== Search Progress Bar (Green Track + Yellow Fill) ===== */
.search-progress{
  height: 4px;
  width: 100%;
  background: var(--brand-green);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}

.search-progress__bar{
  height: 100%;
  width: 0%;
  background: var(--brand-yellow);
  border-radius: 999px;
  transition: width 200ms ease;
}
/* ===== Result cards w/ cover ===== */
.result-card{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;

  background: rgba(255,255,255,0.96);
  color: #111;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.05);

  transition: transform 120ms ease, box-shadow 120ms ease;
}


.result-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.result-cover{
  width: 52px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15,23,42,0.08);
  border: 1px solid rgba(15,23,42,0.10);
}

.result-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-title{
  font-weight: 800;
  line-height: 1.15;
}

.result-meta{
  font-size: 13px;
  opacity: 0.78;
}

/* ===== Empty State (Text Only) ===== */
.result-empty{
  background: rgba(255,255,255,0.96);
  color: #111;
  padding: 16px 18px;
  border-radius: 12px;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,0.05);

  animation: fadeIn 220ms ease;
}

.result-empty-title{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}

.result-empty-sub{
  font-size: 13px;
  opacity: 0.7;
}

@keyframes fadeIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes fadeIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}



@keyframes fadeIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* hover color change */
.login-btn:hover{
  background: var(--brand-green);
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(0,0,0,0.35);
}

.login-btn:active{
  transform:translateY(1px);
}

/* Shared page background for non-landing pages */
.page-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 20% 25%,
      color-mix(in srgb, var(--brand-yellow) 35%, transparent),
      transparent 60%
    ),
    radial-gradient(
      circle at 80% 75%,
      color-mix(in srgb, var(--brand-green) 35%, transparent),
      transparent 60%
    ),
    linear-gradient(0deg, rgba(0,0,0,0.20), rgba(0,0,0,0.20)),
    url("assets/bg.png") center/cover no-repeat;
  z-index:0;
}

.page-bg::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(
      circle at 30% 40%,
      color-mix(in srgb, var(--brand-yellow) 30%, transparent),
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 60%,
      color-mix(in srgb, var(--brand-green) 30%, transparent),
      transparent 60%
    );
  filter: blur(80px);
  opacity:0.65;
  animation: bgGlowMove 18s ease-in-out infinite alternate;
  pointer-events:none;
}

.page-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(var(--overlayTop), var(--overlayBot));
  z-index:1;
}



/* Hide text-based branding until branding.js finishes */
html.branding-loading .brand__text,
html.branding-loading #heroSystemTitle,
html.branding-loading #footerBrandTitle,
html.branding-loading #footerBrandDescription,
html.branding-loading #footerBrandAddress,
html.branding-loading #footerBrandPhone,
html.branding-loading #footerBrandEmail,
html.branding-loading #footerBrandWebsite,
html.branding-loading #footerBrandFacebook,
html.branding-loading #footerBrandCopyright {
  opacity: 0;
}

html.branding-ready .brand__text,
html.branding-ready #heroSystemTitle,
html.branding-ready #footerBrandTitle,
html.branding-ready #footerBrandDescription,
html.branding-ready #footerBrandAddress,
html.branding-ready #footerBrandPhone,
html.branding-ready #footerBrandEmail,
html.branding-ready #footerBrandWebsite,
html.branding-ready #footerBrandFacebook,
html.branding-ready #footerBrandCopyright {
  opacity: 1;
}

.brand__text,
#heroSystemTitle,
#footerBrandTitle,
#footerBrandDescription,
#footerBrandAddress,
#footerBrandPhone,
#footerBrandEmail,
#footerBrandWebsite,
#footerBrandFacebook,
#footerBrandCopyright {
  transition: opacity 0.18s ease;
}