/* =========================================================
   Symphoria - Enterprise SaaS one-pager
   ========================================================= */

:root {
  /* Color - premium enterprise palette (warm graphite + ivory + single bronze accent) */
  --bg:           #0A0A0B;
  --bg-soft:      #0E0E10;
  --bg-elev:      #131318;
  --line:         #22232A;
  --line-soft:    #1A1B22;
  --text:         #ECEAE3;
  --text-dim:     #8A8980;
  --text-mute:    #5C5B55;
  --white:        #F5F3EC;

  /* Single restrained accent - warm bronze; no rainbow gradients */
  --accent:       #5B8FFF;
  --accent-2:     #5B8FFF;
  --accent-3:     #5B8FFF;
  --accent-soft:  rgba(91, 143, 255, 0.10);
  --accent-line:  rgba(91, 143, 255, 0.28);
  --gradient:     #5B8FFF;
  --gradient-soft: rgba(91, 143, 255, 0.06);

  /* Spacing scale (8 base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radii - tighter, more architectural */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset;
  --shadow-2: 0 1px 0 rgba(255,255,255,0.02) inset;

  --container: 1320px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: 6px;
}
.skip:focus { left: 16px; top: 16px; z-index: 100; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */
.display {
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 var(--s-5);
  color: var(--white);
}
.display--sm { font-size: clamp(32px, 5vw, 56px); }
.display__accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 var(--s-5);
}
.lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 0 var(--s-7);
}
.lede--light { color: rgba(255,255,255,0.78); }
.muted { color: var(--text-dim); max-width: 60ch; font-size: 17px; }
.muted--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  margin-bottom: var(--s-5);
}
.eyebrow--light { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.section__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-4);
}

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 10px;
  --pad-x: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn--lg { --pad-y: 14px; --pad-x: 22px; font-size: 15px; border-radius: 12px; }
.btn--primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgba(91, 143, 255,0.35), 0 1px 0 rgba(255,255,255,0.2) inset;
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(91, 143, 255,0.45); }
.btn--ghost {
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,0.02);
}
.btn--ghost:hover { border-color: #2A2D40; background: rgba(255,255,255,0.04); }
.btn--ghost-light {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.08); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(11,13,18,0.72);
  border-bottom: 1px solid var(--line-soft);
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 28px; height: 28px; }
.brand__name {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 17px;
  color: var(--white);
}
.nav__links {
  display: flex; gap: var(--s-6);
  font-size: 14px;
  color: var(--text-dim);
}
.nav__links a:hover { color: var(--white); }
.nav__cta { display: flex; gap: 10px; align-items: center; }

@media (max-width: 900px) {
  .nav__links { display: none; }
}
@media (max-width: 600px) {
  .nav__cta .btn--ghost { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(60px, 8vw, 110px) 0 clamp(60px, 8vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 75%);
}
.grid-overlay--soft { opacity: 0.6; }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}
.glow--a { width: 520px; height: 520px; background: #5B8FFF; top: -120px; left: -120px; opacity: 0.35; }
.glow--b { width: 600px; height: 600px; background: #5B8FFF; top: 80px; right: -180px; opacity: 0.32; }
.glow--c { width: 600px; height: 480px; background: #5B8FFF; top: -100px; left: -80px; opacity: 0.5; }

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero__cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--s-7);
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta strong {
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.hero__meta span {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Hero visual ---- */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}
.orb {
  width: 100%; height: 100%;
  filter: drop-shadow(0 30px 80px rgba(91, 143, 255,0.35));
}
.orbit { transform-origin: 280px 280px; animation: spin 60s linear infinite; }
.orbit--2 { animation-duration: 90s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }

.chip {
  position: absolute;
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 7px 12px;
  background: rgba(20, 22, 31, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  box-shadow: var(--shadow-1);
  animation: float 6s ease-in-out infinite;
}
.chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 8px var(--accent-3);
}
.chip--1  { top: 4%;   left: 6%;    animation-delay: 0s;   }
.chip--2  { top: -1%;  left: 44%;   animation-delay: 0.6s; }
.chip--3  { top: 6%;   right: 2%;   animation-delay: 1.2s; }
.chip--4  { top: 28%;  right: -2%;  animation-delay: 1.8s; }
.chip--5  { top: 54%;  right: -3%;  animation-delay: 2.4s; }
.chip--6  { bottom: 14%; right: 4%; animation-delay: 3.0s; }
.chip--7  { bottom: -1%; left: 44%; animation-delay: 3.6s; }
.chip--8  { bottom: 14%; left: 2%;  animation-delay: 4.2s; }
.chip--9  { top: 54%;  left: -3%;   animation-delay: 4.8s; }
.chip--10 { top: 28%;  left: -2%;   animation-delay: 5.4s; }
.chip--center { top: 48%; left: 50%; transform: translateX(-50%); animation-delay: 1.8s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.chip--center { animation-name: floatX; }
@keyframes floatX {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}
@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }

/* ---------- Sections ---------- */
.section {
  padding: clamp(70px, 9vw, 130px) 0;
  position: relative;
}
.section--alt {
  background: linear-gradient(180deg, #0A0C12 0%, #0D0F18 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.section__header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.two-col--reverse > div:first-child { order: 1; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col--reverse > div:first-child { order: 0; }
}

/* ---------- Problem ---------- */
.check-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: var(--s-6);
  font-size: 16px;
  color: var(--text);
}
.check-list li {
  display: flex; gap: 12px; align-items: baseline;
}
.check-list span {
  color: var(--accent-2);
  font-family: var(--font-mono);
}

.chaos {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.chaos__label {
  position: absolute; bottom: 14px; right: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Steps ---------- */
/* (unused legacy step styles removed; see steps-simple below) */

/* ---------- Features ---------- */
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.5vw, 30px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 143, 255, 0.45);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(91, 143, 255,0.10), transparent 60%),
    var(--bg-elev);
}
.feature__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: var(--s-5);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { margin: 0 0 8px; font-size: 18px; color: var(--white); }
.feature p { color: var(--text-dim); font-size: 15px; margin: 0; }

/* ---------- Cases ---------- */
.cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1000px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .cases { grid-template-columns: 1fr; } }
.case {
  padding: clamp(22px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
  transition: transform .25s, border-color .25s;
}
.case:hover { transform: translateY(-3px); border-color: #2A2D40; }
.case__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 4px 8px;
}
.case h3 { margin: 0; font-size: 19px; color: var(--white); letter-spacing: -0.01em; }
.case__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-3);
  letter-spacing: 0.01em;
  margin-top: -4px;
}
.case p { margin: 0; color: var(--text-dim); font-size: 15px; }
.case__qs {
  list-style: none;
  margin: 4px 0 0;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(91, 143, 255, 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 10px);
}
.case__qs li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.case__qs li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-weight: 600;
}
.case__values {
  list-style: none;
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--line-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.case__values li {
  font-size: 13px;
  color: var(--accent-3);
  font-weight: 500;
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}
.case__values li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-3);
}

