/* ============================================================
   LaunchYourSite — Color Tokens
   Dark-first, not dark-only. Clean neutral light sections create
   rhythm. Headings on dark are neutral near-white (never cream/
   beige). Electric green is an accent, never a section fill.
   ============================================================ */

:root {
  /* ---- Core brand ---- */
  --lys-green: #03FF6C;            /* primary interactive accent */
  --lys-green-hover: #28FF82;      /* brighter hover/focus accent */
  --lys-bg-deep: #001610;          /* primary dark background (green-black) */
  --lys-bg-deepest: #000C08;       /* footer, showcases, high-contrast areas */
  --lys-surface-dark: #003D2E;     /* cards, nav, bento, layered elements */
  --lys-glass-dark: rgba(0, 35, 27, 0.72);  /* floating cards, mockups, panels */

  /* ---- Light / inverted ---- */
  --lys-cream: #F4F7F5;            /* primary light section background (clean green-white) */
  --lys-cream-soft: #EAF0EC;       /* alternating light sections, FAQ, process */
  --lys-white: #FFFFFF;            /* selective cards/forms in light sections */

  /* ---- Text ---- */
  --lys-text-primary: #F5F7F6;             /* headlines on dark — neutral near-white */
  --lys-text-secondary: #B7C2BC;           /* body/supporting on dark */
  --lys-text-muted: #7F9188;               /* captions, labels on dark */
  --lys-text-on-light: #001610;            /* headings on light */
  --lys-text-body-light: #42534B;          /* body copy on light */
  --lys-text-muted-light: #5E6F66;         /* secondary copy / labels on light */

  /* ---- Borders ---- */
  --lys-border-dark: rgba(180, 193, 184, 0.16);
  --lys-border-dark-strong: rgba(180, 193, 184, 0.28);
  --lys-border-dark-accent: rgba(3, 255, 108, 0.38);
  --lys-border-light: rgba(0, 22, 16, 0.14);
  --lys-border-light-strong: rgba(0, 22, 16, 0.22);
  --lys-border-light-accent: rgba(0, 61, 46, 0.38);

  /* ---- Functional ---- */
  --lys-success: #03FF6C;
  --lys-warning: #ECA72C;
  --lys-error: #FF5D66;
  --lys-info: #4CB8FF;

  /* ---- Semantic aliases — DARK theme (default) ---- */
  --surface-page: var(--lys-bg-deep);
  --surface-1: rgba(0, 61, 46, 0.30);   /* supporting surfaces */
  --surface-2: var(--lys-glass-dark);   /* primary cards/panels */
  --surface-3: rgba(0, 22, 16, 0.90);   /* mockups, floating UI */
  --text-strong: var(--lys-text-primary);
  --text-body: var(--lys-text-secondary);
  --text-soft: var(--lys-text-muted);
  --border-default: var(--lys-border-dark);
  --border-strong: var(--lys-border-dark-strong);
  --border-accent: var(--lys-border-dark-accent);
  --accent: var(--lys-green);
  --accent-hover: var(--lys-green-hover);
  --accent-ink: var(--lys-bg-deep);     /* text/icon sitting on the green accent */
}

/* ---- Semantic aliases — LIGHT / inverted theme ---- */
.lys-theme-light,
[data-theme="light"] {
  --surface-page: var(--lys-cream);
  --surface-1: rgba(255, 255, 255, 0.50);
  --surface-2: var(--lys-white);
  --surface-3: var(--lys-white);
  --text-strong: var(--lys-text-on-light);
  --text-body: var(--lys-text-body-light);
  --text-soft: var(--lys-text-muted-light);
  --border-default: var(--lys-border-light);
  --border-strong: var(--lys-border-light-strong);
  --border-accent: var(--lys-border-light-accent);
  --accent: var(--lys-green);
  --accent-hover: var(--lys-green-hover);
  --accent-ink: var(--lys-bg-deep);
}
/* ============================================================
   LaunchYourSite — Typography Tokens
   Display: Manrope · Body/UI: Inter · Technical: JetBrains Mono
   Headlines communicate outcomes, not software. Highlight only
   selected words in green — never whole headlines or paragraphs.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind other */
  --fw-medium: 500;    /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold: 700;      /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* ---- Fluid display scale (Manrope) ---- */
  --type-hero: clamp(56px, 6vw, 104px);
  --type-page-title: clamp(48px, 5vw, 80px);
  --type-section-title: clamp(36px, 4vw, 64px);
  --type-subsection: clamp(28px, 2.6vw, 40px);

  /* ---- Card / body steps ---- */
  --type-card-title-lg: clamp(24px, 2vw, 30px);
  --type-card-title: clamp(18px, 1.4vw, 22px);
  --type-body-lg: clamp(18px, 1.2vw, 21px);
  --type-body: clamp(16px, 1vw, 18px);
  --type-body-sm: 14px;
  --type-caption: 13px;
  --type-label: clamp(11px, 0.8vw, 13px);
  --type-code: 13px;

  /* ---- Line heights ---- */
  --lh-hero: 0.95;   /* @kind other */
  --lh-title: 1.05;  /* @kind other */
  --lh-tight: 1.1;   /* @kind other */
  --lh-snug: 1.25;   /* @kind other */
  --lh-body: 1.65;   /* @kind other */
  --lh-label: 1.4;   /* @kind other */

  /* ---- Tracking ---- */
  --tracking-display: -0.055em; /* @kind other */
  --tracking-page: -0.045em;    /* @kind other */
  --tracking-section: -0.04em;  /* @kind other */
  --tracking-tight: -0.025em;   /* @kind other */
  --tracking-normal: 0;        /* @kind other */
  --tracking-label: 0.14em;    /* @kind other */
}
/* ============================================================
   LaunchYourSite — Spacing, Radius & Layout Tokens
   Base unit 8px. Whitespace is a premium element — don't compress.
   ============================================================ */

:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---- Semantic spacing ---- */
  --pad-component: var(--space-5);   /* 16–24px component padding */
  --pad-card: var(--space-6);        /* 24–36px card padding */
  --gap-grid: 20px;                  /* 14–24px grid gap */
  --section-header-gap: var(--space-7);
  --section-y-desktop: clamp(96px, 11vw, 180px); /* @kind spacing */
  --section-y-mobile: clamp(64px, 14vw, 88px); /* @kind spacing */

  /* ---- Layout ---- */
  --container-max: 1440px;
  --wide-max: 1600px;
  --side-pad-desktop: clamp(32px, 4vw, 48px);
  --side-pad-mobile: 20px;
  --measure: 64ch;   /* readable line length 45–70 chars */

  /* ---- Border radius ---- */
  --radius-xs: 6px;     /* badges, icon containers, small controls */
  --radius-sm: 10px;    /* inputs, compact buttons */
  --radius-md: 14px;    /* primary buttons, small cards */
  --radius-lg: 18px;    /* standard cards */
  --radius-xl: 24px;    /* bento cards, project panels */
  --radius-2xl: 32px;   /* major visual containers, browser frames */
  --radius-pill: 999px; /* status indicators, intentional pills only */

  /* ---- Border widths ---- */
  --border-hairline: 1px;
}
/* ============================================================
   LaunchYourSite — Elevation, Shadow & Motion Tokens
   Elevation = background contrast + translucent surfaces +
   subtle borders + restrained shadows. Glow is restraint, not
   hierarchy. Motion is refined and controlled.
   ============================================================ */

:root {
  /* ---- Dark theme shadows ---- */
  --shadow-dark-1: 0 1px 0 rgba(252, 248, 213, 0.04) inset,
                   0 8px 24px rgba(0, 8, 5, 0.40);
  --shadow-dark-2: 0 1px 0 rgba(252, 248, 213, 0.05) inset,
                   0 18px 50px rgba(0, 8, 5, 0.55);
  --shadow-dark-float: 0 1px 0 rgba(252, 248, 213, 0.06) inset,
                       0 30px 80px rgba(0, 6, 4, 0.65);

  /* ---- Light theme shadows (soft, neutral — no green edges) ---- */
  --shadow-light-1: 0 1px 2px rgba(0, 22, 16, 0.05),
                    0 6px 18px rgba(0, 22, 16, 0.06);
  --shadow-light-2: 0 2px 4px rgba(0, 22, 16, 0.06),
                    0 14px 40px rgba(0, 22, 16, 0.10);

  /* ---- Restrained accent glow (use sparingly) ---- */
  --glow-accent-soft: 0 0 0 1px rgba(3, 255, 108, 0.22),
                      0 8px 30px rgba(3, 255, 108, 0.14);
  --glow-accent-strong: 0 0 0 1px rgba(3, 255, 108, 0.40),
                        0 10px 40px rgba(3, 255, 108, 0.22);

  /* ---- Radial / ambient lighting ---- */
  --radial-emerald: radial-gradient(120% 120% at 50% 0%,
                    rgba(0, 61, 46, 0.55) 0%, rgba(0, 22, 16, 0) 60%); /* @kind other */

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-ui: 170ms;        /* @kind other */ /* UI feedback 140–200ms */
  --dur-standard: 280ms;  /* @kind other */ /* standard transitions 240–320ms */
  --dur-reveal: 640ms;    /* @kind other */ /* section reveals 500–800ms */
  --dur-ambient: 14s;     /* @kind other */ /* ambient loops 8–20s */
}
/* ============================================================
   LaunchYourSite — Base Layer
   Resets, document defaults, theme-section helpers and a few
   editorial type utilities built on the tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--lys-green); color: var(--lys-bg-deep); }

:focus-visible {
  outline: 2px solid var(--lys-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Theme section wrappers ---- */
.lys-section-dark {
  background: var(--lys-bg-deep);
  color: var(--lys-text-secondary);
}
.lys-section-light {
  background: var(--lys-cream);
  color: var(--lys-text-on-light);
}
.lys-section-light-soft {
  background: var(--lys-cream-soft);
  color: var(--lys-text-on-light);
}
.lys-section-deepest {
  background: var(--lys-bg-deepest);
  color: var(--lys-text-secondary);
}
/* light sections re-map semantic aliases */
.lys-section-light, .lys-section-light-soft { color-scheme: light; }
.lys-section-light, .lys-section-light-soft {
  --surface-page: var(--lys-cream);
  --surface-1: rgba(255, 255, 255, 0.50);
  --surface-2: var(--lys-white);
  --surface-3: var(--lys-white);
  --text-strong: var(--lys-text-on-light);
  --text-body: var(--lys-text-body-light);
  --text-soft: var(--lys-text-muted-light);
  --border-default: var(--lys-border-light);
  --border-strong: var(--lys-border-light-strong);
  --border-accent: var(--lys-border-light-accent);
}

/* ---- Layout helpers ---- */
.lys-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--side-pad-desktop);
}
@media (max-width: 640px) {
  .lys-container { padding-inline: var(--side-pad-mobile); }
}

/* ---- Editorial type utilities ---- */
.lys-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: var(--lh-label);
  color: var(--accent);
}
.lys-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 6.75rem);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.lys-section-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: var(--tracking-section);
  color: var(--text-strong);
}
.lys-lede {
  font-size: var(--type-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: var(--measure);
}
/* highlight a single word in accent green */
.lys-accent { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   LaunchYourSite — Component Styles
   Class-based styling for the React primitives. Works in both
   themes via the semantic aliases set on .lys-section-light.
   ============================================================ */

/* ---------------- Button ---------------- */
.lys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0 28px;
  height: 54px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-ui) var(--ease-brand),
              background-color var(--dur-ui) var(--ease-brand),
              border-color var(--dur-ui) var(--ease-brand),
              box-shadow var(--dur-ui) var(--ease-brand);
  white-space: nowrap;
}
.lys-btn:disabled, .lys-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.lys-btn--sm { height: 44px; font-size: 15px; padding: 0 20px; }
.lys-btn--lg { height: 58px; font-size: 17px; padding: 0 34px; }

.lys-btn__arrow { transition: transform var(--dur-ui) var(--ease-brand); }
.lys-btn:hover .lys-btn__arrow { transform: translateX(4px); }

/* primary — electric green */
.lys-btn--primary {
  background: var(--lys-green);
  color: var(--lys-bg-deep);
}
.lys-btn--primary:hover {
  background: var(--lys-green-hover);
  transform: translateY(-2px);
  box-shadow: var(--glow-accent-soft);
}
/* secondary — adapts to theme */
.lys-btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.lys-btn--secondary:hover {
  border-color: var(--border-accent);
  background: rgba(3, 255, 108, 0.06);
  transform: translateY(-2px);
}
/* ghost / text link */
.lys-btn--ghost {
  background: transparent;
  color: var(--accent);
  padding: 0 6px;
  height: auto;
  border-radius: var(--radius-xs);
}
.lys-btn--ghost:hover { color: var(--accent-hover); }
.lys-section-light .lys-btn--ghost,
[data-theme="light"] .lys-btn--ghost { color: var(--lys-border-light-accent); }

/* ---------------- Card ---------------- */
.lys-card {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--pad-card);
  transition: transform var(--dur-standard) var(--ease-brand),
              border-color var(--dur-standard) var(--ease-brand),
              box-shadow var(--dur-standard) var(--ease-brand);
}
.lys-section-light .lys-card,
[data-theme="light"] .lys-card { box-shadow: var(--shadow-light-1); }
.lys-card--interactive { cursor: pointer; }
.lys-card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.lys-section-light .lys-card--interactive:hover,
[data-theme="light"] .lys-card--interactive:hover { box-shadow: var(--shadow-light-2); }
.lys-card--glow { box-shadow: var(--glow-accent-soft); border-color: var(--border-accent); }

/* ---------------- Badge ---------------- */
.lys-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-default);
  background: var(--surface-1);
  color: var(--text-body);
}
.lys-badge__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.lys-badge--accent { color: var(--lys-green); border-color: var(--lys-border-dark-accent); background: rgba(3,255,108,0.10); }
.lys-badge--recommended {
  background: var(--lys-green); color: var(--lys-bg-deep);
  border-color: transparent; border-radius: var(--radius-pill);
}
.lys-badge--warning { color: var(--lys-warning); border-color: rgba(236,167,44,0.4); background: rgba(236,167,44,0.10); }
.lys-badge--error { color: var(--lys-error); border-color: rgba(255,93,102,0.4); background: rgba(255,93,102,0.10); }
.lys-badge--info { color: var(--lys-info); border-color: rgba(76,184,255,0.4); background: rgba(76,184,255,0.10); }

/* ---------------- Tag / chip ---------------- */
.lys-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-default);
  background: var(--surface-1);
  color: var(--text-body);
}
.lys-tag--pill { border-radius: var(--radius-pill); }

/* ---------------- Avatar ---------------- */
.lys-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--lys-surface-dark);
  color: var(--lys-text-primary);
  font-family: var(--font-display); font-weight: 700;
  border: 1px solid var(--border-default);
  overflow: hidden;
}
.lys-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Input ---------------- */
.lys-field { display: flex; flex-direction: column; gap: 8px; }
.lys-field__label {
  font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.lys-input {
  height: 54px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-strong);
  transition: border-color var(--dur-ui) var(--ease-brand), box-shadow var(--dur-ui) var(--ease-brand);
  width: 100%;
}
.lys-input::placeholder { color: var(--text-soft); }
.lys-input:focus {
  outline: none;
  border-color: var(--lys-green);
  box-shadow: 0 0 0 3px rgba(3, 255, 108, 0.18);
}
textarea.lys-input { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.6; }

