html, body {
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
}

body.theme-dark {
  background-color: #0f0f1a;
}

/* ─── PRELOADER ─────────────────────────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  background: #0f0c29;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ─── PARTICLES ─────────────────────────────────────────────────────────────── */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: particleDrift linear infinite;
}

.particle:nth-child(1)  { left: 10%; animation-duration: 12s; animation-delay: 0s;    width: 2px; height: 2px; }
.particle:nth-child(2)  { left: 20%; animation-duration: 15s; animation-delay: 1s;    width: 4px; height: 4px; background: rgba(167, 139, 250, 0.8); }
.particle:nth-child(3)  { left: 35%; animation-duration: 10s; animation-delay: 2s; }
.particle:nth-child(4)  { left: 50%; animation-duration: 14s; animation-delay: 0.5s;  width: 5px; height: 5px; background: rgba(99, 179, 237, 0.7); }
.particle:nth-child(5)  { left: 65%; animation-duration: 11s; animation-delay: 3s;    width: 2px; height: 2px; }
.particle:nth-child(6)  { left: 75%; animation-duration: 16s; animation-delay: 1.5s;  background: rgba(252, 211, 77, 0.7); }
.particle:nth-child(7)  { left: 85%; animation-duration: 13s; animation-delay: 4s;    width: 4px; height: 4px; }
.particle:nth-child(8)  { left: 90%; animation-duration: 9s;  animation-delay: 2.5s;  background: rgba(167, 139, 250, 0.6); }
.particle:nth-child(9)  { left: 5%;  animation-duration: 17s; animation-delay: 0.8s;  width: 3px; height: 3px; }
.particle:nth-child(10) { left: 55%; animation-duration: 12s; animation-delay: 3.5s;  background: rgba(99, 179, 237, 0.8); }

@keyframes particleDrift {
  0%   { transform: translateY(110vh) scale(0);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* ─── LOGO / ICON ───────────────────────────────────────────────────────────── */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 1;
}

.logo-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.ring-outer {
  border-top-color: #a78bfa;
  border-right-color: #a78bfa;
  animation: spinRing 1.6s linear infinite;
}

.ring-middle {
  inset: 12px;
  border-top-color: #63b3ed;
  border-left-color: #63b3ed;
  animation: spinRing 1.2s linear infinite reverse;
}

.ring-inner {
  inset: 24px;
  border-top-color: #fcd34d;
  animation: spinRing 0.8s linear infinite;
}

.logo-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%       { transform: scale(1.1); filter: brightness(1.3); }
}

/* ─── BRAND NAME ────────────────────────────────────────────────────────────── */
.brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.brand-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #a78bfa, #63b3ed, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
  background-size: 200%;
}

.brand-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── PROGRESS ──────────────────────────────────────────────────────────────── */
.progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 220px;
}

.progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #a78bfa, #63b3ed);
  animation: fillProgress 2.8s cubic-bezier(.4,0,.2,1) forwards;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 100%;
  background: rgba(255,255,255,0.5);
  border-radius: 99px;
  filter: blur(4px);
}

.progress-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.15em;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes fillProgress {
  0%   { width: 0%; }
  30%  { width: 40%; }
  60%  { width: 70%; }
  85%  { width: 88%; }
  100% { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.7; }
}

/* ─── DOTS ──────────────────────────────────────────────────────────────────── */
.dots {
  display: flex;
  gap: 0.4rem;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: dotBounce 1.2s ease-in-out infinite;
}

.dot:nth-child(1) { animation-delay: 0s;    background: #a78bfa; }
.dot:nth-child(2) { animation-delay: 0.15s; background: #63b3ed; }
.dot:nth-child(3) { animation-delay: 0.3s;  background: #fcd34d; }

@keyframes dotBounce {
  0%, 100% { transform: translateY(0);    opacity: 0.5; }
  50%       { transform: translateY(-6px); opacity: 1; }
}

/* ─── HEADER PLACEHOLDER ────────────────────────────────────────────────────── */
@media (max-width: 1199px) { .header { display: none; } }

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
}

.header-container {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding: 1.28rem 1.6rem;
  background-color: #fff;
  box-shadow: 0px 6px 12px -3px rgba(4, 97, 165, 0.1);
  border-radius: 0 0 0.625rem 0.625rem;
}

.theme-dark .header-container { background-color: #111; }
.header .logo { max-height: 30px; }

.placeholder {
  block-size: 0.825rem;
  inline-size: 3rem;
  background-color: #F5F5F5;
  border-radius: 0.3rem;
}
.theme-dark .placeholder { background-color: #111; }
.placeholder-wide { inline-size: 12rem; }

.d-flex              { display: flex; }
.align-items-center  { align-items: center; }
.justify-content-center   { justify-content: center; }
.justify-content-between  { justify-content: space-between; }
.flex-column         { flex-direction: column; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

/* ─── HEADER BOOK ANIMATION ─────────────────────────────────────────────────── */
.book { position: relative; width: 24px; height: 32px; }
.page {
  position: absolute;
  width: 100%; height: 100%;
  background: #e2e8f0;
  border-radius: 2px;
  animation: pageFlip 1.5s ease-in-out infinite;
}
.page:nth-child(2) { animation-delay: 0.2s; background: #cbd5e0; }
.page:nth-child(3) { animation-delay: 0.4s; background: #a0aec0; }

@keyframes pageFlip {
  0%, 100% { transform: rotateY(0deg); }
  50%       { transform: rotateY(20deg); }
}