a{ text-decoration:none; color:inherit; }

  /* ---------- Article ---------- */
  .badge-tag{
      display:inline-block;
      background:var(--primary);
      color:var(--white);
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.03em;
      padding:6px 14px;
      margin-top: 10px;
      border-radius:5px;
      text-transform:uppercase;
  }

  .article-title{
      font-weight:800;
      font-size:2.4rem;
      line-height:1.25;
      color:var(--text-black);
      margin:18px 0 16px;
      letter-spacing:-0.01em;
  }

  .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:22px;
      font-size:.875rem;
      color:var(--text-muted);
      margin-bottom:26px;
  }
  .meta-row span{ display:flex; align-items:center; gap:7px; }
  .meta-row i{ color:var(--primary); }

  /* ---------- Hero banner ---------- */
  .hero-banner{
      position:relative;
      border-radius:16px;
      overflow:hidden;
      min-height:300px;
      background:
          radial-gradient(circle at 50% 40%, rgba(232,35,42,0.18), transparent 60%),
          linear-gradient(135deg, #0c1524 0%, #14213a 45%, #0c1524 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:var(--card-shadow);
  }
  .hero-banner .hero-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .5s ease;
  }
  .hero-banner:hover .hero-img{
      transform:scale(1.06);
  }
  .hero-banner .skyline{
      position:absolute;
      bottom:0; left:0; right:0;
      height:45%;
      background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  }
  .hero-cloud-icon{
      position:relative;
      z-index:2;
      width:110px; height:110px;
      display:flex; align-items:center; justify-content:center;
      color:#fff;
  }
  .hero-cloud-icon i{
      font-size:5.5rem;
      color:#f4f6ff;
      filter: drop-shadow(0 0 22px rgba(120,170,255,.65));
  }
  .hero-corner-icon{
      position:absolute;
      width:46px; height:46px;
      border-radius:12px;
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.18);
      display:flex; align-items:center; justify-content:center;
      color:#eef1ff;
      backdrop-filter:blur(4px);
      transition:transform .3s ease, background .3s ease;
  }
  .hero-corner-icon:hover{
      transform:translateY(-4px);
      background:rgba(232,35,42,0.25);
  }
  .hero-corner-icon.tl{ top:18px; left:22px; }
  .hero-corner-icon.tr{ top:18px; right:22px; }
  .hero-corner-icon.bl{ bottom:18px; left:22px; }
  .hero-corner-icon.br{ bottom:18px; right:22px; }

  /* ---------- Body copy ---------- */
  .article-body p{
      color:var(--ink-soft);
      font-size:1rem;
      margin-bottom:1.1rem;
  }
  .section-heading{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      font-size:1.4rem;
      color:var(--text-black);
      margin:2.2rem 0 1rem;
  }
  .section-heading::before{
      content:"";
      width:5px;
      height:26px;
      background:var(--primary);
      border-radius:3px;
      display:inline-block;
  }

  blockquote.pull-quote{
      background:var(--pink-bg);
      border-left:4px solid var(--primary);
      border-radius:10px;
      padding:22px 26px;
      font-size:1.05rem;
      font-weight:600;
      color:var(--text-black);
      margin:1.6rem 0;
  }
  blockquote.pull-quote small{
      display:block;
      margin-top:10px;
      font-weight:600;
      font-size:.85rem;
      color:var(--primary-dark);
  }

  /* ---------- Benefit cards ---------- */
  .benefit-card{
      background:var(--card-bg);
      border:1px solid var(--card-border);
      border-radius:14px;
      padding:26px 18px;
      text-align:center;
      height:100%;
      transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .benefit-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--card-shadow);
      border-color:var(--primary-light);
  }
  .benefit-icon{
      width:54px; height:54px;
      border-radius:50%;
      background:var(--primary-light);
      color:var(--primary);
      display:flex; align-items:center; justify-content:center;
      font-size:1.4rem;
      margin:0 auto 14px;
      transition:background .3s ease, color .3s ease, transform .3s ease;
  }
  .benefit-card:hover .benefit-icon{
      background:var(--primary);
      color:var(--white);
      transform:scale(1.08) rotate(-4deg);
  }
  .benefit-card h6{ font-weight:700; margin-bottom:6px; font-size:.95rem; }
  .benefit-card p{ font-size:.83rem; color:var(--text-muted); margin:0; }

  /* ---------- Highlight box ---------- */
  .highlight-box{
      background:var(--card-deep);
      background:linear-gradient(135deg, var(--card-deep), var(--card-deep-2));
      color:#f2f7f5;
      border-radius:14px;
      padding:24px 26px;
      margin:1.6rem 0;
      font-size:.95rem;
  }
  .highlight-box strong{ color:#fff; }

  

  
  @media (max-width: 767.98px){
      .article-title{ font-size:1.65rem; }
      .hero-banner{ min-height:220px; }
      .hero-cloud-icon i{ font-size:3.6rem; }
      .hero-corner-icon{ width:36px; height:36px; }
      .section-heading{ font-size:1.2rem; }
  }