/* ═══════════════════════════════════════════════════
   Moerland Bouw & Onderhoud — Design System v3 (Monochrome)
   ═══════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:         #0a0a0a;
  --surface:    #111111;
  --surface2:   #181818;
  --card:       #1e1e1e;
  --text:       #f0ede8;
  --text-sec:   #6e6860;
  --text-muted: #3a3530;
  /* Monochrome accent — white replaces all gold/yellow */
  --gold:       rgba(255,255,255,.85);
  --gold-lt:    #ffffff;
  --gold-dk:    rgba(255,255,255,.55);
  --accent:     rgba(255,255,255,.85);
  --accent-lt:  #ffffff;
  --border:     rgba(255,255,255,.07);
  --border-s:   rgba(255,255,255,.14);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 26px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }
button { font-family: inherit; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1;
}

/* ── GRAIN ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
}

/* ── BACKGROUND GLOW ── */
.bg-glow {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-glow-1, .bg-glow-2, .bg-glow-3 {
  position: absolute; border-radius: 50%;
  filter: blur(100px); will-change: transform;
}
.bg-glow-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,.028) 0%, transparent 70%);
  top: -250px; left: -180px;
  animation: gf1 14s ease-in-out infinite;
}
.bg-glow-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.018) 0%, transparent 70%);
  top: 38%; right: -120px;
  animation: gf2 18s ease-in-out infinite 4s;
}
.bg-glow-3 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.016) 0%, transparent 70%);
  bottom: -180px; left: 28%;
  animation: gf3 12s ease-in-out infinite 8s;
}
@keyframes gf1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: 1; }
  50%      { transform: translate(60px,90px) scale(1.18); opacity: .65; }
}
@keyframes gf2 {
  0%,100% { transform: translate(0,0); opacity: 1; }
  50%      { transform: translate(-75px,-60px) scale(1.1); opacity: .55; }
}
@keyframes gf3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .75; }
  50%      { transform: translate(45px,-55px) scale(1.22); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow-1, .bg-glow-2, .bg-glow-3 { animation: none; }
}

/* ── FONTS ── */
.serif { font-family: 'Cormorant Garamond', serif; }

/* ── LAYOUT ── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}
.section { padding: 96px 0; }

/* ── NAV ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(10,10,10,.93);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: var(--border);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 48px;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { line-height: 0; flex-shrink: 0; }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link {
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
  color: rgba(240,237,232,.45);
  transition: color .2s;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 100px;
  background: var(--text); color: var(--bg);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  position: relative; overflow: hidden;
  transition: opacity .2s, transform .2s;
}
.nav-cta:hover { opacity: .9; transform: translateY(-1px); }
.nav-cta svg { transition: transform .2s; }
.nav-cta:hover svg { transform: translateX(3px); }
.mob-btn {
  display: none; background: none; border: none;
  color: var(--text-sec); padding: 4px;
}
#mob-menu {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: rgba(10,10,10,.97);
}
#mob-menu.open { display: flex; }
.mob-link {
  font-size: 1rem; font-weight: 400; color: var(--text-sec);
  padding: 10px 0; border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.mob-link:hover { color: var(--text); }

/* ── LABELS ── */
.label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 100px;
  padding: 6px 14px; margin-bottom: 20px;
}
.label-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 100px;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  transition: opacity .2s, transform .25s;
  position: relative;
}
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-white { background: var(--text); color: var(--bg); overflow: hidden; }
.btn-white:hover { opacity: .92; transform: translateY(-1px); }
.btn-outline {
  border: 1px solid rgba(255,255,255,.2); color: var(--text);
  font-weight: 400;
}
.btn-outline:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.btn-gold { background: var(--text); color: var(--bg); font-weight: 600; overflow: hidden; }
.btn-gold:hover { opacity: .9; transform: translateY(-1px); }
.btn-outline-gold {
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75);
}
.btn-outline-gold:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.35);
  color: var(--text);
  transform: translateY(-1px);
}

