/* Liber Veda — publieke landingspagina (afgestemd op Liber Veda Live shell) */

:root {
  --lv-bg: #060913;
  --lv-bg-elevated: #0d1527;
  --lv-border: rgba(255, 255, 255, 0.08);
  --lv-orange: #f97316;
  --lv-cyan: #00d2ff;
  --lv-green: #10b981;
  --lv-text: #f8fafc;
  --lv-muted: #94a3b8;
  --lv-page-max: 72rem;
  /* Universele Unicode-stack: Latin + Arabisch + Hebreeuws + CJK + Indic + … */
  --lv-font-uni:
    "Plus Jakarta Sans",
    "Noto Sans",
    "Noto Sans Arabic",
    "Noto Sans Hebrew",
    "Noto Sans SC",
    "Noto Sans JP",
    "Noto Sans KR",
    "Noto Sans Devanagari",
    "Noto Sans Bengali",
    "Noto Sans Tamil",
    "Noto Sans Thai",
    "Noto Sans Armenian",
    "Noto Sans Georgian",
    "Noto Sans Ethiopic",
    "Segoe UI",
    "Apple Color Emoji",
    "Noto Color Emoji",
    sans-serif;
  --lv-font: var(--lv-font-uni);
  --lv-font-cjk: "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --bg: var(--lv-bg);
  --bg-2: #0a101c;
  --bg-elevated: var(--lv-bg-elevated);
  --line: var(--lv-border);
  --text: var(--lv-text);
  --muted: var(--lv-muted);
  --ico: #cbd5e1;
  --orange: var(--lv-orange);
  --orange-soft: rgba(249, 115, 22, 0.14);
  --orange-line: rgba(249, 115, 22, 0.35);
  --green: var(--lv-green);
  --radius: 10px;
  --font: var(--lv-font);
  --display: "Instrument Serif", Georgia, serif;
  --max: var(--lv-page-max);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(249, 115, 22, 0.12), transparent),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Script-specifieke versterking (valt terug op --lv-font-uni) */
html[data-lv-script="hans"] body,
html[data-lv-script="jpan"] body,
html[data-lv-script="kore"] body {
  font-family: var(--lv-font-cjk), var(--lv-font-uni);
}
html[data-lv-script="arab"] body {
  font-family: "Noto Sans Arabic", "Noto Sans", var(--lv-font-uni);
}
html[data-lv-script="hebr"] body {
  font-family: "Noto Sans Hebrew", "Noto Sans", var(--lv-font-uni);
}
html[data-lv-script="deva"] body,
html[data-lv-script="beng"] body,
html[data-lv-script="taml"] body,
html[data-lv-script="guru"] body,
html[data-lv-script="gujr"] body {
  font-family: "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans", var(--lv-font-uni);
}
html[data-lv-script="thai"] body {
  font-family: "Noto Sans Thai", "Noto Sans", var(--lv-font-uni);
}

/* ——— Dynamische RTL-layout ——— */
html[dir="rtl"] body {
  text-align: start;
}
html[dir="rtl"] .site-nav {
  direction: rtl;
}
html[dir="rtl"] .site-nav .nav-brand {
  margin-inline-end: auto;
  margin-inline-start: 0;
}
html[dir="rtl"] .nav-links {
  margin-inline-start: 0;
  margin-inline-end: 0;
  justify-content: flex-start;
}
html[dir="rtl"] .hero-inner,
html[dir="rtl"] .section-inner,
html[dir="rtl"] .cta-inner,
html[dir="rtl"] .footer-inner,
html[dir="rtl"] .cap-row,
html[dir="rtl"] .meaning-grid,
html[dir="rtl"] .plans,
html[dir="rtl"] .audience-strip {
  direction: rtl;
}
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .cta-actions {
  flex-direction: row;
}
html[dir="rtl"] .section-title,
html[dir="rtl"] .hero-lead,
html[dir="rtl"] .hero-sub {
  text-align: start;
}
html[dir="rtl"] .cap-row {
  grid-template-columns: 1fr 52px;
}
html[dir="rtl"] .cap-ico {
  order: 2;
}
html[dir="rtl"] .lang-select {
  text-align: right;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— Nav: groot logo links · links + taal rechts ——— */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 24px;
  max-width: none;
  background: rgba(6, 9, 19, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-nav .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-inline-end: auto;
  font-size: clamp(1.85rem, 3.2vw, 2.35rem) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  flex-shrink: 0;
  line-height: 1.05;
}
.site-nav .nav-brand .mark,
.site-nav .nav-brand .lv-mark {
  width: clamp(3rem, 4.5vw, 3.75rem) !important;
  height: clamp(3rem, 4.5vw, 3.75rem) !important;
  color: var(--orange);
  flex-shrink: 0;
  display: block;
}
.site-nav .nav-brand .mark path,
.site-nav .nav-brand .lv-mark path {
  fill: currentColor;
  stroke: none;
}
.lv-mark path {
  fill: currentColor;
  stroke: none;
}
.nav-brand span { color: var(--orange); font-weight: 800; }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.nav-links > a:not(.nav-cta) {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-links > a:not(.nav-cta):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--orange);
}
.nav-cta:hover { background: #ea6a0c; filter: none; }
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ico);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

