/* ============================================================
   Landing page layout & components
   Design tokens live in brand.css; idle animation & enchantment
   effects live in magic.css.
   ============================================================ */
.wrap{max-width:1140px;margin:0 auto;padding:0 40px}
html{scroll-padding-top:92px;scroll-behavior:smooth}

/* Nav */
nav.top{position:sticky;top:0;z-index:40;background:rgba(250,246,238,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:74px}
.brandline{display:flex;align-items:center;gap:11px}
.brandline .nm{font-family:var(--display);font-weight:500;font-size:1.16rem;color:var(--ink);white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:28px}
.navlinks a:not(.btn){font-size:.9rem;font-weight:500;color:var(--muted);text-decoration:none}
.navlinks a:not(.btn):hover{color:var(--ink)}

/* Decorative sparkle - base (dark-panel variants override color) */
.spk{position:absolute;color:var(--violet);opacity:.4;pointer-events:none}

/* Heading emphasis */
.h-em{font-style:italic;color:var(--violet)}
.h-em-dark{font-style:italic;color:var(--gold-2)}

/* Wizard scenes: bubble above, Wolfert below */
.wizard-scene{display:flex;flex-direction:column;align-items:center;gap:16px}
.wiz{display:inline-block;max-width:100%}

/* Speech bubble */
.speech{display:inline-block;position:relative;background:#fff;border:1.5px solid var(--line-2);
  border-radius:18px;padding:.65em 1.05em;font-family:var(--display);font-style:italic;
  font-size:1.1rem;color:var(--ink);box-shadow:var(--shadow-sm);max-width:30ch;text-align:center}
.speech::after{content:"";position:absolute;width:11px;height:11px;background:#fff;transform:rotate(45deg)}
.speech-tail-bottom::after{bottom:-7px;left:calc(50% - 6px);border-right:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2)}
.speech-tail-left::after{left:-7px;top:calc(50% - 6px);border-left:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2)}
.speech-tail-right::after{right:-7px;top:calc(50% - 6px);border-right:1.5px solid var(--line-2);border-top:1.5px solid var(--line-2)}
.speech-ink{background:var(--ink-2);border-color:#4A4366;color:#E7E3F5;box-shadow:none}
.speech-ink::after{background:var(--ink-2);border-color:#4A4366}

/* Hero */
.hero{position:relative;overflow:hidden;padding:88px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(2.8rem,5.6vw,4.7rem);color:var(--ink);margin:.35em 0 .3em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--violet)}
.hero p.sub{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.35rem);color:var(--muted);line-height:1.45;max-width:36ch;margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.micro{margin-top:18px;font-size:.86rem;color:var(--faint)}
.scene-hero{padding:10px 0}

/* Proof strip */
.numbers{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.numbers .inner{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:.98rem;text-align:center}
.numbers b{color:var(--ink);font-weight:600}
.numbers .serif-i{color:var(--violet);font-size:1.12em}

/* Section base */
.sec{padding:96px 0}
.sec-kicker{text-align:center;margin-bottom:52px}
.sec-kicker h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;color:var(--ink);line-height:1.05;margin:.3em 0 0}
.sec-kicker p{color:var(--muted);font-size:1.08rem;max-width:48ch;margin:14px auto 0;line-height:1.5}

/* De reis - phases */
.journey{display:flex;flex-direction:column;gap:64px}
.phase-light{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.phase-flip>div:first-child{order:2}
.phase-no{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--gold)}
.phase h3{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);margin:.25em 0 .35em;letter-spacing:-.015em}
.phase>div>p,.phase-grid>div>p{color:var(--muted);line-height:1.55;max-width:46ch;margin:0}
.phase-points{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.phase-points li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.45;color:var(--ink)}
.phase-points li svg{flex:none;margin-top:2px}

