body { font-family: var(--font-main); font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); } h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; } h3 { font-size: clamp(18px, 2.5vw, 22px); font-weight: 600; line-height: 1.3; } p { color: var(--color-muted); line-height: 1.7; } /* Animation initial states — only applied when JS is active (.js class on ) */ .js [data-animation] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; } .js [data-animation="fade-up"] { transform: translateY(30px); } .js [data-animation="fade-left"] { transform: translateX(-40px); } .js [data-animation="fade-right"] { transform: translateX(40px); } .js [data-animation="scale-in"] { transform: scale(0.9); } .js [data-animation][data-delay="1"] { transition-delay: 0.1s; } .js [data-animation][data-delay="2"] { transition-delay: 0.2s; } .js [data-animation][data-delay="3"] { transition-delay: 0.3s; } .js [data-animation][data-delay="4"] { transition-delay: 0.4s; } .js [data-animation][data-delay="5"] { transition-delay: 0.5s; } .js [data-animation][data-delay="6"] { transition-delay: 0.6s; } .js [data-animation].is-visible { opacity: 1; transform: none; }