/* Taalselectie in menubalk */
.lang-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%94a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 32px 9px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--lv-font-uni);
  max-width: min(280px, 52vw);
  cursor: pointer;
  line-height: 1.2;
  unicode-bidi: plaintext;
}
.lang-select:hover,
.lang-select:focus {
  border-color: rgba(249, 115, 22, 0.55);
  outline: none;
}
.lang-select option {
  background: #0d1527;
  color: #fff;
  font-family: var(--lv-font-uni);
}

/* ——— Hero ——— */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: flex-end;
  padding: 4rem 1.5rem 5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 55% at 70% 20%, rgba(255, 122, 0, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(16, 185, 129, 0.08), transparent 50%),
    linear-gradient(180deg, #080c16 0%, var(--bg) 55%, #070b14 100%);
}
.hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 85%);
  animation: gridDrift 28s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 28px, 28px 56px; }
}

.hero-inner {
  width: min(var(--max), 100%);
  margin: 0 auto;
}
.hero-brand {
  /* Schaal mee met viewport zodat «Liber Veda Live» op 1 regel blijft */
  font-size: clamp(1.35rem, 0.55rem + 5.6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  opacity: 0;
  animation: riseIn 0.9s ease forwards 0.1s;
  display: flex;
  align-items: center;
  gap: 0.28em;
  max-width: 100%;
  flex-wrap: nowrap;
}
.hero-brand .hero-wordmark {
  white-space: nowrap;
  min-width: 0;
}
.hero-brand .accent { color: var(--orange); }
.hero-brand .lv-mark {
  width: 0.82em;
  height: 0.82em;
  flex-shrink: 0;
}
.hero-lead {
  max-width: 34rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--muted);
  margin: 0 0 0.35rem;
  opacity: 0;
  animation: riseIn 0.9s ease forwards 0.28s;
}
.hero-sub {
  max-width: 36rem;
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 2rem;
  opacity: 0;
  animation: riseIn 0.9s ease forwards 0.4s;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  opacity: 0;
  animation: riseIn 0.9s ease forwards 0.55s;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1.35rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--orange);
  color: #0b0f19;
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--orange-line); }

/* ——— Sections ——— */
.section {
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--line);
}
.section-inner {
  width: min(var(--max), 100%);
  margin: 0 auto;
}
.section-kicker {
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
  max-width: 22ch;
}
.section-intro {
  color: var(--muted);
  max-width: 40rem;
  margin: 0 0 2.5rem;
  font-size: 1.05rem;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ——— Meaning ——— */
.meaning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
}
.etymology {
  display: grid;
  gap: 1.25rem;
}
.etymon {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.etymon:first-child { border-top: 1px solid var(--line); }
.etymon strong {
  display: block;
  font-size: 1.35rem;
  color: var(--orange);
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 0.35rem;
}
.etymon p { margin: 0; color: var(--muted); }
.vision-copy p {
  color: var(--muted);
  margin: 0 0 1rem;
}
.vision-copy p:last-child { margin-bottom: 0; }
.vision-copy em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}

/* ——— Capabilities ——— */
.cap-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cap-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cap-ico {
  width: 40px;
  height: 40px;
  color: var(--orange);
  margin-top: 2px;
}
.cap-row h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
}
.cap-row p {
  margin: 0;
  color: var(--muted);
  max-width: 52rem;
}

