*,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --teal: #1a6b5a;
     --teal-light: #e8f4f0;
     --teal-dark: #0e4a3e;
     --cream: #faf8f5;
     --warm-white: #fff9f2;
     --text: #2c2c2c;
     --text-light: #5a5a5a;
     --accent: #c0785c;
     --accent-light: #f5ebe5;
     --border: #e2ddd7;
 }

 body {
     font-family: 'Source Sans 3', Georgia, serif;
     background: var(--cream);
     color: var(--text);
     line-height: 1.8;
     font-size: 17px;
     -webkit-font-smoothing: antialiased;
 }

 /* ── Hero ── */
 .hero {
     background: linear-gradient(165deg, var(--teal-dark) 0%, var(--teal) 60%, #2a8a75 100%);
     padding: 60px 24px 80px;
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         radial-gradient(ellipse 600px 400px at 80% 20%, rgba(255, 255, 255, 0.07), transparent),
         radial-gradient(ellipse 400px 300px at 10% 80%, rgba(0, 0, 0, 0.15), transparent);
 }

 .hero::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     right: 0;
     height: 40px;
     background: var(--cream);
     clip-path: ellipse(55% 100% at 50% 100%);
 }

 .hero-inner {
     max-width: 740px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }

 .hero .tag {
     display: inline-block;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.25);
     color: rgba(255, 255, 255, 0.9);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 30px;
     margin-bottom: 24px;
     backdrop-filter: blur(4px);
 }

 .hero h1 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: clamp(28px, 5vw, 44px);
     font-weight: 700;
     color: #fff;
     line-height: 1.25;
     margin-bottom: 20px;
 }

 .hero .subtitle {
     font-size: 17px;
     color: rgba(255, 255, 255, 0.82);
     line-height: 1.7;
     max-width: 600px;
 }

 .hero .author-bar {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-top: 32px;
     padding-top: 24px;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
 }

 .author-avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: #fff;
     flex-shrink: 0;
     border: 2px solid rgba(255, 255, 255, 0.3);
 }

 .author-info {
     color: rgba(255, 255, 255, 0.9);
     font-size: 14px;
     line-height: 1.5;
 }

 .author-info strong {
     display: block;
     font-size: 15px;
     font-weight: 600;
     color: #fff;
 }

 /* ── Article Body ── */
 .article-wrap {
     max-width: 740px;
     margin: 0 auto;
     padding: 48px 24px 80px;
 }

 .intro-box {
     background: var(--warm-white);
     border-left: 4px solid var(--accent);
     padding: 24px 28px;
     border-radius: 0 12px 12px 0;
     margin-bottom: 48px;
     font-style: italic;
     color: var(--text-light);
     line-height: 1.85;
     font-size: 16px;
 }

 .article-wrap h2 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 26px;
     font-weight: 700;
     color: var(--teal-dark);
     margin: 48px 0 20px;
     padding-bottom: 10px;
     border-bottom: 2px solid var(--teal-light);
 }

 .article-wrap h2:first-of-type {
     margin-top: 0;
 }

 .article-wrap p {
     margin-bottom: 18px;
     color: var(--text);
 }

 /* ── Anatomy Card ── */
 .anatomy-card {
     background: var(--teal-light);
     border-radius: 16px;
     padding: 32px;
     margin: 32px 0;
     border: 1px solid rgba(26, 107, 90, 0.12);
 }

 .anatomy-card h3 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 20px;
     color: var(--teal-dark);
     margin-bottom: 16px;
 }

 .anatomy-card .item {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 12px 0;
     border-bottom: 1px solid rgba(26, 107, 90, 0.1);
 }

 .anatomy-card .item:last-child {
     border-bottom: none;
 }

 .anatomy-card .icon-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 18px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }

 .anatomy-card .item-text strong {
     display: block;
     font-size: 15px;
     color: var(--teal-dark);
     margin-bottom: 2px;
 }

 .anatomy-card .item-text span {
     font-size: 14px;
     color: var(--text-light);
 }

 /* ── Causes Grid ── */
 .causes-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     margin: 32px 0;
 }

 .cause-card {
     background: #fff;
     border-radius: 14px;
     padding: 28px;
     border: 1px solid var(--border);
     transition: box-shadow 0.3s, transform 0.3s;
     position: relative;
     overflow: hidden;
 }

 .cause-card:hover {
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
     transform: translateY(-2px);
 }

 .cause-card::before {
     content: attr(data-num);
     position: absolute;
     top: -8px;
     right: 16px;
     font-family: 'Playfair Display', serif;
     font-size: 72px;
     font-weight: 700;
     color: rgba(26, 107, 90, 0.06);
     line-height: 1;
 }

 .cause-card .badge {
     display: inline-block;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 20px;
     margin-bottom: 12px;
 }

 .cause-card .badge.common {
     background: #dff5ec;
     color: #1a6b5a;
 }

 .cause-card .badge.moderate {
     background: #e8ecf5;
     color: #3b4f8a;
 }

 .cause-card .badge.vascular {
     background: #fce8d5;
     color: #8a5c2a;
 }

 .cause-card .badge.serious {
     background: #fde2e2;
     color: #8a2a2a;
 }

 .cause-card h3 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 20px;
     color: var(--text);
     margin-bottom: 10px;
 }

 .cause-card p {
     font-size: 15px;
     color: var(--text-light);
     line-height: 1.75;
     margin: 0;
 }

 /* ── CTA Box ── */
 .cta-box {
     background: linear-gradient(135deg, var(--teal-dark), var(--teal));
     border-radius: 18px;
     padding: 40px 36px;
     margin: 48px 0 0;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 .cta-box::before {
     content: '';
     position: absolute;
     top: -40px;
     right: -40px;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.06);
 }

 .cta-box h2 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 24px;
     color: #fff !important;
     border: none !important;
     margin: 0 0 16px !important;
     padding: 0 !important;
 }

 .cta-box p {
     color: rgba(255, 255, 255, 0.88) !important;
     font-size: 16px;
     margin-bottom: 14px;
 }

 .cta-box .highlight {
     display: inline-block;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 10px;
     padding: 14px 20px;
     margin-top: 12px;
     font-size: 15px;
     color: #fff;
     line-height: 1.6;
     backdrop-filter: blur(4px);
 }

 /* ── Footer ── */
 .blog-footer {
     text-align: center;
     padding: 32px 24px;
     border-top: 1px solid var(--border);
     max-width: 740px;
     margin: 0 auto;
     font-size: 14px;
     color: var(--text-light);
 }

 .blog-footer strong {
     color: var(--teal-dark);
 }

 /* ── Responsive ── */
 @media (min-width: 640px) {
     .causes-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero {
         padding: 80px 32px 100px;
     }
 }

 /* ── Animations ── */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-inner>* {
     animation: fadeUp 0.7s ease both;
 }

 .hero-inner> :nth-child(2) {
     animation-delay: 0.1s;
 }

 .hero-inner> :nth-child(3) {
     animation-delay: 0.2s;
 }

 .hero-inner> :nth-child(4) {
     animation-delay: 0.3s;
 }