html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #1A1730; background:#ffffff; }
.font-serif { font-family: 'Fraunces', serif; }

::selection { background: #A56EFF; color: #fff; }

/* Sticky nav states */
#navbar { transition: box-shadow .35s ease, background-color .35s ease, border-color .35s ease; }
#navbar.scrolled { box-shadow: 0 8px 24px -12px rgba(26,23,48,.10); background-color: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-color:#EAE6FA; }

/* Card hover lift */
.lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 20px 45px -18px rgba(91,61,245,.28); }

.btn-pill { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.btn-pill:hover { transform: translateY(-3px); }

/* Floating illustration bits */
@keyframes floaty { 0%,100% { transform: translateY(0px);} 50% { transform: translateY(-10px);} }
@keyframes floatySlow { 0%,100% { transform: translateY(0px);} 50% { transform: translateY(-6px);} }
.float-a { animation: floaty 5s ease-in-out infinite; }
.float-b { animation: floatySlow 6.5s ease-in-out infinite; animation-delay: .6s; }
.float-c { animation: floaty 4.2s ease-in-out infinite; animation-delay: 1.1s; }

/* FAQ accordion */
.faq-content { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; }
.faq-item.open .faq-content { max-height: 320px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .35s ease; }

/* Mobile menu */
#mobileMenu { 
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease; 
}

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .float-c { animation: none; }
  html { scroll-behavior: auto; }
}

.bg-dot-grid {
  background-image: radial-gradient(#5B3DF5 1px, transparent 1px);
  background-size: 22px 22px;
}

.num-line::after {
  content:'';
  position:absolute;
  top: 22px; left: 50%;
  width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg,#D9CFFB 0 8px, transparent 8px 14px);
  z-index: 0;
}
@media (max-width: 1023px){ .num-line::after{ display:none; } }