/* ——— Audiences ——— */
.audience-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.audience {
  background: var(--bg-2);
  padding: 1.5rem 1.25rem;
}
.audience h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--orange);
}
.audience p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ——— Plans ——— */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,122,0,0.05), transparent 40%), var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
}
.plan.featured {
  border-color: var(--orange-line);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.12);
}
.plan h3 { margin: 0; font-size: 1.05rem; }
.plan .who { margin: 0; color: var(--muted); font-size: 0.88rem; flex: 1; }
.plan a {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.9rem;
}
.plan a:hover { text-decoration: underline; }

/* ——— CTA band ——— */
.cta-band {
  position: relative;
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(255,122,0,0.18), transparent 60%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  width: min(var(--max), 100%);
  margin: 0 auto;
  text-align: center;
}
.cta-inner h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
}
.cta-inner p {
  margin: 0 auto 1.75rem;
  color: var(--muted);
  max-width: 34rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ——— Footer ——— */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.5rem 2rem;
  background: #070b14;
}
.footer-inner {
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.footer-brand span { color: var(--orange); }
.footer-brand .lv-mark {
  width: 1.1em;
  height: 1.1em;
}
.footer-copy {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
  max-width: 28rem;
}
.footer-col h4 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col a {
  display: block;
  color: var(--ico);
  font-size: 0.92rem;
  padding: 0.25rem 0;
}
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
  width: min(var(--max), 100%);
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ——— Legal pages ——— */
.legal-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.legal-wrap h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 0.5rem;
}
.legal-wrap .meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.legal-wrap h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.6rem;
  color: var(--orange);
}
.legal-wrap p, .legal-wrap li {
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.legal-wrap ul { padding-left: 1.2rem; margin: 0 0 1rem; }

/* ——— Contact form ——— */
.contact-wrap .contact-form {
  margin: 1.75rem 0 2.5rem;
  display: grid;
  gap: 0.45rem;
}
.cf-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-top: 0.55rem;
}
.cf-input,
.contact-form input.cf-input,
.contact-form select.cf-input,
.contact-form textarea.cf-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1.5px solid rgba(226, 232, 240, 0.55);
  background: #1e293b;
  color: #f8fafc;
  padding: 0.78rem 0.95rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  caret-color: #fb923c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.contact-form select.cf-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.contact-form select.cf-input option {
  background: #1e293b;
  color: #f8fafc;
}
.cf-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.cf-input::placeholder,
.contact-form textarea.cf-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}
.cf-input:hover,
.contact-form input.cf-input:hover,
.contact-form select.cf-input:hover,
.contact-form textarea.cf-input:hover {
  border-color: rgba(248, 250, 252, 0.72);
  background: #243447;
}
.cf-input:focus,
.contact-form input.cf-input:focus,
.contact-form select.cf-input:focus,
.contact-form textarea.cf-input:focus {
  outline: none;
  border-color: #fb923c;
  background: #243447;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.28);
}
.cf-submit {
  margin-top: 1rem;
  justify-self: start;
}
.cf-status {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.cf-status.ok { color: #86efac; }
.cf-status.err { color: #fca5a5; }
.contact-alt {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.contact-alt h2 {
  margin-top: 0;
}

/* Subpagina-nav: logo = altijd terug naar home */
.site-nav .nav-brand {
  text-decoration: none;
  cursor: pointer;
}
.site-nav .nav-brand:hover {
  color: #fff;
  opacity: 0.92;
}
.site-nav .nav-links > a[href="/"],
.site-nav .nav-links > a[href="https://liberveda.eu"],
.site-nav .nav-links > a[href="https://liberveda.eu/"] {
  font-weight: 700;
  color: #fff;
}

/* ——— Responsive ——— */
@media (max-width: 960px) {
  .meaning-grid,
  .plans,
  .audience-strip,
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .audience-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-nav { position: sticky; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(6, 9, 19, 0.98);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.5rem 1.25rem;
    align-items: stretch;
    gap: 8px;
  }
  .nav-links.open > a:not(.nav-cta) {
    width: 100%;
    justify-content: center;
  }
  .nav-toggle { display: inline-flex; }
  .meaning-grid,
  .plans,
  .audience-strip,
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .cap-row { grid-template-columns: 40px 1fr; gap: 0.85rem; }
  .hero { min-height: auto; padding-top: 3rem; }
  .hero-inner { overflow-x: hidden; }
  .hero-brand {
    font-size: clamp(1.28rem, 0.4rem + 6.4vw, 2.6rem);
    gap: 0.22em;
  }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}