html, body {
  scroll-behavior: smooth;
  background-color: #090b0c;
  color: #e9e8e3;
  overflow-x: hidden;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

::selection {
  background: #c8f56a;
  color: #090b0c;
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #c8f56a;
  box-shadow: 0 0 12px rgba(200, 245, 106, 0.6);
  z-index: 10000;
  pointer-events: none;
  transition: width 0.1s ease;
}

header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: 0.3s ease;
}

header.scrolled {
  background-color: rgba(9, 11, 12, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 245, 106, 0.2);
}

.outline-text {
  -webkit-text-stroke: 1px rgba(233, 232, 227, 0.5);
  color: transparent;
  transition: 0.3s ease;
}

.outline-text:hover {
  -webkit-text-stroke-color: #c8f56a;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #c8f56a;
  box-shadow: 0 0 10px #c8f56a;
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

@media (pointer: fine) {
  *, a, button, input, textarea {
    cursor: none !important;
  }

  #cursor-dot, #cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--cursor-x, -100px), var(--cursor-y, -100px));
    transition: opacity 0.2s, width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
  }

  #cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #c8f56a;
    box-shadow: 0 0 10px #c8f56a;
  }

  #cursor-ring {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(200, 245, 106, 0.5);
  }

  #cursor-dot.is-visible,
  #cursor-ring.is-visible {
    opacity: 1;
  }

  #cursor-dot.is-hovering {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 12px #c8f56a;
  }

  #cursor-ring.is-hovering {
    width: 48px;
    height: 48px;
    border-color: #c8f56a;
    background-color: rgba(200, 245, 106, 0.1);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

.interactive-card {
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}

.interactive-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(350px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(200, 245, 106, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.interactive-card:hover::before { opacity: 1; }
.interactive-card:hover { border-color: rgba(200, 245, 106, 0.4); }

.form-feedback {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease;
}

.form-feedback.show {
  opacity: 1;
  max-height: 100px;
  margin-top: 1rem;
}