/* ── SHIMMER BUTTON ── */
@keyframes shimmer2 {
  0%   { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}
.btn.btn-shimmer {
  background: linear-gradient(110deg,
    #ffffff 0%,
    #f0f0f0 40%,
    #e8e8e8 50%,
    #f0f0f0 60%,
    #ffffff 100%);
  background-size: 200% 100%;
  color: #050505;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 28px rgba(255,255,255,.16);
  animation: shimmer2 2.4s infinite linear;
}
.btn.btn-shimmer::after { display: none; }
.btn.btn-shimmer:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 0 42px rgba(255,255,255,.3);
}
.btn.btn-shimmer svg { color: #050505; }
@media (prefers-reduced-motion: reduce) {
  .btn.btn-shimmer { animation: none; }
}

/* ── SECTION HEADINGS ── */
.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; letter-spacing: -.04em; line-height: .96; color: var(--text);
}
.h-xl { font-size: clamp(3rem, 5vw, 4.5rem); }
.h-lg { font-size: clamp(2.5rem, 4vw, 3.75rem); }
.h-md { font-size: clamp(2rem, 3vw, 3rem); }
.h-sm { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
em.gold { font-style: italic; color: rgba(255,255,255,.92); }

/* ── CARD BASE ── */
.card {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg);
}

/* ── SECTION DIVIDER ── */
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ── WHATSAPP FLOAT ── */
#wa {
  position: fixed; bottom: 24px; right: 24px; z-index: 600;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
  transition: transform .2s, box-shadow .2s;
}
#wa:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.4); }

/* ── FOOTER CREDIT LINK ── */
.footer-link-credit {
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.footer-link-credit:hover { color: var(--text-sec); border-color: rgba(255,255,255,.25); }

/* ── FOOTER ── */
#footer {
  position: relative; overflow: hidden;
  background: var(--bg); border-top: 1px solid var(--border);
}
.footer-grid {
  max-width: 1320px; margin: 0 auto; padding: 72px 48px 0;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 64px;
}
.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.625rem, 2.2vw, 2.125rem);
  font-weight: 300; letter-spacing: -.03em; line-height: 1.3;
  color: var(--text); margin: 20px 0 16px;
}
.footer-tagline em { font-style: italic; color: #fff; }
.footer-col-title {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px;
}
.footer-link {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; color: var(--text-sec);
  margin-bottom: 13px; transition: color .2s;
}
.footer-link:hover { color: var(--text); }
.footer-social-icon {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sec); flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.footer-social-icon:hover { border-color: var(--border-s); color: var(--text); }
.footer-bottom {
  max-width: 1320px; margin: 0 auto; padding: 28px 48px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
}
.footer-wm {
  position: absolute; right: 0; bottom: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700; letter-spacing: -.04em;
  color: rgba(255,255,255,.025); pointer-events: none; user-select: none;
  text-align: right; line-height: .85; padding-right: 32px;
}
.footer-wm-l1 { font-size: 11vw; display: block; text-transform: uppercase; letter-spacing: .04em; }
.footer-wm-l2 {
  font-size: 3.8vw; letter-spacing: .16em;
  color: rgba(255,255,255,.018); display: block;
  text-transform: uppercase; font-weight: 600;
}

/* ── FAQ ── */
.faq-item {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .3s;
}
.faq-item.open { border-color: rgba(255,255,255,.16); }
.faq-btn {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 22px 24px;
  background: none; border: none; text-align: left;
}
.faq-q { font-size: 1rem; font-weight: 500; color: var(--text); line-height: 1.45; padding-right: 20px; }
.faq-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-s); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); transition: transform .3s, border-color .3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: rgba(255,255,255,.3); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-body.open { max-height: 240px; }
.faq-ans { padding: 0 24px 22px; font-size: .9375rem; line-height: 1.72; color: var(--text-sec); }
.faq-ans a { color: rgba(255,255,255,.8); }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0; transform: translateY(30px); filter: blur(4px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .65s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: none; filter: blur(0); }
/* Scale-in variant for images and media */
.reveal-scale {
  opacity: 0; transform: scale(.96) translateY(16px); filter: blur(3px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .7s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.visible { opacity: 1; transform: none; filter: blur(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .28s; }
.d4 { transition-delay: .38s; }
.d5 { transition-delay: .48s; }

/* ── HERO ENTRANCE (load animation, not scroll) ── */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-card-in {
  from { opacity: 0; transform: translateX(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── TESTIMONIALS ── */
.t-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px;
  transition: opacity .4s, transform .4s, border-color .4s, box-shadow .4s;
}
.t-card.side { opacity: .45; transform: scale(.965); }
.t-card.featured {
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 0 80px rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.55);
}
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 60px rgba(255,255,255,.03), 0 24px 60px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 110px rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.55); }
}
.t-card.featured { animation: glow-pulse 4s ease-in-out infinite; }
.t-stars { color: rgba(255,255,255,.8); letter-spacing: 2px; font-size: .875rem; margin-bottom: 16px; }
.t-openquote {
  font-family: 'Cormorant Garamond', serif; font-size: 3rem;
  font-weight: 300; color: rgba(255,255,255,.12); line-height: 1; margin-bottom: 8px;
}
.t-text { font-size: .9375rem; line-height: 1.74; color: var(--text); font-weight: 300; margin-bottom: 24px; }
.t-author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.t-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.t-avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-name { font-size: .875rem; font-weight: 600; color: var(--text); }
.t-role { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.testi-carousel { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 20px; align-items: center; }
.testi-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
.testi-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-s); cursor: pointer; transition: all .3s;
}
.testi-dot.active { background: #fff; width: 22px; border-radius: 4px; }
.testi-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-s); background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sec); transition: border-color .2s, color .2s;
}
.testi-arrow:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* ── SPOTLIGHT CARD ── */
.spotlight-card {
  --x: 50%; --y: 50%;
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
  will-change: transform;
}
/* Spotlight fill — visible on hover, follows cursor */
.spotlight-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(
    360px circle at var(--x, 50%) var(--y, 50%),
    rgba(255,255,255,.13),
    transparent 55%
  );
  opacity: 0;
  transition: opacity .35s ease;
}
/* Border spotlight — tighter ring at cursor position */
.spotlight-card::before {
  content: '';
  position: absolute; inset: -1px; z-index: 4;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(
    200px circle at var(--x, 50%) var(--y, 50%),
    rgba(255,255,255,.22),
    transparent 60%
  );
  mask: linear-gradient(transparent, transparent),
        linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
  -webkit-mask: linear-gradient(transparent, transparent),
                linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  opacity: 0; transition: opacity .35s ease;
}
.spotlight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 40px rgba(255,255,255,.08);
}
.spotlight-card:hover::after { opacity: 1; }
.spotlight-card:hover::before { opacity: 1; }