/* ---------------- Checkbox ---------------- */
.lys-check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; color: var(--text-body); min-height: 44px; }
.lys-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lys-check__box {
  width: 24px; height: 24px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  transition: background var(--dur-ui) var(--ease-brand), border-color var(--dur-ui) var(--ease-brand);
  flex: none;
}
.lys-check__box svg { opacity: 0; transition: opacity var(--dur-ui) var(--ease-brand); color: var(--lys-bg-deep); }
.lys-check input:checked + .lys-check__box { background: var(--lys-green); border-color: var(--lys-green); }
.lys-check input:checked + .lys-check__box svg { opacity: 1; }
.lys-check input:focus-visible + .lys-check__box { box-shadow: 0 0 0 3px rgba(3,255,108,0.3); }

/* ---------------- Switch ---------------- */
.lys-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.lys-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lys-switch__track {
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  position: relative; transition: background var(--dur-ui) var(--ease-brand), border-color var(--dur-ui) var(--ease-brand);
  flex: none;
}
.lys-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 999px; background: var(--text-soft);
  transition: transform var(--dur-ui) var(--ease-brand), background var(--dur-ui) var(--ease-brand);
}
.lys-switch input:checked + .lys-switch__track { background: var(--lys-green); border-color: var(--lys-green); }
.lys-switch input:checked + .lys-switch__track .lys-switch__thumb { transform: translateX(20px); background: var(--lys-bg-deep); }
.lys-switch input:focus-visible + .lys-switch__track { box-shadow: 0 0 0 3px rgba(3,255,108,0.3); }

/* ---------------- Eyebrow ---------------- */
.lys-eyebrow-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--type-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent);
}
.lys-eyebrow-label::before { content: ""; width: 18px; height: 1px; background: currentColor; display: inline-block; }
.lys-eyebrow-label--bare::before { display: none; }

/* ---------------- FAQ item ---------------- */
.lys-faq { border-bottom: 1px solid var(--border-default); }
.lys-faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-strong);
}
.lys-faq summary::-webkit-details-marker { display: none; }
.lys-faq__icon { flex: none; transition: transform var(--dur-standard) var(--ease-brand); color: var(--accent); }
.lys-faq[open] .lys-faq__icon { transform: rotate(45deg); }
.lys-faq__body { padding: 0 0 22px; color: var(--text-body); font-size: 16px; line-height: 1.65; max-width: 60ch; }

/* ---------------- Process step ---------------- */
.lys-step { display: flex; gap: 18px; align-items: flex-start; }
.lys-step__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: var(--lys-bg-deep); background: var(--lys-green);
  width: 34px; height: 34px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.lys-step--muted .lys-step__num { background: var(--surface-1); color: var(--text-soft); border: 1px solid var(--border-default); }
.lys-step__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-strong); margin: 4px 0 6px; }
.lys-step__desc { color: var(--text-body); font-size: 15px; line-height: 1.6; max-width: 42ch; }
/* LaunchYourSite — website UI kit layout (kit-specific; primitives live in components.css) */

.site { background: var(--lys-bg-deep); min-height: 100vh; overflow-x: clip; }
.wrap { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: 40px; }
@media (max-width: 720px){ .wrap { padding-inline: 20px; } }

section { position: relative; }
section[id] { scroll-margin-top: 100px; }
.sec-pad { padding-block: clamp(72px, 10vw, 150px); }
.sec-pad-sm { padding-block: clamp(56px, 7vw, 96px); }

/* ---- Nav ---- */
.nav { position: sticky; top: 0; z-index: 50; margin-top: 0; padding-top: 0; transition: padding-top .28s var(--ease-brand); }
.nav--scrolled { padding-top: 14px; }
/* default (page top) — full-width, transparent, flush */
.nav__inner {
  display: flex; align-items: center; gap: 24px;
  background: transparent; backdrop-filter: none;
  border: 1px solid transparent; border-radius: 0;
  padding: 14px 0; height: 88px;
  transition: background .28s var(--ease-brand), backdrop-filter .28s var(--ease-brand),
              border-color .28s var(--ease-brand), border-radius .28s var(--ease-brand),
              padding .28s var(--ease-brand), height .28s var(--ease-brand);
}
/* scrolled — compact glassy floating pill (the previous look) */
.nav--scrolled .nav__inner {
  background: rgba(0, 22, 16, 0.72); backdrop-filter: blur(18px);
  border-color: var(--lys-border-dark); border-radius: 20px;
  padding: 12px 14px 12px 22px; height: 72px;
}
@media (prefers-reduced-motion: reduce){ .nav, .nav__inner { transition: none; } }
.nav__logo { height: 34px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 28px; margin-left: 12px; }
.nav__links a { color: var(--lys-text-secondary); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s var(--ease-brand); cursor: pointer; white-space: nowrap; }
.nav__links a:hover { color: var(--lys-text-primary); }
.nav__spacer { flex: 1; }
/* dropdown (Projecten) — opent op hover én keyboard-focus */
.nav__dd { position: relative; display: inline-flex; align-items: center; }
.nav__dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font-family: inherit; font-size: 15px; font-weight: 500; line-height: inherit; color: var(--lys-text-secondary); cursor: pointer; white-space: nowrap; transition: color .15s var(--ease-brand); }
.nav__dd-btn svg { transform: rotate(90deg); transition: transform .25s var(--ease-brand); }
.nav__dd:hover .nav__dd-btn, .nav__dd:focus-within .nav__dd-btn { color: var(--lys-text-primary); }
.nav__dd:hover .nav__dd-btn svg, .nav__dd:focus-within .nav__dd-btn svg { transform: rotate(-90deg); }
.nav__dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; pointer-events: none; z-index: 5; }
.nav__dd-panel { min-width: 248px; padding: 8px; border-radius: 14px; background: var(--lys-glass-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--lys-border-dark); box-shadow: 0 24px 60px rgba(0,8,5,.5); opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease-brand), transform .22s var(--ease-brand); }
.nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu { pointer-events: auto; }
.nav__dd:hover .nav__dd-panel, .nav__dd:focus-within .nav__dd-panel { opacity: 1; transform: none; }
.nav__dd-panel a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 10px; text-decoration: none; cursor: pointer; transition: background .15s var(--ease-brand); }
.nav__dd-panel a:hover, .nav__dd-panel a:focus-visible { background: rgba(3,255,108,.08); }
.nav__dd-panel a b { font-size: 14.5px; font-weight: 600; color: var(--lys-text-primary); white-space: nowrap; }
.nav__dd-panel a small { font-size: 12px; color: var(--lys-text-muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce){ .nav__dd-panel, .nav__dd-btn svg { transition: none; } }

.nav__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--lys-text-secondary); white-space: nowrap; flex: none; }
.nav__status .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--lys-green); box-shadow: 0 0 0 0 rgba(3,255,108,.5); animation: pulse 2.4s var(--ease-brand) infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(3,255,108,.5);} 70%{ box-shadow:0 0 0 8px rgba(3,255,108,0);} 100%{ box-shadow:0 0 0 0 rgba(3,255,108,0);} }
.nav__burger { display: none; background: none; border: 1px solid var(--lys-border-dark); border-radius: 10px; color: var(--lys-text-primary); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 1240px){ .nav__status { display: none; } }
@media (max-width: 1120px){ .nav__links { gap: 18px; } .nav__logo { height: 30px; } }
@media (max-width: 1000px){
  .nav__inner { position: relative; }
  .nav__links, .nav__status, .nav__cta { display: none; }
  /* centered logo, burger always visible on the right */
  .nav__brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .nav__logo { height: 32px; }
  .nav__burger { display: inline-flex; margin-left: auto; }
}

/* ===== Mobile menu (overlay sheet — floats over the page, never pushes it) ===== */
/* keep the pill above the sheet/scrim inside the header's stacking context */
.nav > .wrap { position: relative; z-index: 3; }
.m-scrim {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(0, 8, 5, 0.55); backdrop-filter: blur(3px);
  animation: mScrim .22s var(--ease-brand);
}
.m-sheet {
  position: fixed; top: 94px; left: 16px; right: 16px; z-index: 2;
  max-height: calc(100dvh - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: rgba(0, 18, 13, 0.92); backdrop-filter: blur(22px);
  border: 1px solid var(--lys-border-dark-strong); border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 8, 5, 0.55);
  animation: mSheet .28s var(--ease-brand);
}
.m-sheet__list { display: flex; flex-direction: column; gap: 8px; }
.m-item {
  display: flex; align-items: center; gap: 13px; padding: 12px 13px;
  border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--lys-border-dark);
  transition: background .16s var(--ease-brand), border-color .16s var(--ease-brand), transform .12s var(--ease-brand);
}
.m-item:hover { background: rgba(3, 255, 108, 0.06); border-color: var(--lys-border-dark-accent); }
.m-item:active { transform: scale(0.99); }
.m-item__ic {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lys-green); background: rgba(3, 255, 108, 0.10); border: 1px solid var(--lys-border-dark-accent);
}
.m-item__body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.m-item__body b { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--lys-text-primary); }
.m-item__body small { font-size: 12.5px; color: var(--lys-text-muted); }
.m-item__arrow { display: flex; flex: none; color: var(--lys-text-muted); }
.m-cta {
  margin-top: 2px; padding: 16px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, rgba(3, 255, 108, 0.08), rgba(0, 12, 8, 0.25));
  border: 1px solid var(--lys-border-dark-accent);
}
.m-cta__head { display: flex; align-items: center; gap: 12px; }
.m-cta__ic {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lys-green); background: rgba(3, 255, 108, 0.12); border: 1px solid var(--lys-border-dark-accent);
}
.m-cta__txt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--lys-text-primary); letter-spacing: -.01em; }
.m-cta__txt small { display: block; font-size: 12.5px; color: var(--lys-text-secondary); margin-top: 2px; }
.m-cta .lys-btn { width: 100%; justify-content: center; }
@keyframes mScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes mSheet { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .m-scrim, .m-sheet { animation: none; } }
@media (min-width: 1001px){ .m-scrim, .m-sheet { display: none; } }

/* ---- Hero ---- */
.hero { position: relative; padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(64px,8vw,120px); }
.hero::before { content:""; position:absolute; inset:-120px 0 auto 0; height: 620px; background: var(--radial-emerald); pointer-events:none; z-index:0; }
.hero__grid { position:absolute; inset:0; background-image: linear-gradient(rgba(180,193,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(180,193,184,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); pointer-events:none; z-index:0; }

/* ===== Ambient emerald depth (secties 1-3) — gloed met diepte/overflow i.p.v. vlak groen ===== */
.sec-aura {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3,255,108,.12), transparent 72%);
  filter: blur(28px);
}
#diensten, #projecten { position: relative; overflow-x: clip; }
#diensten > .wrap, #projecten > .wrap { position: relative; z-index: 1; }
/* aura's bloeden verticaal over de sectiegrens voor continue diepte, afwisselende kant */
.sec-aura--bento { top: 70px; left: 0; right: 0; margin-inline: auto; width: min(760px, 64%); height: 540px; }
.sec-aura--work { bottom: -90px; right: 0; width: min(680px, 58%); height: 560px; }
@media (prefers-reduced-motion: no-preference){
  .sec-aura { animation: secAura 10s var(--ease-brand) infinite; }
  .hero::before { animation: secAura 11s var(--ease-brand) infinite; transform-origin: 50% 0; }
}
@keyframes secAura { 0%,100% { opacity:.6; transform: scale(1); } 50% { opacity:1; transform: scale(1.07); } }
.hero__row { position: relative; z-index:1; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 980px){ .hero__row { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { font-family: var(--font-display); font-weight: 750; font-size: clamp(2.5rem, 7vw, 4rem); line-height: .98; letter-spacing: -.055em; color: var(--lys-text-primary); margin: 22px 0 0; text-wrap: balance; }
.hero h1 .g { color: var(--lys-green); }
.hero__lede { font-size: clamp(17px,1.4vw,20px); line-height: 1.65; color: var(--lys-text-secondary); max-width: 46ch; margin: 24px 0 32px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta { display:flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.hero__meta .m { display:flex; flex-direction:column; gap: 4px; }
.hero__meta .m b { font-family: var(--font-display); font-size: 15px; color: var(--lys-text-primary); }
.hero__meta .m span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lys-text-muted); }

/* ---- Hero trust marquee ---- */
.hero__marquee { margin-top: clamp(54px, 7vw, 96px); }
.hero__marquee-title { display:block; font-family: var(--font-mono); font-size: 12px; font-weight:500; letter-spacing: .16em; text-transform: uppercase; color: var(--lys-text-muted); margin: 0 0 24px; }
.hero__marquee-track {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.hero__marquee-row { display:flex; align-items:center; gap: clamp(16px, 1.8vw, 26px); width: max-content; animation: heroMarquee 42s linear infinite; }
.hero__chip {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  height: 64px; padding: 0 28px;
}
.hero__chip img { height: 32px; width:auto; max-width: 180px; object-fit: contain; display:block; filter: brightness(0) invert(1); opacity: 0.7; transition: opacity .2s ease; }
.hero__chip:hover img { opacity: 1; }
@keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hero__marquee-row { animation: none; flex-wrap: wrap; gap: 16px; }
  .hero__marquee-track { -webkit-mask-image: none; mask-image: none; }
}

/* ---- Browser mockup ---- */
.mock { border-radius: 18px; overflow: hidden; border: 1px solid var(--lys-border-dark-strong); background: var(--lys-bg-deepest); box-shadow: var(--shadow-dark-float); }
.mock__bar { display:flex; align-items:center; gap: 8px; padding: 12px 14px; background: rgba(0,22,16,.9); border-bottom: 1px solid var(--lys-border-dark); }
.mock__dot { width: 11px; height: 11px; border-radius: 999px; background: rgba(180,193,184,.28); }
.mock__url { margin-left: 10px; flex:1; height: 26px; border-radius: 7px; background: rgba(180,193,184,.08); display:flex; align-items:center; gap:8px; padding: 0 12px; font-family: var(--font-mono); font-size: 12px; color: var(--lys-text-muted); }
.mock__body { padding: 0; }
.mock__float { position:absolute; display:inline-flex; align-items:center; gap:8px; background: rgba(0,22,16,.82); backdrop-filter: blur(10px); border:1px solid var(--lys-border-dark-accent); border-radius: 12px; padding: 9px 13px; font-family: var(--font-mono); font-size: 12px; color: var(--lys-text-primary); box-shadow: var(--shadow-dark-2); }
.mock__float .ic { color: var(--lys-green); display:inline-flex; }
.hero__visual { position: relative; }

/* ---- Section heading block ---- */
.sec-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head h2 { font-family: var(--font-display); font-weight: 720; font-size: clamp(2.25rem,4vw,4rem); line-height: 1.05; letter-spacing: -.04em; margin: 16px 0 0; color: var(--text-strong); text-wrap: balance; }
.sec-head h2 .g { color: var(--lys-green); }
.sec-head p { font-size: 18px; line-height: 1.6; color: var(--text-body); margin: 18px 0 0; max-width: 56ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center p { margin-inline: auto; }

/* ---- Bento (3-up editorial grid) ---- */
.bento-head { max-width: 780px; }
.bento-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lys-green); padding:7px 14px; border-radius:999px; border:1px solid var(--lys-border-dark-accent); background:rgba(3,255,108,.06); }
.bento-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--lys-green); box-shadow:0 0 8px rgba(3,255,108,.7); }

.bento3 { display:flex; flex-direction:column; gap:18px; }
.brow { display:grid; gap:18px; }
.brow--3 { grid-template-columns: repeat(3, 1fr); }
.brow--r3 { grid-template-columns: 0.92fr 1.78fr; }
@media (max-width: 820px){ .brow--3, .brow--r3 { grid-template-columns: 1fr; } }

.feat-card, .qc-card, .integ-card { height:100%; }
.svc__ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(3,255,108,.1); border:1px solid var(--lys-border-dark-accent); color: var(--lys-green); display:inline-flex; align-items:center; justify-content:center; flex:none; }

