:root {
  --color-bg: #0a0a0a;
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-accent: #3b82f6;
  --color-glass: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --max-width: 720px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  background: linear-gradient(160deg, #000000 0%, #0a0a0f 40%, #111827 75%, #0a0a0a 100%);
  background-attachment: fixed;
}

.site-header,
main,
footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem;
}

.site-header h1 {
  background: linear-gradient(90deg, #ffffff, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-header nav a {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--color-glass);
  border: 1px solid var(--color-glass-border);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.site-header nav a:hover {
  color: white;
  background: var(--color-accent);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.6);
  transform: translateY(-1px);
}

section {
  margin-bottom: 2rem;
}

main > section:last-of-type {
  margin-bottom: 0;
}

footer {
  padding-top: 0;
}

.fade-section {
  background: var(--color-glass);
  border: 1px solid var(--color-glass-border);
  border-radius: 14px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.fade-section h2 {
  margin-top: 0;
}

.fade-section a {
  color: #93c5fd;
}

#chatbot-widget {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 640px;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 480px;
}

textarea,
input {
  padding: 0.5rem;
  font: inherit;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  border: 1px solid var(--color-glass-border);
  border-radius: 6px;
}

textarea::placeholder,
input::placeholder {
  color: var(--color-text-muted);
}

button {
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: box-shadow 0.2s, transform 0.2s;
}

button:hover {
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.7);
  transform: translateY(-1px);
}

#chatbot-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 220px;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid var(--color-glass-border);
}

#chatbot-messages hr {
  width: 100%;
  border: none;
  border-top: 1px solid var(--color-glass-border);
  margin: 0.25rem 0;
}

.chat-message {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chat-message-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.chat-message-bubble {
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-message-user {
  align-self: flex-end;
}

.chat-message-user .chat-message-meta {
  text-align: right;
}

.chat-message-user .chat-message-bubble {
  background: var(--color-accent);
  color: white;
  border-bottom-right-radius: 2px;
}

.chat-message-assistant {
  align-self: flex-start;
}

.chat-message-assistant .chat-message-bubble {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-glass-border);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.chat-message-bubble ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

#chatbot-input-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#chatbot-input-row textarea {
  width: 100%;
  resize: vertical;
  min-height: 5rem;
}

#chatbot-input-row button {
  align-self: flex-start;
}

#visitor-map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-glass-border);
}

/* Opaque cover over the entire viewport until the Turnstile widget is ready
   (see main.js's onTurnstileReady/ungate) — content is technically loaded
   behind it, but a visitor sees only a black screen (plus the centered
   loader widget, which sits above this via a higher z-index) rather than a
   dimmed-but-visible page, so it reads as "hasn't loaded yet" rather than
   "loaded but verifying." */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 999;
}

body:not(.verifying) #loading-overlay {
  display: none;
}

/* Visible (appearance: "always" — see main.js) — shown once, centered, while
   the page is blacked out during initial verification, then removed. */
#site-turnstile-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

/* Normally invisible (appearance: "interaction-only" — see main.js), used for
   every chatbot/contact-form action after the initial page load. Fixed so
   that if Cloudflare ever does render an interactive challenge, it shows up
   in the same predictable corner regardless of scroll position or which
   action triggered it. */
#site-turnstile {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
}

@media (max-width: 600px) {
  .site-header,
  main,
  footer {
    padding: 1rem;
  }

  .site-header nav {
    flex-direction: column;
    margin-top: 0.5rem;
  }

  .site-header nav a {
    width: 100%;
    text-align: center;
  }

  .fade-section {
    padding: 1rem;
  }

  #chatbot-widget,
  #contact-form {
    max-width: 100%;
  }

  .chat-message {
    max-width: 90%;
  }
}