/* ---------- Trust ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  display: flex; flex-direction: column; gap: 4px;
}
.trust-card strong {
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.trust-card span { color: var(--text-mute); font-size: 13px; }

/* ---------- Production-grade ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .prod-grid { grid-template-columns: 1fr; } }

.prod-card {
  position: relative;
  padding: clamp(22px, 2.5vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(91, 143, 255,0.04), transparent 50%),
    var(--bg-elev);
  transition: transform .25s, border-color .25s;
}
.prod-card:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 143, 255,0.4);
}
.prod-card__kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: var(--s-4);
}
.prod-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--white);
  letter-spacing: -0.01em;
}
.prod-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
}

/* ---------- Partner / Implementation ---------- */
.partner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(91, 143, 255,0.10), transparent 60%),
    var(--bg-elev);
  box-shadow: var(--shadow-1);
}
@media (max-width: 900px) { .partner { grid-template-columns: 1fr; } }

.partner__list {
  display: flex; flex-direction: column; gap: 8px;
  margin: var(--s-5) 0 0;
  font-size: 16px;
  color: var(--text);
}
.partner__list li { display: flex; gap: 12px; align-items: baseline; }
.partner__list span { color: var(--accent-2); font-family: var(--font-mono); }

.partner__card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(91, 143, 255,0.3);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #14152C 0%, #0E0F1F 100%);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: 0 16px 48px rgba(91, 143, 255,0.18);
}
.partner__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.partner__name {
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--white);
}
.partner__card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
}
.partner__card .btn { align-self: flex-start; margin-top: var(--s-3); }

/* ---------- CTA ---------- */
.cta { padding: clamp(60px, 8vw, 120px) 0; }
.cta__card {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(91, 143, 255,0.3);
  background: linear-gradient(180deg, #14152C 0%, #0E0F1F 100%);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 64px);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 30px 80px rgba(91, 143, 255,0.18);
}
.cta__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__content { max-width: 720px; margin: 0 auto; }
.cta__content .lede { margin-left: auto; margin-right: auto; }
.cta__content .hero__cta { justify-content: center; margin-bottom: 0; }

/* ---------- Footer ---------- */
.footer {
  padding: var(--s-8) 0 var(--s-6);
  border-top: 1px solid var(--line-soft);
  background: #08090E;
}
.footer__row {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 760px) { .footer__row { grid-template-columns: 1fr; } }

.footer__tag {
  margin: var(--s-3) 0 0;
  color: var(--text-mute);
  font-size: 14px;
  max-width: 32ch;
}
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 540px) { .footer__nav { grid-template-columns: repeat(2, 1fr); } }
.footer__nav h4 {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 var(--s-3);
}
.footer__nav a {
  display: block;
  font-size: 14px;
  color: var(--text-dim);
  padding: 4px 0;
}
.footer__nav a:hover { color: var(--white); }

.footer__bottom {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-5);
  font-size: 13px;
  color: var(--text-mute);
}
.footer__bottom a { color: var(--text-dim); }
.footer__bottom a:hover { color: var(--white); }
@media (max-width: 540px) {
  .footer__bottom { flex-direction: column; }
}

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Value row (per-project benefits) ---------- */
.value-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3, 16px);
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 900px) { .value-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .value-row { grid-template-columns: 1fr; } }
.value-row__item {
  padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  display: flex; flex-direction: column; gap: 6px;
}
.value-row__item strong {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.value-row__item span {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------- Steps simple (Zo werkt het) ---------- */
.steps-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(40px, 5vw, 60px);
}
@media (max-width: 900px) { .steps-simple { grid-template-columns: 1fr; } }
.step-simple {
  position: relative;
  padding: clamp(28px, 3vw, 36px);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 20px);
  display: flex; flex-direction: column; gap: 12px;
}
.step-simple--core {
  border-color: rgba(91, 143, 255, 0.5);
  background: linear-gradient(180deg, rgba(91, 143, 255,0.08), rgba(91, 143, 255,0.04));
  box-shadow: 0 0 0 1px rgba(91, 143, 255,0.15), 0 20px 60px -20px rgba(91, 143, 255,0.35);
}
.step-simple__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5B8FFF, #5B8FFF);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
}
.step-simple h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--white);
  letter-spacing: -0.01em;
}
.step-simple p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Voice section emphasis ---------- */
.section--voice .h2--xl {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.section__label--accent {
  color: var(--accent-3);
  background: rgba(91, 143, 255, 0.1);
}
.lede--soft {
  color: var(--text);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 540px;
}

/* ---------- Feature tiers ---------- */
.feature-tier {
  margin-top: clamp(40px, 4vw, 56px);
}
.feature-tier:first-of-type { margin-top: clamp(32px, 3.5vw, 48px); }
.feature-tier__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.feature-tier:first-of-type .feature-tier__label {
  color: var(--accent-2);
  border-color: rgba(91, 143, 255, 0.4);
  background: var(--accent-soft);
}
.feature-tier__grid {
  display: grid;
  gap: var(--s-4, 20px);
}
.feature-tier__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) {
  .feature-tier__grid--2 { grid-template-columns: 1fr; }
}
.feature--core {
  background: linear-gradient(180deg, rgba(91, 143, 255,0.06), rgba(91, 143, 255,0.02));
  border-color: rgba(91, 143, 255, 0.35);
}
.feature--small {
  padding: clamp(20px, 2vw, 24px);
}
.feature--small h3 { font-size: 17px; }
.feature--small p { font-size: 14px; }