/* feature card (row 1) — copy overlaid left, mockup contained on the right */
.feat-card { position:relative; overflow:hidden; padding:0; isolation:isolate; }
.feat__bg { position:absolute; top:0; right:0; bottom:0; width:48%; height:100%; object-fit:contain; object-position:center right; z-index:0;
  padding:20px 18px 20px 0; box-sizing:border-box;
  transition:transform .55s var(--ease-brand); }
.feat__bg--contain { object-position:center; }
/* website + webshop: flush to the right edge and ~15px larger */
.feat__bg--edge { padding:8px 0 8px 0; right:0; object-position:center right; }
.feat-card:hover .feat__bg { transform:scale(1.04); }
/* soft scrim so copy stays clear of the artwork */
.feat-card::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, var(--lys-bg-deep) 42%, transparent 64%); }
.feat__body { position:relative; z-index:1; display:flex; flex-direction:column; width:56%; min-height:248px; padding:26px 20px 24px 24px; }
.feat__ic { width:64px; height:64px; margin:-4px 0 12px -6px; display:block; }
.feat__txt h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; font-size:clamp(20px,1.55vw,25px); color:var(--text-strong); margin:0 0 9px; }
.feat__txt p { font-size:13.5px; line-height:1.6; color:var(--text-body); margin:0; }
.feat__link { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px; color:var(--lys-green); font-weight:600; font-size:14px; text-decoration:none; }
.feat__link svg { transition:transform .18s var(--ease-brand); }
.feat-card:hover .feat__link svg { transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){ .feat__bg, .feat-card:hover .feat__bg { transition:none; transform:none; } }
@media (max-width: 1040px){ .feat__body { width:58%; min-height:220px; } .feat__bg { width:46%; } }
@media (max-width: 560px){ .feat__body { width:64%; } .feat__bg { width:42%; } .feat-card::after { background:linear-gradient(90deg, var(--lys-bg-deep) 50%, transparent 78%); } }

/* capability card (Onze standaard) — copy left, mockup contained right */
.qc-card { position:relative; overflow:hidden; padding:0; isolation:isolate; }
.qc-card__img { position:absolute; top:0; right:0; bottom:0; width:44%; height:100%; object-fit:contain; object-position:center right; padding:18px 16px; box-sizing:border-box; z-index:0; transition:transform .55s var(--ease-brand); }
.qc-card__img--tall { width:38%; padding:16px 18px 16px 0; object-position:bottom right; }
.qc-card:hover .qc-card__img { transform:scale(1.04); }
.qc-card::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, var(--lys-bg-deep) 46%, transparent 70%); }
.qc-card__body { position:relative; z-index:1; display:flex; flex-direction:column; width:62%; min-height:188px; padding:24px 16px 22px 24px; }
.qc-card__ic { width:56px; height:56px; margin:0 0 12px -4px; display:block; }
.qc-card__body h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; font-size:clamp(18px,1.35vw,21px); line-height:1.2; color:var(--text-strong); margin:0 0 8px; }
.qc-card__body p { font-size:13.5px; line-height:1.55; color:var(--text-body); margin:0; max-width:30ch; }

/* page speed + security — two stacked mini blocks in the narrow column */
.qc-stack { display:flex; flex-direction:column; gap:18px; height:100%; }
.qc-mini { display:flex; align-items:center; gap:16px; padding:18px 20px; }
.qc-stack .qc-mini { flex:1; min-height:0; }
.qc-mini__vis { width:64px; height:64px; flex:none; object-fit:contain; display:block; transition:transform .5s var(--ease-brand); }
.qc-mini:hover .qc-mini__vis { transform:scale(1.06); }
.qc-mini__body h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:17px; line-height:1.2; color:var(--text-strong); margin:0 0 4px; }
.qc-mini__body p { font-size:13px; line-height:1.5; color:var(--text-body); margin:0; }
@media (prefers-reduced-motion: reduce){ .qc-card__img, .qc-card:hover .qc-card__img, .qc-mini__vis, .qc-mini:hover .qc-mini__vis { transition:none; transform:none; } }
@media (max-width: 1040px){ .qc-card__body { width:66%; } .qc-card__img { width:40%; } }
@media (max-width: 560px){ .qc-card__body { width:70%; } .qc-card__img { width:36%; } .qc-card::after { background:linear-gradient(90deg, var(--lys-bg-deep) 54%, transparent 82%); } }

/* integration card (row 3 wide) — copy left, hub right */
.integ-card { display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:center; }
@media (max-width: 820px){ .integ-card { grid-template-columns:1fr; gap:18px; } }
.integ-card__body { display:flex; flex-direction:column; }
.integ-card__vis { min-height:200px; display:flex; align-items:center; justify-content:center; }
.integ-card__img { width:100%; height:100%; max-height:230px; object-fit:contain; object-position:center; display:block; transition:transform .55s var(--ease-brand); }
.integ-card:hover .integ-card__img { transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){ .integ-card:hover .integ-card__img { transform:none; } }
.integ-card h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; font-size:clamp(20px,1.7vw,26px); color:var(--text-strong); margin:0 0 10px; }
.integ-card p { font-size:15px; line-height:1.6; color:var(--text-body); margin:0; }

/* footer bar */
.bento-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 26px; border-radius:var(--radius-xl); border:1px solid var(--lys-border-dark); background:var(--surface-1); }
.bento-foot__l { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bento-foot__ic { width:32px; height:32px; border-radius:9px; background:rgba(3,255,108,.1); border:1px solid var(--lys-border-dark-accent); color:var(--lys-green); display:flex; align-items:center; justify-content:center; flex:none; }
.bento-foot__l b { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-strong); letter-spacing:-.02em; }
.bento-foot__sub { font-size:14px; color:var(--text-body); }
.bento-foot__link { display:inline-flex; align-items:center; gap:6px; color:var(--lys-green); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.bento-foot__link svg { transition:transform .18s var(--ease-brand); }
.bento-foot__link:hover svg { transform:translateX(3px); }
.svc h3 { font-size: clamp(20px,1.6vw,26px); font-weight: 700; color: var(--text-strong); margin: 0 0 10px; font-family: var(--font-display); letter-spacing: -.025em; }
.svc p { font-size: 15px; line-height: 1.6; color: var(--text-body); margin: 0; }
.svc__link { margin-top: auto; padding-top: 18px; }

/* feature mini-list */
.mini { display:flex; flex-direction:column; gap: 12px; margin-top: 18px; }
.mini .row { display:flex; align-items:center; gap: 10px; font-size: 14px; color: var(--text-body); }
.mini .ck { color: var(--lys-green); display:inline-flex; flex:none; }

/* integration visual */
.integ { position: relative; height: 240px; display:flex; align-items:center; justify-content:center; }
.integ__hub { width: 84px; height: 84px; border-radius: 18px; background: var(--lys-surface-dark); border:1px solid var(--lys-border-dark-accent); display:flex; align-items:center; justify-content:center; box-shadow: var(--glow-accent-soft); z-index:2; overflow:hidden; }
.integ__hub img { width: 64px; }
.integ__node { position:absolute; width: 46px; height: 46px; border-radius: 12px; background: rgba(0,22,16,.8); border:1px solid var(--lys-border-dark); display:flex; align-items:center; justify-content:center; color: var(--lys-text-secondary); }
.integ svg.lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* ---- Work ---- */
.work-head { display:grid; grid-template-columns:minmax(0,640px) 1fr; gap:48px; align-items:end; margin-bottom:clamp(36px,5vw,56px); }
.work-head__lead h2 { font-family:var(--font-display); font-weight:720; font-size:clamp(2.25rem,4vw,4rem); line-height:1.05; letter-spacing:-.04em; color:var(--text-strong); margin:12px 0 0; text-wrap:balance; }
.work-head__lead h2 .g { color:var(--lys-green); }
.work-head__aside { display:flex; flex-direction:column; gap:16px; }
.work-head__aside p { font-size:18px; line-height:1.6; color:var(--text-body); margin:0; max-width:48ch; }
.work-head__aside .rw-index { align-self:start; }
@media (max-width:760px){ .work-head { grid-template-columns:1fr; gap:20px; align-items:start; } }
.work-nav { display:flex; gap:10px; flex-shrink:0; }
.work-arrow {
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border-default); background: var(--surface-2);
  color: var(--text-strong); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.work-arrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color:#001610; }
.work-arrow:active:not(:disabled) { transform: scale(.94); }
.work-arrow:disabled { opacity:.35; cursor:default; }
.work-arrow:first-child svg { transform: rotate(180deg); }
.work-arrow:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.work-carousel {
  display:flex; gap:22px; margin-top: 40px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left: 2px; padding-bottom: 6px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.work-carousel::-webkit-scrollbar { display:none; }
.work-slide { flex: 0 0 calc(50% - 11px); scroll-snap-align:start; min-width:0; }
@media (max-width: 860px){ .work-slide { flex: 0 0 88%; } }

.work-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top: 32px; flex-wrap:wrap; }
.work-dots { display:flex; gap:10px; }
.work-dot {
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  border:none; background: var(--border-strong);
  transition: background .18s ease, width .18s ease, border-radius .18s ease;
}
.work-dot.is-active { background: var(--accent); width:26px; border-radius:6px; }
.work-dot:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .work-carousel { scroll-behavior:auto; } }
.proj {
  overflow: hidden; padding: 0; cursor: pointer; height:100%;
  /* dark cards on the light Work section — re-map theme tokens to dark */
  --surface-1: rgba(0, 61, 46, 0.32);
  --surface-2: var(--lys-surface-dark);
  --text-strong: var(--lys-text-primary);
  --text-body: var(--lys-text-secondary);
  --text-soft: var(--lys-text-muted);
  --border-default: var(--lys-border-dark);
  --border-strong: var(--lys-border-dark-strong);
  --border-accent: var(--lys-border-dark-accent);
  --accent-ink: var(--lys-bg-deep);
  color: var(--lys-text-secondary);
  box-shadow: 0 20px 44px rgba(0, 12, 8, 0.38);
}
.proj__shot { aspect-ratio: 16/10; position: relative; overflow:hidden; border-bottom: 1px solid var(--border-default); }
.proj__meta { padding: 24px 26px 22px; }
.proj__tags { display:flex; gap:8px; margin-bottom: 14px; flex-wrap:wrap; }
.proj h3 { font-family: var(--font-display); font-weight:700; font-size: 25px; color: var(--text-strong); margin: 0 0 8px; letter-spacing: -.03em; }
.proj p { font-size: 15px; line-height: 1.55; color: var(--text-body); margin: 0; }
.proj__go { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-default); width:100%; display:inline-flex; align-items:center; justify-content:space-between; gap:8px; color: var(--accent); font-weight:600; font-size:14px; }
.proj__go svg { transition: transform .25s var(--ease-brand); }
.proj:hover .proj__go svg { transform: translateX(4px); }

/* faux site shots */
.shot { width:100%; height:100%; position:absolute; inset:0; display:flex; flex-direction:column; }

/* ---- Process (scroll-driven) ---- */
.proc-section { padding-block: clamp(72px, 10vw, 140px); }
.proc-scroll { display:grid; grid-template-columns: 1fr 1.05fr; gap: 72px; margin-top: 8px; }
@media (max-width: 920px){ .proc-scroll { grid-template-columns: 1fr; gap: 0; } }

.proc-steps { position:relative; min-width:0; }
.proc-step { min-height: 74vh; display:flex; gap: 22px; align-items:center; opacity:.38; transition: opacity .45s var(--ease-brand); }
.proc-step.is-active { opacity:1; }
.proc-step.is-done { opacity:.6; }
.proc-step__num {
  width:48px; height:48px; border-radius:50%; flex:none; align-self:flex-start; margin-top:6px;
  border:1px solid var(--lys-border-light-strong); background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--lys-text-muted-light);
  transition: background .4s var(--ease-brand), border-color .4s var(--ease-brand), color .4s var(--ease-brand);
}
.proc-step.is-active .proc-step__num { background:var(--lys-green); border-color:var(--lys-green); color:var(--lys-bg-deep); }
.proc-step.is-done .proc-step__num { border-color:var(--lys-green); color:var(--lys-green); }
.proc-step__txt h3 { font-family:var(--font-display); font-weight:720; letter-spacing:-.03em; font-size:clamp(26px,2.4vw,40px); line-height:1.08; color:var(--text-strong); margin:0 0 14px; }
.proc-step__txt p { font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:var(--text-body); margin:0; max-width:40ch; }
.proc-step__vis { display:none; }

.proc-visual-wrap { position:relative; min-width:0; }
.proc-visual { position:sticky; top:108px; display:flex; flex-direction:column; gap:16px; }
.proc-visual__count { display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--lys-text-muted-light); }
.proc-visual__count b { color:var(--lys-text-on-light); }
.proc-visual__dots { display:flex; gap:7px; }
.proc-visual__dots .d { width:8px; height:8px; border-radius:50%; background:var(--lys-border-light-strong); transition:background .35s, width .35s; }
.proc-visual__dots .d.is-done { background:var(--lys-green); opacity:.5; }
.proc-visual__dots .d.is-active { background:var(--lys-green); width:22px; border-radius:5px; }
.proc-visual__stage { position:relative; height:min(60vh, 460px); border-radius:var(--radius-xl); background:var(--lys-white); border:1px solid var(--lys-border-light); box-shadow:var(--shadow-light-2); overflow:hidden; }
.proc-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0; opacity:1; }
.proc-visual__cap { font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:18px; color:var(--text-strong); }
@media (prefers-reduced-motion: reduce){ .proc-step { transition:none; } }

/* mobile pinned process scroller — steps slide in horizontally on scroll */
.proc-pin { display:none; }
@media (max-width: 920px){
  .proc-scroll { display:none; }
  .proc-section .sec-head { margin-bottom: 12px; }
  .proc-pin { display:block; position:relative; height:360vh; }
  .proc-pin__stage { position:sticky; top:88px; height:calc(100vh - 88px); height:calc(100dvh - 88px); overflow:hidden; display:flex; flex-direction:column; }
  .proc-htrack { display:flex; flex:1; min-height:0; will-change:transform; }
  .proc-hpanel { flex:0 0 100vw; min-width:100vw; height:100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; gap:20px; padding:24px 24px 86px; }
  .proc-hpanel__num { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--lys-border-light-strong); color:var(--lys-text-muted-light); font-family:var(--font-mono); font-weight:700; font-size:15px; transition:background .3s var(--ease-brand), border-color .3s var(--ease-brand), color .3s var(--ease-brand); }
  .proc-hpanel.is-active .proc-hpanel__num { background:var(--lys-green); border-color:var(--lys-green); color:var(--lys-bg-deep); }
  .proc-hpanel.is-done .proc-hpanel__num { border-color:var(--lys-green); color:var(--lys-green); }
  .proc-hpanel__head h3 { font-family:var(--font-display); font-weight:720; letter-spacing:-.03em; font-size:clamp(28px,8vw,38px); line-height:1.05; color:var(--text-strong); margin:16px 0 12px; }
  .proc-hpanel__head p { font-size:16px; line-height:1.6; color:var(--text-body); margin:0; max-width:36ch; }
  .proc-hpanel__vis { position:relative; height:min(40vh,340px); border-radius:var(--radius-lg); background:var(--lys-white); border:1px solid var(--lys-border-light); box-shadow:var(--shadow-light-1); overflow:hidden; }
  .proc-hpanel__vis .pv { position:absolute; inset:0; margin:0; padding:26px; display:flex; flex-direction:column; justify-content:center; }
  .proc-pin__bar { position:absolute; left:0; right:0; bottom:26px; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .proc-pin__count { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--lys-text-muted-light); }
  .proc-pin__count b { color:var(--lys-text-on-light); }
  .proc-pin__dots { display:flex; gap:8px; }
  .proc-pin__dots .d { width:8px; height:8px; border-radius:50%; background:var(--lys-border-light-strong); transition:width .35s var(--ease-brand), background .35s var(--ease-brand); }
  .proc-pin__dots .d.is-done { background:var(--lys-green); opacity:.5; }
  .proc-pin__dots .d.is-active { background:var(--lys-green); width:22px; border-radius:5px; }
}