/* Dark magic panel (phase 3) */
.panel-ink{background:var(--ink);border-radius:var(--r-xl);padding:60px;color:var(--paper);position:relative;overflow:hidden}
.panel-ink .spk{color:var(--violet-2);opacity:.5}
.phase-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:1}
.panel-ink .phase-no{color:var(--gold-2)}
.panel-ink h3{color:var(--paper)}
.panel-ink .phase-grid>div>p{color:#b3acc9}
.panel-ink .phase-points li{color:#e7e3f5}

/* Cards (spreuken, duo) */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* Spreuken gallery */
.spreuken{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.spreuk .ic{width:46px;height:46px;border-radius:13px;background:var(--violet-soft);display:grid;place-items:center;color:var(--violet);margin-bottom:16px}
.spreuk h3{font-family:var(--display);font-weight:500;font-size:1.22rem;color:var(--ink);margin:0 0 8px}
.spreuk p{color:var(--muted);font-size:.93rem;line-height:1.5;margin:0}
.spreuk-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--violet-soft);border-color:#D2CAF5;text-align:center}
.spreuk-more .speech{font-size:.98rem}

/* De tovenaars */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:880px;margin:0 auto}
.duo-card{padding:34px}
.duo-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin-bottom:18px}
.duo-ph{background:var(--sand-2);display:grid;place-items:center;font-family:var(--display);font-size:2rem;color:var(--ink)}
.duo-card h3{font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--ink);margin:0 0 10px}
.duo-title{color:var(--violet);font-size:1.12rem;margin-left:2px}
.duo-card p{color:var(--muted);line-height:1.55;margin:0;font-size:.97rem}

/* Testimonial */
.testi{text-align:center;max-width:780px;margin:0 auto}
.testi blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.35;color:var(--ink);letter-spacing:-.01em;margin:0 0 28px}
.testi blockquote em{font-style:italic;color:var(--violet)}
.testi .who{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--muted);font-size:.95rem}
.testi .who .dot{width:42px;height:42px;border-radius:50%;background:var(--sand-2);display:grid;place-items:center;font-family:var(--display);color:var(--ink);font-weight:600}

/* FAQ */
.faq{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:0 22px}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;
  list-style:none;font-weight:600;color:var(--ink);font-size:1.02rem;padding:18px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-star{color:var(--gold);font-size:.95rem;transition:transform .25s ease,color .25s ease;flex:none}
.faq-item[open] .faq-star{transform:rotate(45deg) scale(1.25);color:var(--violet)}
.faq-item>p{color:var(--muted);line-height:1.6;margin:0;padding:0 0 20px;max-width:60ch}

/* Final CTA - the last dark magic moment */
.final{background:var(--ink);border-radius:var(--r-xl);padding:64px;position:relative;overflow:hidden}
.final .spk{color:var(--violet-2);opacity:.5}
.final-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center;position:relative;z-index:1}
.final h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.4vw,3.2rem);color:var(--paper);letter-spacing:-.02em;margin:0 0 14px;line-height:1.05}
.final p{color:#b3acc9;font-size:1.08rem;margin:0 0 4px;max-width:44ch;line-height:1.5}
.final-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:26px 0 10px}
.mail-alt{color:#b3acc9;text-decoration:none;font-size:.95rem}
.mail-alt b{color:var(--paper);font-weight:600}
.mail-alt:hover b{color:var(--gold-2)}

/* Footer */
footer.site{background:var(--ink);color:var(--paper);padding:64px 0 40px;margin-top:96px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
footer.site h5{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);margin:0 0 16px;font-weight:600}
footer.site a{display:block;color:#b3acc9;text-decoration:none;font-size:.94rem;margin-bottom:10px}
footer.site a:hover{color:#fff}
footer.site .nm{font-family:var(--display);font-size:1.3rem;color:var(--paper)}
footer.site .legal{display:flex;justify-content:space-between;border-top:1px solid #38305a;margin-top:44px;padding-top:24px;color:#7d76a0;font-size:.84rem}

/* 404 */
.notfound{min-height:calc(100vh - 80px);display:flex;align-items:center;padding:60px 0}

@media(max-width:900px){
  .wrap{padding:0 22px}
  .hero{padding:64px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .phase-light,.phase-grid,.final-grid{grid-template-columns:1fr;gap:36px}
  .phase-flip>div:first-child{order:0}
  .phase-light,.phase-grid{text-align:left}
  .spreuken{grid-template-columns:repeat(2,1fr)}
  .duo,footer.site .cols{grid-template-columns:1fr}
  .navlinks a:not(.btn){display:none}
  .panel-ink,.final{padding:36px}
  .final-grid{text-align:center}
  .final p{margin-left:auto;margin-right:auto}
  .final-cta{justify-content:center}
  footer.site .legal{flex-direction:column;gap:10px}
}
@media(max-width:560px){
  .spreuken{grid-template-columns:1fr}
}