:root { --ease:cubic-bezier(.2,.6,.2,1); --dur:400ms; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#111; background:#fff}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible{outline:2px solid #222; outline-offset:2px}
.section{padding:clamp(40px,6vw,96px) 20px; max-width:1200px; margin:0 auto}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px}
.media-box{aspect-ratio:16/9; background:#f4f4f4; overflow:hidden; border-radius:16px}
.hero{display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:32px}
@media (max-width:900px){ .hero{grid-template-columns:1fr; } }
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:.75rem; background:#111; color:#fff; transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.card{border:1px solid #eee; border-radius:16px; padding:1rem; transition:box-shadow .2s}
.card:hover{box-shadow:0 10px 24px rgba(0,0,0,.06)}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}