/* ---- Pricing ---- */
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px){ .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline:auto; } }
.price { display:flex; flex-direction:column; height: 100%; }
.price.featured { background: var(--lys-bg-deep); color: var(--lys-text-secondary); border-color: var(--lys-bg-deep); }
.price.featured .price__name, .price.featured .price__amt { color: var(--lys-text-primary); }
.price.featured .price__feat .row { color: var(--lys-text-secondary); }
.price__name { font-family:var(--font-mono); font-size: 13px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-soft); }
.price__amt { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--text-strong); margin: 16px 0 4px; letter-spacing:-.03em; }
.price__amt small { font-family: var(--font-body); font-size: 15px; font-weight:500; color: var(--text-soft); letter-spacing: 0; }
.price__pos { font-size: 14px; color: var(--text-body); margin: 0 0 22px; min-height: 40px; }
.price__feat { display:flex; flex-direction:column; gap: 12px; margin-bottom: 26px; }
.price__feat .row { display:flex; gap:10px; align-items:flex-start; font-size: 14px; color: var(--text-body); line-height:1.45; }
.price__feat .ck { color: var(--lys-green); flex:none; margin-top:1px; }
.price__cta { margin-top: auto; }

/* ---- FAQ ---- */
.faq-wrap { max-width: 820px; margin-inline: auto; }

/* ---- CTA ---- */
.cta {
  position: relative; overflow: hidden; border-radius: 32px; text-align: center;
  padding: clamp(56px,7vw,100px) clamp(32px,5vw,72px);
  background:
    linear-gradient(180deg, rgba(3,255,108,.05), transparent 28%),
    var(--lys-bg-deepest);
  border: 1px solid var(--lys-border-dark);
  box-shadow: 0 40px 90px rgba(0,12,8,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
/* top lit edge */
.cta::before { content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background: linear-gradient(90deg, transparent, var(--lys-border-dark-accent), transparent); pointer-events:none; z-index:2; }
/* faint dot texture, faded from the top */
.cta::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(180,193,184,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 70%);
}
/* breathing emerald aura */
.cta__aura {
  position:absolute; left:50%; bottom:-34%; width:82%; height:96%;
  transform: translateX(-50%); border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(3,255,108,.20), transparent 62%);
  filter: blur(8px);
}
@media (prefers-reduced-motion: no-preference){
  .cta__aura { animation: ctaBreathe 7s var(--ease-brand) infinite; }
}
@keyframes ctaBreathe {
  0%,100% { opacity:.72; transform: translateX(-50%) scale(1); }
  50%     { opacity:1;   transform: translateX(-50%) scale(1.07); }
}
.cta__inner { position:relative; z-index:1; }
.cta h2 { font-family: var(--font-display); font-weight: 750; font-size: clamp(3rem,5vw,5rem); line-height:1; letter-spacing:-.045em; color: var(--lys-text-primary); margin: 20px 0 0; text-wrap: balance; }
.cta h2 .g { color: var(--lys-green); }
.cta p { font-size: 18px; line-height:1.6; color: var(--lys-text-secondary); margin: 20px auto 34px; max-width: 50ch; text-wrap: pretty; }
.cta__cta { display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; }

/* ---- Footer ---- */
.footer { background: var(--lys-bg-deepest); border-top: 1px solid var(--lys-border-dark); padding-block: 64px 40px; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px){
	/* Mobiel: merk-blok gecentreerd (rij 1, volle breedte), dan de eerste twee
	   kolommen naast elkaar (rij 2), daarna de laatste kolom gecentreerd (rij 3). */
	.footer__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
	.footer__top > div:first-child { grid-column: 1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center; }
	/* De twee kolommen naast elkaar iets laten inspringen zodat ze niet tegen
	   de rand plakken en het blok gecentreerder oogt. */
	.footer__top > .footer__col:nth-child(2),
	.footer__top > .footer__col:nth-child(3) { padding-left: 22px; }
	.footer__top > div:first-child .footer__about { max-width: 40ch; }
	.footer__top > div:first-child .footer__social { justify-content:center; }
	.footer__top > .footer__col:last-child { grid-column: 1 / -1; text-align:center; }
	.footer__col { min-width: 0; }
	.footer__col a { overflow-wrap: anywhere; }
	.footer__bottom { flex-direction:column; align-items:center; text-align:center; gap:8px; margin-top:36px; }
}
.footer__logo { height: 28px; margin-bottom: 18px; }
.footer__about { font-size: 13px; line-height:1.55; color: var(--lys-text-muted); max-width: 28ch; margin: 0 0 18px; }
.footer__social { display:flex; gap:8px; }
.footer__social a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--lys-border-dark); color: var(--lys-text-muted); transition: color .15s, border-color .15s; }
.footer__social a:hover { color: var(--lys-text-secondary); border-color: var(--lys-text-muted); }
.footer h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--lys-text-muted); margin: 0 0 16px; font-weight:600; }
.footer__col a { display:block; color: var(--lys-text-secondary); text-decoration:none; font-size: 15px; padding: 6px 0; cursor:pointer; transition: color .15s; }
.footer__col a:hover { color: var(--lys-green); }
.footer__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--lys-border-dark); font-size: 13px; color: var(--lys-text-muted); }
.footer__bottom .mono { font-family: var(--font-mono); }

/* ---- About / Over de studio ---- */
.about__grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items:center; }
@media (max-width: 920px){ .about__grid { grid-template-columns: 1fr; gap: 48px; } }

.about__visual { position:relative; display:flex; justify-content:center; }
.about-card {
  width:min(360px, 100%); border-radius:var(--radius-xl); background:var(--lys-white);
  border:1px solid var(--lys-border-light); box-shadow:var(--shadow-light-2);
  padding: 34px 30px 30px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
}
.about-card__photo {
  width:132px; height:132px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 30% 20%, #003D2E 0%, #001610 70%);
  border: 3px solid var(--lys-green); box-shadow: 0 0 0 6px rgba(3,255,108,.12);
}
.about-card__photo img { width:56%; height:auto; object-fit:contain; }
img.about-card__photo { object-fit:cover; padding:0; }
.about-card__id { display:flex; flex-direction:column; gap:3px; }
.about-card__id b { font-family:var(--font-display); font-weight:750; letter-spacing:-.02em; font-size:24px; color:var(--lys-text-on-light); }
.about-card__id span { font-size:14px; color:var(--lys-text-muted-light); }
.about-card__chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.about-chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--lys-border-light); background:var(--lys-cream);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--lys-text-body-light);
}
.about-chip svg { color:var(--lys-green); flex:none; }
.about-float {
  position:absolute; display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:12px;
  background:var(--lys-white); border:1px solid var(--lys-border-light); box-shadow:var(--shadow-light-2);
  font-size:13px; font-weight:600; color:var(--lys-text-on-light); white-space:nowrap;
}
.about-float svg { color:var(--lys-green); }
.about-float--a { top:8%; left:max(-14px, 0%); }
.about-float--b { bottom:-16px; right:max(-18px, 0%); }
@media (max-width: 920px){ .about-float { display:none; } }

.about__txt h2 { margin-bottom:18px; }
.about__txt p { font-size:16.5px; line-height:1.65; color:var(--lys-text-body-light); margin:0 0 16px; max-width:56ch; }
.about__points { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
.about__points li { display:flex; align-items:flex-start; gap:11px; font-size:15.5px; font-weight:600; color:var(--lys-text-on-light); }
.about__points .ck { flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(3,255,108,.14); color:#00A445; margin-top:-1px; }
.about__stats { display:flex; gap: clamp(20px, 4vw, 44px); margin-top:30px; padding-top:26px; border-top:1px solid var(--lys-border-light); flex-wrap:wrap; }
.about-stat { display:flex; flex-direction:column; gap:4px; }
.about-stat b { font-family:var(--font-display); font-weight:760; letter-spacing:-.03em; font-size:clamp(26px,2.4vw,34px); color:var(--lys-text-on-light); }
.about-stat span { font-size:13px; color:var(--lys-text-muted-light); max-width:20ch; }
.about__cta { margin-top:30px; }

/* ---- Contact ---- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-form { display:flex; flex-direction:column; gap: 18px; }
.contact-info { display:flex; flex-direction:column; gap: 22px; }
.contact-info .item { display:flex; gap: 14px; align-items:flex-start; }
.contact-info .item .ic { width: 42px; height:42px; border-radius:12px; flex:none; background: rgba(3,255,108,.1); border:1px solid var(--lys-border-dark-accent); color: var(--lys-green); display:flex; align-items:center; justify-content:center; }
.contact-info .item b { display:block; color: var(--lys-text-on-light); font-size:16px; margin-bottom:2px; }
.contact-info .item span { color: var(--lys-text-body-light); font-size:15px; line-height:1.55; }

/* ===== Concepten-pagina (grid + intake) ===== */
.concepts-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 640px){ .concepts-grid { grid-template-columns: 1fr; } }
/* screenshots zijn ~16:9 — match de shot zodat de demo volledig in beeld is (geen crop) */
.concepts-grid .proj__shot { aspect-ratio: 16 / 9; }
.lys-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2342534B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}

/* ===== Homepage full-bleed onderbreking-band → concepten ===== */
.concepts-band {
  position: relative;
  /* clip de horizontale mockup-bleed, maar laat de groene gloed verticaal
     overlopen in de donkere sectie erboven (geen harde rand) */
  overflow-x: clip; overflow-y: visible;
  padding: clamp(40px,5vw,72px) 0;
  background: var(--lys-bg-deep);
}
/* groene aura die naar boven uitvloeit over de sectiegrens, niet afgekapt */
.concepts-band__aura {
  position: absolute; z-index: 0; pointer-events: none;
  top: -150px; right: 2%; width: min(760px, 74%); height: 460px;
  background: radial-gradient(closest-side, rgba(3,255,108,.22), transparent 72%);
  filter: blur(22px);
}
@media (prefers-reduced-motion: no-preference){
  .concepts-band__aura { animation: bandBreathe 8s var(--ease-brand) infinite; }
}
@keyframes bandBreathe {
  0%,100% { opacity:.72; transform: scale(1); }
  50%     { opacity:1;   transform: scale(1.06); }
}
.concepts-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.86fr 1.3fr; gap: clamp(32px,4vw,48px); align-items: center; }
.concepts-band__txt { max-width: 52ch; }
.concepts-band__txt h2 { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; color: var(--lys-text-primary); margin: 14px 0 12px; text-wrap: balance; }
.concepts-band__txt p { color: var(--lys-text-secondary); font-size: 17px; line-height: 1.6; margin: 0; }
.concepts-band__cta { margin-top: 28px; }

/* Media-slot: browser-frame preview die naar de rechterrand bloedt */
.concepts-band__media { position: relative; margin-right: -90px; }
.cb-frame { border: 1px solid var(--lys-border-dark); border-radius: 18px; overflow: hidden; background: rgba(0,22,16,.55); box-shadow: 0 44px 100px rgba(0,0,0,.6); }
.cb-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--lys-border-dark); background: rgba(0,0,0,.28); }
.cb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lys-border-dark-strong, rgba(180,193,184,.28)); }
.cb-url { margin-left: 8px; height: 16px; flex: 1; max-width: 280px; border-radius: 6px; background: rgba(180,193,184,.12); }
.concepts-band__mockup-img { display: block; width: 100%; height: auto; }
.concepts-band__mockup {
  aspect-ratio: 16 / 9;
  background: radial-gradient(120% 140% at 50% 0%, rgba(3,255,108,.07), transparent 60%), rgba(255,255,255,.015);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--lys-text-secondary); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
}
.concepts-band__mockup small { color: var(--lys-text-muted); font-size: 11px; }

@media (max-width: 880px){
  .concepts-band__grid { grid-template-columns: 1fr; }
  .concepts-band__media { margin-right: 0; }
}

/* ===== Bento concept visuals ===== */
.bv { position:relative; width:100%; border-radius:14px; overflow:hidden; }
.bv .ln { display:block; height:7px; border-radius:4px; background:rgba(180,193,184,.22); }
.bv .ln.g { background:rgba(3,255,108,.6); }

/* phone */
.bv-phone { display:flex; align-items:center; justify-content:center; min-height:128px; position:relative; width:100%; }
.bv-phone__back { position:absolute; width:62px; height:104px; border-radius:14px; background:rgba(0,61,46,.5); border:1px solid var(--lys-border-dark); transform:translate(16px,8px) rotate(8deg); }
.bv-phone__dev { position:relative; width:72px; min-height:118px; border-radius:16px; background:var(--lys-bg-deepest); border:1px solid var(--lys-border-dark-strong); padding:15px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.bv-phone__dev .notch { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:22px; height:4px; border-radius:3px; background:rgba(180,193,184,.3); }
.bv-phone__img { margin-top:4px; flex:1; min-height:28px; border-radius:6px; background:rgba(3,255,108,.1); border:1px solid var(--lys-border-dark-accent); }

/* conversion chart */
.bv-conv { display:flex; align-items:flex-end; min-height:100px; padding:12px; position:relative; width:100%; }
.bv-bars { display:flex; align-items:flex-end; gap:7px; height:74px; flex:1; }
.bv-bars span { flex:1; border-radius:4px 4px 0 0; background:rgba(180,193,184,.2); }
.bv-bars span.g { background:var(--lys-green); }
.bv-conv__trend { position:absolute; top:10px; right:10px; color:var(--lys-green); }

/* seo */
.bv-seo { display:flex; flex-direction:column; gap:10px; padding:12px; min-height:100px; justify-content:center; width:100%; }
.bv-seo__search { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; background:rgba(180,193,184,.06); border:1px solid var(--lys-border-dark); color:rgba(180,193,184,.5); }
.bv-seo__res { display:flex; flex-direction:column; gap:7px; padding-left:2px; }

/* gauge */
.bv-gauge { display:flex; align-items:center; justify-content:center; padding:10px; min-height:92px; width:100%; }
.bv-gauge svg { width:100%; max-width:132px; }

/* sliders */
.bv-sliders { display:flex; flex-direction:column; gap:15px; justify-content:center; padding:16px 12px; min-height:100px; width:100%; }
.bv-sl { position:relative; height:6px; }
.bv-sl .track { position:absolute; inset:0; border-radius:3px; background:rgba(180,193,184,.18); }
.bv-sl .fill { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--lys-green); }
.bv-sl .knob { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--lys-bg-deepest); border:2px solid var(--lys-green); transform:translate(-50%,-50%); }

/* chat */
.bv-chat { display:flex; flex-direction:column; gap:8px; justify-content:center; padding:14px; min-height:100px; width:100%; }
.bv-chat .bub { border-radius:12px; }
.bv-chat .bub.in { align-self:flex-start; width:48px; height:26px; background:rgba(180,193,184,.12); border:1px solid var(--lys-border-dark); display:flex; align-items:center; justify-content:center; color:rgba(180,193,184,.5); }
.bv-chat .bub.in.sm { width:32px; height:16px; }
.bv-chat .bub.out { align-self:flex-end; width:56px; height:18px; background:rgba(3,255,108,.85); }

