*{box-sizing:border-box}html,body{width:100%;min-height:100%}body{color:#fff;background:linear-gradient(90deg,#ff7e5f,#feb47b);flex-direction:column;min-height:100vh;margin:0;font-family:Arial,sans-serif;display:flex;overflow-x:hidden}#root{flex:1;min-height:0;display:flex}.header{text-align:center;background-color:rgba(0,0,0,.7);padding:20px}.header h1{margin:0}nav ul{padding:0;list-style-type:none}nav ul li{margin:0 15px;display:inline}nav a{color:#fff;text-decoration:none;transition:color .3s}nav a:hover{color:#ffeb3b}.hero{text-align:center;backdrop-filter:blur(10px);background:rgba(255,255,255,.2);border-radius:10px;padding:50px 20px;box-shadow:0 4px 20px rgba(0,0,0,.47)}.hero h2{margin:0;font-size:2.5em}.hero p{font-size:1.2em}.cta-button{color:#fff;cursor:pointer;background:#ff4081;border:none;border-radius:5px;padding:15px 30px;font-size:1em;transition:background .3s,transform .2s}.cta-button:hover{background:#f50057;transform:translateY(-5px)}.card-container{flex-wrap:wrap;justify-content:space-around;padding:40px 20px;display:flex}.card{text-align:center;background:rgba(255,255,255,.1);border-radius:10px;width:250px;margin:10px;padding:20px;transition:transform .3s,background .3s;box-shadow:0 2px 15px rgba(0,0,0,.3)}.card:hover{background:rgba(255,255,255,.2);transform:scale(1.05)}.footer{text-align:center;background-color:rgba(0,0,0,.7);width:100%;padding:20px 0;position:relative;bottom:0}.footer p{margin:0}