/* ---------- Impact / ROI strip ---------- */
.impact { padding: clamp(60px, 7vw, 100px) 0; }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4, 20px);
}
@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .impact-grid { grid-template-columns: 1fr; } }
.impact-card {
  padding: clamp(22px, 2.5vw, 28px);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 20px);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .25s, border-color .25s;
}
.impact-card:hover { transform: translateY(-3px); border-color: rgba(91, 143, 255,0.4); }
.impact-card__num {
  font-family: var(--font-mono);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  background: linear-gradient(135deg, #5B8FFF, #5B8FFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}
.impact-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.impact-card p {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Voice card visual ---------- */
.voice-card {
  position: relative;
  background: linear-gradient(180deg, #14152C 0%, #0E0F1F 100%);
  border: 1px solid rgba(91, 143, 255, 0.25);
  border-radius: var(--r-2xl);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: 0 30px 80px rgba(91, 143, 255, 0.12), 0 1px 0 rgba(255,255,255,0.04) inset;
  display: flex; flex-direction: column; gap: 18px;
}
.voice-card__head {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
}
.voice-card__rec {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.voice-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F87171;
  box-shadow: 0 0 10px #F87171;
  animation: voicePulse 1.6s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) { .voice-card__dot { animation: none; } }
.voice-card__project {
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.voice-wave {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3px;
  height: 56px;
  padding: 0 4px;
}
.voice-wave span {
  flex: 1;
  background: linear-gradient(180deg, var(--accent-3), var(--accent-2));
  border-radius: 2px;
  animation: voiceWave 1.2s ease-in-out infinite;
  min-height: 6px;
  height: 30%;
}
.voice-wave span:nth-child(3n)   { animation-delay: 0.1s; height: 60%; }
.voice-wave span:nth-child(4n)   { animation-delay: 0.25s; height: 80%; }
.voice-wave span:nth-child(5n)   { animation-delay: 0.4s; height: 45%; }
.voice-wave span:nth-child(7n)   { animation-delay: 0.55s; height: 90%; }
.voice-wave span:nth-child(11n)  { animation-delay: 0.7s; height: 35%; }
@keyframes voiceWave {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .voice-wave span { animation: none; } }

.voice-card__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.voice-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 999px;
}
.voice-chip--accent {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  box-shadow: 0 4px 14px rgba(91, 143, 255, 0.3);
}

.voice-card__chat {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.voice-msg {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 90%;
}
.voice-msg--user {
  align-self: flex-end;
  background: rgba(91, 143, 255, 0.18);
  border: 1px solid rgba(91, 143, 255, 0.3);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.voice-msg--ai {
  align-self: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.voice-source {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-3);
  letter-spacing: 0.04em;
}
.voice-source:hover { text-decoration: underline; }

/* ---------- Responsive polish ---------- */

/* Mobile-friendly nav cta */
@media (max-width: 540px) {
  .nav__cta .btn--primary { padding: 10px 14px; font-size: 13px; }
  .brand__name { font-size: 15px; }
}

/* Hero - keep chips inside the orb on small screens */
@media (max-width: 760px) {
  .hero__visual { max-width: 420px; }
  .chip { font-size: 11px; padding: 6px 10px; }
}
@media (max-width: 540px) {
  .hero__visual { max-width: 320px; }
  .chip { font-size: 10.5px; padding: 5px 9px; }
  /* Reduce visual clutter on small phones - hide secondary chips */
  .chip--2, .chip--7 { display: none; }
  .chip--4  { right: 2%; }
  .chip--5  { right: 1%; }
  .chip--9  { left: 1%; }
  .chip--10 { left: 2%; }
}

/* Hero copy spacing on phones */
@media (max-width: 540px) {
  .hero { padding-top: 40px; padding-bottom: 56px; }
  .hero__meta { gap: 16px 24px; }
  .hero__meta strong { font-size: 12px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* CTA buttons full-width on smallest phones */
@media (max-width: 540px) {
  .cta__content .hero__cta .btn { width: 100%; }
  .voice-card__chat .voice-msg { max-width: 95%; }
}

/* Use case cards - slightly more compact on phones */
@media (max-width: 540px) {
  .case { min-height: 0; padding: 20px; gap: 8px; }
  .case h3 { font-size: 17px; }
  .case__qs { padding: 12px; }
  .case__qs li { font-size: 12px; }
}

/* Section padding tighter on small phones */
@media (max-width: 540px) {
  .section { padding: 56px 0; }
  .section__header { margin-bottom: 32px; }
  .h2 { font-size: clamp(26px, 8vw, 36px); }
  .display { font-size: clamp(34px, 11vw, 56px); }
}

/* Trust grid - 2 cols feels cramped at 320px, allow stack */
@media (max-width: 380px) {
  .trust-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: 1fr; }
}

/* Footer bottom: make sure content stacks cleanly */
@media (max-width: 540px) {
  .footer__nav { gap: 24px 16px; }
}

/* Chaos diagram label needs more contrast on dark cards */
.chaos__label {
  background: rgba(11, 13, 18, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
}

/* Skip link visible on focus, just in case */
.skip:focus { outline: 2px solid #fff; }

/* ---------- Contact page ---------- */
.hero--compact { padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px); }
.contact-hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero .lede { margin-left: auto; margin-right: auto; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  color: inherit;
  transition: transform .25s, border-color .25s, background .25s;
}
.contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 143, 255, 0.45);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(91, 143, 255,0.10), transparent 60%),
    var(--bg-elev);
}
.contact-card--primary {
  border-color: rgba(91, 143, 255, 0.4);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(91, 143, 255,0.14), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(91, 143, 255,0.14), transparent 55%),
    var(--bg-elev);
  box-shadow: var(--shadow-2);
}
.contact-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: 8px;
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.contact-card--primary .contact-card__kicker { color: var(--accent-3); }
.contact-card h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.contact-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}
.contact-card__cta {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-3);
  letter-spacing: 0.04em;
}
.contact-card:hover .contact-card__cta { color: var(--white); }

.visit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 760px) { .visit-grid { grid-template-columns: 1fr; } }
.visit-card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  display: flex; flex-direction: column; gap: 10px;
}
.visit-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.visit-card h3 {
  margin: 0;
  font-size: 24px;
  color: var(--white);
  letter-spacing: -0.01em;
}
.visit-card address {
  font-style: normal;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
.visit-card__note {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.visit-card .btn { align-self: flex-start; margin-top: 8px; }

/* =========================================================
   Landing page additions: breadcrumb, FAQ, compare table,
   case Q-list. Used by /ai-kennisbank, /eigen-chatgpt..., /ai-voor-offertes
   ========================================================= */

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a {
  color: var(--text-dim);
  transition: color .2s ease;
}
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span:not([aria-hidden]) { color: var(--text); }
.breadcrumb > span {
  color: var(--accent-2);
  opacity: .7;
}

/* ---- FAQ ---- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  transition: border-color .2s ease, background .2s ease;
}
.faq__item:hover { border-color: rgba(91, 143, 255,.3); }
.faq__item[open] {
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft));
  border-color: rgba(91, 143, 255,.35);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--white);
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-2);
  transition: transform .2s ease;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p {
  margin: 14px 0 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Compare table (Symphoria vs ChatGPT) ---- */
.compare {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elev);
}
.compare__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--text-dim);
}
.compare__row:last-child { border-bottom: none; }
.compare__row > div:first-child { color: var(--white); font-weight: 500; }
.compare__row > div { padding: 4px 8px; }
.compare__row--head {
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.compare__row--head > div:first-child { color: var(--text-mute); font-weight: 400; }
.compare__col--us {
  color: var(--white) !important;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(91, 143, 255,.06), rgba(91, 143, 255,.04));
  border-left: 1px solid rgba(91, 143, 255,.18);
  border-right: 1px solid rgba(91, 143, 255,.18);
}
.compare__row--head .compare__col--us {
  color: var(--accent-3) !important;
}