/* ===== Process concept visuals (light surfaces, green accents) ===== */
/* ---- Process visuals — pure CSS scenes (Elementor-portable, zie elementor-export/) ---- */
.pv {
  position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:28px;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,22,16,.08) 1px, transparent 0);
  background-size: 22px 22px;
}
.pv__card {
  width:min(350px, 96%); background:var(--lys-white); border:1px solid var(--lys-border-light);
  border-radius:16px; box-shadow:0 22px 48px -20px rgba(0,22,16,.22); overflow:hidden;
  animation: pv-in .5s var(--ease-brand) both;
}
.pv-mono { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; color:var(--lys-text-muted-light); }

@keyframes pv-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes pv-slide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes pv-pop { 0% { opacity:0; transform:scale(.5); } 70% { transform:scale(1.12); } 100% { opacity:1; transform:scale(1); } }
@keyframes pv-stamp { 0% { opacity:0; transform:rotate(8deg) scale(.5); } 70% { transform:rotate(8deg) scale(1.12); } 100% { opacity:1; transform:rotate(8deg) scale(1); } }
@keyframes pv-dotjump { 0%,60%,100% { transform:none; opacity:.45; } 30% { transform:translateY(-4px); opacity:1; } }
@keyframes pv-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(3,255,108,.55); } 70% { box-shadow:0 0 0 8px rgba(3,255,108,0); } }
@keyframes pv-draw { to { stroke-dashoffset:0; } }
@keyframes pv-fillbar { from { width:0; } }
@keyframes pv-sheen { 0% { transform:translateX(-130%); } 55%,100% { transform:translateX(240%); } }
@keyframes pv-skel { from { background-position:160% 0; } to { background-position:-60% 0; } }

/* — 01 intake / chat — */
.pv-chat__head { display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--lys-border-light); }
.pv-avatar { width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#003D2E,#001610); color:var(--lys-green); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.05em; }
.pv-chat__head b { display:block; font-size:14px; font-weight:700; color:var(--lys-text-on-light); }
.pv-chat__head small { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--lys-text-muted-light); }
.pv-online { width:7px; height:7px; border-radius:50%; background:var(--lys-green); animation:pv-pulse 2.2s infinite; }
.pv-chat__body { padding:16px; display:flex; flex-direction:column; gap:9px; }
.pv-bubble { max-width:84%; padding:9px 13px; border-radius:13px; font-size:13px; line-height:1.45; opacity:0; animation:pv-slide .45s var(--ease-brand) forwards; }
.pv-bubble--in { align-self:flex-start; background:var(--lys-cream-soft); color:var(--lys-text-on-light); border-bottom-left-radius:4px; }
.pv-bubble--out { align-self:flex-end; background:var(--lys-green); color:var(--lys-bg-deep); font-weight:600; border-bottom-right-radius:4px; }
.pv-typing { align-self:flex-start; display:flex; gap:4px; padding:11px 13px; background:var(--lys-cream-soft); border-radius:13px; border-bottom-left-radius:4px; opacity:0; animation:pv-slide .4s var(--ease-brand) forwards; }
.pv-typing i { width:6px; height:6px; border-radius:50%; background:var(--lys-text-muted-light); animation:pv-dotjump 1.2s infinite; }

/* — 02 voorstel / document — */
.pv-doc__head { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--lys-border-light); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; color:var(--lys-text-muted-light); }
.pv-doc__dot { width:8px; height:8px; border-radius:2px; background:var(--lys-green); flex:none; }
.pv-doc__tag { margin-left:auto; padding:3px 9px; border-radius:999px; background:rgba(3,255,108,.15); color:#00A445; font-weight:700; }
.pv-doc__rows { padding:16px 16px 4px; display:flex; flex-direction:column; gap:13px; }
.pv-doc__row { display:flex; align-items:center; gap:10px; opacity:0; animation:pv-slide .45s var(--ease-brand) forwards; }
.pv-doc__ck { width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(3,255,108,.16); color:#00A445; }
.pv-doc__ck svg { width:11px; height:11px; }
.pv-doc__row > span:nth-child(2) { font-size:13px; font-weight:600; color:var(--lys-text-on-light); white-space:nowrap; }
.pv-doc__line { flex:1; height:6px; border-radius:3px; background:var(--lys-cream-soft); position:relative; overflow:hidden; }
.pv-doc__line i { position:absolute; top:0; bottom:0; left:0; width:var(--w,70%); border-radius:3px; background:linear-gradient(90deg,#003D2E,#00A445); animation:pv-fillbar .8s var(--ease-brand) both; }
.pv-doc__total { margin:14px 16px 16px; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:12px; background:var(--lys-bg-deep); position:relative; overflow:hidden; opacity:0; animation:pv-slide .5s 1.5s var(--ease-brand) forwards; }
.pv-doc__total span { font-size:12px; color:var(--lys-text-secondary); }
.pv-doc__total b { font-family:var(--font-display); font-size:18px; letter-spacing:-.02em; color:var(--lys-green); }
.pv-doc__total::after { content:''; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.13), transparent); animation:pv-sheen 3.6s 2.4s infinite; }
.pv-doc__stamp { position:absolute; right:14px; top:44px; padding:5px 10px; border:2px solid #00A445; border-radius:8px; color:#00A445; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; background:rgba(255,255,255,.85); opacity:0; animation:pv-stamp .5s 2s var(--ease-brand) forwards; }

/* — 03 design & build / browser — */
.pv-browser__bar { display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--lys-border-light); background:var(--lys-cream); }
.pv-browser__bar .d { width:9px; height:9px; border-radius:50%; background:var(--lys-border-light-strong); flex:none; }
.pv-browser__url { flex:1; margin-left:8px; height:20px; border-radius:6px; background:var(--lys-white); border:1px solid var(--lys-border-light); font-family:var(--font-mono); font-size:10px; color:var(--lys-text-muted-light); display:flex; align-items:center; padding:0 9px; }
.pv-browser__canvas { padding:14px; display:flex; flex-direction:column; gap:10px; }
.pv-blk { border-radius:8px; opacity:0; animation:pv-slide .5s var(--ease-brand) forwards; }
.pv-blk--nav { display:flex; align-items:center; gap:6px; padding:8px 10px; background:var(--lys-cream-soft); }
.pv-blk--nav .dot { width:10px; height:10px; border-radius:50%; background:var(--lys-green); flex:none; }
.pv-blk--nav .ln { width:26px; height:5px; border-radius:3px; background:var(--lys-border-light-strong); }
.pv-blk--nav .dot + .ln { margin-left:auto; }
.pv-blk--hero { padding:14px 12px; background:radial-gradient(130% 160% at 20% 0%, #003D2E 0%, #001610 75%); display:flex; flex-direction:column; gap:7px; }
.pv-blk--hero .t1 { width:64%; height:8px; border-radius:4px; background:rgba(245,247,246,.85); }
.pv-blk--hero .t2 { width:44%; height:6px; border-radius:3px; background:rgba(183,194,188,.5); }
.pv-blk--hero .btn { width:58px; height:14px; border-radius:7px; background:var(--lys-green); margin-top:3px; }
.pv-blk__row { display:flex; gap:10px; }
.pv-blk--card { flex:1; padding:10px; background:var(--lys-cream-soft); display:flex; flex-direction:column; gap:6px; }
.pv-blk--card .ic { width:14px; height:14px; border-radius:4px; background:rgba(3,255,108,.4); }
.pv-blk--card .ln { width:80%; height:5px; border-radius:3px; background:var(--lys-border-light-strong); }
.pv-blk--card .ln.s { width:55%; }
.pv-skel { height:14px; border-radius:7px; opacity:0; background:linear-gradient(100deg,#EAF0EC 40%,#F7FAF8 50%,#EAF0EC 60%); background-size:200% 100%; animation:pv-slide .5s var(--ease-brand) forwards, pv-skel 1.5s linear 1.9s infinite; }
.pv-browser__foot { display:flex; align-items:center; gap:12px; padding:0 14px 14px; }
.pv-progress { flex:1; height:6px; border-radius:3px; background:var(--lys-cream-soft); overflow:hidden; }
.pv-progress i { display:block; height:100%; width:78%; border-radius:3px; background:linear-gradient(90deg,#00A445,var(--lys-green)); animation:pv-fillbar 1.6s .4s var(--ease-brand) both; }

/* — 04 live + groei / analytics — */
.pv-stats__head { display:flex; align-items:flex-start; justify-content:space-between; padding:14px 16px 8px; }
.pv-stats__head b { font-size:15px; font-weight:700; color:var(--lys-text-on-light); }
.pv-live { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(3,255,108,.14); color:#00A445; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; }
.pv-live i { width:7px; height:7px; border-radius:50%; background:var(--lys-green); animation:pv-pulse 1.8s infinite; }
.pv-stats__chart { padding:2px 16px 0; }
.pv-stats__chart svg { display:block; width:100%; height:88px; }
.pv-area { fill:url(#pvArea); opacity:0; animation:pv-slide 1s 1.3s var(--ease-brand) forwards; }
.pv-linepath { fill:none; stroke:#00C85A; stroke-width:3; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320; animation:pv-draw 1.6s .3s var(--ease-brand) forwards; }
.pv-stats__foot { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 15px; }
.pv-delta { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:rgba(3,255,108,.14); color:#00A445; font-size:12.5px; font-weight:700; opacity:0; animation:pv-pop .5s 1.7s var(--ease-brand) forwards; }

/* mobiel: animaties pas afspelen zodra het paneel actief is */
@media (max-width: 920px){
  .proc-hpanel .pv, .proc-hpanel .pv * , .proc-hpanel .pv *::after { animation-play-state:paused; }
  .proc-hpanel.is-active .pv, .proc-hpanel.is-active .pv *, .proc-hpanel.is-active .pv *::after { animation-play-state:running; }
}
@media (prefers-reduced-motion: reduce){
  .pv, .pv *, .pv *::after { animation-duration:.001s !important; animation-delay:0s !important; }
}
.pv { width:100%; max-width:380px; display:flex; flex-direction:column; gap:16px; }
.pv .ln { display:block; height:9px; border-radius:5px; background:rgba(0,22,16,.12); }
.pv .ln.lg { height:13px; }

/* intake */
.pv-intake .pv-row { display:flex; align-items:center; gap:12px; }
.pv-chip { width:40px; height:40px; border-radius:11px; background:rgba(3,255,108,.14); border:1px solid var(--lys-border-light-accent); color:var(--lys-surface-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.pv-intake .pv-h { flex:1; height:12px; border-radius:6px; background:rgba(0,22,16,.1); }
.pv-goals { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pv-goals li { display:flex; align-items:center; gap:12px; }
.pv-goals .ck { width:24px; height:24px; border-radius:50%; background:rgba(3,255,108,.16); color:var(--lys-surface-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.pv-chat { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.pv-chat .b { border-radius:12px; }
.pv-chat .b.in { align-self:flex-start; width:124px; height:34px; background:rgba(0,22,16,.06); border:1px solid var(--lys-border-light); display:flex; align-items:center; padding:0 12px; color:rgba(0,22,16,.38); }
.pv-chat .b.out { align-self:flex-end; width:92px; height:26px; background:var(--lys-green); }

/* voorstel */
.pv-quote .pv-doc { display:flex; flex-direction:column; gap:12px; width:100%; }
.pv-doc__top { display:flex; align-items:center; gap:12px; margin-bottom:2px; }
.pv-doc__top .pv-ic { width:34px; height:34px; border-radius:9px; background:var(--lys-surface-dark); color:var(--lys-green); display:flex; align-items:center; justify-content:center; flex:none; }
.pv-price { margin-top:8px; padding:16px; border-radius:14px; background:rgba(3,255,108,.08); border:1px solid var(--lys-border-light-accent); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pv-price__lbl { display:block; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--lys-text-on-light); letter-spacing:-.02em; }
.pv-price__amt { display:block; font-size:12px; color:var(--lys-text-muted-light); margin-top:3px; }
.pv-cta { padding:9px 16px; border-radius:10px; background:var(--lys-green); color:var(--lys-bg-deep); font-weight:600; font-size:13px; white-space:nowrap; }

/* design & build */
.pv-build { max-width:420px; }
.pv-browser { width:100%; border-radius:14px; overflow:hidden; background:var(--lys-bg-deepest); border:1px solid rgba(0,22,16,.15); box-shadow:0 18px 40px rgba(0,22,16,.18); }
.pv-bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:rgba(0,22,16,.96); border-bottom:1px solid rgba(180,193,184,.14); }
.pv-bar > i { width:8px; height:8px; border-radius:50%; background:rgba(180,193,184,.3); flex:none; }
.pv-bar .pv-url { margin-left:8px; flex:1; height:13px; border-radius:5px; background:rgba(180,193,184,.1); }
.pv-canvas { position:relative; padding:18px; display:flex; flex-direction:column; gap:12px; min-height:170px; }
.pv-canvas .blk { display:block; border-radius:7px; background:rgba(180,193,184,.16); }
.pv-canvas .blk.g { background:rgba(3,255,108,.7); }
.pv-canvas__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pv-cursor { position:absolute; bottom:18px; right:20px; width:30px; height:30px; border-radius:50%; background:var(--lys-green); color:var(--lys-bg-deep); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 5px rgba(3,255,108,.2); }

/* live + groei */
.pv-live { align-items:center; gap:24px; }
.pv-livebadge { display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px; background:rgba(3,255,108,.1); border:1px solid var(--lys-border-light-accent); font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--lys-surface-dark); }
.pv-livebadge .pulse { width:9px; height:9px; border-radius:50%; background:var(--lys-green); box-shadow:0 0 0 0 rgba(3,255,108,.5); animation:pulse 2.2s var(--ease-brand) infinite; }
.pv-growth { position:relative; width:100%; max-width:300px; }
.pv-bars { display:flex; align-items:flex-end; gap:12px; height:140px; width:100%; }
.pv-bars span { flex:1; border-radius:6px 6px 0 0; background:rgba(0,22,16,.1); }
.pv-bars span.g { background:var(--lys-green); }
.pv-trend { position:absolute; top:-8px; right:0; color:var(--lys-surface-dark); background:rgba(3,255,108,.16); border-radius:10px; padding:6px; }

/* ===== Recente projecten (autoplay carousel) ===== */
.rw-index { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--lys-text-muted); white-space: nowrap; align-self: flex-end; }
.rw-viewport { overflow: hidden; margin-top: clamp(8px, 2vw, 20px); padding: 6px 0 26px; }
.rw-track { display: flex; gap: 24px; transition: transform .65s cubic-bezier(.25,.46,.45,.94); will-change: transform; }
.rw-card {
  flex: 0 0 calc((100% - 48px) / 3); min-width: 0;
  background: var(--lys-surface-dark); border: 1px solid var(--lys-border-dark); border-radius: var(--radius-lg);
  overflow: hidden; position: relative; display: flex; flex-direction: column;
  transition: border-color .3s var(--ease-brand), transform .35s var(--ease-brand), box-shadow .35s var(--ease-brand);
}
.rw-card:hover { border-color: var(--lys-border-dark-accent); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,8,5,.5); }
@media (max-width: 980px){ .rw-card { flex: 0 0 calc((100% - 24px) / 2); } }
@media (max-width: 640px){ .rw-card { flex: 0 0 100%; } .rw-index { display: none; } }

.rw-card__media { position: relative; }
.rw-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lys-bg-deepest); }
.rw-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-brand); }
.rw-card:hover .rw-card__img img { transform: scale(1.04); }
.rw-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(0,8,5,.55) 100%); pointer-events: none; }
.rw-card__num {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  color: var(--lys-text-secondary); background: rgba(0,8,5,.5); border: 1px solid rgba(255,255,255,.1);
  padding: 4px 9px; border-radius: 999px;
}
.rw-card__badge {
  position: absolute; left: 20px; bottom: -22px; z-index: 3;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--lys-bg-deep); border: 1px solid var(--lys-border-dark-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,8,5,.55), 0 0 18px rgba(3,255,108,.16);
}
.rw-card__badge img { width: 30px; height: 30px; object-fit: contain; display: block; }

.rw-card__body { padding: 38px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.rw-card__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lys-green); display: block; margin-bottom: 12px; }
.rw-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: -.015em; color: var(--lys-text-primary); margin: 0 0 10px; }
.rw-card__desc { font-size: 13.5px; line-height: 1.65; color: var(--lys-text-secondary); margin: 0; flex: 1; }
.rw-card__tools { border-top: 1px solid var(--lys-border-dark); padding-top: 16px; margin-top: 22px; }
.rw-card__tools-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lys-text-muted); display: block; margin-bottom: 11px; }
.rw-card__tools-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rw-tool { width: 19px; height: 19px; opacity: .5; transition: opacity .2s var(--ease-brand); flex-shrink: 0; }
.rw-tool:hover { opacity: .9; }

.rw-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: clamp(28px, 3.5vw, 44px); }
.rw-dot { width: 8px; height: 8px; border-radius: 999px; padding: 0; cursor: pointer; border: none; background: var(--lys-border-dark-strong); transition: width .35s var(--ease-brand), background .35s var(--ease-brand); }
.rw-dot.is-active { width: 26px; background: var(--lys-green); }
.rw-dot:focus-visible { outline: 2px solid var(--lys-green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .rw-track, .rw-card, .rw-card__img img { transition: none; } }

/* reveal animation — scroll-triggered cascade.
   Sectie krijgt .in van de IntersectionObserver (App); de kinderen materialiseren
   gestaffeld (opacity + translateY + blur). Keyframes met `backwards` fill zodat
   hover-transforms op cards nooit geblokkeerd worden. Elementor-versie:
   elementor-export/scroll-reveal.html */
@media (prefers-reduced-motion: no-preference){
  @keyframes rv-in   { from { opacity:0; transform:translateY(14px); filter:blur(5px); } }
  @keyframes rv-in-r { from { opacity:0; transform:translateX(24px); filter:blur(5px); } }

  /* verborgen tot de sectie in beeld komt */
  .reveal:not(.in) .sec-head > *,
  .reveal:not(.in) .hero__copy > *,
  .reveal:not(.in) .hero__visual,
  .reveal:not(.in) .hero__marquee,
  .reveal:not(.in) .brow--3 > *,
  .reveal:not(.in) .brow--r3 > *,
  .reveal:not(.in) .bento-foot,
  .reveal:not(.in) .work-head__lead,
  .reveal:not(.in) .work-head__aside,
  .reveal:not(.in) .rw-viewport,
  .reveal:not(.in) .price-tabs,
  .reveal:not(.in) .price-grid > *,
  .reveal:not(.in) .about__visual,
  .reveal:not(.in) .about__txt > *,
  .reveal:not(.in) .concepts-band__txt > *,
  .reveal:not(.in) .concepts-band__media,
  .reveal:not(.in) .faq-wrap > *,
  .reveal:not(.in) .cta__inner > * { opacity:0; }

  /* cascade zodra .in gezet wordt */
  .reveal.in .sec-head > *,
  .reveal.in .hero__copy > *,
  .reveal.in .hero__marquee,
  .reveal.in .brow--3 > *,
  .reveal.in .brow--r3 > *,
  .reveal.in .bento-foot,
  .reveal.in .work-head__lead,
  .reveal.in .work-head__aside,
  .reveal.in .rw-viewport,
  .reveal.in .price-tabs,
  .reveal.in .price-grid > *,
  .reveal.in .about__visual,
  .reveal.in .about__txt > *,
  .reveal.in .concepts-band__txt > *,
  .reveal.in .faq-wrap > *,
  .reveal.in .cta__inner > * { animation: rv-in .6s var(--ease-brand) backwards; }

  .reveal.in .hero__visual,
  .reveal.in .concepts-band__media { animation: rv-in-r .7s var(--ease-brand) backwards; }

  /* sectiekoppen: eyebrow → titel → intro */
  .reveal.in .sec-head > :nth-child(2) { animation-delay:.09s; }
  .reveal.in .sec-head > :nth-child(3) { animation-delay:.18s; }

  /* hero: copy-cascade, mockup rechts, dan de logo-marquee */
  .reveal.in .hero__copy > :nth-child(2) { animation-delay:.08s; }
  .reveal.in .hero__copy > :nth-child(3) { animation-delay:.16s; }
  .reveal.in .hero__copy > :nth-child(4) { animation-delay:.24s; }
  .reveal.in .hero__copy > :nth-child(5) { animation-delay:.32s; }
  .reveal.in .hero__visual { animation-delay:.25s; }
  .reveal.in .hero__marquee { animation-delay:.55s; }

  /* kaart-grids: na de kop, links → rechts */
  .reveal.in .brow--3 > :nth-child(1),
  .reveal.in .brow--r3 > :nth-child(1) { animation-delay:.18s; }
  .reveal.in .brow--3 > :nth-child(2),
  .reveal.in .brow--r3 > :nth-child(2) { animation-delay:.27s; }
  .reveal.in .brow--3 > :nth-child(3) { animation-delay:.36s; }
  .reveal.in .bento-foot { animation-delay:.45s; }

  /* recent werk */
  .reveal.in .work-head__aside { animation-delay:.12s; }
  .reveal.in .rw-viewport { animation-delay:.22s; }

  /* prijzen: kop → tabs → kaarten */
  .reveal.in .price-tabs { animation-delay:.18s; }
  .reveal.in .price-grid > :nth-child(1) { animation-delay:.26s; }
  .reveal.in .price-grid > :nth-child(2) { animation-delay:.35s; }
  .reveal.in .price-grid > :nth-child(3) { animation-delay:.44s; }

  /* over de studio */
  .reveal.in .about__visual { animation-delay:.05s; }
  .reveal.in .about__txt > :nth-child(2) { animation-delay:.1s; }
  .reveal.in .about__txt > :nth-child(3) { animation-delay:.18s; }
  .reveal.in .about__txt > :nth-child(4) { animation-delay:.26s; }
  .reveal.in .about__txt > :nth-child(5) { animation-delay:.34s; }
  .reveal.in .about__txt > :nth-child(6) { animation-delay:.42s; }
  .reveal.in .about__txt > :nth-child(7) { animation-delay:.5s; }

  /* concepten-band */
  .reveal.in .concepts-band__txt > :nth-child(2) { animation-delay:.09s; }
  .reveal.in .concepts-band__txt > :nth-child(3) { animation-delay:.18s; }
  .reveal.in .concepts-band__txt > :nth-child(4) { animation-delay:.27s; }
  .reveal.in .concepts-band__media { animation-delay:.2s; }

  /* faq-items */
  .reveal.in .faq-wrap > :nth-child(1) { animation-delay:.14s; }
  .reveal.in .faq-wrap > :nth-child(2) { animation-delay:.21s; }
  .reveal.in .faq-wrap > :nth-child(3) { animation-delay:.28s; }
  .reveal.in .faq-wrap > :nth-child(4) { animation-delay:.35s; }
  .reveal.in .faq-wrap > :nth-child(5) { animation-delay:.42s; }

  /* eind-cta */
  .reveal.in .cta__inner > :nth-child(2) { animation-delay:.09s; }
  .reveal.in .cta__inner > :nth-child(3) { animation-delay:.18s; }
  .reveal.in .cta__inner > :nth-child(4) { animation-delay:.27s; }

  /* concept-detailpagina: reveal via utility-class, delay via --rvd inline */
  .reveal:not(.in) .wd-rv,
  .reveal:not(.in) .wd-rv--r { opacity:0; }
  .reveal.in .wd-rv { animation: rv-in .6s var(--ease-brand) backwards; animation-delay: var(--rvd, 0s); }
  .reveal.in .wd-rv--r { animation: rv-in-r .7s var(--ease-brand) backwards; animation-delay: var(--rvd, 0s); }

  /* micro: tactiele druk op knoppen (frequent → subtiel en direct) */
  .lys-btn:active { transform: scale(.98); }
}

/* ===================== Concept-detailpagina ===================== */
.wd-hero { position: relative; overflow-x: clip; }
.wd-hero__aura { top: -160px; left: 0; right: 0; margin-inline: auto; width: min(900px, 80%); height: 600px; }
.wd-hero > .wrap { position: relative; z-index: 1; }
.wd-back { margin-bottom: 22px; }
.wd-head { max-width: 60ch; }
.wd-head__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wd-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--lys-text-primary); margin: 0 0 16px; text-wrap: balance; }
.wd-h1 .g { color: var(--lys-green); }
.about__txt h2 .g,
.wd-about__main h2 .g,
.wd-tools2__copy h2 .g,
.wd-invest__copy h2 .g { color: var(--lys-green); }
.wd-sub { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--lys-text-secondary); margin: 0; max-width: 56ch; text-wrap: pretty; }
.wd-head__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* hero: header left, mockups right */
.wd-top { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 48px); }
.wd-head { max-width: none; }
.wd-devices { position: relative; padding-bottom: 56px; padding-right: 34px; }