/* ── STATS ROW ── */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  margin-top: 56px;
}
.stat-item {
  background: var(--surface2); padding: 40px 32px;
  position: relative; overflow: hidden;
  transition: background .35s, box-shadow .35s;
}
.stat-item::after {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent);
  opacity: 0; transition: opacity .35s;
}
.stat-item:hover { background: var(--card); }
.stat-item:hover::after { opacity: 1; }
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);
  font-weight: 400; color: var(--text); letter-spacing: -.04em; line-height: 1;
  margin-bottom: 10px;
}
.stat-num sup { font-size: .5em; color: #fff; vertical-align: super; }
.stat-label {
  font-size: .875rem; color: var(--text-sec);
  line-height: 1.5; font-weight: 300;
}

/* ── VALUE PROPS ── */
.vp-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}
.vp-item {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.16,1,.3,1);
}
.vp-item::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent);
  opacity: 0; transition: opacity .35s;
}
.vp-item:hover {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 0 32px rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.45);
  transform: translateY(-4px);
}
.vp-item:hover::after { opacity: 1; }
.vp-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.06); flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8);
  transition: box-shadow .35s, border-color .35s;
}
.vp-item:hover .vp-icon {
  box-shadow: 0 0 20px rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.26);
}
.vp-title { font-size: .9375rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.vp-sub { font-size: .8125rem; line-height: 1.6; color: var(--text-sec); }

/* ── SMOOTH IMAGE LOAD ── */
img.img-fade {
  opacity: 0;
  transition: opacity .55s ease;
}
img.img-fade.img-loaded {
  opacity: 1;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; }

/* ── FOCUS ── */
*:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; border-radius: 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .container, .nav-inner, .footer-grid, .footer-bottom { padding-left: 28px !important; padding-right: 28px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .vp-row { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: 32px 24px; }
}
@media (max-width: 768px) {
  .container, .nav-inner, .footer-grid, .footer-bottom { padding-left: 20px !important; padding-right: 20px !important; }
  .section { padding: 56px 0; }
  .nav-links, .nav-cta { display: none !important; }
  .mob-btn { display: block !important; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .vp-row { grid-template-columns: 1fr; }
  .vp-item { padding: 22px 18px; }
  .stats-row { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .stat-item { padding: 28px 20px; }
  .stat-num { font-size: clamp(2.25rem, 8vw, 3rem); }
  .footer-wm-l1 { font-size: 20vw; }
  .footer-wm-l2 { font-size: 7vw; }
  .testi-carousel { grid-template-columns: 1fr; }
  .t-card.side { display: none; }
  .t-card.featured { animation: none; transform: none; opacity: 1; }
  /* Reduce reveal blur on mobile for performance */
  .reveal { filter: blur(2px); }
  .reveal-scale { filter: blur(1.5px); }
}
@media (max-width: 480px) {
  .section { padding: 48px 0; }
  .h-xl { font-size: clamp(2.25rem, 10vw, 3rem); }
  .h-lg { font-size: clamp(2rem, 9vw, 2.5rem); }
  .h-md { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .btn { padding: 12px 22px; font-size: .8125rem; }
  #mob-menu { padding: 8px 16px 12px; }
  .mob-link { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1; transform: none; filter: none; transition: none; }
  .t-card.featured { animation: none; }
  * { transition-duration: .01ms !important; }
}