/* ==========================================================================
   MKLine glas, lichtlijn en intro.
   Glas zoals iOS: wazig doorschijnend vlak, lichte rand bovenaan, zachte glans linksboven.
   Werkt in licht en donker thema. Zonder backdrop-filter valt het terug op een dicht vlak.
   ========================================================================== */

:root {
  --glass-tint: rgba(18, 18, 22, 0.46);
  --glass-tint-strong: rgba(14, 14, 18, 0.62);
  --glass-sheen: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 52%);
  --glass-grain: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 40%, rgba(255, 255, 255, 0.035));
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.04), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.03);
  --glass-shadow: 0 34px 80px -42px rgba(0, 0, 0, 0.85);
  --glass-blur: blur(22px) saturate(165%);
  --glass-inner: rgba(255, 255, 255, 0.045);
  --glass-inner-border: rgba(255, 255, 255, 0.08);
}
:root:not([data-theme="dark"]) {
  --glass-tint: rgba(255, 253, 248, 0.56);
  --glass-tint-strong: rgba(255, 253, 248, 0.74);
  --glass-sheen: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%);
  --glass-grain: linear-gradient(155deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.25));
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(28, 23, 18, 0.04), 0 0 0 1px rgba(28, 23, 18, 0.06);
  --glass-shadow: 0 30px 70px -40px rgba(58, 40, 10, 0.38);
  --glass-blur: blur(20px) saturate(150%);
  --glass-inner: rgba(255, 255, 255, 0.5);
  --glass-inner-border: rgba(28, 23, 18, 0.07);
}

/* ---------- De glazen vlakken ---------- */
.calc-card, .agenda, .dashboard-mock, .demo-panel, .plan, .faq details, .ph-sat, .cells, .mobile-cta, #niche-modal-card,
.mk-glass, .shell .card, .table-wrap, .addon-note, .cycle-toggle, .final-cta {
  background: var(--glass-sheen), var(--glass-grain), var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-rim), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.calc-out { background: radial-gradient(120% 80% at 0% 0%, rgba(240, 168, 60, 0.20), transparent 60%), var(--glass-grain), var(--glass-tint) !important; border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border)) !important; }
.plan-featured { background: radial-gradient(120% 70% at 50% 0%, rgba(240, 168, 60, 0.18), transparent 60%), var(--glass-grain), var(--glass-tint-strong) !important; border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border)) !important; }
.faq details { border-radius: 16px; }

/* Rasterblok 'Maak er jouw eigen assistent van': één glasplaat met dunne scheidingen */
.cells { background-color: transparent; gap: 0; }
.cell { background: transparent !important; border-left: 1px solid var(--glass-inner-border); }
.cell:first-child { border-left: 0; }
.cell:hover { background: var(--glass-inner) !important; }
@media (max-width: 860px) { .cell { border-left: 0; border-top: 1px solid var(--glass-inner-border); } .cell:first-child { border-top: 0; } }

/* Dashboard-voorbeeld (laptop): het hele scherm is glas, de vlakken erin zijn lichter glas */
.dashboard-mock-top { background: rgba(255, 255, 255, 0.04) !important; border-bottom-color: var(--glass-inner-border) !important; }
:root:not([data-theme="dark"]) .dashboard-mock-top { background: rgba(255, 255, 255, 0.45) !important; }
.au-body, .dashboard-mock-body { background: transparent !important; }
.au-side { border-right-color: var(--glass-inner-border) !important; }
.au-kpi, .au-card, .dm-stat, .dm-chart, .au-ico:not(.on) { background: var(--glass-inner) !important; border-color: var(--glass-inner-border) !important; }

/* Agenda en gesprekken: de items als glazen tegeltjes */
.ev { background: var(--glass-inner); border-color: var(--glass-inner-border); }
.ev-new { background: rgba(240, 168, 60, 0.16); }
.msg.user, .line { background: var(--glass-inner); border-color: var(--glass-inner-border); }