.wd-desktop.cb-frame { border-radius: 16px; box-shadow: 0 44px 100px rgba(0,0,0,.6); }
.wd-shot { display: block; width: 100%; height: auto; }
/* phone overlapping bottom-right */
.wd-phone { position: absolute; right: 0; bottom: 0; width: clamp(116px, 16vw, 168px); aspect-ratio: 9 / 19; background: #05140e; border: 1px solid var(--lys-border-dark-strong); border-radius: 26px; padding: 7px; box-shadow: 0 30px 60px rgba(0,0,0,.55); transform: rotate(-4deg); }
.wd-phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 14px; border-radius: 0 0 10px 10px; background: #05140e; z-index: 2; }
.wd-phone__screen { width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, rgba(3,255,108,.08), transparent 60%), #00100a; display: flex; align-items: center; justify-content: center; text-align: center; }
.wd-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* over dit concept — licht blok: beschrijving + outcomes + wat je krijgt */
.wd-about__grid2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.wd-about__main h2 { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -.03em; color: var(--lys-text-on-light); margin: 0 0 18px; text-wrap: balance; }
.wd-lead { font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.7; color: var(--lys-text-body-light); margin: 0 0 32px; max-width: 58ch; text-wrap: pretty; }
.wd-outcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wd-outcard { background: var(--lys-white); border: 1px solid var(--lys-border-light); border-radius: 16px; padding: 20px 18px; box-shadow: var(--shadow-light-1); transition: transform .2s var(--ease-brand), box-shadow .2s var(--ease-brand); }
.wd-outcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-light-2); }
.wd-outcard__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(3,255,108,.14); color: #00A445; margin-bottom: 14px; }
.wd-outcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--lys-text-on-light); margin: 0 0 5px; }
.wd-outcard p { font-size: 13.5px; line-height: 1.5; color: var(--lys-text-muted-light); margin: 0; }

.wd-incl-card { position: sticky; top: 108px; background: var(--lys-white); border: 1px solid var(--lys-border-light); border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-light-2); }
.wd-incl-card h3 { font-family: var(--font-display); font-weight: 720; font-size: 20px; letter-spacing: -.02em; color: var(--lys-text-on-light); margin: 0 0 20px; }
.wd-checks { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.wd-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--lys-text-primary); }
.wd-incl-card .wd-checks li { color: var(--lys-text-on-light); font-weight: 550; }
.wd-checks__ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(3,255,108,.14); border: 1px solid var(--lys-border-dark-accent); color: var(--lys-green); margin-top: 1px; }
.wd-incl-card .wd-checks__ic { border-color: rgba(0,164,69,.3); color: #00A445; }
.wd-incl-card__note { font-size: 13.5px; color: var(--lys-text-muted-light); margin: 0; padding-top: 16px; border-top: 1px solid var(--lys-border-light); }

/* investering — contextuele prijs met prijskaartje */
.wd-invest { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(3,255,108,.05), transparent 40%), var(--lys-surface-dark); border: 1px solid var(--lys-border-dark-accent); }
.wd-invest__copy h2 { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; color: var(--lys-text-primary); margin: 0 0 12px; text-wrap: balance; }
.wd-invest__copy > p { font-size: 16px; line-height: 1.6; color: var(--lys-text-secondary); margin: 0 0 20px; max-width: 52ch; }
.wd-invest__points { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wd-invest__points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--lys-text-secondary); }
.wd-invest__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.wd-invest__tagwrap { justify-self: center; }
.wd-invest__tag { position: relative; width: min(300px, 100%); background: var(--lys-white); border-radius: 18px; padding: 30px 26px 0; text-align: center; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 34px 70px -22px rgba(0,0,0,.6); transition: transform .3s var(--ease-brand); }
.wd-invest__tag:hover { transform: rotate(0deg); }
.wd-invest__tag::before { content: ''; position: absolute; top: 12px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--lys-surface-dark); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.wd-invest__tag-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lys-text-muted-light); margin: 12px 0 8px; }
.wd-invest__amt { font-family: var(--font-display); font-weight: 780; font-size: clamp(2.1rem, 3vw, 2.6rem); color: var(--lys-text-on-light); letter-spacing: -.03em; line-height: 1; }
.wd-invest__amt strong { color: inherit; }
.wd-invest__per { display: block; font-size: 13px; color: var(--lys-text-muted-light); margin: 10px 0 0; }
.wd-invest__tag-foot { margin: 22px -26px 0; padding: 12px; background: var(--lys-bg-deep); color: var(--lys-green); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* proces — vier kaarten met de CSS-scenes (hergebruik ProcStepVisual) */
.wd-proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wd-proc__card { border-radius: 18px; overflow: hidden; background: var(--lys-white); border: 1px solid var(--lys-border-light); box-shadow: 0 26px 54px rgba(0,0,0,.4); transition: transform .22s var(--ease-brand), box-shadow .22s var(--ease-brand); }
.wd-proc__card:hover { transform: translateY(-4px); box-shadow: 0 34px 66px rgba(0,0,0,.5); }
.wd-proc__vis { position: relative; height: 225px; overflow: hidden; }
.wd-proc__vis .pv { position: absolute; inset: 0; padding: 14px; }
.wd-proc__vis .pv__card { width: min(280px, 96%); transform: scale(.86); box-shadow: 0 14px 30px -14px rgba(0,22,16,.22); }
.wd-proc__meta { padding: 16px 18px 18px; border-top: 1px solid var(--lys-border-light); }
.wd-proc__n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: #00A445; }
.wd-proc__meta h4 { font-family: var(--font-display); font-weight: 720; font-size: 17px; color: var(--lys-text-on-light); margin: 8px 0 4px; letter-spacing: -.02em; }
.wd-proc__meta p { font-size: 13.5px; line-height: 1.5; color: var(--lys-text-muted-light); margin: 0; }

/* koppelingen — licht blok met tool-grid */
.wd-tools2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--lys-white); border: 1px solid var(--lys-border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-light-2); padding: clamp(28px, 4vw, 48px); }
.wd-tools2__copy h2 { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em; color: var(--lys-text-on-light); margin: 0 0 12px; text-wrap: balance; }
.wd-tools2__copy p { font-size: 16px; line-height: 1.6; color: var(--lys-text-body-light); margin: 0; max-width: 44ch; }
.wd-tool2 { width: 64px; height: 64px; border-radius: 16px; border: 1px solid var(--lys-border-light); background: var(--lys-white); display: flex; align-items: center; justify-content: center; transition: border-color .25s var(--ease-brand), box-shadow .25s var(--ease-brand); box-shadow: var(--shadow-light-1); }
.wd-tool2 img { width: 28px; height: 28px; }
.wd-tool2:hover { border-color: var(--lys-border-light-strong); box-shadow: var(--shadow-light-2); }

