:root{--ink:#071016;--muted:#665f6c;--paper:#fffaf0;--pink:#ddaa72;--red:#9a603b;--yellow:#f0c990;--blue:#a56a3e;--line:#e6dfd4;--white:#fff;--green:#13795b}
.sale-banner{position:relative;z-index:60;padding:10px 16px;background:linear-gradient(90deg,#ddaa72,#9a603b,#c48b56);color:#fff;text-align:center;font-size:clamp(.82rem,2vw,1rem);font-weight:800}.sale-banner strong{font-size:1.08em}
.creation-choice{display:grid;gap:16px;margin:26px 0;padding:20px;border:3px solid var(--ink);border-radius:22px;background:linear-gradient(135deg,#f6e7ce,#f8eddf);box-shadow:8px 8px 0 var(--pink)}.image-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}.image-modes label{cursor:pointer}.image-modes input{position:absolute;opacity:0}.image-modes span{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;min-height:82px;padding:15px;border:3px solid #d8d0c4;border-radius:15px;background:#fff;font-size:1.2rem}.image-modes b{font-size:1rem}.image-modes small{grid-column:2;color:var(--muted);font-size:.82rem}.image-modes input:checked+span{border-color:var(--blue);background:#f8eddf;box-shadow:0 0 0 4px #a56a3e22}.subject-field{display:grid;gap:7px}.subject-field>span,.example-heading{font-weight:950}.subject-field input{width:100%;min-height:60px;padding:14px 16px;border:3px solid var(--ink);border-radius:14px;background:#fff;font:700 1rem inherit}.subject-field input:focus{outline:4px solid #a56a3e25;border-color:var(--blue)}.subject-field small{color:var(--muted);font-size:.86rem}.example-heading{margin:30px 0 4px!important;color:var(--ink)!important}.flip-camera{position:absolute;right:14px;top:14px;z-index:5;width:52px;height:52px;border:2px solid #ffffffaa;border-radius:50%;background:#1118;color:#fff;font-size:1.8rem;backdrop-filter:blur(8px)}.shutter{display:grid;place-items:center;justify-self:center;width:82px;height:82px;border:6px solid #fff;border-radius:50%;background:#ffffff44;box-shadow:0 0 0 3px #071016;cursor:pointer}.shutter span{display:block;width:58px;height:58px;border-radius:50%;background:var(--pink)}.photo-actions:has(.shutter:not([hidden])){grid-template-columns:1fr auto 1fr;align-items:center}.photo-actions:has(.shutter:not([hidden])) #openCamera{display:none}.gallery-button{min-height:54px}@media(max-width:620px){.creation-choice{padding:15px}.image-modes{grid-template-columns:1fr}.camera-card{width:calc(100% + 12px);margin-left:-6px}.photo-actions:has(.shutter:not([hidden])){grid-template-columns:1fr auto 1fr}.gallery-button{padding:7px;font-size:.8rem}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}.shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:40;background:#fffdf8ed;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{color:var(--ink);font-weight:950;font-size:clamp(1.65rem,4vw,2.25rem);letter-spacing:-.07em;text-decoration:none}.logo span{color:var(--pink)}.header-cta,.primary-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:900;text-decoration:none;box-shadow:0 5px 0 #d8b819}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:56px}.hero>div{padding:18px}.eyebrow,.step-label{display:inline-block;margin:0 0 14px;color:var(--red);font-size:.82rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:0 0 22px;font-size:clamp(3rem,7vw,6.5rem);line-height:.92;letter-spacing:-.07em}.hero h1 em{color:var(--pink);font-style:normal}.hero p{max-width:620px;margin:0 0 28px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.3rem)}.hero img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:32px;box-shadow:16px 16px 0 var(--blue)}.primary-link{background:var(--pink);color:#fff;box-shadow:0 6px 0 #cb2b5d}
.intro-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:50px}.intro-strip div{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid var(--ink);border-radius:16px;background:#fff}.intro-strip b{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--yellow)}.intro-strip span{font-weight:850;font-size:.9rem}
.studio{margin-bottom:80px}.progress{position:sticky;top:76px;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;border-radius:0 0 18px 18px;background:#fffdf8ed;backdrop-filter:blur(10px)}.progress span{padding:10px;border-radius:999px;background:#eee9e0;color:#80796f;text-align:center;font-size:.78rem;font-weight:900}.progress span.active{background:var(--blue);color:#fff}.step{margin-top:26px;padding:clamp(22px,5vw,50px);border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:0 24px 70px #4d382016}.step[hidden]{display:none}.step h2{margin:0 0 10px;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.05em}.step>p:not(.step-label){max-width:760px;color:var(--muted);font-size:1.05rem}.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}.style-card{position:relative;overflow:hidden;padding:0;border:3px solid transparent;border-radius:18px;background:#fff;box-shadow:0 8px 24px #2d1e181a;cursor:pointer}.style-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.style-card strong{display:block;padding:13px;text-align:left;font-size:.95rem}.style-card.active{border-color:var(--pink);box-shadow:0 0 0 4px #ddaa7224}.style-card.active:after{content:"✓";position:absolute;right:10px;top:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;font-weight:950}.next,.pay,.primary{width:100%;min-height:62px;border:0;border-radius:16px;background:var(--blue);color:#fff;font:900 1.05rem inherit;box-shadow:0 7px 0 #343cb4;cursor:pointer}.back-button{margin-top:24px;padding:10px 0;border:0;background:transparent;color:var(--blue);font-weight:850;cursor:pointer}
.instruction{padding:16px 18px;border-left:5px solid var(--yellow);border-radius:12px;background:#fff7cc;color:var(--ink)!important}.camera-card{max-width:680px;margin:24px auto 0}.camera-view{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:24px;background:#15121b}.camera-view video,.camera-view canvas{display:block;width:100%;height:100%;object-fit:cover}.guide{pointer-events:none;position:absolute;inset:11% 17% 20%;border:4px solid #fff;border-radius:48% 48% 44% 44%;box-shadow:0 0 0 999px #0003}.guide:before,.guide:after{content:"";position:absolute;left:12%;right:12%;height:3px;background:#55efb6}.guide:before{top:44%}.guide:after{bottom:9%;border-radius:50% 50% 0 0}.guide span{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:max-content;padding:6px 10px;border-radius:999px;background:#101016cc;color:#fff;font-size:.78rem;font-weight:900}.zoom-box{margin-top:14px;padding:16px;border-radius:17px;background:#071016;color:#fff}.zoom-box>div:first-child,.zoom-help{display:flex;justify-content:space-between}.zoom-row{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;margin-top:8px}.zoom-row button{height:44px;border:1px solid #ffffff55;border-radius:50%;background:#ffffff12;color:#fff;font-size:1.5rem}.zoom-row input{width:100%;accent-color:var(--yellow)}.zoom-help{color:#c8c3cc;font-size:.78rem}.photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.secondary{display:flex;align-items:center;justify-content:center;min-height:62px;padding:12px;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);font-weight:900;cursor:pointer}.privacy{text-align:center;font-size:.86rem!important}.loading{display:grid;place-items:center;gap:8px;min-height:300px;padding:30px;border-radius:22px;background:#f8f3ea;text-align:center}.loading span{width:58px;height:58px;border:7px solid #ddd;border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.result{overflow:hidden;padding:0;border:3px solid transparent;border-radius:20px;background:#fff;box-shadow:0 12px 30px #2d1e181f;cursor:pointer}.result img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.result b{display:block;padding:14px;font-size:1rem}.result:hover,.result:focus{border-color:var(--pink);transform:translateY(-3px)}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.wide{width:100%}.chosen-preview{position:relative;width:min(340px,100%);margin:22px auto}.chosen-preview img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;box-shadow:10px 10px 0 var(--yellow)}.chosen-preview span{position:absolute;left:12px;top:12px;padding:7px 11px;border-radius:999px;background:var(--pink);color:#fff;font-weight:900}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.products label{cursor:pointer}.products input{position:absolute;opacity:0}.products span{display:grid;gap:8px;min-height:116px;padding:20px;border:3px solid var(--line);border-radius:18px;background:#fff}.products small{color:var(--red);font-size:.95rem;font-weight:850}.products input:checked+span{border-color:var(--blue);background:#f8eddf;box-shadow:0 0 0 4px #a56a3e20}.products input:checked+span:before{content:"✓ Gekozen";color:var(--blue);font-size:.76rem;font-weight:950;text-transform:uppercase}form{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}form h3{font-size:1.45rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:grid;gap:6px;color:#403945;font-size:.88rem;font-weight:850}.form-grid input,.form-grid textarea{width:100%;min-height:52px;padding:12px;border:2px solid #cbc4ba;border-radius:12px;background:#fff;font:inherit}.form-grid input:focus,.form-grid textarea:focus{border-color:var(--blue);outline:3px solid #a56a3e20}.form-grid .full{grid-column:1/-1}.form-error{min-height:24px;color:#b51f31;font-weight:800}.pay{background:var(--pink);box-shadow:0 7px 0 #c72a5b}.pay:disabled{opacity:.55;cursor:wait}.secure{text-align:center;font-size:.82rem!important}.toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,120px);max-width:min(520px,calc(100% - 24px));padding:14px 18px;border-radius:14px;background:#071016;color:#fff;font-weight:800;box-shadow:0 10px 35px #0005;transition:.25s}.toast.show{transform:translate(-50%,0)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding-block:34px}.hero img{max-height:650px}.intro-strip{grid-template-columns:1fr 1fr}.styles{grid-template-columns:repeat(3,1fr)}.products{grid-template-columns:1fr}.results{gap:10px}.result b{font-size:.88rem}}
@media(max-width:620px){.shell{width:min(100% - 24px,1180px)}.nav{min-height:66px}.header-cta{min-height:42px;padding:0 13px;font-size:.8rem}.hero>div{padding:4px}.hero h1{font-size:clamp(2.8rem,15vw,4.2rem)}.hero img{border-radius:22px;box-shadow:8px 8px 0 var(--blue)}.intro-strip{grid-template-columns:1fr}.progress{top:66px;overflow-x:auto;display:flex}.progress span{min-width:110px}.step{padding:22px 14px;border-radius:22px}.styles{display:flex;overflow-x:auto;gap:12px;padding:4px 4px 18px;scroll-snap-type:x mandatory}.style-card{flex:0 0 72%;scroll-snap-align:center}.photo-actions,.result-actions,.form-grid{grid-template-columns:1fr}.results{display:flex;overflow-x:auto;padding:5px 4px 18px;scroll-snap-type:x mandatory}.result{flex:0 0 82%;scroll-snap-align:center}.guide{inset:9% 15% 18%}.camera-view{border-radius:18px}.products span{min-height:94px}}
.camera-card{width:min(100%,430px);max-width:430px;margin:20px auto 0}.camera-view{max-height:540px}
@media(max-width:620px){.camera-card{width:min(82vw,360px);max-width:360px;margin:16px auto 0}.camera-view{height:min(450px,52vh);max-height:450px;aspect-ratio:auto}.zoom-box{margin-top:12px}}
.camera-window{position:fixed;inset:0;z-index:1000;margin:0;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));border:0;border-radius:0;background:#0e0b14ed;backdrop-filter:blur(14px);overflow-y:auto;color:#fff;display:grid;align-content:start;justify-items:center}.camera-window[hidden]{display:none}.camera-window>h2,.camera-window>.instruction,.camera-window>.step-label{width:min(100%,430px)}.camera-window>h2{margin-right:48px;font-size:clamp(1.55rem,4vw,2.15rem)}.camera-window>.instruction{margin-top:4px;color:#ece8f0!important;background:#2a2432;border-left-color:var(--yellow)}.camera-window>.step-label{color:#ddaa72}.camera-window .camera-card{background:#071016;border:1px solid #ffffff33;border-radius:24px;box-shadow:0 24px 70px #0008}.camera-window .privacy{color:#ddd!important}.camera-close{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));z-index:1002;width:48px;height:48px;border:2px solid #ffffff99;border-radius:50%;background:#071016;color:#fff;font-size:2rem;line-height:1;cursor:pointer}.camera-open{overflow:hidden}.flip-camera{right:10px;top:10px;width:auto;height:44px;padding:0 13px;display:flex;align-items:center;gap:7px;border-radius:999px;font-size:.86rem;font-weight:900}.flip-camera span{font-size:1.35rem}.flip-camera[hidden]{display:none}
.camera-window{padding:14px max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overscroll-behavior:contain}.camera-window>h2{width:min(100%,430px);margin:0 0 8px;padding-right:58px;font-size:clamp(1.45rem,5.8vw,1.9rem);line-height:1.05}.camera-window>.step-label{margin-bottom:6px}.camera-window>.instruction{margin:0;padding:10px 12px;border-left-width:4px;font-size:.92rem!important;line-height:1.35}.camera-window .camera-card{width:min(100%,400px);margin-top:14px}.camera-window .camera-view{width:100%;height:auto;max-height:none;aspect-ratio:4/5}.camera-close{position:absolute;top:14px;right:max(18px,env(safe-area-inset-right));width:46px;height:46px}.flip-camera{max-width:calc(100% - 20px);white-space:nowrap}
@media(max-width:620px){.camera-window .camera-card{width:min(74vw,320px);max-width:320px}.camera-window .camera-view{height:auto;max-height:none;aspect-ratio:4/5}.camera-window .zoom-box{padding:11px}.camera-window .photo-actions{margin-top:10px}.camera-window .privacy{margin:8px 10px 12px;font-size:.78rem!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.payment-link{display:flex;align-items:center;justify-content:center;text-decoration:none}.payment-link[hidden]{display:none}.form-error.ready{margin:14px 0;padding:14px;border-radius:12px;background:#e8fff4;color:#11613f;text-align:center}
@media(max-width:620px){.camera-window{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(90px,env(safe-area-inset-bottom))}.camera-window .camera-card{width:min(70vw,300px);margin-top:8px}.camera-window .camera-view{max-height:38vh;aspect-ratio:4/5}.camera-window>.instruction{font-size:.84rem!important}.camera-window .zoom-box{margin-top:8px;padding:9px}.camera-window .photo-actions{margin-top:8px}.camera-window .primary,.camera-window .secondary{min-height:54px}}
.camera-view video,.camera-view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.loading[hidden]{display:none!important}