@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800&display=swap');
:root{
  --c1:#6366f1;--c2:#8b5cf6;--c3:#f43f5e;--c4:#f59e0b;--c5:#22d3ee;
  --bg:#fafafa;--surface:#ffffff;--border:#e2e8f0;
  --text:#1e293b;--muted:#475569;--dim:#94a3b8;
  --radius:16px;--radius-sm:10px;
  --shadow:0 4px 24px rgba(0,0,0,.08);
  --shadow-lg:0 16px 48px rgba(99,102,241,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
/* ANIMATED BACKGROUND ORBS */
body::before,body::after{
  content:'';
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
body::before{
  width:600px;height:600px;
  background:radial-gradient(circle,#6366f1,transparent 70%);
  top:-200px;left:-200px;
  animation:orb1 12s ease-in-out infinite alternate;
}
body::after{
  width:500px;height:500px;
  background:radial-gradient(circle,#f43f5e,transparent 70%);
  bottom:-100px;right:-150px;
  animation:orb2 15s ease-in-out infinite alternate;
}
@keyframes orb1{0%{transform:translate(0,0)}100%{transform:translate(120px,80px)}}
@keyframes orb2{0%{transform:translate(0,0)}100%{transform:translate(-100px,-60px)}}
/* MESH GRID */
body .mesh{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(99,102,241,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
/* NAV */
.blog-nav{
  position:sticky;top:0;z-index:200;
  height:64px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(99,102,241,.12);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;gap:16px;
  box-shadow:0 1px 0 rgba(99,102,241,.08),0 4px 24px rgba(0,0,0,.04);
}
.blog-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.blog-nav-logo img{height:36px;width:auto;border-radius:8px}
.blog-nav-logo-text{
  font-size:18px;font-weight:900;
  background:linear-gradient(135deg,#6366f1,#f43f5e);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.blog-nav-links{display:flex;align-items:center;gap:2px}
.blog-nav-links a{
  font-size:13px;font-weight:600;color:var(--muted);
  padding:6px 14px;border-radius:8px;text-decoration:none;
  transition:all .2s;
}
.blog-nav-links a:hover,.blog-nav-links a.active{
  color:var(--c1);background:rgba(99,102,241,.08);
}
.mobile-toggle{
  display:none;
  background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);
  color:var(--c1);padding:7px 14px;border-radius:8px;font-size:14px;cursor:pointer;
}
.mobile-nav{
  display:none;flex-direction:column;
  background:#fff;border-bottom:1px solid var(--border);
  position:fixed;top:64px;left:0;right:0;z-index:199;
  box-shadow:var(--shadow);
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  display:flex;align-items:center;gap:12px;padding:14px 24px;
  font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--border);transition:all .2s;
}
.mobile-nav a:hover{color:var(--c1);background:rgba(99,102,241,.04)}
@media(max-width:900px){
  .blog-nav-links{display:none}.mobile-toggle{display:block}
  .blog-nav{padding:0 16px}
}
/* BLOG HERO */
.blog-hero{
  position:relative;overflow:hidden;
  padding:100px 24px 80px;text-align:center;
  background:transparent;z-index:1;
}
.blog-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.06) 0%,rgba(244,63,94,.04) 100%);
  pointer-events:none;
}
.blog-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);
  border-radius:30px;padding:6px 20px;
  font-size:.78rem;font-weight:700;color:var(--c1);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px;
  position:relative;
}
.blog-hero h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.4rem,6vw,4rem);font-weight:800;
  line-height:1.1;letter-spacing:-.03em;margin-bottom:20px;
  background:linear-gradient(135deg,#1e293b 0%,#6366f1 50%,#f43f5e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  position:relative;
}
.blog-hero p{
  font-size:1.15rem;color:var(--muted);max-width:560px;
  margin:0 auto;line-height:1.75;position:relative;
}
/* ARTICLE HERO */
.article-hero{
  position:relative;overflow:hidden;
  padding:88px 24px 68px;text-align:center;background:transparent;z-index:1;
}
.article-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(99,102,241,.06) 0%,transparent 100%);
  pointer-events:none;
}
.article-hero .breadcrumb{font-size:.84rem;color:var(--dim);margin-bottom:18px;position:relative}
.article-hero .breadcrumb a{color:var(--c1);text-decoration:none}
.article-tag{
  display:inline-block;
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));
  border:1px solid rgba(99,102,241,.2);color:var(--c1);
  border-radius:20px;padding:4px 16px;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:18px;position:relative;
}
.article-hero h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.8rem,4vw,3rem);font-weight:800;
  color:var(--text);line-height:1.2;max-width:820px;
  margin:0 auto 20px;letter-spacing:-.02em;position:relative;
}
.article-hero .meta{
  display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;font-size:.88rem;color:var(--dim);position:relative;
}
/* AD SLOT */
.ad-slot{max-width:900px;margin:0 auto;padding:12px 24px;text-align:center}
/* BLOG GRID */
.blog-grid-section{
  max-width:1140px;margin:0 auto;padding:72px 24px;position:relative;z-index:1;
}
.blog-grid-section>h2{
  font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:var(--dim);margin-bottom:40px;
  display:flex;align-items:center;gap:14px;
}
.blog-grid-section>h2::after{content:'';flex:1;height:1px;background:var(--border)}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:28px;
  perspective:1200px;
}
/* 3D CARDS */
.blog-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s,border-color .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;position:relative;
}
.blog-card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(99,102,241,.05),transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:0;
}
.blog-card:hover{
  transform:perspective(1000px) rotateX(-4deg) rotateY(3deg) translateY(-10px) scale(1.02);
  box-shadow:0 30px 60px rgba(99,102,241,.2),0 8px 24px rgba(0,0,0,.1);
  border-color:rgba(99,102,241,.35);
}
.blog-card:hover::before{opacity:1}
.blog-card-img{
  height:190px;display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;position:relative;overflow:hidden;
  transform:translateZ(20px);
}
.blog-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.25) 100%);
}
.bc-purple{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.bc-orange{background:linear-gradient(135deg,#f43f5e,#f59e0b)}
.bc-teal  {background:linear-gradient(135deg,#22d3ee,#6366f1)}
.bc-green {background:linear-gradient(135deg,#10b981,#22d3ee)}
.bc-indigo{background:linear-gradient(135deg,#6366f1,#f43f5e)}
.bc-red   {background:linear-gradient(135deg,#f43f5e,#8b5cf6)}
.blog-card-body{
  padding:26px;flex:1;display:flex;flex-direction:column;
  position:relative;z-index:1;
}
.blog-card-tag{
  font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:var(--c1);margin-bottom:10px;
}
.blog-card-title{
  font-size:1.1rem;font-weight:700;line-height:1.4;
  color:var(--text);margin-bottom:10px;
}
.blog-card-excerpt{
  font-size:.875rem;color:var(--muted);line-height:1.7;flex:1;margin-bottom:20px;
}
.blog-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--dim);
}
.blog-card-link{
  display:inline-flex;align-items:center;gap:7px;
  background-color:#6366f1;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#ffffff !important;text-decoration:none;padding:8px 18px;
  border-radius:9px;font-size:.82rem;font-weight:700;
  transition:all .25s;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.blog-card-link:hover{
  color:#ffffff !important;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(99,102,241,.5);
}
/* ARTICLE BODY */
.article-body{
  max-width:800px;margin:0 auto;padding:60px 24px 80px;
  position:relative;z-index:1;
}
.blog-nav-back{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--c1);text-decoration:none;font-weight:600;font-size:.9rem;
  margin-bottom:40px;padding:9px 18px;
  background:rgba(99,102,241,.07);
  border:1px solid rgba(99,102,241,.18);border-radius:9px;
  transition:all .2s;
}
.blog-nav-back:hover{
  background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);
  transform:translateX(-3px);
}
.article-body h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.65rem;font-weight:700;color:var(--text);
  margin:48px 0 14px;line-height:1.3;letter-spacing:-.01em;
  padding-bottom:14px;border-bottom:2px solid rgba(99,102,241,.12);
  position:relative;
}
.article-body h2::before{
  content:'';position:absolute;bottom:-2px;left:0;
  width:48px;height:2px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  border-radius:2px;
}
.article-body h3{
  font-size:1.15rem;font-weight:700;color:var(--c1);margin:28px 0 10px;
}
.article-body p{
  font-size:1.05rem;line-height:1.85;color:var(--muted);margin-bottom:18px;
}
.article-body ul,.article-body ol{padding-left:20px;margin-bottom:20px}
.article-body li{font-size:1rem;line-height:1.8;color:var(--muted);margin-bottom:8px}
.article-body li strong{color:var(--text)}
.article-body a{
  color:var(--c1);text-decoration:underline;text-underline-offset:3px;transition:color .2s;
}
.article-body a:hover{color:var(--c2)}
.article-body strong{color:var(--text)}
/* BOXES */
.tip-box,.info-box{
  background:rgba(99,102,241,.06);
  border-left:3px solid var(--c1);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:28px 0;
}
.tip-box p,.info-box p{margin:0;font-size:.95rem;color:var(--muted)}
.tip-box strong,.info-box strong{color:var(--c1)}
.warning-box{
  background:rgba(245,158,11,.06);border-left:3px solid var(--c4);
  border-radius:0 12px 12px 0;padding:18px 22px;margin:28px 0;
}
.warning-box p{margin:0;font-size:.95rem;color:#92400e}
.legal-disclaimer{
  background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.05));
  border:1px solid rgba(99,102,241,.15);border-radius:12px;
  padding:18px 22px;font-size:.9rem;color:var(--muted);margin-bottom:28px;
}
/* TABLES */
.comparison-table,.spec-table{
  width:100%;border-collapse:collapse;margin:28px 0;
  font-size:.92rem;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.comparison-table th,.spec-table th{
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));
  color:var(--c1);font-weight:700;padding:13px 18px;
  text-align:left;border-bottom:2px solid rgba(99,102,241,.15);
}
.comparison-table td,.spec-table td{
  padding:12px 18px;border-bottom:1px solid var(--border);
  color:var(--muted);vertical-align:top;background:#fff;
}
.comparison-table tr:last-child td,.spec-table tr:last-child td{border-bottom:none}
.comparison-table tr:hover td,.spec-table tr:hover td{background:rgba(99,102,241,.03)}
.yes{color:#10b981!important;font-weight:700}
.no{color:#f43f5e!important;font-weight:700}
.winner{color:#10b981!important;font-weight:700}
/* STEP LIST */
.step-list{counter-reset:steps;list-style:none;padding:0}
.step-list li{
  counter-increment:steps;display:flex;
  gap:16px;align-items:flex-start;margin-bottom:20px;
}
.step-list li::before{
  content:counter(steps);
  background:linear-gradient(135deg,var(--c1),var(--c2));
  color:#fff;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;flex-shrink:0;margin-top:1px;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.step-list li p{margin:0;color:var(--muted)}
/* CHECKLIST */
.checklist{list-style:none;padding:0}
.checklist li{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.checklist li::before{
  content:"✓";color:#10b981;font-weight:900;
  width:22px;height:22px;background:rgba(16,185,129,.1);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;margin-top:2px;
}
/* RELATED */
.related-articles{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;margin-top:60px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  position:relative;overflow:hidden;
}
.related-articles::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
}
.related-articles h3{
  font-size:.9rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:var(--dim);margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--border);
}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-list a{
  display:flex;align-items:center;gap:10px;
  color:var(--c1);text-decoration:none;font-size:.95rem;font-weight:500;
  padding:10px 14px;border-radius:9px;border:1px solid transparent;
  transition:all .2s;
}
.related-list a:hover{
  background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.18);
}
/* FOOTER */
.site-footer{
  background:#fff;border-top:1px solid var(--border);
  padding:56px 24px 32px;position:relative;z-index:1;
  box-shadow:0 -4px 24px rgba(0,0,0,.04);
}
.footer-inner{max-width:1100px;margin:0 auto;text-align:center}
.footer-logo{
  font-size:1.4rem;font-weight:900;
  background:linear-gradient(135deg,#6366f1,#f43f5e);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:22px;
}
.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:14px;
}
.footer-nav a{font-size:.85rem;color:var(--dim);text-decoration:none;transition:color .2s}
.footer-nav a:hover{color:var(--c1)}
.footer-copy{font-size:.8rem;color:var(--dim);margin-top:14px;line-height:1.6}
/* LEGAL */
.legal-hero{
  position:relative;padding:80px 24px 64px;text-align:center;
  overflow:hidden;background:transparent;z-index:1;
}
.legal-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(99,102,241,.08) 0%,transparent 65%);
  pointer-events:none;
}
.legal-hero-inner{position:relative}
.legal-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);
  border-radius:30px;padding:6px 20px;font-size:.78rem;font-weight:700;
  color:var(--c1);text-transform:uppercase;letter-spacing:.07em;margin-bottom:22px;
}
.legal-hero h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.9rem,4vw,2.9rem);color:var(--text);margin-bottom:14px;
}
.legal-hero p{color:var(--muted);font-size:1.1rem;max-width:500px;margin:0 auto}
.legal-body{max-width:880px;margin:0 auto;padding:56px 24px 80px;position:relative;z-index:1}
.legal-section{
  margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border);
}
.legal-section:last-child{border-bottom:none;margin-bottom:0}
.legal-section h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.45rem;color:var(--text);margin-bottom:14px;font-weight:700;
}
.legal-section p,.legal-section li{color:var(--muted);line-height:1.8;font-size:1rem}
.legal-section a{color:var(--c1)}
.legal-section ul{padding-left:20px}
/* INFO CARDS */
.info-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;margin-bottom:40px;
}
.info-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;text-align:center;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s,border-color .25s;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.info-card:hover{
  transform:perspective(800px) rotateX(-5deg) translateY(-6px);
  box-shadow:0 20px 40px rgba(99,102,241,.15);border-color:rgba(99,102,241,.3);
}
.info-card-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin:0 auto 16px;
}
.feat-icon.green{background:rgba(16,185,129,.12);color:#10b981}
.feat-icon.red{background:rgba(244,63,94,.12);color:#f43f5e}
.feat-icon.cyan{background:rgba(34,211,238,.12);color:#22d3ee}
.feat-icon.purple{background:rgba(139,92,246,.12);color:#8b5cf6}
.info-card h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px}
.info-card p{font-size:.875rem;color:var(--muted);line-height:1.6;margin:0}
/* RESPONSIVE */
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-grid-section{padding:48px 16px}
  .article-body{padding:44px 16px 64px}
  .legal-body{padding:40px 16px 60px}
  .related-articles{padding:24px 16px}
  .site-footer{padding:40px 16px 24px}
  .blog-card:hover{transform:translateY(-6px)}
}

/* =============================================
   BLOG IMAGE GALLERY - 3D ANIMATED
   ============================================= */
.blog-img-section {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 0 24px;
}
.blog-img-section h3 {
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #94a3b8;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.blog-img-section h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #e2e8f0, transparent);
}
.blog-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  perspective: 1400px;
}
.blog-img-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0) rotateY(0) scale(1);
  transition: transform .5s cubic-bezier(.23,1,.32,1), box-shadow .5s, border-color .3s;
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
  animation: floatCard 6s ease-in-out infinite alternate;
  position: relative;
}
.blog-img-card:nth-child(2) { animation-delay: -1.5s; animation-duration: 7s; }
.blog-img-card:nth-child(3) { animation-delay: -3s;   animation-duration: 8s; }
.blog-img-card:nth-child(4) { animation-delay: -4.5s; animation-duration: 5.5s; }
.blog-img-card:hover {
  transform: perspective(900px) rotateX(-6deg) rotateY(4deg) scale(1.05) translateY(-8px);
  box-shadow: 0 24px 56px rgba(99,102,241,.22), 0 8px 20px rgba(0,0,0,.1);
  border-color: rgba(99,102,241,.4);
  z-index: 10;
}
.blog-img-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.blog-img-card:hover::after { opacity: 1; }
.blog-img-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transform: translateZ(10px);
  transition: transform .5s;
  border-radius: 0;
}
.blog-img-card:hover img { transform: translateZ(20px) scale(1.03); }
.blog-img-label {
  padding: 12px 16px;
  font-size: .8rem;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-img-label i { color: #6366f1; font-size: .85rem; }
@keyframes floatCard {
  0%   { transform: perspective(900px) rotateX(0) rotateY(0) translateY(0); }
  100% { transform: perspective(900px) rotateX(-2deg) rotateY(2deg) translateY(-6px); }
}
/* ARTICLE HERO IMAGE */
.article-hero-img {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 52px;
  position: relative;
  z-index: 1;
}
.article-hero-img img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(99,102,241,.2), 0 6px 20px rgba(0,0,0,.1);
  animation: heroImgFloat 8s ease-in-out infinite alternate;
  transition: transform .4s;
}
.article-hero-img img:hover {
  transform: scale(1.02) rotateX(-2deg);
}
@keyframes heroImgFloat {
  0%   { transform: translateY(0) rotateX(0deg); box-shadow: 0 20px 60px rgba(99,102,241,.2); }
  100% { transform: translateY(-10px) rotateX(-1deg); box-shadow: 0 36px 80px rgba(99,102,241,.3); }
}
@media (max-width: 640px) {
  .blog-img-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .blog-img-card img { height: 130px; }
  .blog-img-section { padding: 0 16px; }
}

/* Blog index card images */
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .5s cubic-bezier(.23,1,.32,1);
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.08);
}