/* ---- Case Q-list (voorbeeldvragen) ---- */
.case__qs {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case__qs li {
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.case__qs li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-style: normal;
  font-weight: 600;
}

/* ---- Responsive: landing pages ---- */
@media (max-width: 760px) {
  .compare__row { grid-template-columns: 1.2fr .9fr .9fr; padding: 12px 14px; font-size: 13px; }
  .compare__row > div { padding: 4px 6px; }
  .faq__item { padding: 16px 18px; }
  .faq__item summary { font-size: 15px; }
  .breadcrumb { font-size: 11px; }
}

/* ---------- Partner contact card (Dennis / Wux AI) ---------- */
.eyebrow--accent {
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(91, 143, 255,.28);
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  width: fit-content;
}

.partner__card--contact {
  gap: var(--s-4);
}
.partner__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}
.partner__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(91, 143, 255,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.partner__card--contact .partner__name {
  display: block;
  font-size: 20px;
  margin: 0;
  font-weight: 700;
}
.partner__role {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.partner__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(11,13,18,.5);
}
.partner__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.partner__contact svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--accent-2);
}
.partner__contact a {
  color: var(--text);
  border-bottom: 1px dashed transparent;
  transition: color .2s, border-color .2s;
}
.partner__contact a:hover {
  color: var(--white);
  border-bottom-color: var(--accent-2);
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
}
.legal h2 {
  color: var(--white);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal p { margin: 0 0 14px; }
.legal a {
  color: var(--white);
  border-bottom: 1px dashed rgba(91, 143, 255,.5);
  transition: border-color .2s;
}
.legal a:hover { border-bottom-color: var(--accent-2); }
.legal .check-list { margin: 6px 0 18px; }
.legal__contact {
  margin: 12px 0 8px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.legal__contact li { font-size: 14px; }
.legal__contact strong { color: var(--white); margin-right: 6px; }

/* ============ PRICING SECTION ============ */
.pricing-base {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(91, 143, 255,0.06), rgba(91, 143, 255,0.02));
  margin: 28px 0 56px;
}
.pricing-base__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-3);
  margin-bottom: 10px;
}
.pricing-base__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 10px;
}
.pricing-base__copy p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.pricing-base__price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.pricing-base__amount {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}
.pricing-base__per {
  font-size: 14px;
  color: var(--text);
}
.pricing-base__sub {
  font-size: 12px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.pricing-tokens__intro {
  margin: 0 0 24px;
}
.pricing-tokens__intro h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--white);
  letter-spacing: -0.01em;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  transition: border-color .2s, transform .2s;
}
.pricing-card:hover {
  border-color: rgba(91, 143, 255,0.4);
  transform: translateY(-2px);
}
.pricing-card--featured {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(91, 143, 255,0.10), var(--bg-elev) 60%);
  position: relative;
}
.pricing-card--custom {
  background: linear-gradient(180deg, rgba(91, 143, 255,0.06), var(--bg-elev) 60%);
}
.pricing-card__head {
  margin-bottom: 16px;
}
.pricing-card__label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.pricing-card--featured .pricing-card__label { color: var(--accent-2); }
.pricing-card__name {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  letter-spacing: -0.01em;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.pricing-card__amount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}
.pricing-card__per {
  font-size: 13px;
  color: var(--text-dim);
}
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-card__list li {
  font-size: 14px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.pricing-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-3);
  font-weight: 600;
  font-size: 13px;
}

.pricing-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(11,13,18,0.5);
  margin-bottom: 32px;
}
.pricing-foot__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-foot__col strong {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}
.pricing-foot__col span {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-base { grid-template-columns: 1fr; padding: 24px; }
  .pricing-base__price { text-align: left; align-items: flex-start; }
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============ PRICING SECTION ============ */
.pricing-base {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(91, 143, 255,0.06), rgba(91, 143, 255,0.02));
  margin: 28px 0 56px;
}
.pricing-base__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-3);
  margin-bottom: 10px;
}
.pricing-base__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 10px;
}
.pricing-base__copy p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.pricing-base__price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.pricing-base__amount {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}
.pricing-base__per {
  font-size: 14px;
  color: var(--text);
}
.pricing-base__sub {
  font-size: 12px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.pricing-tokens__intro { margin: 0 0 24px; }
.pricing-tokens__intro h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--white);
  letter-spacing: -0.01em;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  transition: border-color .2s, transform .2s;
}
.pricing-card:hover {
  border-color: rgba(91, 143, 255,0.4);
  transform: translateY(-2px);
}
.pricing-card--featured {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(91, 143, 255,0.10), var(--bg-elev) 60%);
  position: relative;
}
.pricing-card--custom {
  background: linear-gradient(180deg, rgba(91, 143, 255,0.06), var(--bg-elev) 60%);
}
.pricing-card__head { margin-bottom: 16px; }
.pricing-card__label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.pricing-card--featured .pricing-card__label { color: var(--accent-2); }
.pricing-card__name {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  letter-spacing: -0.01em;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.pricing-card__amount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}
.pricing-card__per { font-size: 13px; color: var(--text-dim); }
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-card__list li {
  font-size: 14px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.pricing-card__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-3);
  font-weight: 600;
  font-size: 13px;
}

.pricing-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(11,13,18,0.5);
  margin-bottom: 32px;
}
.pricing-foot__col { display: flex; flex-direction: column; gap: 6px; }
.pricing-foot__col strong {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}
.pricing-foot__col span {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-base { grid-template-columns: 1fr; padding: 24px; }
  .pricing-base__price { text-align: left; align-items: flex-start; }
  .pricing-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PREMIUM ENTERPRISE OVERRIDES (last block - wins cascade)
   Removes AI-startup tells: rainbow gradients, glow blobs,
   floating chip clusters, hover-lift cards, gradient text.
   Adds: editorial type, hairline borders, restrained accent.
   ========================================================= */

/* --- Body: warm background, subtle vertical shading --- */
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(91, 143, 255,0.04), transparent 60%),
    var(--bg);
  font-feature-settings: "ss01", "cv11", "calt";
}

/* --- Kill all glow blobs and grid-overlay washes --- */
.glow,
.glow--a,
.glow--b,
.glow--c,
.hero__bg .grid-overlay,
.cta__bg .grid-overlay,
.cta__bg .glow {
  display: none !important;
}

/* Replace grid overlay with a tight, dim hairline grid in hero only */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
  pointer-events: none;
}

/* --- Typography: kill the gradient text accent, use weight + bronze underline --- */
.display__accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--white) !important;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.025em;
  position: relative;
}

/* Display headline: editorial weight contrast + bronze hairline cap */
.display {
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--white);
}

/* Section labels: hairline above, bronze, refined */
.section__label {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  padding-top: 14px;
  border-top: 1px solid var(--accent-line);
  width: max-content;
  margin-bottom: 18px;
}

.section__header { margin-bottom: 56px; }

