/* ========== Tokens ========== */
:root {
  --gold: #C9A96E;
  --gold-light: #D4B97E;
  --gold-dark: #B89958;
  --gold-glow: rgba(201,169,110,0.2);
  --gold-soft: rgba(201,169,110,0.12);
  --ink: #111111;
  --ink-50: #1A1A1A;
  --ink-light: #F5F5F0;
}

html { scroll-behavior: smooth; }
body { background: var(--ink); }

::selection { background: var(--gold); color: var(--ink); }

/* ========== Glow ========== */
.shadow-gold-glow {
  box-shadow: 0 0 25px var(--gold-glow), 0 0 50px rgba(201,169,110,0.1);
}

/* ========== Pulsing dot ========== */
.pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--gold);
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ========== Area cards (light section) ========== */
.area-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}
.area-card:hover {
  box-shadow: 0 8px 24px rgba(201,169,110,0.08), 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* ========== Form elements ========== */
.opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #E8E8E8;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}
.opt:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateX(4px);
}

.inp {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.inp:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(201,169,110,0.06);
}
.inp::placeholder { color: rgba(255,255,255,0.3); }

/* Select styling */
select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
select.inp option {
  background: var(--ink-50);
  color: #E8E8E8;
}

/* ========== Hide scrollbar ========== */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ========== Reduce motion respect ========== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}