/* Telefoon in de hero: rand als geslepen glas, scherm iets doorzichtiger */
.phone {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0.18)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 -2px 2px rgba(0, 0, 0, 0.25), 0 40px 80px -34px rgba(0, 0, 0, 0.6), 0 0 90px -24px color-mix(in srgb, var(--accent) 38%, transparent) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%);
}
.ph-screen { -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important; }
/* het felle hologram schijnt door de telefoon: scherm iets donkerder zodat de tekst leesbaar blijft */
:root[data-theme="dark"] .ph-screen { background: linear-gradient(180deg, rgba(40, 26, 10, .58), rgba(10, 9, 11, .74) 60%) !important; }
:root:not([data-theme="dark"]) .ph-screen { background: linear-gradient(180deg, rgba(36, 26, 16, .86), rgba(16, 13, 10, .9) 60%) !important; }
.bub { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.ph-btns .decline { background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.ph-btns .accept { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px -10px #f0a83c; }

/* Navigatie: glazen balk */
.nav { background: var(--glass-sheen), var(--glass-tint-strong) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border-bottom-color: var(--glass-border) !important; }

/* Knoppen: secundaire knop als glas, primaire knop met glanslijn */
.btn-secondary { background: var(--glass-inner); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }

/* Zonder backdrop-filter (oude browsers): dichte vlakken, zodat tekst leesbaar blijft */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-tint: rgba(22, 22, 26, 0.94); --glass-tint-strong: rgba(22, 22, 26, 0.97); }
  :root:not([data-theme="dark"]) { --glass-tint: rgba(255, 253, 248, 0.96); --glass-tint-strong: rgba(255, 253, 248, 0.98); }
}

/* ---------- De lichtlijn (canvas achter de inhoud) ---------- */
.mk-ribbon { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.mk-ribbon.is-ready { opacity: 1; }
html.mk-ribbon-on .mk-line .trk, html.mk-ribbon-on .mk-line .drw, html.mk-ribbon-on .mk-line .nd, html.mk-ribbon-on .mk-line .hdg { display: none; }
/* Hologram in de hero: fel en levendig (wens MK), met extra gloed zodat hij boven de lichtlijn uitkomt */
html.mk-ribbon-on .holo-hero { --holo-o: 1 !important; }
html.mk-ribbon-on .holo-hero .float { filter: drop-shadow(0 0 26px var(--holo-glow, rgba(240,168,60,.8))) drop-shadow(0 0 70px rgba(240,168,60,.45)) !important; }
html.mk-ribbon-on .mk-line .st { fill: var(--glass-tint-strong); }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
html.mk-lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-ribbon { display: none !important; }
}

/* ---------- 3D-kanteling met glans (muis) ---------- */
.mk-tilt { transition: rotate .45s cubic-bezier(.2, .7, .2, 1); will-change: rotate; }
.mk-tilt.is-tilting { transition-duration: .18s; }
.mk-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(90% 90% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; }
:root:not([data-theme="dark"]) .mk-glare { background: radial-gradient(90% 90% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%); mix-blend-mode: normal; }
.mk-tilt.is-tilting .mk-glare { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mk-glare { display: none; } }

/* ---------- Prijspakket: oranje gloed (zoals 'Meest gekozen') en sterrenstof bij hover ---------- */
.plan { overflow: visible; }
.plan:hover {
  background: radial-gradient(120% 70% at 50% 0%, rgba(240, 168, 60, 0.18), transparent 60%), var(--glass-grain), var(--glass-tint-strong) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--glass-border)) !important;
  box-shadow: var(--glass-rim), 0 0 0 1px rgba(240, 168, 60, 0.35), 0 0 42px -4px rgba(240, 168, 60, 0.45), 0 50px 100px -40px rgba(240, 168, 60, 0.35) !important;
}
.mk-dust { position: absolute; z-index: 4; pointer-events: none; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff6e2 0, #ffd38a 35%, rgba(240, 168, 60, 0) 70%); box-shadow: 0 0 8px 1px rgba(240, 168, 60, 0.7); }
:root:not([data-theme="dark"]) .mk-dust { background: radial-gradient(circle, #fff 0, #f0a83c 40%, rgba(240, 168, 60, 0) 72%); box-shadow: 0 0 6px 1px rgba(214, 110, 30, 0.6); }

/* ---------- Sterrenhemel op de andere pagina's ---------- */
.mk-stars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; animation: mk-fade-in .8s ease both; }
@keyframes mk-fade-in { from { opacity: 0; } }
html.mk-legal .mk-stars { opacity: .6; }
html:not([data-mk-ribbon]) .mk-stars { opacity: .32; }   /* homepage: heel subtiel, de lichtlijn blijft de hoofdrol */
html[data-mk-ribbon="stars"] .stage .ox { display: none; }
.shell, .legal-panel { position: relative; z-index: 1; }
.legal-panel { border: 1px solid var(--glass-border); border-radius: 26px; padding-block: 44px 36px !important; padding-inline: 40px !important; }
@media (max-width: 640px) { .legal-panel { padding-block: 30px 24px !important; padding-inline: 20px !important; border-radius: 20px; } }

/* Telefoon en tablet: alleen de navigatiebalk blijft echt glas. Live vervaging op elke kaart maakt scrollen op iOS stroef;
   de kaarten krijgen een iets dichtere kleur zodat ze er hetzelfde uitzien. */
@media (hover: none), (pointer: coarse) {
  :root { --glass-blur: none; --glass-tint: rgba(18, 18, 22, 0.86); --glass-tint-strong: rgba(14, 14, 18, 0.92); }
  :root:not([data-theme="dark"]) { --glass-blur: none; --glass-tint: rgba(255, 253, 248, 0.93); --glass-tint-strong: rgba(255, 253, 248, 0.96); }
  .nav { -webkit-backdrop-filter: blur(16px) saturate(150%) !important; backdrop-filter: blur(16px) saturate(150%) !important; }
  .phone, .ph-screen, .bub, .ph-btns .decline { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html { -webkit-tap-highlight-color: transparent; }
}