/* H2: serif-like editorial feel via tight tracking + lighter weight */
.h2 {
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* Eyebrow chip: tighter, less bubbly */
.eyebrow {
  border-radius: 4px;
  border-color: var(--line);
  background: rgba(255,255,255,0.015);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  padding: 6px 10px 6px 8px;
}
.eyebrow__dot {
  background: var(--accent);
  box-shadow: none;
  width: 4px;
  height: 4px;
}

/* --- Buttons: flat enterprise, no gradient, no glow --- */
.btn {
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--lg { border-radius: 4px; }

.btn--primary {
  background: var(--white);
  color: #0A0A0B;
  border: 1px solid var(--white);
  box-shadow: none;
}
.btn--primary:hover {
  background: var(--text);
  border-color: var(--text);
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.025);
  border-color: #34353F;
  color: var(--white);
}

/* --- Nav --- */
.nav {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10,10,11,0.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.brand__name { letter-spacing: -0.01em; font-weight: 500; }
.nav__links a {
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* --- Hero: two-column with premium bronze orb on the right --- */
.hero__inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr !important;
    max-width: 920px;
  }
}
.hero {
  border-bottom: 1px solid var(--line-soft);
}
.hero__copy {
  display: flex;
  flex-direction: column;
}
.hero .display {
  font-size: clamp(44px, 6.4vw, 76px);
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.hero .lede {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--text-dim);
  max-width: 60ch;
  margin-bottom: 36px;
}

/* Hero meta: editorial 4-col with hairline dividers */
.hero__meta {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hero__meta div {
  padding: 0 20px;
  border-left: 1px solid var(--line);
}
.hero__meta div:first-child { padding-left: 0; border-left: none; }
.hero__meta strong {
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.hero__meta span {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-mute);
}
@media (max-width: 640px) {
  .hero__meta { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero__meta div { padding: 0; border-left: none; }
}

/* --- Sections: more editorial padding + hairline dividers --- */
.section {
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--line-soft);
}
.section--alt {
  background: var(--bg-soft);
}

/* --- Two-col: enforce serious whitespace --- */
.two-col { gap: clamp(40px, 6vw, 96px); }

/* --- Cards (feature/case/trust/prod/impact): hairline, no hover-lift, no gradients --- */
.feature, .case, .prod-card, .impact-card, .pricing-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color .15s, background .15s;
}
.feature:hover,
.case:hover,
.prod-card:hover,
.impact-card:hover,
.pricing-card:hover {
  transform: none !important;
  background: #16161B;
  border-color: #2C2D36;
  box-shadow: none;
}

/* Feature icon: monochrome, no gradient */
.feature__icon {
  background: rgba(91, 143, 255,0.06);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  border-radius: 4px;
}
.feature__icon svg { color: var(--accent); }

/* Case tag: refined */
.case__tag {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: 3px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Check-list bullets: bronze caret, smaller */
.check-list li::marker { content: ""; }
.check-list li > span:first-child,
.check-list span {
  color: var(--accent) !important;
  font-weight: 400;
}
.check-list li {
  font-size: 15px;
  color: var(--text);
}

/* Trust grid: hairline tiles, KPI-style */
.trust-card {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 18px;
}
.trust-card strong {
  color: var(--white);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: 4px;
}
.trust-card span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}

/* Production-grade cards */
.prod-card {
  padding: 24px;
}
.prod-card__kbd {
  background: rgba(91, 143, 255,0.06);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.prod-card h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Impact / ROI numbers: editorial, bronze accent */
.impact-card__num {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--white);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.impact-card__num::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin-top: 14px;
}
.impact-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* CTA card: flat ink panel with bronze hairline corner accent */
.cta__card {
  background: linear-gradient(180deg, #14141A, #0F0F13);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.cta__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 1px;
  background: var(--accent);
}

/* Partner card: refined, no purple */
.partner__list span { color: var(--accent); }
.partner__card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.partner__avatar {
  background: linear-gradient(135deg, #2A2B33, #1A1B22) !important;
  border: 1px solid var(--accent-line);
  color: var(--accent) !important;
}
.partner__contact a:hover { border-bottom-color: var(--accent); }
.partner__contact svg { color: var(--accent); }
.partner__kicker { color: var(--accent); }

/* FAQ */
.faq__item { border-radius: 4px; }
.faq__item:hover { border-color: var(--accent-line); }
.faq__item[open] summary { color: var(--accent); }

/* Compare table */
.compare { border-radius: 6px; }
.compare__col--us { color: var(--accent) !important; }

/* Breadcrumb */
.breadcrumb a:hover { color: var(--accent); }

/* Voice card refinements (kill cyan/violet) */
.voice-chip { border-color: var(--line); background: rgba(255,255,255,0.02); color: var(--text-dim); }
.voice-chip--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.voice-source { color: var(--accent); border-bottom: 1px dotted var(--accent-line); }
.voice-card__rec { color: var(--accent); }
.voice-card__dot { background: var(--accent); box-shadow: none; }

/* Pricing - already mostly restrained, just retune accents */
.pricing-base {
  background: linear-gradient(180deg, rgba(91, 143, 255,0.04), transparent);
  border-color: var(--line);
  border-radius: 8px;
}
.pricing-base__eyebrow { color: var(--accent); }
.pricing-card { border-radius: 6px; }
.pricing-card--featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, rgba(91, 143, 255,0.06), var(--bg-elev) 60%);
}
.pricing-card--custom {
  background: linear-gradient(180deg, rgba(91, 143, 255,0.03), var(--bg-elev) 60%);
}
.pricing-card--featured .pricing-card__label { color: var(--accent); }
.pricing-card__list li::before { color: var(--accent); }
.pricing-foot { border-radius: 4px; }

/* Steps simple - flatter */
.step-simple {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.step-simple--core { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(91, 143, 255,0.04), var(--bg-elev) 60%); }
.step-simple__num {
  background: rgba(91, 143, 255,0.06);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: 3px;
}

/* Footer */
.footer { border-top: 1px solid var(--line); }
.footer__nav h4 { color: var(--white); font-weight: 500; }
.footer__nav a:hover { color: var(--accent); }

/* Selection */
::selection { background: var(--accent); color: #0A0A0B; }

/* Skip link */
.skip { background: var(--accent); color: #0A0A0B; }

/* Focus */
:focus-visible { outline-color: var(--accent); outline-width: 1px; outline-offset: 4px; }

/* Section header - restrain max-width and add elegant gap */
.section__header h2 { max-width: 22ch; }
.section__header .muted { max-width: 56ch; font-size: 16px; }

/* General copy restraint */
.muted { font-size: 16px; line-height: 1.65; color: var(--text-dim); }
.lede { color: var(--text-dim); }

/* ============ FEATURES PAGE - comparison table ============ */
.ft-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.ft-legend > div { display: inline-flex; align-items: center; gap: 10px; }

.ft-table {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev);
}
.ft-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.ft-table--3col .ft-row {
  grid-template-columns: minmax(220px, 1.3fr) 1fr 1fr 1fr;
}
.ft-row:last-child { border-bottom: none; }

.ft-row__label {
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.005em;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ft-row__note {
  font-size: 11px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.ft-row__cell {
  padding: 18px 22px;
  font-size: 14px;
  color: var(--text);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  line-height: 1.55;
}
.ft-row__cell:last-child { border-right: none; }
.ft-row__cell--right {
  background: rgba(91, 143, 255, 0.04);
  color: var(--white);
}

.ft-row--head .ft-row__label,
.ft-row--head .ft-row__cell {
  background: var(--bg-soft);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  padding-top: 14px;
  padding-bottom: 14px;
}
.ft-row--head .ft-row__cell--right {
  color: var(--accent);
  background: rgba(91, 143, 255, 0.06);
}

/* Status indicators */
.ft-yes,
.ft-no,
.ft-partial,
.ft-unknown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.ft-yes {
  color: var(--accent);
  background: rgba(91, 143, 255, 0.10);
  border: 1px solid var(--accent-line);
}
.ft-no {
  color: var(--text-mute);
  border: 1px solid var(--line);
}
.ft-partial {
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.ft-unknown {
  color: var(--text-mute);
  border: 1px dashed var(--line);
  font-style: italic;
}
.ft-soon {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  color: var(--accent);
  background: rgba(91, 143, 255, 0.04);
}
.ft-text {
  font-size: 14px;
  line-height: 1.5;
}

/* Honest section */
.ft-honest {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ft-honest__item {
  background: var(--bg-elev);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-honest__item strong {
  color: var(--white);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  position: relative;
  padding-left: 18px;
}
.ft-honest__item strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.ft-honest__item span {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
  padding-left: 18px;
}

/* Responsive */
@media (max-width: 900px) {
  .ft-row { grid-template-columns: 1fr; }
  .ft-table--3col .ft-row { grid-template-columns: 1fr; }
  .ft-row__label,
  .ft-row__cell {
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 18px;
  }
  .ft-row__cell:last-child { border-bottom: none; }
  .ft-row--head .ft-row__cell { display: none; }
  .ft-row--head .ft-row__label::after {
    content: " · linkerkant: alternatieve tools  ·  rechterkant: Symphoria";
    color: var(--text-mute);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }
  .ft-row__cell--left::before { content: "Anders: "; color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 8px; }
  .ft-row__cell--right::before { content: "Symphoria: "; color: var(--accent); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 8px; }
  .ft-honest { grid-template-columns: 1fr; }
}

/* Pricing → features teaser link */
.pricing-features-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elev);
  transition: border-color .15s, background .15s;
}
.pricing-features-link:hover {
  border-color: var(--accent-line);
  background: #16161B;
}
.pricing-features-link__copy strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.pricing-features-link__copy span {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.pricing-features-link__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .pricing-features-link { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============ PRICING - practical examples block ============ */
.pricing-examples {
  margin: 0 0 32px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}
.pricing-examples__head {
  margin-bottom: 28px;
  max-width: 720px;
}
.pricing-examples__head .h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 6px;
}
.pricing-examples__head .muted {
  font-size: 14px;
  margin: 0;
}
.pricing-examples__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.pricing-example {
  background: var(--bg-elev);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.pricing-example::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.pricing-example__metric {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.05;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pricing-example__unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.pricing-example__label {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* 4-col foot variant */
.pricing-foot--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {
  .pricing-examples__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-foot--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-examples { padding: 24px; }
  .pricing-examples__grid { grid-template-columns: 1fr; }
  .pricing-foot--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO ORB - premium bronze, monochrome, enterprise feel
   Architectural rings + floating capability chips
   ============================================================ */
.hero__visual {
  display: block !important;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin: 0 0 0 auto;
}

/* ambient bronze halo behind the orb - bigger and warmer for premium glow */
.hero__visual::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(91, 143, 255, 0.22) 0%,
    rgba(91, 143, 255, 0.10) 22%,
    rgba(91, 143, 255, 0.04) 45%,
    transparent 72%
  );
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}
/* secondary subtle outer glow */
.hero__visual::after {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(91, 143, 255, 0.05), transparent 55%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* the SVG orb itself */
.orb {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.orb__ring {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1;
}
.orb__ring--strong {
  stroke: rgba(91, 143, 255, 0.45);
}
.orb__ring--dotted {
  stroke-dasharray: 1 5;
  stroke: rgba(91, 143, 255, 0.35);
}
.orb__squircle {
  fill: none;
  stroke: rgba(91, 143, 255, 0.38);
  stroke-width: 1;
}
.orb__core {
  fill: var(--bg-elev);
  stroke: var(--accent);
  stroke-width: 1;
}
.orb__core-inner {
  fill: rgba(91, 143, 255, 0.06);
  stroke: var(--accent-line);
  stroke-width: 1;
}
.orb__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--accent);
}
.orb__label--lg {
  font-size: 14px;
  letter-spacing: 0.22em;
  fill: var(--white);
  font-weight: 500;
}
.orb__sublabel {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  fill: var(--text-mute);
}
.orb__tick {
  stroke: var(--accent);
  stroke-width: 1;
}
.orb__node {
  fill: var(--accent);
}
.orb__node--sm {
  fill: rgba(91, 143, 255, 0.65);
}

/* slow rotating dotted ring */
.orb__rotate {
  transform-origin: 300px 300px;
  animation: orb-spin 90s linear infinite;
}
.orb__rotate--reverse {
  animation: orb-spin 140s linear infinite reverse;
}
.orb__rotate--slow {
  transform-origin: 300px 300px;
  animation: orb-spin 220s linear infinite;
}
@keyframes orb-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .orb__rotate, .orb__rotate--reverse, .orb__rotate--slow { animation: none; }
}

/* Diamond/rhombus inside core: subtle pulse + slow rotation */
.orb__diamond {
  transform-origin: 300px 300px;
  animation: orb-diamond-pulse 6s ease-in-out infinite;
}
@keyframes orb-diamond-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .orb__diamond { animation: none; }
}

/* ----- orbiting capability chips (floating, absolute over the orb) ----- */
.orb-chips {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.orb-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  background: rgba(19, 19, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  pointer-events: auto;
  animation: orb-float 7s ease-in-out infinite;
  transition: border-color .2s, transform .2s;
}
.orb-chip:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), 0 6px 18px rgba(0,0,0,0.4);
}
.orb-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(91, 143, 255, 0.6);
  flex-shrink: 0;
}
.orb-chip__icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
  flex-shrink: 0;
}
.orb-chip__count {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}

@keyframes orb-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-chip { animation: none; }
}

/* chip placement around the orb (11 chips evenly distributed clockwise on a circle) */
/* All chips are anchored at their visual center via translate(-50%, -50%); the orb-float
   keyframes animate margin-top so they don't conflict with this transform. */
.orb-chip { transform: translate(-50%, -50%); }
.orb-chip--center-x { transform: translate(-50%, -50%); }

/* polar positions on a r=48% circle, starting at 12 o'clock, clockwise (every 32.73°) */
.orb-chip--1  { top: 9.6%;  left: 24.1%; animation-delay: 0s;   }   /* 11 o'clock - Documenten */
.orb-chip--2  { top: 2%;    left: 50%;   animation-delay: 0.4s; }   /* 12 o'clock - Tabellen */
.orb-chip--3  { top: 9.6%;  left: 75.9%; animation-delay: 0.8s; }   /*  1 o'clock - Gespreksopnames */
.orb-chip--4  { top: 30.0%; left: 93.7%; animation-delay: 1.2s; }   /*  2 o'clock - E-mails */
.orb-chip--5  { top: 56.8%; left: 97.5%; animation-delay: 1.6s; }   /*  3 o'clock - Website content */
.orb-chip--6  { top: 81.4%; left: 86.3%; animation-delay: 2.0s; }   /*  4 o'clock - Q&A */
.orb-chip--7  { top: 96.1%; left: 63.5%; animation-delay: 2.4s; }   /*  5 o'clock - Producten */
.orb-chip--8  { top: 96.1%; left: 36.5%; animation-delay: 2.8s; }   /*  7 o'clock - Notities */
.orb-chip--9  { top: 81.4%; left: 13.7%; animation-delay: 3.2s; }   /*  8 o'clock - Beslissingen */
.orb-chip--10 { top: 56.8%; left:  2.5%; animation-delay: 3.6s; }   /*  9 o'clock - Feeds */
.orb-chip--11 { top: 30.0%; left:  6.3%; animation-delay: 4.0s; }   /* 10 o'clock - Chat met bron */

/* hide a few chips on narrow viewports to avoid clutter */
@media (max-width: 1180px) {
  .orb-chip--4, .orb-chip--10, .orb-chip--11 { display: none; }
}
@media (max-width: 960px) {
  .hero__visual {
    max-width: 500px;
    margin: 32px auto 0;
  }
}
@media (max-width: 640px) {
  .orb-chip { font-size: 10px; padding: 6px 10px 6px 8px; }
  .orb-chip__count { display: none; }
  .orb-chip--2, .orb-chip--6, .orb-chip--7, .orb-chip--9 { display: none; }
}

/* ============================================================
   ENTERPRISE POLISH - subtle refinements across sections
   ============================================================ */

/* widen all section content a bit & give breathing room on huge screens */
@media (min-width: 1400px) {
  .container { padding: 0 40px; }
}

/* tighten section dividers so they read as architectural hairlines, not lines */
.section { border-top-color: rgba(255, 255, 255, 0.04); }

/* eyebrow refinement: heavier mono caps, micro-tick before the label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow__dot {
  width: 14px;
  height: 1px;
  background: var(--accent);
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* hero meta: numbered prefix for an enterprise-reportlike feel */
.hero__meta div {
  position: relative;
}
.hero__meta div strong::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 2px;
}

/* make CTA buttons a touch more refined / enterprisey */
.btn--primary {
  background: var(--accent) !important;
  color: #0A0A0B !important;
  border: 1px solid var(--accent) !important;
  box-shadow: none !important;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.btn--primary:hover {
  background: #D6B687 !important;
  border-color: #D6B687 !important;
  transform: none !important;
  box-shadow: 0 0 0 4px rgba(91, 143, 255, 0.12) !important;
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent-line);
  background: rgba(91, 143, 255, 0.04);
  color: var(--white);
}

/* ============================================================
   ENTERPRISE DEPTH PASS v2 — break the flat-black monotony
   ============================================================ */

/* --- Body: cool-graphite vertical gradient + grain texture --- */
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91, 143, 255, 0.035), transparent 60%),
    linear-gradient(180deg, #0A0A0B 0%, #0B0C10 40%, #0A0B0E 100%) !important;
  background-attachment: fixed;
  position: relative;
}