/* connector-hub: kern (jouw site) met lijnen naar de tools */
.wd-hub { position: relative; height: 300px; border-radius: 16px; background-image: radial-gradient(circle at 1px 1px, rgba(0,22,16,.07) 1px, transparent 0); background-size: 20px 20px; }
.wd-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wd-hub__lines line { stroke: rgba(0,164,69,.35); stroke-width: 1.5; stroke-dasharray: 5 7; }
.wd-hub__core { position: absolute; left: 50%; top: 50%; margin: -34px 0 0 -34px; width: 68px; height: 68px; border-radius: 19px; background: radial-gradient(120% 120% at 30% 20%, #003D2E, #001610 75%); border: 1px solid var(--lys-border-dark-accent); display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 14px 34px -12px rgba(0,22,16,.45), 0 0 0 6px rgba(3,255,108,.08); }
.wd-hub__core img { width: 36px; height: auto; }
.wd-hub .wd-tool2 { position: absolute; margin: -32px 0 0 -32px; z-index: 1; }
@media (prefers-reduced-motion: no-preference){
  .wd-hub__lines line { animation: hubDash 2.8s linear infinite; animation-delay: calc(var(--i) * -0.55s); }
  .wd-tool2 img { animation: toolFloat 4.2s var(--ease-brand) infinite; animation-delay: calc(var(--i) * -0.6s); }
}
@keyframes hubDash { to { stroke-dashoffset: -24; } }
@keyframes toolFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* related concepts */
.wd-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wd-relcard { text-align: left; cursor: pointer; padding: 0; border: 1px solid var(--lys-border-dark); border-radius: 16px; overflow: hidden; background: var(--lys-surface-dark); transition: transform .2s var(--ease-brand), border-color .2s var(--ease-brand); }
.wd-relcard:hover { transform: translateY(-3px); border-color: var(--lys-border-dark-accent); }
.wd-relcard__shot { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--lys-border-dark); }
.wd-relcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wd-relcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.wd-relcard__branche { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--lys-text-primary); }
.wd-relcard__go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--lys-green); white-space: nowrap; }

@media (max-width: 920px){
  .wd-top, .wd-about__grid2, .wd-tools2, .wd-invest { grid-template-columns: 1fr; }
  .wd-incl-card { position: static; }
  .wd-proc { grid-template-columns: 1fr 1fr; }
  .wd-related { grid-template-columns: 1fr; }
  .wd-outcards { grid-template-columns: 1fr; }
  .wd-hub { height: 260px; }
  .wd-invest__tagwrap { justify-self: stretch; display: flex; justify-content: center; }
}
@media (max-width: 560px){
  .wd-proc { grid-template-columns: 1fr; }
  .wd-devices { padding-right: 24px; }
  .wd-invest__cta { width: 100%; }
}

/* ============================================================
   LYS Theme — WordPress-additions (geen design-wijzigingen)
   ============================================================ */
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--lys-bg-deep); }

/* mobiel menu: React mount/unmount → class-toggle op .nav */
.m-scrim, .m-sheet { display: none; }
.nav--open .m-scrim { display: block; }
.nav--open .m-sheet { display: flex; }

/* formulieren: honeypot + succes-status */
.lys-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-sent { text-align: center; padding: 40px 12px; }
.form-sent .svc__ic { margin: 0 auto 18px; }
.form-sent h3 { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; color: var(--lys-text-on-light); }
.form-sent p { color: var(--lys-text-muted-light); margin: 0; }

/* prijzen-tabs (in het prototype inline React-styles) */
.price-tab { padding: 10px 24px; border-radius: 10px; border: 1px solid var(--lys-border-light); background: transparent; color: var(--lys-text-on-light); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .2s ease; }
.price-tab.is-active { border-color: var(--lys-green); background: var(--lys-green); color: var(--lys-bg-deep); }
.lys-btn.w-full { width: 100%; }
.price-grid[hidden], .price-note[hidden], .proc-layer[hidden] { display: none; }
.proc-htrack { will-change: transform; }

/* ingelogd: WP admin-bar duwt de nav omlaag; sheet meebewegen */
body.admin-bar .nav { top: 32px; }
body.admin-bar .m-sheet { top: 126px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } body.admin-bar .m-sheet { top: 140px; } }

/* ============================================================
   Projecten — overview (/projecten/) + case-pagina's
   Additief blok; hergebruikt de wd-*-familie van de concept-
   detailpagina. pl-* = overview-rijen, pd-* = case-pagina.
   ============================================================ */

/* ---- overview: grote case-rijen, afwisselend gespiegeld ---- */
.pl-list { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.pl-row {
  position: relative; display: grid; grid-template-columns: 1.08fr 1fr; align-items: stretch;
  background: var(--lys-surface-dark); border: 1px solid var(--lys-border-dark); border-radius: var(--radius-xl);
  overflow: hidden; text-decoration: none;
  transition: transform .3s var(--ease-brand), border-color .3s var(--ease-brand), box-shadow .3s var(--ease-brand);
}
.pl-row:hover { transform: translateY(-4px); border-color: var(--lys-border-dark-accent); box-shadow: 0 30px 70px rgba(0,8,5,.55); }
.pl-row--flip { grid-template-columns: 1fr 1.08fr; }
.pl-row--flip .pl-row__media { order: 2; }
.pl-row__media { position: relative; min-height: 300px; background: var(--lys-bg-deepest); }
.pl-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-brand); }
.pl-row:hover .pl-row__media img { transform: scale(1.035); }
.pl-row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,8,5,.45)); pointer-events: none; }
.pl-row__body { padding: clamp(26px, 3.4vw, 46px); display: flex; flex-direction: column; }
.pl-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.pl-row__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lys-green); }
.pl-row__body h3 { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.2; letter-spacing: -.03em; color: var(--lys-text-primary); margin: 0 0 10px; }
.pl-row__body > p { font-size: 15px; line-height: 1.65; color: var(--lys-text-secondary); margin: 0; max-width: 52ch; }
.pl-row__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; margin-bottom: 26px; }
.pl-chip {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500;
  padding: 5px 11px; border-radius: var(--radius-xs);
  border: 1px solid var(--lys-border-dark); background: rgba(255,255,255,.03); color: var(--lys-text-secondary);
}
.pl-row__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--lys-border-dark); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pl-row__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pl-row__tools img { width: 19px; height: 19px; opacity: .5; transition: opacity .2s var(--ease-brand); }
.pl-row:hover .pl-row__tools img { opacity: .85; }
.pl-row__go { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--lys-green); white-space: nowrap; }
.pl-row__go svg { transition: transform .25s var(--ease-brand); }
.pl-row:hover .pl-row__go svg { transform: translateX(4px); }
.pl-outcards { max-width: 1040px; margin-inline: auto; }
@media (max-width: 880px) {
  .pl-row, .pl-row--flip { grid-template-columns: 1fr; }
  .pl-row--flip .pl-row__media { order: 0; }
  .pl-row__media { min-height: 0; aspect-ratio: 16 / 9; }
  .pl-row__media img { position: absolute; }
}

/* ---- case-pagina: hero dichter onder de nav (alleen projecten, concepts ongemoeid) ---- */
.pd-hero.sec-pad { padding-top: clamp(20px, 3vw, 44px); }

/* ---- case-pagina: feiten-strip in de hero ---- */
.pd-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: clamp(36px, 5vw, 60px) 0 0; background: var(--lys-border-dark);
  border: 1px solid var(--lys-border-dark); border-radius: 16px; overflow: hidden;
}
.pd-fact { margin: 0; background: rgba(0, 22, 16, .72); padding: 16px 22px; }
.pd-fact dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lys-text-muted); margin: 0 0 6px; }
.pd-fact dd { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; color: var(--lys-text-primary); margin: 0; display: flex; align-items: center; gap: 8px; }
.pd-fact--live dd { color: var(--lys-green); }
.pd-live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lys-green); box-shadow: 0 0 0 0 rgba(3,255,108,.5); animation: pulse 2.4s var(--ease-brand) infinite; flex: none; }
@media (max-width: 720px) { .pd-facts { grid-template-columns: repeat(2, 1fr); } }

/* ---- case-pagina: aanpak-stappen (licht blok) ---- */
.pd-steps { list-style: none; margin: 0; padding: 0; }
.pd-step { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--lys-border-light); }
.pd-step:first-child { border-top: 1px solid var(--lys-border-light); }
.pd-step__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #00A445;
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: rgba(3,255,108,.12); border: 1px solid var(--lys-border-light-accent);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.pd-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--lys-text-on-light); margin: 0 0 4px; }
.pd-step p { font-size: 14.5px; line-height: 1.6; color: var(--lys-text-body-light); margin: 0; max-width: 56ch; }

/* ---- case-pagina: resultaat-kaarten (donker blok) ---- */
.pd-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pd-rescard {
  background: var(--lys-surface-dark); border: 1px solid var(--lys-border-dark); border-radius: 18px;
  padding: 28px 26px;
  transition: transform .22s var(--ease-brand), border-color .22s var(--ease-brand), box-shadow .22s var(--ease-brand);
}
.pd-rescard:hover { transform: translateY(-4px); border-color: var(--lys-border-dark-accent); box-shadow: 0 24px 60px rgba(0,8,5,.5); }
.pd-rescard__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 18px;
  background: rgba(3,255,108,.12); border: 1px solid var(--lys-border-dark-accent); color: var(--lys-green);
}
.pd-rescard h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--lys-text-primary); margin: 0 0 6px; }
.pd-rescard p { font-size: 14.5px; line-height: 1.6; color: var(--lys-text-secondary); margin: 0; }
@media (max-width: 920px) { .pd-res { grid-template-columns: 1fr; } }

/* ---- eyebrow-labels op lichte secties: electric green (#03FF6C) heeft
   daar ~1.35:1 contrast en is onleesbaar → zelfde donkergroen als de
   overige accenten op licht (wd-outcard__ic, wd-proc__n, pd-step__num) ---- */
.lys-section-light .lys-eyebrow-label,
.lys-section-light-soft .lys-eyebrow-label,
.lys-section-light .lys-eyebrow,
.lys-section-light-soft .lys-eyebrow { color: #00A445; }

/* ---- home: "Bekijk case"-link op de Recent werk-kaarten ---- */
.rw-card__go { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--lys-green); text-decoration: none; }
.rw-card__go svg { transition: transform .25s var(--ease-brand); }
.rw-card__go:hover { color: var(--lys-green-hover); }
.rw-card__go:hover svg { transform: translateX(4px); }

/* ============================================================
   Hero — levende mockup ("de site die zichzelf bouwt én verkoopt")
   Vervangt de statische skeleton-shot. Pure CSS: de minisite bouwt
   zichzelf op (hm-in), daarna een eeuwige 12s-verkoopcyclus: cursor
   → klik → toast "Nieuwe aanvraag" → statistieken omhoog. Zelfde
   animatietaal als de pv-scenes en de wd-hub.
   ============================================================ */
.hm__body { position: relative; aspect-ratio: 16 / 12; display: flex; flex-direction: column; background: linear-gradient(180deg, #001610, #000C08); overflow: hidden; }

/* url typt zichzelf */
.hm-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 14ch; animation: hmType 1.1s steps(14) .5s backwards; }
@keyframes hmType { from { width: 0; } }

/* entrance: de minisite bouwt zichzelf op */
.hm-in { animation: hmIn .55s var(--ease-brand) backwards; animation-delay: var(--d, 0s); }
@keyframes hmIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* — minisite — */
.hm-nav { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid rgba(180,193,184,.1); }
.hm-nav__logo { width: 22px; height: 22px; border-radius: 6px; background: var(--lys-green); }
.hm-nav__links { display: flex; gap: 8px; margin-left: auto; }
.hm-nav__links i { width: 30px; height: 7px; border-radius: 4px; background: rgba(180,193,184,.25); }
.hm-nav__cta { width: 46px; height: 16px; border-radius: 8px; background: var(--lys-green); margin-left: 4px; }
.hm-hero { padding: 26px 18px 0; }
.hm-eyebrow { display: block; width: 42%; height: 9px; border-radius: 5px; background: rgba(3,255,108,.5); margin-bottom: 12px; }
.hm-line { display: block; height: 20px; border-radius: 6px; background: #F5F7F6; margin-bottom: 8px; position: relative; overflow: hidden; }
.hm-line--1 { width: 78%; }
.hm-line--1::after { content: ""; position: absolute; inset: 0; width: 45%; opacity: 0; background: linear-gradient(105deg, transparent, rgba(0,22,16,.16), transparent); animation: hmSheen 12s linear infinite; }
.hm-line--2 { width: 58%; background: rgba(245,247,246,.5); margin-bottom: 20px; }
@keyframes hmSheen { 0%, 70% { opacity: 0; transform: translateX(-120%); } 74% { opacity: 1; } 84%, 100% { opacity: 0; transform: translateX(320%); } }
.hm-ctas { position: relative; display: flex; gap: 10px; }
.hm-btn { width: 96px; height: 30px; border-radius: 8px; background: var(--lys-green); animation: hmPress 12s var(--ease-brand) infinite; }
.hm-btn--ghost { width: 80px; background: transparent; border: 1px solid rgba(180,193,184,.3); animation: none; }
@keyframes hmPress {
  0%, 32% { transform: scale(1); box-shadow: 0 0 0 0 rgba(3,255,108,0); }
  34%     { transform: scale(.93); }
  36%     { transform: scale(1); box-shadow: 0 0 0 6px rgba(3,255,108,.16); }
  44%     { box-shadow: 0 0 0 16px rgba(3,255,108,0); }
  100%    { transform: scale(1); box-shadow: 0 0 0 0 rgba(3,255,108,0); }
}
/* tussensectie: media + tekstregels — vult het ritme tussen hero en cards */
.hm-sec { display: flex; align-items: stretch; gap: 12px; padding: 0 18px; margin-top: 22px; }
.hm-sec__media { width: 38%; min-height: 68px; border-radius: 10px; background: rgba(0,61,46,.45); border: 1px solid rgba(180,193,184,.1); display: flex; align-items: center; justify-content: center; color: rgba(3,255,108,.5); }
.hm-sec__txt { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.hm-sec__txt i { display: block; height: 7px; border-radius: 4px; background: rgba(180,193,184,.22); }
.hm-sec__txt i.w1 { width: 52%; height: 9px; background: rgba(245,247,246,.42); }
.hm-sec__txt i.w2 { width: 72%; }
.hm-sec__txt i.w3 { width: 58%; }
.hm-sec__chip { width: 64px; height: 14px; border-radius: 7px; background: rgba(3,255,108,.22); border: 1px solid rgba(3,255,108,.4); margin-top: 3px; }

.hm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 18px 18px; margin-top: auto; }
.hm-card { position: relative; height: 64px; border-radius: 10px; background: rgba(0,61,46,.5); border: 1px solid rgba(180,193,184,.1); padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; }
.hm-card__ic { width: 15px; height: 15px; border-radius: 5px; background: rgba(3,255,108,.35); }
.hm-card i { display: block; height: 6px; border-radius: 3px; background: rgba(180,193,184,.22); width: 82%; }
.hm-card i + i { width: 55%; }
.hm-card--stats { flex-direction: row; align-items: flex-end; gap: 6px; padding: 12px 14px 10px; }
.hm-bar { flex: 1; border-radius: 3px 3px 0 0; background: rgba(180,193,184,.22); transform-origin: bottom; animation: hmBar 12s var(--ease-brand) infinite; }
.hm-bar.g { background: var(--lys-green); }
@keyframes hmBar { 0%, 46% { transform: scaleY(.55); } 56%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.55); } }
.hm-card__trend { position: absolute; top: 7px; right: 8px; color: var(--lys-green); opacity: 0; animation: hmTrend 12s var(--ease-brand) infinite; display: inline-flex; }
@keyframes hmTrend { 0%, 52% { opacity: 0; transform: scale(.5); } 58%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.5); } }

