/* Geanimeerde producttour op de landingspagina. Het beeld is 720x440 en wordt door product_tour.js geschaald. */
.tour-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.tour-toggle { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; color:var(--green-dark); background:#fff; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:14px; font-weight:750; cursor:pointer; }
.tour-toggle::before { content:"❚❚"; font-size:10px; letter-spacing:-1px; }
.tour-toggle[aria-pressed="true"]::before { content:"▶"; font-size:11px; letter-spacing:0; }
.tour-toggle .tour-toggle-play, .tour-toggle[aria-pressed="true"] .tour-toggle-pause { display:none; }
.tour-toggle[aria-pressed="true"] .tour-toggle-play { display:inline; }
.tour.is-static .tour-toggle { display:none; }
.tour-toggle:focus-visible, .tour-steps button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

.tour-body { display:grid; grid-template-columns:340px minmax(0,1fr); gap:40px; margin-top:44px; align-items:center; }
.tour-steps { display:grid; gap:8px; }
.tour-steps button { display:grid; grid-template-columns:34px 1fr; gap:4px 10px; padding:16px 18px; color:var(--ink); text-align:left; background:transparent; border:1px solid transparent; border-radius:12px; font:inherit; cursor:pointer; transition:background .2s,border-color .2s,box-shadow .2s; }
.tour-steps button:hover { background:rgba(255,255,255,.6); }
.tour-steps button[aria-selected="true"] { background:#fff; border-color:var(--line); box-shadow:0 14px 30px -22px rgba(11,70,56,.45); }
.tour-step-num { color:var(--green); font-size:13px; font-weight:850; padding-top:2px; }
.tour-step-text { display:grid; gap:3px; }
.tour-step-text strong { font-size:16px; }
.tour-step-text small { color:var(--muted); font-size:13px; line-height:1.45; }
.tour-steps button:not([aria-selected="true"]) small { display:none; }
.tour-progress { grid-column:2; height:3px; margin-top:10px; background:var(--line); border-radius:3px; overflow:hidden; }
.tour-steps button:not([aria-selected="true"]) .tour-progress { visibility:hidden; }
.tour-progress i { display:block; width:0; height:100%; background:var(--green); border-radius:3px; }
/* Een stap kan langer duren via --tour-duration op de tab (bv. de aankondiging, met meer te zien). */
.tour-progress i.is-running { animation:pt-progress var(--tour-duration,7s) linear forwards; }
.tour.is-static .tour-progress { display:none; }

.tour-screen { background:#f9fbf9; border:1px solid #c7d4cd; border-radius:12px; box-shadow:0 30px 70px -30px rgba(27,59,47,.45); overflow:hidden; }
.tour-browser { display:flex; align-items:center; gap:6px; height:36px; padding:0 14px; background:#fff; border-bottom:1px solid #dce3df; }
.tour-browser span { width:10px; height:10px; border-radius:50%; background:#dfe6e2; }
.tour-browser em { margin-left:14px; padding:3px 14px; color:#78847f; background:#f0f4f1; border-radius:999px; font-size:11px; font-style:normal; }
.tour-viewport { position:relative; overflow:hidden; background:linear-gradient(160deg,#eef4f0,#e2ece6); }
.tour-stage { position:relative; width:720px; height:440px; transform-origin:top left; font-size:13px; color:var(--ink); }
.tour-scene { position:absolute; inset:0; }
.tour-scene[hidden] { display:none; }
.tour-scene small { display:block; color:#78847f; font-size:11px; }

/* Bouwstenen */
.pt-card { position:absolute; background:#fff; border:1px solid #dce3df; border-radius:12px; box-shadow:0 16px 34px -24px rgba(11,70,56,.5); padding:16px; }
.pt-card-title { margin:0 0 10px; color:#78847f; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pt-check { display:inline-grid; place-items:center; width:26px; height:26px; flex:none; color:#fff; background:var(--green); border-radius:50%; font-weight:900; }
.pt-chip { position:absolute; padding:8px 14px; color:var(--green-dark); background:#fff; border:1px solid #cfe0d6; border-radius:999px; font-size:12px; font-weight:700; }
.pt-cursor { position:absolute; left:0; top:0; width:22px; height:22px; z-index:5; pointer-events:none; opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10-7 1.5L9.5 21z' fill='%2317231f' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }

/* 1. Melden */
.pt-phone { position:absolute; left:70px; top:14px; width:250px; height:412px; padding:34px 18px 18px; background:#fff; border:8px solid #17231f; border-radius:34px; box-shadow:0 26px 50px -26px rgba(11,70,56,.7); }
.pt-phone-notch { position:absolute; top:6px; left:50%; width:70px; height:14px; background:#17231f; border-radius:999px; transform:translateX(-50%); }
.pt-phone-title { margin:0 0 14px; font-size:16px; font-weight:800; }
.pt-label { display:block; margin:10px 0 5px; color:#78847f; font-size:11px; font-weight:700; }
.pt-input { position:relative; height:34px; padding:9px 10px; border:1px solid #dce3df; border-radius:8px; font-size:12px; overflow:hidden; white-space:nowrap; }
.pt-type { display:inline-block; }
.pt-caret { display:inline-block; width:1.5px; height:14px; margin-left:1px; vertical-align:-2px; background:var(--green); opacity:0; }
.pt-photo { display:grid; place-items:center; height:78px; margin-top:12px; background:linear-gradient(135deg,#bcd6e6,#8fb3c9); border-radius:10px; font-size:26px; }
.pt-send { position:absolute; left:18px; right:18px; bottom:18px; padding:11px; color:#fff; text-align:center; background:var(--green); border-radius:10px; font-weight:800; }
.pt-toast { position:absolute; left:380px; top:130px; width:290px; display:flex; gap:12px; align-items:center; padding:16px; background:#fff; border-radius:14px; box-shadow:0 22px 44px -22px rgba(11,70,56,.55); border-left:4px solid var(--green); }
.pt-toast strong { font-size:15px; }
#tour-scene-1 .pt-chip { left:380px; top:228px; }

/* 2. Aankondiging */
.pt-compose { left:24px; top:22px; width:300px; height:396px; padding:18px; display:flex; flex-direction:column; }
.pt-compose .pt-send { position:relative; left:auto; right:auto; bottom:auto; margin-top:auto; flex:none; }
.pt-compose .pt-input { flex:none; }
.pt-textarea { margin:0; padding:8px 10px; min-height:0; flex:0 1 auto; border:1px solid #dce3df; border-radius:8px; font-size:11.5px; line-height:1.5; color:#3b4a44; overflow:hidden; }
.pt-channels { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pt-channel { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; color:var(--green-dark); background:#e5f2ed; border:1px solid #cfe0d6; border-radius:999px; font-size:11px; font-weight:750; }
.pt-channel i { display:grid; place-items:center; width:14px; height:14px; color:#fff; background:var(--green); border-radius:4px; font-size:9px; font-style:normal; }
.pt-channel i::before { content:"✓"; }
.pt-channel-share { color:#1f6f43; background:#eafaf0; border-color:#bfe8cf; }
.pt-ann-devices { position:absolute; left:344px; right:22px; top:22px; bottom:20px; display:grid; grid-template-columns:160px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:12px 14px; }
.pt-ann-device { margin:0; display:grid; gap:6px; align-content:start; }
.pt-ann-side { display:grid; gap:10px; align-content:start; min-width:0; }
.pt-lockscreen { position:relative; height:268px; padding:24px 7px 8px; background:linear-gradient(170deg,#24364a 0%,#3f5f78 55%,#6b8798 100%); border:7px solid #17231f; border-radius:26px; box-shadow:0 26px 50px -26px rgba(11,40,56,.7); overflow:hidden; }
.pt-lock-time { display:block; color:#fff; text-align:center; font-size:32px; font-weight:300; letter-spacing:.02em; }
.pt-notice { margin-top:14px; padding:8px 9px; background:rgba(255,255,255,.94); border-radius:11px; box-shadow:0 10px 24px -14px rgba(0,0,0,.6); overflow:hidden; }
.pt-notice-app { display:flex; align-items:center; gap:5px; color:#5b6a64; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.pt-notice-app b { width:11px; height:11px; flex:none; background:linear-gradient(135deg,#2dd4bf,#176b55); border-radius:3px; }
.pt-notice strong { display:block; margin:4px 0 2px; font-size:11px; line-height:1.3; }
.pt-notice small { font-size:9.5px; line-height:1.35; color:#5b6a64; }
.pt-monitor { width:100%; }
.pt-monitor-screen { position:relative; height:96px; padding:6px; display:flex; justify-content:flex-end; align-items:flex-start; background:linear-gradient(150deg,#d8ebe3,#9fc6b8); border:6px solid #17231f; border-radius:8px; overflow:hidden; }
.pt-notice-desktop { width:76%; margin:0; padding:6px 8px; border-radius:8px; }
.pt-notice-desktop strong { font-size:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-monitor-stand { display:block; width:50px; height:14px; margin:0 auto; background:#2b3833; clip-path:polygon(25% 0,75% 0,100% 100%,0 100%); }
.pt-device-label { color:#55635d; text-align:center; font-size:10.5px; font-weight:750; line-height:1.3; }
.pt-ann-mail { position:relative; display:flex; gap:9px; align-items:center; padding:10px; min-width:0; }
.pt-ann-mail .pt-mail-icon { width:30px; height:30px; font-size:14px; }
.pt-ann-mail strong { display:block; font-size:11px; line-height:1.3; }
.pt-ann-mail small { font-size:10px; }
.pt-ann-result { position:relative; grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:11.5px; line-height:1.3; }
.pt-ann-result .pt-check { width:20px; height:20px; font-size:11px; }

/* 2. Opvolgen */
.pt-list { left:28px; top:28px; width:420px; padding:18px; }
.pt-row { display:grid; grid-template-columns:10px 1fr auto; gap:12px; align-items:center; padding:12px 4px; border-top:1px solid #edf0ee; }
.pt-row-new { background:#fbf6f2; border-radius:8px; border-top:0; padding:12px 10px; }
.pt-row strong { font-size:13px; }
.pt-dot { width:9px; height:9px; border-radius:50%; background:var(--gold); }
.pt-dot-coral { background:var(--coral); }
.pt-dot-green { background:var(--green); }
.pt-status { position:relative; display:inline-grid; justify-items:end; }
.pt-status > span { grid-area:1/1; padding:4px 9px; border-radius:999px; font-size:10.5px; font-weight:800; white-space:nowrap; }
.pt-status-new { background:#e8f0f8; color:#265b86; opacity:0; }
.pt-status-progress { background:#fff2d9; color:#805500; }
.pt-status-done { background:#e5f2ed; color:#176354; }
.pt-quote { left:470px; top:28px; width:222px; }
.pt-quote-name { display:block; font-size:14px; }
.pt-quote-amount { display:block; margin:4px 0 12px; font-family:Georgia,"Times New Roman",serif; font-size:30px; }
.pt-approval { padding:8px 10px; color:#805500; background:#fff2d9; border-radius:8px; font-size:11.5px; font-weight:700; }
.pt-approved { display:flex; gap:8px; align-items:center; margin-top:10px; padding:8px 10px; color:var(--green-dark); background:#e5f2ed; border-radius:8px; font-size:11.5px; font-weight:800; }
.pt-approved .pt-check { width:20px; height:20px; font-size:11px; }

/* 3. Plattegrond */
.pt-plan { position:absolute; left:28px; top:28px; width:440px; height:384px; background:#0d2227; border-radius:18px; box-shadow:0 26px 50px -26px rgba(8,22,26,.8); }
.pt-plan-label { position:absolute; left:22px; top:16px; color:#5eead4; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pt-apt, .pt-garage, .pt-pool { position:absolute; display:grid; place-items:center; color:#eaf6f3; font-weight:800; border-radius:10px; }
.pt-apt { width:88px; height:70px; background:rgba(45,212,191,.16); border:1.5px solid #2dd4bf; }
/* Posities van de acht appartementen (het eerste span is het bloklabel). */
.pt-apt:nth-of-type(2) { left:22px; top:44px; } .pt-apt:nth-of-type(3) { left:122px; top:44px; } .pt-apt:nth-of-type(4) { left:222px; top:44px; } .pt-apt:nth-of-type(5) { left:322px; top:44px; }
.pt-apt:nth-of-type(6) { left:22px; top:126px; } .pt-apt:nth-of-type(7) { left:122px; top:126px; } .pt-apt:nth-of-type(8) { left:222px; top:126px; } .pt-apt:nth-of-type(9) { left:322px; top:126px; }
.pt-garage { left:22px; top:222px; width:260px; height:138px; background:rgba(96,165,250,.16); border:1.5px solid #f97316; }
.pt-pool { left:298px; top:222px; width:120px; height:138px; background:rgba(96,165,250,.2); border:1.5px solid #60a5fa; border-radius:40px 10px 40px 10px; }
.pt-badge { position:absolute; top:-10px; right:-10px; display:grid; place-items:center; width:24px; height:24px; color:#fff; background:#ef4444; border:2px solid #0d2227; border-radius:50%; font-size:11px; font-style:normal; }
.pt-drawer { position:absolute; left:488px; top:56px; width:208px; padding:18px; color:#eaf6f3; background:rgba(8,22,26,.94); border:1px solid rgba(148,196,188,.25); border-radius:14px; box-shadow:0 20px 44px rgba(0,0,0,.35); }
.pt-drawer small { color:#2dd4bf; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:10px; }
.pt-drawer strong { display:block; margin:4px 0 12px; font-size:16px; }
.pt-drawer-stat { padding:8px 10px; color:#fdba74; background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.4); border-radius:8px; font-size:12px; }
.pt-drawer-stat b { font-size:16px; }
.pt-drawer-item { margin-top:10px; padding:8px 10px; border-left:3px solid #ef4444; background:rgba(148,196,188,.08); border-radius:6px; font-size:12px; font-weight:700; }
.pt-drawer-item small { color:#9bb7b1; text-transform:none; letter-spacing:0; font-weight:500; }

/* 4. Verhuur */
.pt-rental { left:40px; top:40px; width:330px; display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; padding:18px; }
.pt-rental-number { display:grid; place-items:center; width:48px; height:48px; color:#eaf6f3; background:#0d2227; border-radius:10px; font-weight:800; }
.pt-rental strong { display:block; font-size:15px; }
.pt-rental-chip { display:inline-block; margin:4px 0; padding:2px 9px; color:#805500; background:#fff2d9; border-radius:999px; font-size:10.5px; font-weight:800; }
.pt-rental-button { grid-column:1 / -1; padding:11px; color:#fff; text-align:center; background:#b7791f; border-radius:10px; font-weight:800; }
.pt-rental-sent { grid-column:1 / -1; padding:8px 10px; color:#a12626; background:#fde8e8; border-radius:8px; font-size:12px; font-weight:700; }
.pt-mail { left:398px; top:40px; width:292px; display:flex; gap:12px; align-items:center; }
.pt-mail-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; color:#fff; background:var(--green); border-radius:10px; font-size:18px; }
.pt-mail strong { display:block; font-size:13.5px; }
.pt-reply { position:absolute; left:398px; top:150px; width:292px; display:flex; gap:10px; align-items:flex-start; }
.pt-avatar { display:grid; place-items:center; width:32px; height:32px; flex:none; color:#04201c; background:linear-gradient(135deg,#2dd4bf,#176b55); border-radius:50%; font-weight:800; }
.pt-reply p { margin:0; padding:12px 14px; background:#fff; border:1px solid #dce3df; border-radius:4px 14px 14px 14px; box-shadow:0 12px 26px -20px rgba(11,70,56,.5); line-height:1.45; }

/* 5. Financiën */
.pt-stats { position:absolute; left:28px; right:28px; top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pt-stats .pt-card { position:relative; }
.pt-stats strong { display:block; margin:6px 0 2px; font-size:22px; }
.pt-stats span { color:#78847f; font-size:11px; }
.pt-stats .pt-positive { color:var(--green); }
.pt-chart { left:28px; right:28px; top:150px; height:214px; }
.pt-bars { display:flex; align-items:flex-end; gap:14px; height:150px; border-bottom:1px solid #cfd8d3; }
.pt-bars i { flex:1; height:var(--h); background:var(--green); border-radius:4px 4px 0 0; opacity:.85; transform-origin:bottom; }
#tour-scene-5 .pt-chip { left:28px; bottom:22px; }

/* 6. En nog veel meer */
.pt-more { position:absolute; left:28px; right:28px; top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pt-feature { position:relative; display:grid; align-content:start; gap:4px; min-height:148px; padding:16px; }
.pt-feature-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:6px; background:var(--mint); border-radius:10px; font-size:19px; }
.pt-feature strong { font-size:14px; }
.pt-feature small { font-size:11.5px; line-height:1.45; }
.pt-soon { position:absolute; top:14px; right:14px; padding:3px 8px; color:#805500; background:#fff2d9; border-radius:999px; font-size:10px; font-style:normal; font-weight:800; }
.pt-more-chip { left:50%; bottom:26px; display:flex; align-items:center; transform:translateX(-50%); white-space:nowrap; }
.tour-scene.is-active .pt-more-chip { animation-name:pt-fade-up-center; }
.pt-more-chip .tile-glyph { width:20px; height:20px; padding:3px; margin-right:8px; border-radius:6px; }
@keyframes pt-fade-up-center { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }

/* ---------------------------------------------------------------- Animaties (alleen in de actieve scène) */
.tour-scene.is-active .pt-anim { animation-duration:.6s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.8,.2,1); animation-delay:var(--d,0s); }
.tour-scene.is-active .pt-fade { animation-name:pt-fade; }
.tour-scene.is-active .pt-fade-up { animation-name:pt-fade-up; }
.tour-scene.is-active .pt-pop { animation-name:pt-pop; }
.tour-scene.is-active .pt-slide-left { animation-name:pt-slide-left; animation-duration:.7s; }
.tour-scene.is-active .pt-slide-down { animation-name:pt-slide-down; animation-duration:.7s; }
.tour-scene.is-active .pt-press { animation-name:pt-press; animation-duration:.5s; }
.tour-scene.is-active .pt-swap-out { animation-name:pt-swap-out; animation-duration:.4s; }
.tour-scene.is-active .pt-swap-in { animation-name:pt-swap-in; animation-duration:.4s; }
.tour-scene.is-active .pt-grow { animation-name:pt-grow; animation-duration:.8s; animation-delay:calc(1.1s + var(--d,0s)); }
.tour-scene.is-active .pt-type { animation-name:pt-type; animation-duration:1.4s; animation-timing-function:steps(22,end); animation-delay:.4s; }
.tour-scene.is-active .pt-caret { animation:pt-caret 1.8s steps(1) .3s 1 both; }
.tour-scene.is-active .pt-cursor-1 { animation:pt-cursor-1 4.6s cubic-bezier(.45,0,.25,1) both; }
.tour-scene.is-active .pt-cursor-3 { animation:pt-cursor-3 3.6s cubic-bezier(.45,0,.25,1) both; }
.tour-scene.is-active .pt-cursor-ann { animation:pt-cursor-ann 4.8s cubic-bezier(.45,0,.25,1) both; }
.tour-scene.is-active .pt-cursor-4 { animation:pt-cursor-4 2.6s cubic-bezier(.45,0,.25,1) both; }

@keyframes pt-progress { from { width:0; } to { width:100%; } }
@keyframes pt-fade { from { opacity:0; } to { opacity:1; } }
@keyframes pt-fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes pt-pop { 0% { opacity:0; transform:scale(.7); } 70% { opacity:1; transform:scale(1.05); } 100% { opacity:1; transform:none; } }
@keyframes pt-slide-left { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
@keyframes pt-slide-down { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:none; } }
@keyframes pt-press { 0%,100% { transform:none; } 45% { transform:scale(.93); filter:brightness(.9); } }
@keyframes pt-swap-out { from { opacity:1; } to { opacity:0; } }
@keyframes pt-swap-in { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:none; } }
@keyframes pt-grow { from { transform:scaleY(0); } to { transform:none; } }
@keyframes pt-type { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes pt-caret { 0%,15%,35%,55%,75% { opacity:1; } 8%,25%,45%,65%,85%,100% { opacity:0; } }
/* De cursor beweegt naar de knop, klikt en verdwijnt. */
@keyframes pt-cursor-1 { 0%,40% { opacity:0; transform:translate(560px,400px); } 50% { opacity:1; transform:translate(560px,400px); } 74% { transform:translate(190px,384px); } 80% { transform:translate(190px,384px) scale(.8); } 86% { opacity:1; transform:translate(190px,384px); } 100% { opacity:0; transform:translate(190px,384px); } }
@keyframes pt-cursor-3 { 0%,35% { opacity:0; transform:translate(560px,390px); } 45% { opacity:1; transform:translate(560px,390px); } 78% { transform:translate(180px,318px); } 84% { transform:translate(180px,318px) scale(.8); } 90% { opacity:1; transform:translate(180px,318px); } 100% { opacity:0; transform:translate(180px,318px); } }
@keyframes pt-cursor-ann { 0%,55% { opacity:0; transform:translate(600px,420px); } 62% { opacity:1; transform:translate(600px,420px); } 84% { transform:translate(170px,380px); } 88% { transform:translate(170px,380px) scale(.8); } 94% { opacity:1; transform:translate(170px,380px); } 100% { opacity:0; transform:translate(170px,380px); } }
@keyframes pt-cursor-4 { 0%,15% { opacity:0; transform:translate(520px,360px); } 28% { opacity:1; transform:translate(520px,360px); } 66% { transform:translate(210px,190px); } 72% { transform:translate(210px,190px) scale(.8); } 80% { opacity:1; transform:translate(210px,190px); } 100% { opacity:0; transform:translate(210px,190px); } }

/* Pauzeren: alles bevriest, inclusief de voortgangsbalk die het tempo bepaalt. */
.tour.is-paused .tour-progress i, .tour.is-paused .tour-scene.is-active * { animation-play-state:paused !important; }
/* Minder beweging: geen animaties, elke scène toont meteen haar eindbeeld. */
.tour.is-static .tour-scene .pt-anim, .tour.is-static .pt-caret { animation:none !important; }
.tour.is-static .pt-cursor { display:none; }

@media (max-width:1000px) {
  .tour-body { grid-template-columns:1fr; gap:20px; }
  .tour-steps { grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
  .tour-steps button small { display:none; }
}