/* SVG grain noise overlay — extremely subtle, fixed so it doesn't scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Architectural column markers — faint vertical hairlines at container edges,
   visible only on wide viewports. Reads as enterprise/blueprint not decoration. */
@media (min-width: 1100px) {
  body::after {
    content: "";
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    width: min(1320px, calc(100vw - 48px));
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(to right,
        rgba(255, 255, 255, 0.025) 0,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent calc(100% - 1px),
        rgba(255, 255, 255, 0.025) calc(100% - 1px),
        rgba(255, 255, 255, 0.025) 100%
      );
  }
}

/* Make sure all real content sits above the body grain layer */
.nav, main, footer { position: relative; z-index: 1; }


/* --- Section background tones: subtle variation between sections --- */
main { counter-reset: enterprise-section; background: transparent; }

/* Every standard section is transparent so body gradient/grain shows through */
.section {
  background: transparent !important;
  position: relative;
  counter-increment: enterprise-section;
}

/* Alt-sections: very subtle warm graphite wash + bronze spotlight top-right */
.section--alt {
  background:
    radial-gradient(ellipse 60% 80% at 90% 0%, rgba(91, 143, 255, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(20, 20, 26, 0.55) 0%, rgba(13, 14, 18, 0.55) 100%) !important;
}

/* New: cool-ink section variant for when a section needs to stand apart */
.section--ink {
  background:
    radial-gradient(ellipse 70% 70% at 10% 100%, rgba(80, 100, 140, 0.04), transparent 60%),
    linear-gradient(180deg, rgba(12, 14, 22, 0.7) 0%, rgba(10, 11, 16, 0.7) 100%) !important;
}


/* --- Section index marker: subtle "01 / EYEBROW" inline prefix (replaces giant numeral) --- */
.section__header { position: relative; }
.section__header::before { content: none; } /* nuke giant numeral */

/* Replace the hairline-above-eyebrow with an inline "01 /" prefix on the eyebrow itself */
.section__header .section__label::before {
  content: counter(enterprise-section, decimal-leading-zero) " /";
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0.85;
  /* override the previous hairline-style block rule */
  width: auto;
  height: auto;
  background: none;
  margin-bottom: 0;
}


/* --- Section header: bronze hairline above the eyebrow (replaced by inline section number above) --- */
.section__header .section__label,
.section__header .eyebrow {
  position: relative;
  display: inline-block;
}


/* --- Card depth: subtle "lit from above" inner top highlight on key cards --- */
.feature,
.case,
.prod-card,
.impact-card,
.pricing-card,
.trust-card,
.pricing-base,
.cta__card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 30%), var(--bg-elev) !important;
}
.feature::after,
.case::after,
.pricing-card::after,
.pricing-base::after {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
}

