@font-face{font-family:Montserrat;src:url('fonts/Montserrat-Light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap} @font-face{font-family:Montserrat;src:url('fonts/Montserrat-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:Montserrat;src:url('fonts/Montserrat-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap} @font-face{font-family:Montserrat;src:url('fonts/Montserrat-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap} :root{color-scheme:light;--inkt:#141a20;--diep:#0c1116;--krijt:#f3f0ea;--papier:#fcfaf6;--koper:#b86b4b;--koper-tekst:#915036;--licht-koper:#e2a082;--zacht:#59656d;--lijn:#d9d4cb;--breedte:1160px} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:28px} body{margin:0;background:var(--krijt);color:var(--inkt);font-family:Montserrat,system-ui,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased} button{font:inherit;cursor:pointer} a{color:inherit;text-underline-offset:5px} button,a{-webkit-tap-highlight-color:transparent} img,svg{max-width:100%;display:block} h1,h2,h3,p{margin:0} h1,h2,h3{font-weight:400;text-wrap:balance} h1{font-size:clamp(2.7rem,5.1vw,4.6rem);line-height:1.09;letter-spacing:-.045em;font-weight:300} h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.2;letter-spacing:-.04em} h3{font-size:1.2rem;line-height:1.4;letter-spacing:-.02em} p{max-width:65ch} p+p{margin-top:18px} :focus-visible{outline:3px solid var(--koper);outline-offset:5px} [hidden]{display:none!important} .wrap{max-width:var(--breedte);margin-inline:auto;padding-inline:32px} .skip{position:absolute;top:10px;left:16px;z-index:10;transform:translateY(-160%);padding:10px 18px;background:var(--krijt);color:var(--inkt)} .skip:focus{transform:translateY(0)} .eyebrow{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;line-height:1.6} .overline{display:flex;align-items:center;gap:14px;color:var(--koper-tekst);margin-bottom:22px} .overline::before{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0} .section{padding-block:100px} .intro{max-width:610px;margin-bottom:46px} .intro p{margin-top:22px;color:var(--zacht)} .button{display:inline-flex;justify-content:center;align-items:center;gap:22px;min-height:50px;padding:13px 22px;text-decoration:none;font-size:.86rem;font-weight:500;line-height:1.4;background:var(--koper);color:var(--diep);border:1px solid var(--koper);border-radius:3px;transition:background .18s,transform .18s} .button:hover{background:#d38d6c;border-color:#d38d6c;transform:translateY(-2px)} .button .arrow{font-size:1.2rem;font-weight:400;line-height:1} .text-link{font-size:.86rem;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;display:inline-block} .text-link:hover{color:var(--koper-tekst)} .actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px} .hero{background:#1b242c;color:var(--krijt);overflow:hidden;position:relative;isolation:isolate} .masthead{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:24px;border-bottom:1px solid #303a42} .brand{display:block;flex-shrink:0;width:196px;text-decoration:none} .brand svg{width:100%;height:auto} .nav{display:flex;align-items:center;gap:27px} .nav a{font-size:.77rem;text-decoration:none;color:#c6cdd0} .nav a:hover{color:var(--licht-koper)} .nav .contact-link{color:var(--krijt);border:1px solid #52606a;padding:9px 15px;border-radius:3px} .hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:64px;align-items:center;padding-block:83px 80px} .hero .overline{color:var(--licht-koper)} .hero h1 span{display:block;color:var(--licht-koper)} .hero-copy>p{color:#c4ccd2;margin-block:26px 30px;max-width:46ch;font-size:1.02rem;font-weight:300} .hero .text-link{color:var(--krijt)} .hero-note{font-size:.72rem;color:#aab6be;margin-top:20px} .hero-bottom{border-top:1px solid #303a42;padding-block:22px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:.76rem;color:#bac3c9} .hero-bottom span{display:flex;align-items:center;gap:10px} .hero-bottom span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--licht-koper)} .illustration{position:relative;padding-block:20px} .window{background:var(--papier);color:var(--inkt);border:1px solid #596169;border-radius:6px;overflow:hidden;box-shadow:0 24px 55px #0003;transform:rotate(1deg)} .window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:#e8e4dc;border-bottom:1px solid var(--lijn);font-size:.76rem;font-weight:500} .window-dots{display:flex;gap:5px} .window-dots i{height:5px;width:5px;background:#8d958f;border-radius:50%} .window-body{padding:27px 29px} .recording{display:flex;align-items:center;gap:13px;margin-bottom:25px} .sound-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:3px;background:#ede2d8;border-radius:50%} .sound-icon i{width:2px;height:12px;background:var(--koper-tekst);border-radius:2px} .sound-icon i:nth-child(2),.sound-icon i:nth-child(4){height:19px} .sound-icon i:nth-child(3){height:25px} .recording strong{font-size:.86rem;display:block;font-weight:600} .recording small{font-size:.7rem;color:var(--zacht);display:block} .context-tag{display:inline-flex;align-items:center;gap:7px;background:#eaece5;color:#465044;padding:6px 10px;font-size:.66rem;border-radius:3px;line-height:1.5} .context-tag::before{content:'+';font-size:1rem;line-height:1} .mock-title{font-size:1.25rem;margin-block:17px 5px;letter-spacing:-.025em} .mock-subtitle{font-size:.71rem;color:var(--zacht);margin-bottom:20px} .report-row{border-top:1px solid var(--lijn);padding-block:15px} .report-row b{display:block;font-size:.68rem;font-weight:600;margin-bottom:7px} .report-lines{display:grid;gap:6px} .report-lines span{display:block;height:5px;background:#dfdbd3;border-radius:1px} .report-lines span:last-child{width:78%} .report-row:last-of-type .report-lines span:last-child{width:53%} .window-foot{border-top:1px solid var(--lijn);padding:12px 22px;display:flex;gap:15px;align-items:center;justify-content:space-between;font-size:.66rem;color:var(--zacht)} .status{color:#715138;background:#efe3d8;padding:4px 8px;border-radius:3px} .caption{color:#aab6be;font-size:.64rem;margin-top:17px;text-align:center;letter-spacing:.03em} .product-heading{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:end;margin-bottom:50px} .product-heading p{color:var(--zacht);font-size:1rem} .features{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)} .feature{padding:30px 27px 34px 0} .feature+.feature{border-left:1px solid var(--lijn);padding-left:27px} .feature-number{color:var(--koper-tekst);font-family:ui-monospace,monospace;font-size:.72rem;display:block;margin-bottom:22px} .feature h3{margin-bottom:15px} .feature p{font-size:.89rem;color:var(--zacht);line-height:1.8} .product-note{margin-top:24px;color:var(--zacht);font-size:.8rem} .context{background:var(--papier);border-block:1px solid var(--lijn)} .context-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:start} .context-copy>p{color:var(--zacht);margin-top:22px;font-size:.95rem} .context-copy .small-note{font-size:.8rem;padding-left:18px;border-left:2px solid var(--koper);margin-top:28px} .context-demo{background:var(--krijt);border:1px solid var(--lijn);border-radius:4px;padding:28px} .demo-label{color:var(--koper-tekst);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;font-weight:600} .source{font-size:.81rem;padding-bottom:18px;margin-bottom:19px;border-bottom:1px solid var(--lijn)} .source b{font-weight:600;font-size:.7rem;color:var(--zacht);display:block;margin-bottom:6px} .source blockquote{margin:0;font-size:.93rem;line-height:1.65} .switch{display:flex;gap:4px;padding:4px;background:#e4e0d8;border-radius:4px;margin-block:21px 18px} .switch button{flex:1;min-height:42px;padding:9px 8px;border:1px solid transparent;background:transparent;font-size:.7rem;color:var(--zacht);line-height:1.5;border-radius:2px} .switch button[aria-pressed="true"]{background:var(--papier);border-color:var(--lijn);color:var(--inkt);box-shadow:0 1px 3px #0000000a;font-weight:600} .demo-result{font-size:.87rem;background:var(--papier);padding:21px;border-left:2px solid var(--koper);min-height:218px} .demo-result b{display:block;margin-bottom:10px;font-size:.68rem;font-weight:600;color:var(--zacht)} .demo-result mark{background:#ede0d3;color:var(--inkt);padding:1px 3px} .demo-disclaimer{font-size:.66rem;line-height:1.6;margin-top:16px;color:var(--zacht)} .offering{display:grid;grid-template-columns:1fr 1fr;gap:24px} .offering-card{border:1px solid var(--lijn);padding:34px;border-radius:4px} .offering-card.primary{background:var(--inkt);border-color:var(--inkt);color:var(--krijt)} .offering-card .eyebrow{color:var(--koper-tekst);margin-bottom:17px} .offering-card.primary .eyebrow{color:var(--licht-koper)} .offering-card h3{font-size:1.6rem;letter-spacing:-.035em;margin-bottom:13px} .offering-card>p{font-size:.9rem;color:var(--zacht)} .offering-card.primary>p{color:#bac3c9} .check-list{list-style:none;padding:0;margin:26px 0 0} .check-list li{position:relative;padding:13px 0 13px 24px;border-top:1px solid var(--lijn);font-size:.81rem} .check-list li::before{content:'+';position:absolute;left:1px;top:11px;color:var(--koper-tekst);font-size:1rem} .primary .check-list li{border-color:#34404a;color:#d0d6d9} .primary .check-list li::before{color:var(--licht-koper)} .offering-card .small{font-size:.76rem;margin-top:20px} .offering-note{font-size:.8rem;color:var(--zacht);margin-top:24px} .voice-note{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;border-top:1px solid var(--lijn);margin-top:36px;padding-top:27px} .voice-note .eyebrow{color:var(--koper-tekst);margin-bottom:10px} .voice-note p{font-size:.87rem;color:var(--zacht)} @media(max-width:760px){.voice-note{grid-template-columns:1fr;gap:16px}} .services{background:#e9e5dc;border-block:1px solid var(--lijn)} .service-row{display:grid;grid-template-columns:55px 1fr 1.1fr;gap:25px;border-top:1px solid #ccc5b9;padding:35px 0;align-items:start} .service-row:last-child{border-bottom:1px solid #ccc5b9} .service-number{font-family:ui-monospace,monospace;color:var(--koper-tekst);font-size:.75rem;padding-top:4px} .service-row h3{font-size:1.5rem;max-width:20ch} .service-row p{color:var(--zacht);font-size:.9rem} .service-row .text-link{margin-top:18px;font-size:.77rem} .about-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:center} .maker-portrait{margin:0;background:var(--inkt);color:var(--krijt);border-radius:4px;overflow:hidden;width:100%;max-width:420px;justify-self:center} .maker-portrait img{width:100%;height:auto;aspect-ratio:683/1024;object-fit:cover} .maker-portrait figcaption{padding:21px 25px} .maker-portrait strong{display:block;font-size:.95rem;font-weight:500} .maker-portrait span{display:block;font-size:.74rem;color:#bac3c9;margin-top:4px} .maker-mark{background:var(--inkt);padding:52px 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:350px;color:var(--krijt);border-radius:3px} .maker-mark img{width:160px;height:160px;object-fit:contain;margin-bottom:26px} .maker-mark b{font-size:.9rem;font-weight:500} .maker-mark span{font-size:.73rem;color:#b4bec5;margin-top:6px} .about-copy>p{color:var(--zacht);font-size:.94rem;margin-top:21px} .steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:37px;gap:23px} .step{padding-top:17px;border-top:1px solid var(--lijn)} .step span{font-family:ui-monospace,monospace;color:var(--koper-tekst);font-size:.7rem;display:block;margin-bottom:9px} .step b{display:block;font-size:.8rem;font-weight:600;margin-bottom:7px} .step p{font-size:.75rem;line-height:1.7;color:var(--zacht)} .faq{background:var(--papier);border-top:1px solid var(--lijn)} .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px} .questions{border-top:1px solid var(--lijn)} details{border-bottom:1px solid var(--lijn)} summary{list-style:none;cursor:pointer;padding:22px 35px 22px 0;position:relative;font-size:.9rem;line-height:1.6;font-weight:500} summary::-webkit-details-marker{display:none} summary::after{content:'+';position:absolute;right:3px;top:20px;font-size:1.2rem;font-weight:400;color:var(--koper-tekst)} details[open] summary::after{content:'−'} details p{font-size:.85rem;color:var(--zacht);padding:0 30px 23px 0} .contact{background:var(--inkt);color:var(--krijt);padding-block:80px} .contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center} .contact .overline{color:var(--licht-koper)} .contact h2{font-size:clamp(2.2rem,4vw,3.6rem);max-width:18ch} .contact p{font-size:.93rem;color:#bac3c9;margin-top:22px} .contact-action{padding-left:35px;border-left:1px solid #3c454b} .contact-action .email{display:inline-block;margin-top:20px;color:#bac3c9;font-size:.86rem} footer{background:var(--diep);color:#aab6be;font-size:.7rem;padding-block:24px} footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} footer a{text-decoration:none} @media(min-width:1500px){.hero-grid{padding-block:100px}} @media(max-width:1000px){.hero-grid{gap:35px}.nav{gap:17px}.nav a{font-size:.7rem}.brand{width:168px}.context-grid,.product-heading{gap:38px}.about-grid,.faq-grid{gap:42px}.hero h1{font-size:3.45rem}.window-body{padding:23px}.section{padding-block:80px}} @media(max-width:760px){.wrap{padding-inline:24px}.masthead{gap:15px;flex-wrap:wrap;padding-block:17px}.brand{width:153px}.nav{gap:19px}.nav a{font-size:.72rem}.nav .secondary-nav{display:none}.hero-grid{grid-template-columns:1fr;gap:38px;padding-block:57px 37px}.hero h1{font-size:clamp(2.8rem,8.5vw,4.1rem);max-width:15ch}.hero-copy>p{max-width:50ch}.illustration{max-width:480px;width:100%;margin-inline:auto;padding:4px 9px}.hero-bottom{justify-content:flex-start;gap:11px 25px}.hero-bottom span{font-size:.71rem}.product-heading,.context-grid,.about-grid,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:31px}.product-heading{margin-bottom:34px}.features{grid-template-columns:1fr}.feature{padding:24px 0}.feature+.feature{border-left:0;border-top:1px solid var(--lijn);padding-left:0}.feature-number{margin-bottom:10px}.feature h3{margin-bottom:10px}.feature p{max-width:65ch}.offering{grid-template-columns:1fr}.offering-card{padding:28px}.service-row{grid-template-columns:30px 1fr;gap:15px}.service-row>div:last-child{grid-column:2}.service-row h3{max-width:none}.maker-mark{min-height:210px;padding:25px;display:grid;grid-template-columns:100px 1fr;column-gap:25px;align-content:center;justify-items:start}.maker-mark img{grid-row:1/3;width:100px;height:100px;margin:0}.maker-mark b{align-self:end}.maker-mark span{align-self:start}.section{padding-block:62px}.intro{margin-bottom:31px}.contact-action{padding:0;border:0}.contact{padding-block:62px}.demo-result{min-height:0}.contact h2{max-width:20ch}} @media(max-width:400px){.wrap{padding-inline:19px}.nav{gap:12px}.nav .product-nav{display:none}.brand{width:145px}.actions{gap:19px}.context-demo{padding:20px}.switch button{font-size:.65rem}.window-body{padding:23px 20px}.window-foot{font-size:.61rem;padding-inline:16px}.steps{grid-template-columns:1fr;gap:17px}.step{display:grid;grid-template-columns:25px 1fr;gap:0 8px}.step p{grid-column:2}.maker-mark{column-gap:16px;padding:22px}.maker-mark b{font-size:.8rem}.maker-mark span{font-size:.68rem}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}} @media print{body{font-size:10pt}h1{font-size:30pt}h2{font-size:22pt}.section{padding-block:28px}.nav,.skip,.actions,.contact-action,.switch{display:none}.hero,.contact,.maker-mark,.offering-card.primary{background:white;color:#141a20}.hero-copy>p,.contact p,.primary .check-list li,.offering-card.primary>p{color:#333}.illustration{max-width:350px}.hero-grid{padding-block:28px}.offering-card,details,.context-demo{break-inside:avoid}footer{background:white;color:#333}} /* Gloed (2026-09-17, verzoek Niels: "lichter, meer glow, dunnere tekst"): warm licht in de opening, iets lichtere inktgrond (#1b242c i.p.v. #141a20), koppen in Light 300. */ .hero::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(ellipse 560px 380px at 26% 42%,rgba(226,172,110,.22),rgba(184,107,75,.07) 58%,transparent 100%), radial-gradient(ellipse 900px 520px at 55% 8%,rgba(243,240,234,.075),transparent 75%), radial-gradient(ellipse 700px 460px at 78% 70%,rgba(184,107,75,.09),transparent 78%); } .hero>.wrap{position:relative;z-index:1} .hero h1{color:#f6f3ec} .hero h1 span{ position:relative;isolation:isolate;color:#f8e7cf; text-shadow:0 0 26px rgba(241,197,143,.42),0 0 70px rgba(220,151,98,.26); } .hero h1 span::before{ content:'';position:absolute;pointer-events:none;z-index:-1; inset:-.55em -.2em -.65em -.65em; background:radial-gradient(ellipse at 45% 50%,rgba(220,163,99,.2),rgba(184,107,75,.05) 52%,transparent 74%); } .hero .overline{color:#e6b492} .hero .window{box-shadow:0 24px 55px rgba(0,0,0,.22),0 0 90px rgba(210,161,111,.12)} .masthead,.hero-bottom{border-color:#36414a} @media(max-width:760px){ .hero::before{background:radial-gradient(ellipse 460px 360px at 35% 25%,rgba(226,172,110,.2),rgba(184,107,75,.05) 62%,transparent 100%)} } @media print{ .hero::before,.hero h1 span::before{display:none} .hero{background:#fff}.hero h1,.hero h1 span{color:#141a20;text-shadow:none} } /* Payoff onder het woordmerk (2026-09-17) */ .brand .tagline{display:block;margin-top:7px;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#aab6be;font-weight:400} .hero-bottom span:nth-child(2)::before{background:var(--licht-koper)} /* Schermen uit de oefenpraktijk (2026-09-17): echte beelden van Levavi Sessies met verzonnen cliënten. Staat op de lichte sectie-achtergrond, dus gelijk in beide varianten. */ .shots{margin-top:60px;padding-top:52px;border-top:1px solid var(--lijn)} .shots .shots-kop{max-width:610px;margin-bottom:30px} .shots .shots-kop h3{font-size:1.45rem;letter-spacing:-.03em;margin-bottom:12px} .shots .shots-kop p{color:var(--zacht);font-size:.95rem} .shot{margin:0} .shot img{width:100%;height:auto;display:block;border:1px solid var(--lijn);border-radius:9px;background:var(--papier)} .shot figcaption{margin-top:13px;font-size:.79rem;line-height:1.6;color:var(--zacht)} .shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:34px} .shot-note{margin-top:26px;font-size:.72rem;color:var(--zacht)} @media(max-width:760px){.shot-pair{grid-template-columns:1fr;gap:26px}.shots{margin-top:44px;padding-top:38px}} /* Kop: echte schermafbeelding in het vensterkader (2026-09-17) */ .window-shot{display:block;width:100%;height:auto} /* Variant 3: warme opening, lichte inhoud en het verslag centraal. */ :root{--krijt:#f6f3ed;--papier:#fffcf7} .hero{background:#1b242c} .hero-grid{grid-template-columns:1.06fr 1fr;gap:64px;padding-block:88px 76px} .hero::before{background:radial-gradient(ellipse 660px 470px at 28% 45%,#d5a56d30,transparent 74%),radial-gradient(ellipse 720px 480px at 83% 62%,#ebcc9821,transparent 72%),linear-gradient(165deg,#ffffff05,transparent 55%)} .hero h1{font-size:clamp(2.65rem,4.7vw,4.25rem);line-height:1.14} .hero h1 span{text-shadow:0 0 34px #f1c58f52,0 0 85px #dc976329} .hero-copy>p{font-weight:400;font-size:.98rem;line-height:1.85;color:#d0d4d4} .hero-note{line-height:1.8;font-size:.76rem} .hero .button,.contact .button{background:#edc9a4;border-color:#edc9a4;color:#20282b} .hero .button:hover,.contact .button:hover{background:#f7dcc0;border-color:#f7dcc0} .report-preview{margin:0;padding:0;min-width:0} .hero .window{transform:none;border:1px solid #fff3;border-radius:10px;box-shadow:0 30px 80px #0003,0 0 110px #e7bc8819;background:#fff} .window-bar{padding:16px 22px;background:#f1ece4;border-bottom:1px solid #e5ddd2} .preview-state{font-size:.64rem;color:#5e5e54;border:1px solid #d5cbbb;border-radius:20px;padding:3px 9px} .preview-intro{padding:27px 27px 24px;background:#fffcf7} .preview-intro .eyebrow{color:#915036;font-size:.64rem;letter-spacing:.12em} .preview-intro h3{font-size:2rem;line-height:1.2;font-weight:400;letter-spacing:-.04em;margin:12px 0 13px} .preview-intro p{font-size:.78rem;color:#59656d} .report-crop{aspect-ratio:2.25;overflow:hidden;border-top:1px solid #e9e2d8;border-bottom:1px solid #e9e2d8;background:white} .report-crop img{width:100%;height:100%;object-fit:cover;object-position:center bottom} .preview-footer{padding:19px 23px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 17px;font-size:.69rem;background:#fff} .preview-footer>span{color:#59656d} .preview-footer a{color:#915036;margin-left:auto} .caption{font-size:.72rem;color:#c3c8c9;letter-spacing:0} .hero-bottom{font-size:.72rem;gap:15px 24px} .section{padding-block:100px} #sessies{background:#fffcf7} .shots{margin-top:48px;padding-top:42px} .screen-switch{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px} .screen-switch button{min-height:44px;padding:10px 18px;background:transparent;border:1px solid #bcb4a9;border-radius:4px;font-size:.8rem;color:#46525a} .screen-switch button[aria-pressed="true"]{background:#243038;color:#fffaf2;border-color:#243038} .screen-switch button:hover{border-color:#915036} .shot+.shot{margin-top:30px} .shot[hidden]+.shot{margin-top:0} .shot a{display:block;border-radius:9px} .shot-note{font-size:.76rem} .context-section{background:#eee9e0;border-block:1px solid #dfd8cd} .context-grid{align-items:center;gap:70px} .context-example{border:1px solid #d9cfc0;border-radius:7px;background:#fffcf7;padding:30px} .context-example>.eyebrow{display:block;color:#915036;margin-bottom:24px} .context-moment{border-left:1px solid #cfb79e;padding:0 0 25px 22px;position:relative} .context-moment::before{content:'';position:absolute;left:-4px;top:6px;width:7px;height:7px;background:#b86b4b;border-radius:50%} .context-moment>span,.context-result>span{display:block;font-size:.72rem;font-weight:500;color:#775338;margin-bottom:7px} .context-moment p,.context-result p{font-size:.87rem;line-height:1.85} .context-result{background:#f0e6d8;padding:20px 22px;border-radius:4px} .offering-card.primary{background:#253138;border-color:#253138} .services{background:#f0ece4} .voice-section{background:#fffcf7;border-bottom:1px solid #e4ddd2} .voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} .voice-grid>div>p{color:var(--zacht);font-size:.94rem} .contact{background:radial-gradient(ellipse at 17% 100%,#bd885329,transparent 65%),#1b242c} .contact h2{color:#f8e7cf} @media(min-width:1500px){.hero-grid{padding-block:104px 92px}} @media(max-width:1000px){.hero-grid{gap:32px}.hero h1{font-size:3rem}.preview-intro{padding:23px}.preview-intro h3{font-size:1.8rem}.preview-footer{padding:16px 20px}.preview-footer a{margin-left:0}.context-grid,.voice-grid{gap:36px}.section{padding-block:80px}} @media(max-width:760px){.hero-grid{grid-template-columns:1fr;gap:42px;padding-block:55px 38px}.hero h1{font-size:clamp(2.6rem,8.3vw,3.8rem)}.hero-copy>p{font-size:.96rem}.report-preview{max-width:480px;width:100%;margin-inline:auto}.hero-bottom{justify-content:flex-start}.hero::before{background:radial-gradient(ellipse 470px 430px at 20% 27%,#d5a56d38,transparent 80%),radial-gradient(ellipse at 75% 80%,#ebcc9812,transparent 70%)}.context-grid,.voice-grid{grid-template-columns:1fr;gap:30px}.section{padding-block:64px}.context-example{padding:24px}.preview-intro h3{font-size:1.9rem}.preview-footer{font-size:.7rem}.preview-footer a{margin-left:auto}.shots{margin-top:36px;padding-top:32px}.caption{font-size:.7rem}} @media(max-width:380px){.preview-footer a{margin-left:0}.preview-state{font-size:.58rem}.window-bar{padding:14px 18px}.preview-intro{padding:22px}.hero-bottom span{font-size:.69rem}} @media print{.hero,.contact,.offering-card.primary{background:white;color:#141a20}.hero h1,.hero h1 span,.contact h2{color:#141a20;text-shadow:none}.hero-copy>p,.hero-note,.hero-bottom,.caption{color:#46525a}.hero::before,.screen-switch{display:none}.shot[hidden]{display:block!important}.shot+.shot{margin-top:24px}.section{padding-block:28px}.hero-grid{padding-block:28px}} /* Verfijning: een horizontale merkregel en warm, diffuus strijklicht. */ .brand{display:flex;align-items:flex-end;gap:18px;width:auto;max-width:100%} .brand svg{width:176px;height:auto;flex-shrink:0} .brand .tagline{margin:0 0 3px;padding:1px 0 1px 18px;border-left:1px solid #e8ceb44d;font-size:.74rem;font-weight:400;letter-spacing:.035em;line-height:1.5;text-transform:none;white-space:nowrap;color:#d7cabb} @media screen{ .hero{background:#19232b} .hero::before{ inset:-1px; background: radial-gradient(ellipse 49% 62% at 30% 44%,#eac08b26 0%,#c88b5820 30%,#c88b5808 60%,transparent 85%), radial-gradient(ellipse 65% 110% at 96% -28%,#fff0d94a 0%,#e6bd8d24 34%,transparent 72%), radial-gradient(ellipse 48% 45% at 82% 78%,#e3b07814 0%,transparent 80%), linear-gradient(135deg,#111b2400 20%,#111b2466 100%); } .hero::after{ content:'';position:absolute;inset:-20% -15%;z-index:0;pointer-events:none; background:linear-gradient(146deg,transparent 27%,#fce7c703 37%,#fce7c70d 43%,#fce7c709 48%,transparent 62%); filter:blur(26px); } .hero h1 span{ color:#ffe8c7; text-shadow:0 0 20px #f9d19c26,0 0 60px #e4ad6952,0 0 110px #d99b5e21; } .hero h1 span::before{ inset:-.7em -1em -.9em -.7em; background:radial-gradient(ellipse at 43% 52%,#f7cb9226 0%,#e2a96912 40%,transparent 73%); filter:blur(15px); } .masthead{border-bottom-color:#ecddc71c} .hero-bottom{border-top-color:#ecddc724} .hero .window{border-color:#f8e3c84d;box-shadow:0 28px 75px #080f163d,0 0 95px #edc48d17,0 -1px 0 #fff2} .contact{background:radial-gradient(ellipse 75% 120% at 10% 115%,#d8a56b29,transparent 72%),#19232b} } @media(max-width:1000px){ .brand{gap:13px} .brand svg{width:150px} .brand .tagline{padding-left:13px;font-size:.68rem;margin-bottom:2px} .masthead{gap:24px;flex-wrap:wrap} } @media(max-width:760px){ .masthead{row-gap:23px} .brand{gap:16px} .brand svg{width:148px} .brand .tagline{padding-left:16px;font-size:.7rem} } @media screen and (max-width:760px){ .hero::before{background:radial-gradient(ellipse 100% 36% at 25% 29%,#eac08b29,transparent 78%),radial-gradient(ellipse 95% 55% at 115% -7%,#fff0d933,transparent 70%),radial-gradient(ellipse 80% 32% at 75% 77%,#e3b07812,transparent 80%)} .hero::after{background:linear-gradient(155deg,transparent 13%,#fce7c70a 24%,transparent 43%);filter:blur(22px)} } @media(max-width:360px){.brand svg{width:134px}.brand{gap:13px}.brand .tagline{padding-left:13px;font-size:.66rem}} /* Rustige scheidingslijn; alleen het ringetje in het kleine woordmerk licht op. */ .hero-divider{border-top:1px solid #ecddc724;margin-bottom:28px} .hero::before,.hero::after,.hero h1 span::before{display:none} .hero h1 span{color:#f5e4cd;text-shadow:none} .light-toggle{position:relative;padding:0;border:0;border-radius:3px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} .light-toggle:disabled{cursor:default} .light-toggle svg{overflow:visible} .light-toggle circle{transition:stroke .3s ease,filter .5s ease} .light-hint{position:absolute;top:calc(100% + 10px);left:0;font-size:.66rem;letter-spacing:.02em;color:#edc9a4;white-space:nowrap;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s;pointer-events:none} .light-toggle:not(:disabled):hover .light-hint,.light-toggle:focus-visible .light-hint{opacity:1;transform:translateY(0)} .hero[data-ring="on"] .light-toggle circle{stroke:#ffe6b9;filter:drop-shadow(0 0 65px #ffd18fcc) drop-shadow(0 0 160px #f4b76d99)} .hero[data-ring="off"] .light-toggle:hover circle{stroke:#f6d5a6} @media(max-width:760px){.light-hint{font-size:.6rem;top:calc(100% + 5px)}.hero-divider{margin-bottom:22px}} @media(prefers-reduced-motion:reduce){.light-toggle circle,.light-hint{transition:none!important}} @media print{.light-hint{display:none}.light-toggle circle{filter:none!important}.hero h1 span{color:#141a20}} /* Variant 4: een groot woordmerk als lichtschakelaar, vóór de website. */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .light-intro{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:#151d24;color:#f7e8d0;padding:110px 40px 104px} .light-intro::before,.light-intro::after{content:'';position:absolute;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1.3s ease} .light-intro::before{inset:-15%;background:radial-gradient(ellipse 30% 38% at 59% 42%,#ffdb994a 0%,#e9b67921 38%,transparent 76%),radial-gradient(ellipse 75% 66% at 50% 48%,#c9965921,transparent 75%)} .light-intro::after{inset:-30%;background:linear-gradient(143deg,transparent 33%,#ffe8bc05 39%,#ffe8bc12 44%,#ffe8bc06 52%,transparent 60%);filter:blur(24px)} .light-intro[data-intro-lit="true"]::before,.light-intro[data-intro-lit="true"]::after{opacity:1} .intro-skip{position:absolute;top:30px;right:40px;color:#b6c1c8;font-size:.74rem;text-decoration:none;padding:10px 0} .intro-skip span{margin-left:10px;color:#d5b58e} .intro-center{width:min(100%,960px);margin-inline:auto;text-align:center} .intro-eyebrow{max-width:none;font-size:.68rem;font-weight:400;text-transform:uppercase;letter-spacing:.21em;color:#abb7bf;margin:0 0 32px} .intro-wordmark{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;color:#56616a;cursor:pointer;border-radius:12px} .intro-wordmark:disabled,.intro-switch:disabled{cursor:default} .intro-wordmark>svg{width:100%;height:auto;overflow:visible} .intro-wordmark path{transition:fill 1.1s ease .1s} .intro-wordmark circle{transition:stroke .4s ease,filter .65s ease} .intro-wordmark:hover circle,.intro-wordmark:focus-visible circle{stroke:#ac9a81} .light-intro[data-intro-lit="true"] .intro-wordmark path{fill:#f6eedf} .light-intro[data-intro-lit="true"] .intro-wordmark circle{stroke:#ffe3ae;filter:drop-shadow(0 0 35px #ffdfab99) drop-shadow(0 0 110px #eeb57880)} .intro-payoff{max-width:none;margin:29px 0 0;color:#f5d9ad;font-size:clamp(1.8rem,4.5vw,3.7rem);line-height:1.3;letter-spacing:.035em;font-weight:300;font-style:normal;opacity:0;visibility:hidden;transform:translateY(12px);text-shadow:0 0 40px #edb97133;transition:opacity .7s ease,transform .9s ease,visibility .7s} .light-intro[data-intro-lit="true"] .intro-payoff{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.45s} .intro-switch{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:48px;padding:12px 18px;border:0;border-radius:3px;background:transparent;color:#b5bdc3;font:inherit;font-size:1.08rem;font-weight:400;font-style:normal;letter-spacing:.08em;cursor:pointer;box-shadow:none;transition:color .25s} .intro-switch:hover{background:transparent;color:#f1f3f4;text-decoration:underline;text-underline-offset:7px} .light-intro[data-intro-lit="true"] .intro-switch{background:transparent;color:#b5bdc3;box-shadow:none} .light-intro[data-intro-lit="true"] .intro-switch:hover{background:transparent;color:#f1f3f4} .intro-hint{max-width:none;font-size:.71rem;color:#abb7bf;margin-top:15px} .intro-bottom{position:absolute;bottom:28px;left:40px;right:40px;display:flex;justify-content:center;align-items:center;gap:20px} .intro-bottom p{font-size:.69rem;color:#94a2ad;letter-spacing:.035em} .intro-bottom a{display:inline-flex;align-items:center;gap:18px;min-height:44px;color:#a6b0b8;font-size:.74rem;text-decoration:none} .intro-bottom a span{font-size:1.1rem} .intro-noscript{position:relative;text-align:center;max-width:none;font-size:.8rem;margin-top:20px} @media(min-width:1500px){.intro-center{width:min(74vw,1160px)}} @media(max-width:760px){.light-intro{padding:110px 26px 122px}.intro-skip{top:18px;right:26px;font-size:.69rem}.intro-eyebrow{font-size:.58rem;letter-spacing:.15em;margin-bottom:28px}.intro-payoff{font-size:clamp(1.65rem,6vw,2.7rem);margin-top:23px}.intro-action{margin-top:10px}.intro-bottom{left:26px;right:26px;bottom:20px;flex-direction:column-reverse;gap:10px}.intro-bottom p{font-size:.59rem;text-align:center}.intro-hint{font-size:.66rem}.light-intro::before{background:radial-gradient(ellipse 70% 30% at 58% 43%,#ffdb992e,transparent 80%),radial-gradient(ellipse at 50% 45%,#c9965912,transparent 70%)}} @media(max-height:650px) and (min-width:761px){.light-intro{padding-block:78px 95px}.intro-center{max-width:650px}.intro-eyebrow{margin-bottom:15px}.intro-payoff{font-size:2.5rem;margin-top:18px}.intro-action{margin-top:6px}} @media(prefers-reduced-motion:reduce){.light-intro *,.light-intro::before,.light-intro::after{transition:none!important;transform:none!important}} @media print{.light-intro{display:none}} /* Hero: de diensten als glaspillen. Onzichtbaar in rust; onder de muis vormt zich glas met een lichtvlek die de cursor volgt. */ .hero-list{list-style:none;margin:26px 0 30px;padding:0;max-width:46ch;display:grid;gap:2px;margin-left:-20px} .hero-list a{position:relative;overflow:hidden;display:grid;grid-template-columns:28px 1fr 16px;gap:15px;align-items:baseline;padding:13px 20px;border-radius:999px;border:1px solid transparent;background:transparent;text-decoration:none;color:#c6ced4;font-size:.98rem;font-weight:400;line-height:1.55;-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1);transition:color .25s,border-color .4s,box-shadow .4s,backdrop-filter .4s,-webkit-backdrop-filter .4s} .hero-list a>*{position:relative;z-index:2} .hero-list a::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;opacity:0;transition:opacity .32s ease;background:radial-gradient(ellipse 170px 52px at var(--mx,50%) var(--my,50%),#ffdcae59,#e2a08228 45%,transparent 76%)} .hero-list a::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;background:linear-gradient(168deg,#ffffff2b,#ffffff08 24%,transparent 44%);box-shadow:inset 0 1px 0 #ffffffc4,inset 0 2px 4px -3px #ffffff66,inset 0 -1px 0 #ffffff33,inset 20px 0 22px -22px #fffdf7f0,inset -20px 0 22px -22px #fffdf7f0} .hero-list a:hover,.hero-list a:focus-visible{color:#f8f5ef;border-color:#ffffff59;-webkit-backdrop-filter:blur(4px) saturate(1.55) brightness(1.07);backdrop-filter:blur(4px) saturate(1.55) brightness(1.07);box-shadow:0 10px 30px #00000038,0 1px 0 #ffffff0f} .hero-list a:hover::before,.hero-list a:focus-visible::before,.hero-list a:hover::after,.hero-list a:focus-visible::after{opacity:1} .hero-list-number{font-family:ui-monospace,monospace;font-size:.7rem;letter-spacing:.06em;color:#c99a76;transition:color .25s} .hero-list-arrow{justify-self:end;font-size:.95rem;color:#6f7d87;transition:transform .25s,color .25s} .hero-list a:hover .hero-list-number,.hero-list a:focus-visible .hero-list-number{color:#f5cfa8} .hero-list a:hover .hero-list-arrow,.hero-list a:focus-visible .hero-list-arrow{color:#f0c79f;transform:translateY(3px)} .hero-list a:focus-visible{outline:2px solid #e6b492;outline-offset:2px} #ai-begeleiding,#website,#software-apps{scroll-margin-top:88px} @media(max-width:760px){.hero-list{max-width:52ch;margin:22px 0 26px -16px}.hero-list a{padding:12px 16px;grid-template-columns:24px 1fr 14px;gap:12px}} @media(prefers-reduced-motion:reduce){.hero-list a:hover .hero-list-arrow,.hero-list a:focus-visible .hero-list-arrow{transform:none}} @media print{.hero-list{margin-left:0}.hero-list a{color:#333;padding-inline:0;border-color:transparent;box-shadow:none}.hero-list a::before,.hero-list a::after{display:none}.hero-list-number{color:#915036}.hero-list-arrow{display:none}} /* Beide letters uit dezelfde proportionele letterfamilie; de I blijft herkenbaar. */ .ai-term{white-space:nowrap;font-family:Verdana,Geneva,sans-serif;font-size:.96em;font-weight:inherit} /* Twee compacte, interactieve illustraties van de verslagmogelijkheden. */ .report-visuals{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px} .report-visual{min-width:0;padding:30px 26px 24px;border:1px solid #ded6ca;border-radius:8px;background:linear-gradient(150deg,#fcfaf6,#f3eee5);position:relative} .flow-heading{min-height:164px} .flow-heading>.eyebrow{font-size:.62rem;letter-spacing:.12em;color:var(--koper-tekst)} .flow-heading h3{font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.3;margin:12px 0} .flow-heading>p{font-size:.82rem;line-height:1.75;color:var(--zacht);max-width:46ch} .transcript-source{display:flex;align-items:center;justify-content:center;gap:14px;width:fit-content;max-width:100%;margin:20px auto 0;padding:13px 18px;background:#27353c;color:#f8f4ed;border:1px solid #3b474c;border-radius:5px;font-size:.85rem} .transcript-source small{display:block;color:#cad0d0;font-size:.63rem;margin-top:2px} .flow-wave{display:flex;align-items:center;gap:3px;height:28px} .flow-wave i{width:2px;height:10px;background:#ebc397;border-radius:2px} .flow-wave i:nth-child(2),.flow-wave i:nth-child(4){height:19px}.flow-wave i:nth-child(3){height:28px} .branch-lines{display:block;width:100%;height:58px;overflow:visible} .branch-lines>path,.history-lines>path{stroke:#c9beb0;stroke-width:1;vector-effect:non-scaling-stroke} .branch-lines>.flow-route{stroke:#ae6847;stroke-width:1.8;opacity:0;filter:drop-shadow(0 0 4px #cb965977)} .branch-lines>.is-route{opacity:1;stroke-dasharray:100;animation:draw-report-route .8s ease-out both} @keyframes draw-report-route{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} .report-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .report-option{min-width:0;padding:13px 4px 12px;background:transparent;color:var(--zacht);border:1px solid transparent;border-radius:5px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .25s,border-color .25s,color .25s;font-size:.72rem;line-height:1.4} .flow-doc{width:36px;height:44px;flex-shrink:0;stroke:#8e9698;stroke-width:1.2;transition:stroke .3s,filter .3s} .report-option[aria-pressed="true"]{background:#fffcf6;border-color:#dcc6ad;color:#724b32} .report-option[aria-pressed="true"] .flow-doc{stroke:#a96543;filter:drop-shadow(0 0 5px #e0b78455)} .report-option:hover{color:var(--inkt)} .flow-detail{border-top:1px solid #dcd3c6;margin-top:20px;padding-top:17px;min-height:91px} .flow-detail p{font-size:.78rem;line-height:1.75;color:var(--zacht);margin:0;max-width:45ch} .flow-detail strong{display:block;color:var(--inkt);font-weight:500;margin-bottom:3px} .session-timeline{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative} .session-timeline::before{content:'';position:absolute;top:19px;left:12.5%;right:12.5%;height:1px;background:#c9beb0} .session-timeline li{display:flex;align-items:center;flex-direction:column;gap:7px;z-index:1;font-size:.66rem;color:var(--zacht)} .session-dot{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d4bda4;border-radius:50%;background:#fcf9f3;color:#8b5f3e;font-family:ui-monospace,monospace;font-size:.7rem} .history-lines{width:100%;height:43px;margin-top:7px;overflow:visible} .history-lines>.history-route{stroke:#ae6847;stroke-width:1.8;opacity:0;filter:drop-shadow(0 0 4px #cb965977)} .history-visual:hover .history-route,.history-visual:focus-within .history-route{opacity:1;stroke-dasharray:100;animation:draw-report-route 1s ease-out both} .history-output{display:flex;align-items:center;gap:15px;background:#fffcf7;border:1px solid #d9c5ad;border-radius:5px;padding:15px 18px;max-width:340px;margin:0 auto} .history-output .flow-doc{stroke:#a96543} .history-output strong{font-size:.86rem;font-weight:500} .history-output p{font-size:.7rem;line-height:1.65;color:var(--zacht);margin-top:4px} .history-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:13px} .history-choices button{border:0;border-bottom:1px solid transparent;padding:8px 6px;min-height:36px;background:none;font-size:.67rem;color:var(--zacht)} .history-choices button[aria-pressed="true"]{border-bottom-color:#a96543;color:#724b32} .report-workflow{list-style:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 12px;padding:16px 0 0;margin:17px 0 0;border-top:1px solid #dcd3c6;font-size:.66rem;color:#59656d} .report-workflow li+li::before{content:'→';color:#9c7051;margin-right:12px} @media(max-width:1000px){.report-visual{padding:25px 20px 22px}.flow-heading{min-height:180px}.report-option{font-size:.67rem}.report-workflow{font-size:.61rem;gap:5px 7px}.report-workflow li+li::before{margin-right:7px}} @media(max-width:850px){.report-visuals{grid-template-columns:1fr;gap:20px}.report-visual{padding:27px 24px;max-width:580px;width:100%;margin-inline:auto}.flow-heading{min-height:0}.flow-heading h3{font-size:1.5rem}.report-option{font-size:.77rem}.flow-detail{min-height:0}.report-workflow{font-size:.69rem}} @media(max-width:380px){.report-visual{padding:24px 15px}.report-option{font-size:.64rem}.history-output{padding:12px}.report-workflow{font-size:.59rem}} @media(prefers-reduced-motion:reduce){.branch-lines>.is-route,.history-visual:hover .history-route,.history-visual:focus-within .history-route{animation:none}.report-option,.flow-doc{transition:none}} @media print{.report-visuals{display:block}.report-visual{break-inside:avoid;margin-block:20px}.flow-route,.history-route{animation:none!important}} /* Variant 5: een gebundeld productverhaal met behoud van de grote opening. */ .hero-grid{padding-block:58px 56px} .masthead{padding-block:21px} .maker-intro{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin-top:26px;text-decoration:none;font-size:.75rem;color:#e5e7e5;line-height:1.6} .maker-intro img{width:43px;height:43px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex-shrink:0;border:1px solid #e1c4a44d} .maker-intro small{display:block;font-size:.66rem;color:#aebbc3} .maker-intro:hover>span{text-decoration:underline;text-underline-offset:4px} .hero-list-mobile{display:none} .product-heading{align-items:start;margin-bottom:35px} .product-explanation p{line-height:1.85} .feature{padding-top:23px;padding-bottom:26px} .feature-number{margin-bottom:14px} .personal-features{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:38px;padding-block:30px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)} .personal-features .eyebrow{font-size:.64rem;color:var(--koper-tekst);margin-bottom:10px} .personal-features h3{font-size:1.2rem;margin-bottom:13px} .personal-features>article>p{font-size:.86rem;line-height:1.85;color:var(--zacht)} .context-mini{border:0;margin-top:10px} .context-mini summary{font-size:.74rem;padding:10px 28px 10px 0;font-weight:400;color:var(--koper-tekst)} .context-mini summary::after{top:8px} .context-mini>div{padding:15px 18px;background:#f0eae0;border-radius:4px;margin-top:2px} .context-mini p{padding:0;font-size:.77rem;line-height:1.7} .context-mini p+p{margin-top:10px} .context-mini strong{color:var(--inkt);font-weight:500} .shots{margin-top:30px;padding-top:0;border-top:0} #mogelijkheden{background:#eee9e0;border-block:1px solid var(--lijn)} #mogelijkheden .intro{margin-bottom:26px} .setup-steps{margin-top:0;gap:35px} .setup-steps .step b{font-size:.96rem;font-weight:500} .setup-steps .step p{font-size:.84rem} .setup-options{display:grid;grid-template-columns:1fr 1fr;gap:42px;padding-top:30px;margin-top:30px;border-top:1px solid #d0c7bb} .setup-options .eyebrow{font-size:.65rem;color:var(--koper-tekst);margin-bottom:10px} .setup-options h3{font-size:1.15rem;margin-bottom:12px} .setup-options p{font-size:.86rem;line-height:1.8;color:var(--zacht)} .services{background:#fcfaf6} .maker-portrait{max-width:340px} .maker-portrait img{aspect-ratio:4/5;object-position:50% 25%} #over{padding-block:80px} @media(min-width:1500px){.hero-grid{padding-block:64px}} @media(max-width:1000px){.personal-features,.setup-options{gap:28px}.hero-grid{gap:32px}} @media(max-width:760px){.hero-grid{padding-block:38px 36px;gap:0}.personal-features,.setup-options{grid-template-columns:1fr;gap:28px}.personal-features{margin-top:28px;padding-block:26px}.setup-steps{gap:20px}.setup-steps .step b{font-size:.85rem}.setup-steps .step p{font-size:.76rem}.shots{margin-top:30px;padding-top:0}.maker-intro{margin-top:22px}.maker-portrait{max-width:300px}#over{padding-block:62px}} /* Op touchscreens staat de kerninformatie bij de links zelf; hover is nooit nodig. */ @media(max-width:760px),(hover:none){.light-preview{display:none}.hero-list-mobile{display:block;margin-top:5px;font-size:.76rem;font-weight:400;color:#acbac4;line-height:1.6;max-width:45ch}.hero-list a{border-radius:12px;padding-block:14px}.hero-list-text{color:#eef0ed}.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:650px}.hero-list{max-width:none}} @media print{.personal-features,.setup-options{break-inside:avoid}.context-mini[open]>div{background:white}} /* Een lichte, transparante contactpil in de opening. */ .hero .hero-contact-pill{border-radius:999px;background:#b86b4b16;border-color:#c5896899;color:#e6b69b;padding:13px 24px;font-weight:400;gap:24px;box-shadow:none;transition:background .25s,border-color .25s,box-shadow .25s} .hero .hero-contact-pill:hover{background:#b86b4b28;border-color:#dfab8dcc;color:#f5d6c2;transform:none;box-shadow:inset 0 1px 0 #edc1a620,0 0 22px #b86b4b14} /* Een gedoofde merkring wordt een lichtbron voor de gekozen dienst. */ .light-preview{width:100%;margin:0;min-width:0;padding:20px 0 20px 12px;align-self:center;container-type:inline-size} .light-stage{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:1;text-align:center} .light-circle{position:absolute;inset:0;z-index:-1;pointer-events:none} .light-circle svg{display:block;width:100%;height:100%;overflow:visible} .circle-lit{opacity:var(--lamp,0)} .light-scene{grid-area:1/1;position:relative;width:74%;min-width:0;padding:0;visibility:hidden;opacity:0} .light-label{display:block;font-size:clamp(.56rem,1.95cqw,.66rem);letter-spacing:.13em;text-transform:uppercase;color:#cfb99e;margin-bottom:clamp(14px,4cqw,22px)} .light-scene h3{font-size:clamp(1.5rem,7.8cqw,2.65rem);font-weight:300;line-height:1.2;letter-spacing:-.045em;color:#fff9ef;text-wrap:balance;text-shadow:0 0 24px #ffe3b722} .light-scene>p{font-size:clamp(.73rem,2.75cqw,.91rem);line-height:1.8;color:#e1dfd9;max-width:31ch;margin:clamp(15px,4.5cqw,24px) auto 0;text-wrap:pretty} .light-stage.is-flowing .light-scene{will-change:opacity,filter} .hero-list a.is-previewing{color:#fff6e8;border-color:#e6bd8959} @media(max-width:1000px){.light-preview{padding-left:0}} @media(max-width:760px),(hover:none){.light-preview{display:none}} @media(prefers-reduced-motion:reduce){.light-scene,.light-scene>p{filter:none!important}} @media print{.light-preview{display:none}} /* De donkere paginagrond blijft behouden; de ring gebruikt weer de stijl van versie 6. */ .hero{background:#151d24} .hero::before{background:radial-gradient(ellipse 640px 520px at 80% 52%,#d2a47208,transparent 76%)} @media print{.hero{background:white}.hero::before{display:none}} /* Variant 10: eerst het dagelijkse gebruik, daarna de verdieping. */ .product-opening{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center;margin-bottom:40px} .product-opening-copy h2{font-size:clamp(2rem,3.1vw,2.8rem)} .product-opening-copy>p{font-size:.9rem;line-height:1.85;color:var(--zacht);margin-top:20px} .product-opening-copy .product-benefit{font-size:1.08rem;line-height:1.6;color:#39474f;margin-top:25px;max-width:33ch} .product-opening-copy .product-control{font-size:.79rem;padding-left:15px;border-left:2px solid #bb9475;color:#526068;margin-top:22px} .product-preview{min-width:0} .product-preview .screen-switch{gap:6px;margin-bottom:14px} .product-preview .screen-switch button{padding:8px 13px;font-size:.7rem;border-radius:4px} .product-preview .shot>a{display:grid;place-items:center;aspect-ratio:1.44;background:#eee9e0;border:1px solid #d7cfc3;border-radius:9px;overflow:hidden;box-shadow:0 12px 32px #29343a0b} .product-preview .shot img{border:0;border-radius:0;width:100%;height:100%;object-fit:contain;min-height:0} .product-preview .shot figcaption{font-size:.74rem;line-height:1.7;min-height:3.4em;margin-top:13px} .product-preview .shot-note{margin-top:10px;font-size:.64rem;color:#69736f} #sessies .personal-features{margin-top:0;border-top:0;padding-block:30px} #sessies .report-visuals{margin-top:34px} .product-extras{margin-top:28px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)} .product-extras>summary{font-size:.9rem;padding:22px 38px 22px 0;font-weight:500} .product-extras>summary span{display:block;margin-top:4px;font-size:.75rem;color:var(--zacht);font-weight:400} .product-extras>summary::after{top:26px} .product-extras .product-extra-images{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:0 0 22px} .product-extra-images h3{font-size:1rem;margin-bottom:16px} .product-extra-images .shot figcaption{font-size:.76rem} .product-extras>.shot-note{padding:0 0 22px;margin:0;font-size:.68rem} .product-next{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:34px} .product-next h3{font-size:1.15rem} .product-next p{color:var(--zacht);font-size:.83rem;line-height:1.7;margin-top:8px} .product-next .button{flex-shrink:0;border-radius:4px;color:#613f2e;background:#ead5c3;border-color:#d4b59a;font-weight:400} .product-next .button:hover{background:#e4c9b2;border-color:#b68f6d;transform:none} @media(max-width:1000px){.product-opening{gap:30px;grid-template-columns:1fr 1.1fr}.product-opening-copy h2{font-size:2.1rem}.product-preview .screen-switch button{font-size:.65rem;padding:7px 10px}.product-next{align-items:flex-start}.product-next .button{gap:12px}} @media(max-width:760px){.product-opening{grid-template-columns:1fr;gap:28px;margin-bottom:30px}.product-opening-copy{max-width:580px}.product-opening-copy h2{font-size:clamp(2rem,6.8vw,2.8rem)}.product-preview .screen-switch button{font-size:.69rem;padding:8px 12px}.product-preview .shot figcaption{min-height:0}.product-extras .product-extra-images{grid-template-columns:1fr;gap:28px}.product-next{flex-direction:column;gap:20px}.product-next .button{width:auto}#sessies .personal-features{gap:25px}} @media print{.product-opening{grid-template-columns:1fr}.product-preview .shot>a{aspect-ratio:auto;box-shadow:none}.product-preview .shot img{height:auto}.product-next .button{display:none}} /* De productbeelden krijgen de volle inhoudsbreedte voor leesbare details. */ .product-opening{grid-template-columns:minmax(0,1fr);gap:32px} .product-opening-copy{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;max-width:none} .product-intro-text>p{font-size:.9rem;line-height:1.85;color:var(--zacht)} .product-opening-copy .product-benefit{margin-top:0;max-width:40ch} .product-intro-text>p+p{margin-top:17px} .product-preview .screen-switch{gap:9px;margin-bottom:18px} .product-preview .screen-switch button{font-size:.82rem;padding:11px 18px;min-height:44px;border-radius:4px} .product-preview .shot>a{display:block;aspect-ratio:auto} .product-preview .shot img{display:block;width:100%;height:auto;object-fit:contain} .product-preview .shot figcaption{font-size:.82rem;min-height:0} .product-preview .shot-note{font-size:.73rem;margin-top:10px} @media(max-width:1000px){.product-opening-copy{gap:30px}} @media(max-width:760px){.product-opening{gap:26px}.product-opening-copy{grid-template-columns:1fr;gap:20px}.product-preview .screen-switch{gap:6px}.product-preview .screen-switch button{font-size:.74rem;padding:10px 12px}.product-preview .shot figcaption{font-size:.77rem}.product-preview .shot-note{font-size:.69rem}} /* Kleine lijniconen onderscheiden stemherkenning en voortbouwende context. */ .personal-feature-heading{display:flex;align-items:center;gap:16px;margin-bottom:14px} .personal-feature-icon{width:52px;height:52px;flex:0 0 52px;color:#59656d} .personal-feature-icon .feature-icon-accent{stroke:#b07854} .personal-features .personal-feature-heading .eyebrow{margin-bottom:7px} .personal-features .personal-feature-heading h3{margin-bottom:0} .personal-feature-heading>div{min-width:0} @media(max-width:400px){.personal-feature-heading{gap:12px}.personal-feature-icon{width:44px;height:44px;flex-basis:44px}} /* ── Variant 11: geen intro-scherm; de hero opent zelf met het licht (2026-09-19) ── Voor de eerste verf staat alles gedimd (data-lit="pending"); het script zet 'm na ~350 ms op "true" en de onderdelen komen na elkaar tevoorschijn. De ring in de rechterkolom gloeit in rust op (lamp .8) en toont de payoff; bij een dienst wisselt hij naar de scène. Zonder JS is alles direct zichtbaar (zie