:root {
  --bg-base: #f4f4f6;
  --text-color: #111111;
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(0, 0, 0, 0.08);
  --meta-color: rgba(0, 0, 0, 0.65);
  --cta-bg: #111111;
  --cta-color: #ffffff;
  --logo-light-display: block;
  --logo-dark-display: none;

  --grid-line-color: rgba(0, 0, 0, 0.07);
  --mesh-c1: rgba(99, 102, 241, 0.55);
  --mesh-c2: rgba(14, 165, 233, 0.45);
  --mesh-c3: rgba(236, 72, 153, 0.45);
  --mesh-c4: rgba(251, 146, 60, 0.40);
  --vignette-color: rgba(255, 255, 255, 0.45);

  --glass-overlay-bg: rgba(255, 255, 255, 0.35);
  --glass-specular-color: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 6px 6px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(31, 41, 90, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #0a0a0a;
    --text-color: #ffffff;
    --card-bg: rgba(20, 20, 24, 0.92);
    --card-border: rgba(255, 255, 255, 0.08);
    --meta-color: rgba(255, 255, 255, 0.65);
    --cta-bg: rgba(255, 255, 255, 0.08);
    --cta-color: #ffffff;
    --logo-light-display: none;
    --logo-dark-display: block;

    --grid-line-color: rgba(255, 255, 255, 0.05);
    --mesh-c1: rgba(99, 102, 241, 0.70);
    --mesh-c2: rgba(14, 165, 233, 0.60);
    --mesh-c3: rgba(236, 72, 153, 0.50);
    --mesh-c4: rgba(168, 85, 247, 0.50);
    --vignette-color: rgba(0, 0, 0, 0.65);

    --glass-overlay-bg: rgba(255, 255, 255, 0.12);
    --glass-specular-color: rgba(255, 255, 255, 0.60);
    --glass-shadow: 0 6px 6px rgba(0, 0, 0, 0.30), 0 16px 40px rgba(0, 0, 0, 0.40);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

html {
  overflow-x: hidden;
}

body {
  background: var(--bg-base);
  color: var(--text-color);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Tahoma, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-grid,
.bg-mesh,
.bg-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.bg-grid {
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bg-mesh {
  inset: -10%;
  background:
    radial-gradient(36% 50% at 30% 50%, var(--mesh-c1), transparent 60%),
    radial-gradient(34% 48% at 70% 55%, var(--mesh-c2), transparent 60%),
    radial-gradient(30% 42% at 50% 38%, var(--mesh-c3), transparent 60%),
    radial-gradient(28% 36% at 50% 70%, var(--mesh-c4), transparent 60%);
  filter: blur(2px);
  animation: mesh-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}

.bg-vignette {
  background: radial-gradient(circle at 50% 50%, transparent 35%, var(--vignette-color) 95%);
}

@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.03); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.02); }
}

.park-card {
  position: relative;
  width: clamp(320px, 28vw, 560px);
  max-width: 100%;
  border-radius: clamp(20px, 1.6vw, 28px);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--glass-shadow);
}

.glass-filter,
.glass-overlay,
.glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glass-filter {
  z-index: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  filter: url(#lensFilter) saturate(120%) brightness(1.05);
}

.glass-overlay {
  z-index: 1;
  background: var(--glass-overlay-bg);
}

.glass-specular {
  z-index: 2;
  box-shadow:
    inset 1px 1px 0 var(--glass-specular-color),
    inset 0 0 8px var(--glass-specular-color);
}

.park-content {
  position: relative;
  z-index: 3;
  padding: clamp(26px, 2.4vw, 44px) clamp(22px, 2.2vw, 38px) clamp(22px, 2vw, 36px);
  text-align: center;
  color: var(--text-color);
}

.park-logo-light {
  display: var(--logo-light-display);
  width: clamp(120px, 11vw, 200px);
  height: auto;
  margin: 0 auto clamp(14px, 1.4vw, 22px);
}

.park-logo-dark {
  display: var(--logo-dark-display);
  width: clamp(120px, 11vw, 200px);
  height: auto;
  margin: 0 auto clamp(14px, 1.4vw, 22px);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.6vw, 10px);
  margin-bottom: clamp(12px, 1.1vw, 18px);
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-color);
}

.status-dot {
  width: clamp(8px, 0.7vw, 11px);
  height: clamp(8px, 0.7vw, 11px);
  border-radius: 50%;
  background-color: #22c55e;
  flex-shrink: 0;
}

#park-domain {
  font-size: clamp(24px, 2.4vw, 42px);
  font-weight: 700;
  word-break: break-word;
  letter-spacing: -0.01em;
  margin-bottom: clamp(6px, 0.6vw, 10px);
  line-height: 1.15;
}

.park-ownership {
  font-size: clamp(13px, 0.9vw, 16px);
  color: var(--meta-color);
  margin-bottom: clamp(14px, 1.4vw, 22px);
  line-height: 1.4;
}

.park-cta {
  display: inline-block;
  padding: clamp(8px, 0.8vw, 12px) clamp(20px, 2vw, 30px);
  border-radius: 999px;
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 500;
  text-decoration: none;
  background: var(--cta-bg);
  color: var(--cta-color);
  border: 1px solid var(--cta-bg);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.park-cta:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.park-cta:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bg-mesh {
    animation: none;
  }

  .park-cta {
    transition: none;
  }
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass-filter {
    display: none;
  }
  .glass-overlay {
    background: var(--card-bg);
  }
  .glass-specular {
    box-shadow:
      inset 0 1px 0 var(--glass-specular-color),
      0 0 0 1px var(--card-border);
  }
}