html { scroll-behavior: smooth; }
body { background: #06080c; }

.grid-bg {
  background-image:
    linear-gradient(to right, rgba(77,124,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77,124,255,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.glow-cyan {
  box-shadow: 0 0 0 1px rgba(62,240,255,0.18), 0 0 40px -8px rgba(62,240,255,0.35);
}

.text-glow {
  text-shadow: 0 0 24px rgba(62,240,255,0.35);
}

::selection {
  background: rgba(62,240,255,0.3);
  color: #fff;
}

input:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #141b29 inset;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #06080c; }
::-webkit-scrollbar-thumb { background: #2c374b; border-radius: 999px; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ accordion */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.faq-body.is-open {
  grid-template-rows: 1fr;
}
.faq-body-inner {
  overflow: hidden;
}

/* Grade button active state */
.grade-btn.is-active {
  border-color: #3ef0ff;
  background-color: rgba(62,240,255,0.15);
  color: #3ef0ff;
}

/* Input error state */
.input-error {
  border-color: rgba(239,68,68,0.6) !important;
}

/* Success animation */
@keyframes pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.animate-pop { animation: pop 0.5s cubic-bezier(0.16,1,0.3,1) both; }