/* Featured pricing card: bronze top edge instead of white */
.pricing-card--featured::after {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
  height: 1px;
  top: -1px;
  left: 0; right: 0;
}
.pricing-card--featured {
  border-color: var(--accent-line) !important;
  background: linear-gradient(180deg, rgba(91, 143, 255, 0.04), transparent 40%), var(--bg-elev) !important;
}


/* --- Hero: ambient bronze spotlight + subtle vignette --- */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(91, 143, 255, 0.06), transparent 65%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(60, 80, 120, 0.04), transparent 60%) !important;
}


/* --- CTA card: bigger bronze ambient inside --- */
.cta__card {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(91, 143, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #14141A, #0F0F13) !important;
}


/* --- Trust grid: refined hover & subtle bronze tick on top --- */
.trust-card {
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.trust-card::before {
  content: "";
  position: absolute;
  top: 0; left: 18px;
  width: 18px; height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .2s;
}
.trust-card:hover {
  border-color: var(--accent-line);
  background: rgba(91, 143, 255, 0.02);
}
.trust-card:hover::before { opacity: 0.8; }


/* --- Eyebrow refinement: small mono index counter in front of label --- */
.section__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
}


/* --- Pricing-base: warm bronze accent ribbon top-right --- */
.pricing-base {
  position: relative;
  overflow: hidden;
}
.pricing-base::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  opacity: 0.6;
}


/* --- Hero meta: bronze marker is a vertical bar instead of a square (more refined) --- */
.hero__meta div strong::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 11px;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: -1px;
}


/* --- Footer: subtle bronze hairline at top to match section rhythm --- */
.footer {
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 1px;
  background: var(--accent);
  opacity: 0.4;
}


/* --- Reduce sticker visual noise on small viewports --- */
@media (max-width: 720px) {
  .section__header::before { font-size: 100px; opacity: 0.025; }
  body::after { display: none; }
}

/* ============================================================
   POST-DEPTH FIXES — caught from screenshot review
   ============================================================ */

/* Trust grid: 4 cards too cramped under 1100px - go to 2 cols sooner */
@media (max-width: 1100px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .trust-card { padding: 20px 22px; }
}
.trust-card strong {
  font-size: 14px;
  white-space: normal;
}

/* Card top highlight should not appear on cards that have other ::after uses */
.impact-card::after,
.prod-card::after,
.trust-card::after { display: none; }

/* Make the giant section numerals slightly more visible on mid screens */
@media (min-width: 720px) and (max-width: 1100px) {
  .section__header::before {
    font-size: clamp(120px, 22vw, 220px);
    color: rgba(255, 255, 255, 0.028);
  }
}

/* Pricing teaser on homepage: extra breathing room around the CTA */
#pricing-teaser .pricing-cta {
  margin-top: 8px;
}

