*, *::before, *::after {box-sizing: border-box;} body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {margin: 0; padding: 0;} .backdrop {-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);}  html {scroll-behavior: smooth;} :target {scroll-margin-top: 50vh;}  #bricks-preview-element-actions {display: none;}  .scroll-x, .scroll-x-mobile, .scroll-x-img { scrollbar-width: none; -ms-overflow-style: none;} .scroll-x::-webkit-scrollbar, .scroll-x-mobile::-webkit-scrollbar, .scroll-x-img::-webkit-scrollbar { display: none;}  html {scroll-behavior: smooth;} :target {scroll-margin-top: 0vh;}  .rotate-right { animation: rotate-right 50s linear infinite; } @keyframes rotate-right { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }  :root { --primary-color: var(--bricks-color-5b84a3); --primary-hover: #a5d300; --text-dark: #232323; --text-muted: #666; } .section-title { font-size: 48px; font-weight: 400; line-height: 0.9; color: var(--text-dark); letter-spacing: -2.4px; } .nav-buttons { display: flex; flex-direction: column; gap: 16px; } .nav-btn { text-align: left; width: 100%; background: none; border: none; cursor: pointer; position: relative; padding: 12px 0 12px 16px; font-family: inherit; font-size: 20px; letter-spacing: -1px; line-height: 0.9; color: var(--text-muted); transition: all 0.3s ease; } .nav-btn.active { font-weight: 700; color: var(--text-dark); } .nav-btn:hover { color: var(--text-dark); } .progress-bar-container { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: #e5e7eb; overflow: hidden; } .progress-bar { width: 100%; height: 0%; background-color: var(--primary-color); transition: height 0.1s linear; }  .image-wrapper { position: absolute; inset: 0; transition: all 0.5s ease-in-out; } .image-wrapper img { transition: opacity 0.5s ease; } .content-wrapper { transition: opacity 0.3s ease, transform 0.3s ease; } .content-wrapper.fade-out { opacity: 0; transform: translateY(10px); } .image-wrapper.fade-out { opacity: 0; }