:root{
  --purple:#7c3aed;--pink:#c084fc;--blue:#0ea5e9;--dark:#0f172a;--light:#e2e8f0;
  --bg:#f8fafc;--text:#1e293b;--muted:#64748b;--card:#ffffff;--section-1:#f1f5f9;
}

.tm-header{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  padding:20px 6%;transition:all .4s cubic-bezier(.215,.61,.355,1);
  background:#0f172a;
}


.tm-header.scrolled {
  background: rgba(15, 23, 42, 0.96);
  padding: 14px 6%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

*{margin:0;padding:0;box-sizing:border-box;}
.container{max-width:1440px;margin:0 auto;padding:0 6%;}

/* === СЕКЦИЯ БЛОГ === */
.blog-section{padding:140px 1% 100px;}
.blog-section h2.section-title{
  color:var(--blue);margin-bottom:60px;font-size:36px;font-weight:800;text-align:center;
}
.blog-grid{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.blog-card{
  background:var(--card);border-radius:20px;overflow:hidden;
  box-shadow:0 20px 80px 20px rgba(0,0,0,.12);transition:.4s;position:relative;
  cursor:pointer;display:flex;flex-direction:column;height:100%;
}
.blog-card:hover{
  transform:translateY(-12px);box-shadow:0 30px 80px rgba(0,0,0,.22);
}
.blog-img{
  width:100%;height:240px;object-fit:cover;
}
.blog-info{
  padding:24px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;
}
.blog-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;color:var(--muted);
}
.blog-date{font-weight:600;}
.blog-readtime{color:var(--blue);font-weight:600;}
.blog-title{
  font-size:20px;font-weight:800;margin:0 0 12px;color:var(--text);line-height:1.3;flex-grow:1;
}
.blog-desc{
  font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:16px;
}
.blog-btn{
  background:linear-gradient(90deg,var(--pink),var(--purple));
  color:#fff;border:none;padding:10px 20px;border-radius:50px;
  font-weight:700;font-size:14px;cursor:pointer;transition:all .3s;
  box-shadow:0 4px 15px rgba(124,58,237,.4);align-self:center;
}

/* === АДАПТИВ === */
@media(max-width:1100px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-img{height:200px;}
  .blog-section{padding:100px 5% 80px;}
  .blog-section h2.section-title{font-size:30px;}
}