:root{--bg:#f4f4f4;--card:#fff;--text:#111}
.dark{--bg:#0f172a;--card:#1e293b;--text:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Arial;background:var(--bg);color:var(--text)}
.header{position:sticky;top:0;display:flex;justify-content:space-between;padding:15px 30px;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);z-index:999}
.logo{color:#fff;font-size:28px;font-weight:bold}
nav a{color:#fff;margin:0 10px;text-decoration:none}
.progress{position:fixed;top:0;left:0;height:4px;background:red;width:0;z-index:1000}
.ticker{background:#ffcc00;padding:10px;overflow:hidden}
.ticker span{display:inline-block;animation:move 15s linear infinite}
@keyframes move{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.hero{padding:90px 20px;text-align:center;color:#fff;background:linear-gradient(-45deg,#ff0000,#ff7b00,#005eff,#00c3ff);background-size:400% 400%;animation:g 12s ease infinite}
@keyframes g{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.layout{display:grid;grid-template-columns:3fr 1fr;gap:20px;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.card{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.15);transition:.4s}
.card:hover{transform:translateY(-10px) scale(1.02)}
.card img{width:100%;height:220px;object-fit:cover}
.card h3,.card p,.card a{padding:12px}
.sidebar{background:var(--card);padding:20px;border-radius:20px;height:max-content}
button{padding:10px 20px;border:none;border-radius:30px;cursor:pointer}
@media(max-width:900px){.layout{grid-template-columns:1fr}}