/* recycle.digital - Holographic */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --bg: #F8F8FA; --surface: #F0F0F8; --teal: #4ECDC4; --yellow: #FFE66D; --gray: #6B7280; }
body { background: var(--bg); color: #1a1a2e; font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }
#mesh-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.mesh-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.3; }
.orb-1 { width: 500px; height: 500px; background: var(--teal); top: -10%; right: -10%; animation: drift1 30s ease-in-out infinite; }
.orb-2 { width: 400px; height: 400px; background: var(--yellow); bottom: -10%; left: -10%; animation: drift2 30s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-100px, 80px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(80px, -60px); } }
#hero { position: relative; z-index: 1; text-align: center; padding: 6rem 2rem 3rem; }
.hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; background: linear-gradient(135deg, var(--teal), var(--yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1rem; font-weight: 300; color: var(--gray); margin-top: 0.75rem; }
#sections { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 2rem; }
.diagonal-section { background: rgba(240,240,248,0.8); backdrop-filter: blur(10px); border-radius: 12px; padding: 3rem; margin-bottom: 2rem; transform: skewY(-1deg); opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.diagonal-section.visible { opacity: 1; }
.sec-content { transform: skewY(1deg); }
.sec-content h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.sec-content p { font-size: 0.95rem; line-height: 1.75; color: var(--gray); font-weight: 300; }
#footer { position: relative; z-index: 1; text-align: center; padding: 4rem 2rem; }
.footer-text { font-size: 0.85rem; color: var(--gray); opacity: 0.5; }