/* — de bezoeker: cursor → klik → ripple — */
.hm-cursor { position: absolute; left: 56px; top: 15px; z-index: 5; opacity: 0; filter: drop-shadow(0 3px 6px rgba(0,8,5,.6)); animation: hmCursor 12s var(--ease-brand) infinite; }
.hm-cursor::before { content: ""; position: absolute; left: -4px; top: -6px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lys-green); opacity: 0; animation: hmRipple 12s linear infinite; }
@keyframes hmCursor {
  0%, 6%  { opacity: 0; transform: translate(180px, 118px); }
  14%     { opacity: 1; }
  30%     { transform: translate(0, 0); }
  33%     { transform: translate(0, 0) scale(.82); }
  36%     { transform: translate(0, 0) scale(1); }
  46%     { opacity: 1; transform: translate(0, 0); }
  56%, 100% { opacity: 0; transform: translate(46px, 64px); }
}
@keyframes hmRipple { 0%, 33% { opacity: 0; transform: scale(.3); } 35% { opacity: .9; transform: scale(.5); } 46% { opacity: 0; transform: scale(2); } 100% { opacity: 0; transform: scale(.3); } }

/* — het resultaat: toast "Nieuwe aanvraag" — */
.hm-toast { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 11px; border-radius: 12px; background: rgba(0,22,16,.92); backdrop-filter: blur(8px); border: 1px solid var(--lys-border-dark-accent); box-shadow: var(--shadow-dark-2), 0 0 24px rgba(3,255,108,.14); opacity: 0; animation: hmToast 12s var(--ease-brand) infinite; }
.hm-toast__ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lys-green); color: var(--lys-bg-deep); }
.hm-toast__txt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; color: var(--lys-text-primary); }
.hm-toast__txt small { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--lys-text-muted); margin-top: 1px; }
@keyframes hmToast { 0%, 38% { opacity: 0; transform: translateY(-14px); } 43%, 68% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; transform: translateY(-10px); } }

/* — zwevende bewijs-cards (vervangen de statische pills) — */
.hm-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 14px; background: rgba(0,22,16,.85); backdrop-filter: blur(12px); border: 1px solid var(--lys-border-dark-accent); box-shadow: var(--shadow-dark-2); }
.hm-float__txt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; color: var(--lys-text-primary); }
.hm-float__txt small { display: block; font-size: 11px; color: var(--lys-text-muted); margin-top: 2px; }
.hm-float--seo { top: -26px; right: 8px; animation: hmIn .6s var(--ease-brand) 1.25s backwards, hmBob 7s ease-in-out 1.9s infinite alternate; }
.hm-float--flow { bottom: -24px; left: -26px; min-width: 218px; flex-direction: column; align-items: stretch; gap: 10px; animation: hmIn .6s var(--ease-brand) 1.45s backwards, hmBob 8.5s ease-in-out 2.4s infinite alternate; }
@keyframes hmBob { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* SEO-ring die zich intekent */
.hm-ring { position: relative; width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.hm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-ring circle { fill: none; stroke-width: 3.6; }
.hm-ring .t { stroke: rgba(180,193,184,.16); }
.hm-ring .p { stroke: var(--lys-green); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 6; animation: hmRing 1.6s var(--ease-brand) 1.55s backwards; }
@keyframes hmRing { from { stroke-dashoffset: 100.5; } }
.hm-ring b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--lys-green); }

/* conversieflow: pulse + marcherende route naar de lead */
.hm-float__head { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lys-text-primary); }
.hm-pulse { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--lys-green); box-shadow: 0 0 0 0 rgba(3,255,108,.5); animation: pulse 2.4s var(--ease-brand) infinite; }
.hm-flow { position: relative; display: flex; align-items: center; gap: 8px; }
.hm-flow__node { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--lys-green); background: rgba(3,255,108,.10); border: 1px solid var(--lys-border-dark-accent); }
.hm-flow__node--end { background: var(--lys-green); color: var(--lys-bg-deep); }
.hm-flow__line { flex: 1; height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, rgba(3,255,108,.5) 0 4px, transparent 4px 9px); animation: hmDash 1.1s linear infinite; }
@keyframes hmDash { to { background-position: 9px 0; } }
.hm-flow::after { content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--lys-green); box-shadow: 0 0 8px rgba(3,255,108,.85); opacity: 0; animation: hmTravel 3.2s linear infinite; }
@keyframes hmTravel { 0% { left: 8%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 92%; opacity: 0; } }

@media (max-width: 640px) {
  /* vaste 16/12-ratio clipt de cards-rij op smalle schermen → inhoud bepaalt hoogte */
  .hm__body { aspect-ratio: auto; }
  .hm-cards { margin-top: 0; padding-top: 20px; }
  /* toast is tijdelijk → mag direct onder de SEO-float verschijnen, bovenaan het frame */
  .hm-toast { top: 8px; right: 8px; }
  /* floats los van het scherm: volledig boven/onder het frame, coveren niks */
  .hero__visual { margin-top: 30px; margin-bottom: 44px; }
  .hm-float { padding: 9px 12px; gap: 9px; }
  .hm-float--seo { top: -54px; right: 8px; }
  .hm-float--flow { left: 8px; bottom: -52px; min-width: 196px; }
  .hm-float__txt b { font-size: 12.5px; }
  .hm-float__txt small { font-size: 10px; }
  .hm-ring { width: 38px; height: 38px; }
  .hm-ring b { font-size: 11px; }
  .hm-flow__node { width: 23px; height: 23px; }
}

/* ===== Blog & Nieuws CPT ===== */
.blog-hero { position: relative; overflow-x: clip; }
.blog-hero:not(.blog-hero--single).sec-pad { padding-block: clamp(44px, 6vw, 88px); }
.blog-hero > .wrap { position: relative; z-index: 1; }
.blog-filter { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: -20px; }
.blog-filter__chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--lys-border-dark); border-radius: 999px; color: var(--lys-text-secondary); text-decoration: none; font-size: 13px; font-weight: 650; transition: color .18s var(--ease-brand), border-color .18s var(--ease-brand), background .18s var(--ease-brand); }
.blog-filter__chip:hover, .blog-filter__chip.is-active { color: var(--lys-bg-deep); border-color: var(--lys-green); background: var(--lys-green); }
.blog-featured { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 390px; margin-bottom: clamp(28px, 4vw, 44px); overflow: hidden; text-decoration: none; background: var(--lys-white); border: 1px solid var(--lys-border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-light-2); transition: transform .25s var(--ease-brand), box-shadow .25s var(--ease-brand); }
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 34px 80px -36px rgba(0,26,14,.35); }
.blog-featured__media { min-height: 330px; background: #06130d; overflow: hidden; }
.blog-featured__image, .blog-card__image, .blog-single-head__image { width: 100%; height: 100%; display: block; object-fit: cover; }
.blog-featured:hover .blog-featured__image, .blog-card:hover .blog-card__image { transform: scale(1.035); }
.blog-featured__image, .blog-card__image { transition: transform .55s var(--ease-brand); }
.blog-featured__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #008F3D; }
.blog-meta span:not(:last-child)::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 12px; border-radius: 50%; background: currentColor; opacity: .35; vertical-align: middle; }
.blog-meta__views { display: inline-flex; align-items: center; gap: 5px; }
.blog-meta__views svg { width: 14px; height: 14px; margin-top: -1px; opacity: .82; }
.blog-featured h3, .blog-card h3 { font-family: var(--font-display); font-weight: 760; letter-spacing: -.03em; color: var(--lys-text-on-light); margin: 0 0 12px; text-wrap: balance; }
.blog-featured h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.08; }
.blog-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.18; }
.blog-featured p, .blog-card p { color: var(--lys-text-body-light); line-height: 1.65; margin: 0; }
.blog-card__go { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: #008F3D; font-size: 14px; font-weight: 750; }
.blog-card__go svg { transition: transform .25s var(--ease-brand); }
.blog-featured:hover .blog-card__go svg, .blog-card:hover .blog-card__go svg { transform: translateX(4px); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; text-decoration: none; background: var(--lys-white); border: 1px solid var(--lys-border-light); border-radius: 18px; box-shadow: var(--shadow-light-1); transition: transform .22s var(--ease-brand), box-shadow .22s var(--ease-brand), border-color .22s var(--ease-brand); }
.blog-card:hover { transform: translateY(-4px); border-color: rgba(0,164,69,.25); box-shadow: var(--shadow-light-2); }
.blog-card__media { aspect-ratio: 16 / 10; background: #06130d; overflow: hidden; }
.blog-card__body { padding: 23px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card__body .blog-card__go { margin-top: auto; padding-top: 22px; }
.blog-tag { text-decoration: none; }
.blog-image-fallback { min-height: 100%; display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 20%, rgba(3,255,108,.18), transparent 62%), linear-gradient(145deg, #001A10, #062015); }
.blog-image-fallback span { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--lys-border-dark-accent); border-radius: 18px; color: var(--lys-green); font-family: var(--font-mono); font-weight: 800; letter-spacing: .08em; }
.blog-pagination { margin-top: 38px; }
.blog-pagination ul { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.blog-pagination a, .blog-pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--lys-border-light); border-radius: 999px; text-decoration: none; color: var(--lys-text-on-light); background: var(--lys-white); }
.blog-pagination .current { background: var(--lys-green); border-color: var(--lys-green); color: var(--lys-bg-deep); font-weight: 800; }
.blog-empty { max-width: 620px; margin-inline: auto; text-align: center; padding: clamp(34px, 5vw, 56px); background: var(--lys-white); border: 1px solid var(--lys-border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-light-1); }
.blog-empty h3 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; color: var(--lys-text-on-light); margin: 14px 0 12px; }
.blog-empty p { color: var(--lys-text-body-light); line-height: 1.65; margin: 0 auto 26px; max-width: 46ch; }
.blog-single-head { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr); gap: clamp(34px, 5vw, 72px); align-items: center; }
.blog-single-head__copy { min-width: 0; }
.blog-single-head__media { aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid var(--lys-border-dark-strong); border-radius: var(--radius-xl); background: #06130d; box-shadow: 0 44px 100px rgba(0,0,0,.55); }
.blog-meta--single { color: var(--lys-text-muted); margin-top: 24px; margin-bottom: 0; }
.blog-article { overflow: visible; }
.blog-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(34px, 5vw, 72px); align-items: start; max-width: 1160px; margin-inline: auto; }
.blog-prose { max-width: 68ch; width: 100%; color: var(--lys-text-body-light); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.78; }
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose > *:last-child { margin-bottom: 0; }
.blog-prose p, .blog-prose ul, .blog-prose ol { margin: 0 0 1.35em; }
.blog-prose h2, .blog-prose h3, .blog-prose h4 { font-family: var(--font-display); color: var(--lys-text-on-light); letter-spacing: -.03em; line-height: 1.16; text-wrap: balance; }
.blog-prose h2 { font-size: clamp(1.75rem, 2.8vw, 2.55rem); margin: 2.15em 0 .65em; }
.blog-prose h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); margin: 1.8em 0 .55em; }
.blog-prose h4 { font-size: 1.12rem; margin: 1.6em 0 .5em; }
.blog-prose a { color: #007A35; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-prose strong { color: var(--lys-text-on-light); }
.blog-prose ul, .blog-prose ol { padding-left: 1.25em; }
.blog-prose li { margin-bottom: .55em; padding-left: .15em; }
.blog-prose blockquote { margin: 2em 0; padding: 22px 24px; border-left: 4px solid var(--lys-green); border-radius: 0 16px 16px 0; background: rgba(3,255,108,.08); color: var(--lys-text-on-light); font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.5; letter-spacing: -.015em; }
.blog-prose blockquote p { margin: 0; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-light-1); }
.blog-prose figure { margin: 2em 0; }
.blog-prose figcaption { margin-top: 10px; color: var(--lys-text-muted-light); font-size: 13.5px; line-height: 1.5; text-align: center; }
.blog-prose .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--lys-green); color: var(--lys-bg-deep); text-decoration: none; font-size: 15px; font-weight: 800; }
.blog-prose hr { border: 0; height: 1px; margin: 2.3em 0; background: var(--lys-border-light); }
.blog-prose table { width: 100%; border-collapse: collapse; margin: 2em 0; overflow: hidden; border: 1px solid var(--lys-border-light); border-radius: 14px; font-size: 15px; }
.blog-prose th, .blog-prose td { padding: 12px 14px; border-bottom: 1px solid var(--lys-border-light); text-align: left; }
.blog-prose th { color: var(--lys-text-on-light); background: rgba(0,26,14,.04); }
.blog-prose pre, .blog-prose code { font-family: var(--font-mono); background: #07130D; color: var(--lys-text-primary); }
.blog-prose code { padding: 2px 6px; border-radius: 6px; font-size: .86em; }
.blog-prose pre { overflow-x: auto; padding: 18px; border-radius: 16px; font-size: 14px; line-height: 1.6; }
.blog-sidebar { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 16px; }
.blog-side-card { padding: 22px; border: 1px solid var(--lys-border-light); border-radius: 18px; background: var(--lys-white); box-shadow: var(--shadow-light-1); }
.blog-side-card--cta { color: var(--lys-text-primary); background: radial-gradient(120% 100% at 50% 0%, rgba(3,255,108,.14), transparent 62%), var(--lys-surface-dark); border-color: var(--lys-border-dark-accent); }
.blog-side-card--promo { background: linear-gradient(180deg, rgba(3,255,108,.07), transparent 55%), var(--lys-white); }
.blog-side-card__eyebrow { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: #008F3D; }
.blog-side-card--cta .blog-side-card__eyebrow { color: var(--lys-green); }
.blog-side-card h3 { font-family: var(--font-display); font-weight: 760; font-size: 20px; line-height: 1.15; letter-spacing: -.025em; color: var(--lys-text-on-light); margin: 0 0 9px; }
.blog-side-card--cta h3 { color: var(--lys-text-primary); }
.blog-side-card p { margin: 0 0 18px; color: var(--lys-text-body-light); font-size: 14px; line-height: 1.6; }
.blog-side-card--cta p { color: var(--lys-text-secondary); }
.blog-side-card .lys-btn { width: 100%; justify-content: center; }
.blog-next { display: block; text-decoration: none; }
.blog-next span { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lys-text-muted-light); }
.blog-next strong { display: block; color: var(--lys-text-on-light); font-family: var(--font-display); font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.blog-next em { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #008F3D; font-style: normal; font-size: 13px; font-weight: 750; }
.blog-next svg { transition: transform .22s var(--ease-brand); }
.blog-next:hover svg { transform: translateX(4px); }
@media (max-width: 980px) {
  .blog-featured, .blog-single-head, .blog-shell { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-sidebar { position: static; }
  .blog-prose { max-width: none; }
}
@media (max-width: 640px) {
  .blog-filter { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .blog-filter__chip { flex: none; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured { min-height: 0; }
  .blog-featured__media { min-height: 0; aspect-ratio: 16 / 10; }
  .blog-featured__body, .blog-card__body, .blog-side-card { padding: 21px; }
  .blog-single-head__media { min-width: 0; aspect-ratio: 16 / 10; }
  .blog-prose { font-size: 17px; line-height: 1.72; }
  .blog-prose blockquote { padding: 18px; }
}