/* DBA Foresttree - shared styles */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-family: 'Ubuntu', system-ui, -apple-system, sans-serif; color: #1a1a1a; }

.font-serif { font-family: 'Fraunces', Georgia, serif; }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.625rem; font-size: 0.9375rem; font-weight: 500; transition: all 0.2s; cursor: pointer; text-decoration: none; }
.btn-primary { background: #8b5cf6; color: white; box-shadow: 0 1px 2px rgba(139, 92, 246, 0.2); }
.btn-primary:hover { background: #7c3aed; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.btn-ghost { background: transparent; color: #374151; border: 1px solid #e5e7eb; }
.btn-ghost:hover { background: #f9fafb; border-color: #d1d5db; }
.btn-lg { padding: 0.9375rem 1.875rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

.card { background: white; border-radius: 1rem; border: 1px solid #ececec; transition: all 0.2s; }
.card-hover:hover { border-color: #d4d4d4; transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.08); }

.input { width: 100%; padding: 0.75rem 1rem; border-radius: 0.625rem; border: 1px solid #e5e7eb; font-size: 0.9375rem; outline: none; transition: all 0.15s; background: white; }
.input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12); }
.input::placeholder { color: #9ca3af; }

.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-purple { background: #f5f3ff; color: #7c3aed; }
.badge-amber { background: #fffbeb; color: #b45309; }
.badge-green { background: #ecfdf5; color: #059669; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }

.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Smaak-preview kaarten */
.smaak-card { position: relative; border-radius: 1rem; overflow: hidden; cursor: pointer; transition: all 0.3s; border: 1px solid #ececec; }
.smaak-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }
.smaak-preview { aspect-ratio: 16/10; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }

/* Smaak 1 - Warm & Persoonlijk */
.smaak-warm { background: linear-gradient(135deg, #FAF6EE 0%, #E8DCC8 100%); color: #2F4F3E; }
.smaak-warm .smaak-h { font-family: 'Fraunces', Georgia, serif; font-weight: 500; }
.smaak-warm .smaak-accent { background: #C97B5C; color: white; }

/* Smaak 2 - Zakelijk & Strak */
.smaak-zakelijk { background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%); color: #0F2340; }
.smaak-zakelijk-line { width: 3rem; height: 2px; background: #C9A86B; margin-top: 0.5rem; }
.smaak-zakelijk .smaak-h { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }
.smaak-zakelijk .smaak-accent { background: #0F2340; color: #C9A86B; }

/* Smaak 3 - Modern & Speels */
.smaak-modern { background: #18181B; color: #FAFAFA; position: relative; }
.smaak-modern::before { content: ''; position: absolute; top: -40%; right: -20%; width: 80%; height: 100%; background: radial-gradient(circle, #6B46C1 0%, transparent 60%); opacity: 0.6; }
.smaak-modern::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 60%; height: 80%; background: radial-gradient(circle, #F97316 0%, transparent 60%); opacity: 0.4; }
.smaak-modern > * { position: relative; z-index: 2; }
.smaak-modern .smaak-h { font-weight: 700; letter-spacing: -0.02em; }
.smaak-modern .smaak-accent { background: #F97316; color: white; }

/* Smaak 4 - Klassiek & Vertrouwd */
.smaak-klassiek { background: #F5EFE3; color: #3D2914; border: 2px solid #2D5141; }
.smaak-klassiek .smaak-h { font-family: 'Lora', Georgia, serif; font-style: italic; }
.smaak-klassiek .smaak-accent { background: #2D5141; color: #F5EFE3; }

/* Pakket-kaarten */
.pakket { position: relative; transition: all 0.2s; }
.pakket-featured { background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%); border-color: #c4b5fd; }
.pakket-featured::before { content: 'Meest gekozen'; position: absolute; top: -0.625rem; left: 50%; transform: translateX(-50%); background: #8b5cf6; color: white; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 9999px; letter-spacing: 0.025em; text-transform: uppercase; }

/* Stap-iconen */
.stap-circle { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: #f5f3ff; color: #8b5cf6; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }

/* Pulse for live elements */
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* Accordion */
.accordion-item { border-bottom: 1px solid #ececec; }
.accordion-trigger { width: 100%; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; font-weight: 500; color: #1a1a1a; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; color: #4b5563; font-size: 0.9375rem; line-height: 1.6; }
.accordion-content.open { max-height: 500px; padding-bottom: 1.25rem; }
.accordion-trigger .chevron { transition: transform 0.2s; }
.accordion-trigger.open .chevron { transform: rotate(180deg); }

/* Hero gradient */
.hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 60%), #ffffff; }

/* Scroll smooth */
html { scroll-behavior: smooth; }

/* Hero site-preview showcase */
.showcase-stack { position: relative; width: 100%; height: 100%; }
.showcase-card { position: absolute; border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 48px -8px rgba(0,0,0,0.18); transition: transform 0.35s ease, box-shadow 0.35s ease; width: 76%; aspect-ratio: 4/3; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.showcase-front { bottom: 4%; right: 0; transform: rotate(1.5deg); z-index: 3; }
.showcase-mid   { bottom: 20%; right: 8%; transform: rotate(-2.5deg); z-index: 2; }
.showcase-back  { bottom: 36%; right: 3%; transform: rotate(4deg); z-index: 1; }
.showcase-stack:hover .showcase-front { transform: rotate(0deg) translate(-6px, -6px); box-shadow: 0 32px 56px -8px rgba(0,0,0,0.22); }
.showcase-stack:hover .showcase-mid   { transform: rotate(0deg) translate(10px, -16px); }
.showcase-stack:hover .showcase-back  { transform: rotate(0deg) translate(0, -26px); }

/* Typewriter cursor */
.tw-cursor { display: inline-block; color: #8b5cf6; font-weight: 300; animation: tw-blink 0.75s step-end infinite; margin-left: 1px; }
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Scrolling profession ticker */
.ticker-outer { position: relative; overflow: hidden; }
.ticker-outer::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3rem; background: linear-gradient(to right, white, transparent); z-index: 2; pointer-events: none; }
.ticker-outer::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3rem; background: linear-gradient(to left, white, transparent); z-index: 2; pointer-events: none; }
.ticker-track { display: flex; width: max-content; gap: 0.5rem; padding: 0.5rem 0; animation: ticker-scroll 40s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 9999px; font-size: 0.875rem; color: #374151; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.05); flex-shrink: 0; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-outer:hover .ticker-track { animation-play-state: paused; }

/* Section spacing */
section { padding: 4rem 0; }
@media (min-width: 768px) { section { padding: 6rem 0; } }

/* Container */
.container-narrow { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.container-wide { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }

/* Sticky CTA bar */
.sticky-cta { position: sticky; top: 0; z-index: 50; background: #1a1a2e; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }