* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: 'Roboto', sans-serif; background:linear-gradient(135deg,#eef4ff,#f8fbff,#eef8f5); padding:40px; color:#ffffff;}
.wrap {max-width:1400px; margin:auto;}
.glass {background:#ffffff30; backdrop-filter: blur(8px); border:1px solid #ffffff; border-radius:10px;}
.hero {padding:20px; text-align:center; margin-bottom:20px;}
.hero h1 {font-size:46px; font-weight: 800; color: #2700ff; -webkit-text-stroke: 1px #ffffff; text-transform: uppercase;}
.clock {display: flex; justify-content: center; margin-top: 10px;}
.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.card {display:grid; grid-template-columns:60px 1fr; gap:10px; padding:20px; text-decoration:none; color:#111; transition:.25s; background:#ff5700;}
.card:hover {background:#ff884a; color:#fff; transform:translateY(-5px);}
.icon svg {width:60px; height:60px; stroke-width:1.8; color:#ffffff;}
.info {color: #ffffff;}
@media(max-width:768px){
    body {padding:20px;}
    .grid {grid-template-columns:1fr;}
}