<style> *{ margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; } body{ font-family:'Poppins',sans-serif; background:#0d0d0d; color:white; overflow-x:hidden; } body::before{ content:""; position:fixed; width:500px; height:500px; background:rgba(255,140,0,0.08); filter:blur(120px); top:-100px; left:-100px; z-index:-1; } body::after{ content:""; position:fixed; width:400px; height:400px; background:rgba(255,255,255,0.04); filter:blur(120px); bottom:-100px; right:-100px; z-index:-1; } .container{ width:90%; max-width:1200px; margin:auto; } header{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; } .hero{ animation:fadeUp 1s ease; } .hero h1{ font-size:4rem; line-height:1.2; margin-bottom:20px; font-weight:700; } .hero h1 span{ color:#ff9d00; } .hero p{ color:#bcbcbc; max-width:700px; margin:auto; line-height:1.8; font-size:1.05rem; } .scroll-btn{ margin-top:40px; display:inline-block; padding:14px 30px; background:#ff9d00; color:black; text-decoration:none; border-radius:50px; font-weight:600; transition:0.3s ease; } .scroll-btn:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(255,157,0,0.3); } section{ padding:90px 0; } .section-title{ font-size:2.2rem; margin-bottom:40px; position:relative; display:inline-block; } .section-title::after{ content:""; position:absolute; left:0; bottom:-10px; width:60%; height:4px; border-radius:10px; background:#ff9d00; } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; } .card{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:25px; padding:30px; transition:0.35s ease; position:relative; overflow:hidden; backdrop-filter:blur(10px); } .card::before{ content:""; position:absolute; width:120px; height:120px; background:rgba(255,157,0,0.08); border-radius:50%; top:-40px; right:-40px; } .card:hover{ transform:translateY(-10px); border-color:rgba(255,157,0,0.3); box-shadow:0 15px 40px rgba(0,0,0,0.4); } .card h3{ margin-bottom:15px; font-size:1.5rem; } .card p{ color:#bdbdbd; line-height:1.7; margin-bottom:25px; font-size:0.96rem; } .card a{ display:inline-block; text-decoration:none; color:black; background:#ff9d00; padding:12px 22px; border-radius:40px; font-weight:600; transition:0.3s ease; } .card a:hover{ transform:scale(1.05); } footer{ padding:30px 0; text-align:center; color:#9e9e9e; border-top:1px solid rgba(255,255,255,0.06); } .fade{ opacity:0; transform:translateY(40px); transition:all 0.8s ease; } .fade.show{ opacity:1; transform:translateY(0); } @keyframes fadeUp{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } } @media(max-width:768px){ .hero h1{ font-size:2.5rem; } .hero p{ font-size:0.95rem; } .section-title{ font-size:1.8rem; } } </style>
