:root { --premium-blur: blur(20px) saturate(180%); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: 1px solid rgba(255, 255, 255, 0.4); --soft-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } .site-header { background: var(--glass-bg); backdrop-filter: var(--premium-blur); -webkit-backdrop-filter: var(--premium-blur); border-bottom: var(--glass-border); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (min-width: 851px) { body.menu-open .site-header { background: transparent; backdrop-filter: none; border-bottom: none; } } @media (max-width: 850px) { body.menu-open .site-header { background: var(--color-bg-white); backdrop-filter: none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } } .sector-card, .project-img-frame { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); background: #fff; border: 1px solid rgba(0, 0, 0, 0.03); } .sector-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(181, 150, 83, 0.12); border-color: rgba(181, 150, 83, 0.1); } .project-item:hover .project-img-frame { box-shadow: 0 40px 70px rgba(0, 0, 0, 0.12); } .bg-blob { position: fixed; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(181, 150, 83, 0.15) 0%, transparent 70%); border-radius: 50%; filter: blur(100px); z-index: 1; pointer-events: none; animation: blobFloat 25s infinite alternate cubic-bezier(0.45, 0, 0.55, 1); } @keyframes blobFloat { from { transform: translate(-10%, -10%) rotate(0deg); } to { transform: translate(10%, 10%) rotate(360deg); } } @media (min-width: 851px) { .nav-menu { background: transparent; } } .btn { transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; } .btn:hover { box-shadow: 0 10px 20px rgba(181, 150, 83, 0.2); }