/* Make sure orb visual has bottom margin when it stacks below copy */
@media (max-width: 960px) {
  .hero__visual {
    margin-top: 56px;
    margin-bottom: 24px;
  }
}

/* Section header: lift z-index of children explicitly so the giant numeral never
   blocks click on links inside headers (defensive) */
.section__header > * { position: relative; z-index: 1; }

/* Footer top hairline: only show when footer has dark background contrast */
.footer { padding-top: clamp(60px, 7vw, 90px); }

/* Backgrounds: also apply alt wash to .impact + .cta when they need depth */
.impact { background: transparent; }
.cta { background: transparent; }

/* ============================================================
   PREMIUM POLISH PASS — buttons, links, micro-interactions
   ============================================================ */

/* --- Selection: bronze tint that matches brand --- */
::selection { background: rgba(91, 143, 255, 0.28); color: var(--white); }

/* --- Focus ring: refined double-ring (offset hairline + bronze halo) --- */
:focus-visible {
  outline: 1px solid var(--accent) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(91, 143, 255, 0.10);
  transition: box-shadow .15s, outline-offset .15s;
}

/* --- Buttons: premium foundation --- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background .22s cubic-bezier(.4, 0, .2, 1),
    color .22s cubic-bezier(.4, 0, .2, 1),
    border-color .22s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    transform .25s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.995); transition-duration: .08s; }

/* Arrow icon in buttons — micro-slide on hover */
.btn svg {
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  flex-shrink: 0;
}
.btn:hover svg { transform: translateX(3px); }
.btn:active svg { transform: translateX(2px); }

/* --- Primary button: bronze with inner-light shimmer on hover --- */
.btn--primary {
  background: var(--accent) !important;
  color: #0A0A0B !important;
  border: 1px solid var(--accent) !important;
  /* inner top highlight + subtle inset to feel "lit" */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 1px 0 rgba(0, 0, 0, 0.30) !important;
}
.btn--primary::before {
  /* top sheen overlay, hidden until hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.btn--primary > * { position: relative; z-index: 1; }
.btn--primary:hover {
  background: #D6B687 !important;
  border-color: #D6B687 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 6px 22px rgba(91, 143, 255, 0.18),
    0 0 0 4px rgba(91, 143, 255, 0.08) !important;
  transform: translateY(-1px);
}
.btn--primary:hover::before { opacity: 1; }

/* --- Ghost button: bronze hairline accent on hover, no fill flash --- */
.btn--ghost {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}
.btn--ghost::after {
  /* bronze underline that draws in on hover */
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  opacity: 0.55;
  pointer-events: none;
}
.btn--ghost:hover {
  border-color: var(--accent-line) !important;
  background: rgba(91, 143, 255, 0.035) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}
.btn--ghost:hover::after { transform: scaleX(1); }

/* --- Light ghost (on dark CTA cards) --- */
.btn--ghost-light:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.32) !important; }

/* --- Inline anchor links inside prose: animated bronze underline --- */
.lede a:not(.btn),
.muted a:not(.btn),
p a:not(.btn):not(.brand) {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: color .2s, background-size .25s cubic-bezier(.4, 0, .2, 1);
  padding-bottom: 1px;
}
p a:not(.btn):not(.brand):hover,
.lede a:not(.btn):hover,
.muted a:not(.btn):hover { color: var(--white); background-size: 100% 2px; }

/* --- Eyebrow dot: subtle bronze "live" pulse --- */
@keyframes eyebrow-pulse {
  0%, 100% { opacity: 0.55; transform: scaleX(1); }
  50%      { opacity: 1;    transform: scaleX(1.25); }
}
.eyebrow__dot {
  transform-origin: left center;
  animation: eyebrow-pulse 3.6s ease-in-out infinite;
}

/* --- Cards: refined hover lift + bronze hairline reveal at top edge --- */
.feature, .case, .pricing-card, .impact-card, .prod-card, .trust-card, .cta__card {
  transition:
    border-color .25s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    background .25s cubic-bezier(.4, 0, .2, 1);
}
.feature:hover, .case:hover, .pricing-card:hover, .prod-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 143, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(91, 143, 255, 0.04);
}

/* --- Nav links: refined bronze underline on hover --- */
.nav__links a {
  position: relative;
  transition: color .18s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { transform: scaleX(0.6); }

/* --- Display headings: subtle text-shadow that reads as "ink on paper" --- */
.display, .h2 {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* --- Display accent (bronze words): refined warm glow --- */
.display__accent {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 0 30px rgba(91, 143, 255, 0.10);
}

/* --- Breadcrumb: subtle hover bronze --- */
.breadcrumb a { transition: color .18s; }
.breadcrumb a:hover { color: var(--accent); }

/* --- Trust card: refined hover (no jump, just border + tint) --- */
.trust-card {
  cursor: default;
}
.trust-card:hover {
  transform: none;
  background: rgba(91, 143, 255, 0.025);
  border-color: rgba(91, 143, 255, 0.20);
}

/* --- Pricing card: subtle premium polish --- */
.pricing-card--featured {
  position: relative;
}
.pricing-card--featured::after {
  /* permanent inner bronze glow, very subtle */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(91, 143, 255, 0.18);
  opacity: 1 !important;
  background: none !important;
}

/* --- Forms (contact page, anywhere): premium input styling --- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  transition: border-color .2s, background .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 143, 255, 0.10) !important;
  background: rgba(91, 143, 255, 0.02) !important;
}

/* --- Reduce motion for users who prefer it --- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .btn::before, .btn::after,
  .feature, .case, .pricing-card, .prod-card, .impact-card, .trust-card,
  .nav__links a::after, .eyebrow__dot {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   PROBLEM SECTION - "Generieke AI" lost-signal visual
   ========================================================= */
.chaos--lost {
  background: radial-gradient(120% 100% at 50% 50%, rgba(248,113,113,0.04), transparent 60%), var(--bg-elev);
  border-color: rgba(248,113,113,0.18);
}
.chaos--lost .chaos__label {
  color: rgba(248,113,113,0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@keyframes lost-cursor-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.lost-cursor { animation: lost-cursor-blink 1.1s steps(1) infinite; }

@keyframes lost-pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(1.0); opacity: 0; }
}
.lost-pulse { transform-origin: center; transform-box: fill-box; animation: lost-pulse-ring 2.6s ease-out infinite; }

@keyframes lost-signal-fade {
  0%, 18%   { opacity: 0; }
  30%       { opacity: 0.7; }
  55%       { opacity: 0.7; }
  70%, 100% { opacity: 0.05; }
}
.lost-signal { stroke-dashoffset: 0; animation: lost-signal-fade 3.2s ease-in-out infinite; }
.lost-signal--1 { animation-delay: 0s; }
.lost-signal--2 { animation-delay: 0.45s; }
.lost-signal--3 { animation-delay: 0.9s; }
.lost-signal--4 { animation-delay: 1.35s; }
.lost-signal--5 { animation-delay: 1.8s; }
.lost-signal--6 { animation-delay: 2.25s; }

@media (prefers-reduced-motion: reduce) {
  .lost-cursor, .lost-pulse, .lost-signal { animation: none; opacity: 0.5; }
}