/* ══════════════════════════════════════════════════
   Buurman — Sub-pages (contact, privacy, terms, refund, support)
   ══════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────── */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.main-centered { display: flex; align-items: center; justify-content: center; }

/* Sub-page header (no container-wide wrapper) */
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

@media (max-width: 640px) {
    .header-inner { height: 64px; }
}

/* ── Page Template ───────────────────────────────── */
.page { max-width: 720px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.page-header { margin-bottom: 3rem; }
.page-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.5rem; line-height: 1.2; }
.page-meta { font-size: 0.875rem; color: var(--text-muted); }
.page h2 { font-size: 1.375rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 0.75rem; letter-spacing: -0.01em; }
.page h2:first-of-type { margin-top: 0; }
.page p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.page p:last-child { margin-bottom: 0; }
.page ul, .page ol { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; padding-left: 1.5rem; }
.page li { margin-bottom: 0.375rem; }
.page a { color: var(--primary); }
.page strong { color: var(--text); }

@media (max-width: 640px) {
    .page { padding: 3rem 1.5rem 4rem; }
}

/* ── TL;DR Box ───────────────────────────────────── */
.tldr { border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; }
.tldr p { margin-bottom: 0; font-weight: 500; }

/* Primary variant (privacy) */
.tldr-primary { background: var(--primary-50); border: 1px solid var(--primary-100); }
.tldr-primary p { color: var(--primary-dark); }

/* Success variant (refund) */
.tldr-success { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); }
.tldr-success p { color: var(--success-dark); }

/* ── Contact Page ────────────────────────────────── */
.contact-wrapper { max-width: 880px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.contact-header { text-align: center; margin-bottom: 3rem; }
.contact-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.75rem; line-height: 1.2; }
.contact-subtitle { font-size: 1.125rem; color: var(--text-secondary); line-height: 1.7; max-width: 480px; margin: 0 auto; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: start; }

/* Info side */
.contact-info h2 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; }
.contact-method { display: flex; gap: 1rem; margin-bottom: 1.75rem; }
.contact-method-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 12px rgba(2,132,199,0.2);
}
.contact-method-content h3 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.contact-method-content p { font-size: 0.875rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.contact-method-content a { color: var(--primary); text-decoration: none; font-weight: 500; }
.contact-method-content a:hover { text-decoration: underline; }

/* Form */
.contact-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.375rem; }
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius);
    font-family: inherit; font-size: 0.9375rem; color: var(--text); background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s; appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2,132,199,0.12);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-textarea { min-height: 130px; resize: vertical; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2378716c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-note { font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin-top: 1rem; }
.form-note a { color: var(--primary); }

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .contact-wrapper { padding: 3rem 1.5rem 4rem; }
}

/* ── Coming Soon (support) ───────────────────────── */
.coming-soon {
    text-align: center;
    max-width: 480px;
    padding: 4rem 2rem;
}

.coming-soon-illustration {
    margin-bottom: 2.5rem;
}

.coming-soon h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.coming-soon .subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.coming-soon .description {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.coming-soon-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 14px rgba(2,132,199,0.35);
}
.coming-soon-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(2,132,199,0.45);
}

.coming-soon-note {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Construction house animation */
@keyframes hammer {
    0%, 70%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(-20deg); }
    90% { transform: rotate(5deg); }
}
@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes sparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}
.hammer-group { animation: hammer 2s ease-in-out infinite; transform-origin: 170px 70px; }
.house-group { animation: bounce-gentle 4s ease-in-out infinite; }
.sparkle-1 { animation: sparkle 2s ease-in-out infinite; }
.sparkle-2 { animation: sparkle 2s ease-in-out 0.5s infinite; }
.sparkle-3 { animation: sparkle 2s ease-in-out 1s infinite; }

@media (prefers-reduced-motion: reduce) {
    .hammer-group, .house-group { animation: none; }
    .sparkle-1, .sparkle-2, .sparkle-3 { animation: none; opacity: 0.6; }
}