html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body { overscroll-behavior: none; }
body[class], main[class], footer[class] { background-color: #01030f; }
main section[class] { background-color: transparent; }
header[class] { background-color: rgba(1, 3, 15, 0.95); }
.text-on-surface { color: #fff; }
section[id] { scroll-margin-top: 92px; }
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 16px; background: var(--surface-container); color: var(--on-surface); }
.skip-link:focus { top: 12px; }
nav a[aria-current="location"] { color: var(--on-surface); font-weight: 600; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; background: var(--surface); color: var(--on-surface); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; z-index: 100; width: 100%; padding: 16px; background: var(--surface-container-high); color: var(--on-surface); }
#blazor-error-ui .dismiss { float: right; }
@media (max-width: 639px) {
    #hero h1 { font-size: 38px; line-height: 44px; }
    h2.font-headline-section { font-size: 28px; line-height: 34px; }
    #hero .aspect-\\[4\\/3\\] { min-height: 320px; }
    #hero .aspect-\\[4\\/3\\] > :first-child { flex-wrap: wrap; gap: 8px; }
}

/* === Pricing Card Hover Neon Border === */
.pricing-card {
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  position: relative;
}

.pricing-card-featured {
  border-color: rgba(60, 170, 255, 0.8);
  box-shadow: 0 0 8px rgba(60, 170, 255, 0.6), 0 0 30px rgba(30, 140, 255, 0.3), inset 0 0 18px rgba(30, 140, 255, 0.1);
}

.pricing-card:hover, .pricing-card:focus-within {
  border-color: #3caaff;
  box-shadow: 0 0 8px rgba(60, 170, 255, 0.9), 0 0 28px rgba(30, 140, 255, 0.5), inset 0 0 16px rgba(30, 140, 255, 0.12);
}

/* === Feature Cards Neon Line Animation === */
.feature-selector { position: relative; }
.tab-button { position: relative; }
.feature-neon-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: #3caaff;
  box-shadow: 0 0 8px #3caaff, 0 0 20px rgba(30, 140, 255, 0.8);
  pointer-events: none;
}

.header-logo { width: 68px; height: 40px; object-fit: contain; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px; }
.hero-copy { min-width: 0; text-align: center; }
.hero-highlights { margin-inline: auto; text-align: center; }
.hero-carousel { min-width: 0; overflow: hidden; border: 1px solid rgba(60,170,255,0.25); border-radius: 16px; background: #01030f; box-shadow: 0 0 28px rgba(30,140,255,0.12); }
.hero-carousel-images { position: relative; aspect-ratio: 4 / 3; }
.hero-carousel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 600ms ease; }
.hero-carousel-image.is-active { opacity: 1; }
.hero-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; font-size: 12px; color: #fff; }
.hero-carousel-controls button { padding: 0 12px; font-size: 28px; }
.hero-carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 0 0 16px; }
.hero-carousel-dots button { width: 8px; height: 8px; border-radius: 50%; background: #424753; }
.hero-carousel-dots button.is-active { background: #3caaff; }
@media (min-width: 1024px) {
    .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; }
    .hero-copy { text-align: left; }
    .hero-copy h1 { font-size: clamp(38px, 3.8vw, 52px); }
    .hero-copy > .flex { justify-content: flex-start; }
}

.timeline-guide, .timeline-progress { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; pointer-events: none; }
.timeline-guide { height: 100%; background: rgba(60,170,255,0.2); }
.timeline-progress { height: 0; background: #3caaff; box-shadow: 0 0 12px #3caaff; }
.timeline-cursor { position: absolute; left: calc(50% - 5px); top: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px #3caaff; pointer-events: none; }
.timeline-pin { position: absolute; left: calc(50% - 20px); top: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: var(--surface-container-high); color: #fff; font-family: var(--font-mono-code); font-weight: 700; z-index: 2; border: 1px solid rgba(60,170,255,0.4); }
.timeline-track.is-interactive .timeline-card { opacity: 0; visibility: hidden; translate: 0 40px; transition: opacity 550ms ease, translate 800ms cubic-bezier(0.16,1,0.3,1), visibility 0s; }
.timeline-track.is-interactive .is-revealed .timeline-card { opacity: 1; visibility: visible; translate: 0 0; }
.timeline-node.is-revealed .timeline-pin { background: #3caaff; box-shadow: 0 0 18px rgba(60,170,255,0.65); animation: timeline-hop 600ms cubic-bezier(0.2,0.8,0.3,1); }
@keyframes timeline-hop { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14px) scale(1.12); } 70% { transform: translateY(3px) scale(0.98); } }
@media (max-width: 767px) {
    .timeline-guide, .timeline-progress { left: 19px; }
    .timeline-cursor { left: 15px; }
    .timeline-pin { left: 0; }
    .timeline-node > div:has(.timeline-card) { padding-left: 56px; }
}