/* ===== Reverie Technology — shared theme for legal / support pages =====
   Matches index.html: dark green tone, Inter, green→teal accent.
   Per brand request, all reading text is white. */

:root {
  --bg: #03100a;
  --bg-soft: #0a2014;
  --card: rgba(148, 255, 190, 0.05);
  --card-border: rgba(148, 255, 190, 0.12);
  --text: #ffffff;
  --muted: #ffffff;
  --green: #4ade80;
  --teal: #2dd4bf;
  --accent-grad: linear-gradient(90deg, #4ade80, #2dd4bf);
  --nav-h: 68px;
  --max: 900px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

.modern-body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Subtle green glow, echoing the hero background on index */
.modern-body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 80% 0%, rgba(74, 222, 128, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(45, 212, 191, 0.08), transparent 60%);
}

a { color: inherit; text-decoration: none; }

/* ---------- Navbar ---------- */
.modern-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(3, 16, 10, 0.72);
  border-bottom: 1px solid rgba(148, 255, 190, 0.08);
}

.modern-logo-text {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: 0.02em;
  color: #ffffff; white-space: nowrap;
}
.modern-logo-text::before {
  content: ''; flex: none; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%234ade80' stroke-width='2.5'/%3E%3Cellipse cx='16' cy='16' rx='13' ry='5.5' fill='none' stroke='%232dd4bf' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.modern-nav-links {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px; font-weight: 500;
}
.modern-nav-links a {
  color: #ffffff; white-space: nowrap; opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.modern-nav-links a:hover { opacity: 1; color: var(--green); }

/* Hamburger (mobile only) */
.modern-hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px;
  background: transparent; border: 1px solid var(--card-border);
  border-radius: 10px; cursor: pointer;
}
.modern-hamburger span {
  display: block; height: 2px; width: 100%;
  background: #ffffff; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.modern-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.modern-hamburger.open span:nth-child(2) { opacity: 0; }
.modern-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Main content ---------- */
.modern-main-content {
  flex: 1;
  width: 100%;
  padding: calc(var(--nav-h) + 48px) 24px 72px;
}
.modern-legal-container {
  max-width: var(--max);
  margin: 0 auto;
}

.modern-legal-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  color: #ffffff;
  margin-bottom: 12px;
}
.modern-legal-title::after {
  content: ''; display: block;
  width: 72px; height: 4px; border-radius: 999px;
  background: var(--accent-grad);
  margin-top: 18px;
}

/* Collapsible sections (details/summary) */
.modern-legal-section {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 4px 24px;
  margin-top: 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.modern-legal-section[open] { border-color: rgba(74, 222, 128, 0.28); }
.modern-legal-section:hover { border-color: rgba(74, 222, 128, 0.28); }

.modern-legal-h1 {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 18px; font-weight: 700; color: #ffffff;
  padding: 18px 0;
}
.modern-legal-h1::-webkit-details-marker { display: none; }
.modern-legal-h1::after {
  content: ''; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-right: 4px;
}
.modern-legal-section[open] > .modern-legal-h1::after { transform: rotate(-135deg); }

.modern-legal-content {
  padding: 0 0 20px;
  border-top: 1px solid rgba(148, 255, 190, 0.1);
  padding-top: 16px;
}

.modern-legal-h2 {
  font-size: 16px; font-weight: 700; color: #ffffff;
  margin: 20px 0 8px;
}
.modern-legal-content h3 {
  font-size: 15.5px; font-weight: 700; color: #ffffff;
  margin: 18px 0 6px;
}

.modern-legal-text {
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 14px;
}
.modern-legal-text:last-child { margin-bottom: 0; }

.modern-legal-list {
  list-style: none;
  margin: 0 0 14px;
}
.modern-legal-list li {
  color: #ffffff;
  font-size: 15px;
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.modern-legal-list li::before {
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.modern-legal-content strong { color: #ffffff; font-weight: 700; }

.modern-legal-link {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.modern-legal-link:hover { color: var(--green); }

/* ---------- Footer ---------- */
.modern-footer {
  border-top: 1px solid rgba(148, 255, 190, 0.08);
  padding: 28px 24px 36px;
}
.modern-footer-content {
  max-width: var(--max);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.modern-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.modern-footer-links a {
  color: #ffffff; font-size: 13.5px; opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.modern-footer-links a:hover { opacity: 1; color: var(--green); }
.modern-copyright { color: #ffffff; font-size: 13.5px; opacity: 0.85; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .modern-hamburger { display: flex; }
  .modern-nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(3, 16, 10, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(148, 255, 190, 0.1);
    max-height: 0; overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .modern-nav-links.open { max-height: 240px; }
  .modern-nav-links a {
    padding: 15px 24px;
    border-top: 1px solid rgba(148, 255, 190, 0.07);
  }
  .modern-footer-content { flex-direction: column; align-items: flex-start; gap: 12px; }
}