/* ============================================================
   SETTER ELITE — bedankt / thank you page
   Bouwt voort op style.css (zelfde design system)
   ============================================================ */

.ty-hero { padding: 150px 0 90px; }
.ty-header { max-width: 720px; margin-bottom: 52px; }
.ty-header h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 22px; }
.ty-header .hero-subtitle { margin-bottom: 0; max-width: 640px; }

.ty-header-center { margin: 0 auto 48px; text-align: center; }
.ty-header-center .hero-subtitle { margin: 0 auto; }

.ty-video-solo { max-width: 880px; margin: 0 auto; }

/* ===== Video frame ===== */
.video-frame {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--border-strong);
    background: var(--bg-card); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.video-frame-portrait { aspect-ratio: 9 / 16; }

.video-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; text-align: center;
    background:
        radial-gradient(ellipse at center, rgba(46,155,238,0.07), transparent 70%),
        var(--bg-card);
}
.video-play {
    width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
    background: var(--text-primary); color: #0a0a0b; margin-bottom: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5); transition: var(--transition);
}
.video-frame:hover .video-play { transform: scale(1.06); }
.video-play svg { width: 28px; height: 28px; margin-left: 3px; }
.video-placeholder p { font-family: var(--font-display); font-size: 1.15rem; }
.video-note { font-size: 13.5px; color: var(--text-muted); }
.video-frame-portrait .video-play { width: 56px; height: 56px; }
.video-frame-portrait .video-play svg { width: 22px; height: 22px; }

/* ===== Testimonials ===== */
.ty-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); justify-content: center; gap: 22px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.ty-testimonial { display: flex; flex-direction: column; }
.ty-testimonial .video-frame { margin-top: auto; }
.ty-testimonial h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.ty-testimonial-caption { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ===== Trustpilot ===== */
.ty-trustpilot {
    text-align: center; background: var(--bg-card); border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl); padding: 56px 40px; position: relative; overflow: hidden;
}
.ty-trustpilot::before {
    content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
    width: 520px; height: 520px; pointer-events: none;
    background: radial-gradient(circle, rgba(46,155,238,0.1), transparent 65%);
}
.tp-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; color: var(--accent); }
.tp-stars svg { width: 26px; height: 26px; }
.ty-trustpilot h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.ty-trustpilot p { color: var(--text-secondary); max-width: 460px; margin: 0 auto 28px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .ty-testimonial-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 680px) {
    .ty-hero { padding: 120px 0 70px; }
    .ty-testimonial-grid { grid-template-columns: 1fr; max-width: 400px; }
    .ty-trustpilot { padding: 40px 24px; }
    body { padding-bottom: 0; }
}

.ty-testimonial-note { display: block; margin-top: 10px; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

.ty-testimonial-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin: 0 0 6px; }