*{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background-color:#fff;min-height:100%;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background-color:#fff;box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:100}.header .container{display:flex;justify-content:space-between;align-items:center;padding:1rem 20px}.logo{font-size:1.8rem;font-weight:700;color:#1f2937;text-decoration:none;cursor:pointer}.nav{display:flex;gap:2rem}.nav-link{color:#64748b;text-decoration:none;font-weight:500;transition:color .3s ease}.nav-link:hover,.nav-link.active{color:#374151}.hero{background:linear-gradient(135deg,#1f2937,#374151);color:#fff;padding:4rem 0;text-align:center}.hero-title{font-size:3rem;font-weight:500;margin-bottom:1rem}.hero-subtitle{font-size:1.2rem;font-weight:300;opacity:.9}.blog-posts{padding:4rem 0;background-color:#f8fafc}.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:2rem}.post-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px #00000012;transition:transform .3s ease,box-shadow .3s ease}.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #00000026}.post-content{padding:1.5rem}.post-title{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:#1e293b}.post-excerpt{color:#64748b;margin-bottom:1rem;line-height:1.6}.post-meta{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:#94a3b8}.post-date{font-weight:500}.read-more{color:#374151;text-decoration:none;font-weight:500;transition:color .3s ease}.read-more:hover{color:#1f2937}.main{flex:1}.footer{background-color:#1e293b;color:#94a3b8;text-align:center;padding:2rem 0;margin-top:auto}@media (max-width: 768px){.header .container{flex-direction:column;gap:1rem}.nav{gap:1rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.posts-grid{grid-template-columns:1fr}}@media (max-width: 480px){.container{padding:0 15px}.hero,.blog-posts{padding:2rem 0}}