.article-hero{background:var(--gradient-hero);padding:calc(var(--space-32) + 80px) 0 var(--space-12);position:relative;overflow:hidden}.article-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:50%;height:120%;background:radial-gradient(circle,rgba(67,160,71,.08) 0%,transparent 70%);pointer-events:none}.article-hero::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;height:350px;background:url('/logo-spar.webp?v=_szzWrxyCLtPifJwA0sih9JK6oI') center/contain no-repeat;opacity:.06;pointer-events:none;z-index:0}.article-header{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}.article-category{display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.article-category.green{background:rgba(67,160,71,.15);color:var(--primary-green)}.article-category.yellow{background:rgba(255,193,7,.2);color:var(--primary-yellow-dark)}.article-category.blue{background:rgba(30,136,229,.15);color:var(--primary-blue)}.article-title{font-size:clamp(2rem,4vw,3rem);line-height:1.2;margin-bottom:var(--space-6)}.article-meta{display:flex;align-items:center;justify-content:center;gap:var(--space-6);flex-wrap:wrap;color:var(--gray-600);font-size:var(--text-sm)}.article-meta-item{display:flex;align-items:center;gap:var(--space-2)}.article-meta-item svg{width:18px;height:18px;color:var(--primary-green)}.article-author{display:flex;align-items:center;gap:var(--space-3)}.article-author-avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:600;font-size:var(--text-sm)}.article-image-wrapper{max-width:1000px;margin:calc(-1*var(--space-8)) auto var(--space-12);padding:0 var(--container-padding);position:relative;z-index:2}.article-image{width:100%;aspect-ratio:16/9;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-2xl)}.article-image img{width:100%;height:100%;object-fit:cover;display:block}.article-content{max-width:800px;margin:0 auto;padding:0 var(--container-padding) var(--space-16)}.article-body{font-size:var(--text-lg);line-height:1.8;color:var(--gray-700)}.article-body h2{font-size:var(--text-2xl);margin-top:var(--space-10);margin-bottom:var(--space-4);color:var(--gray-900)}.article-body h3{font-size:var(--text-xl);margin-top:var(--space-8);margin-bottom:var(--space-3);color:var(--gray-900)}.article-body p{margin-bottom:var(--space-6)}.article-body ul,.article-body ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}.article-body li{margin-bottom:var(--space-2)}.article-body strong{color:var(--gray-900)}.article-body blockquote{border-left:4px solid var(--primary-green);padding-left:var(--space-6);margin:var(--space-8) 0;font-style:italic;color:var(--gray-600)}.tip-box{background:linear-gradient(135deg,rgba(67,160,71,.08) 0%,rgba(30,136,229,.08) 100%);border-radius:var(--radius-xl);padding:var(--space-6);margin:var(--space-8) 0;border-left:4px solid var(--primary-green)}.tip-box-title{display:flex;align-items:center;gap:var(--space-2);font-weight:700;color:var(--primary-green);margin-bottom:var(--space-3)}.tip-box-title svg{width:24px;height:24px}.article-footer{border-top:1px solid var(--gray-200);padding-top:var(--space-8);margin-top:var(--space-12)}.article-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8)}.article-tag{padding:var(--space-2) var(--space-4);background:var(--gray-100);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--gray-600);text-decoration:none;transition:all var(--transition-fast)}.article-tag:hover{background:var(--primary-green);color:var(--white)}.article-share{display:flex;align-items:center;gap:var(--space-4)}.article-share-label{font-weight:600;color:var(--gray-700)}.article-share-buttons{display:flex;gap:var(--space-2)}.share-btn{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--gray-600);background:var(--gray-100);transition:all var(--transition-fast);text-decoration:none}.share-btn:hover{background:var(--primary-green);color:var(--white)}.share-btn svg{width:20px;height:20px}.article-cta{background:var(--gradient-cta);border-radius:var(--radius-2xl);padding:var(--space-10);text-align:center;margin-top:var(--space-12);position:relative;overflow:hidden}.article-cta::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.article-cta h3{color:var(--white);font-size:var(--text-2xl);margin-bottom:var(--space-3);position:relative}.article-cta p{color:rgba(255,255,255,.9);margin-bottom:var(--space-6);position:relative}.article-cta .btn{background:var(--white);color:var(--primary-green);position:relative}.article-cta .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.related-articles{background:var(--gray-50);padding:var(--space-16) 0}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}.related-card{background:var(--white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);text-decoration:none;transition:all var(--transition-base)}.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.related-card-image{aspect-ratio:16/10;overflow:hidden}.related-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.related-card:hover .related-card-image img{transform:scale(1.05)}.related-card-content{padding:var(--space-5)}.related-card-title{font-size:var(--text-base);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2);line-height:1.4}.related-card:hover .related-card-title{color:var(--primary-green)}.related-card-meta{font-size:var(--text-sm);color:var(--gray-500)}.back-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--gray-600);font-weight:500;margin-bottom:var(--space-6);transition:color var(--transition-fast)}.back-link:hover{color:var(--primary-green)}.back-link svg{width:20px;height:20px}@media(max-width:768px){.article-hero{padding:calc(var(--space-24) + 70px) 0 var(--space-8)}.article-meta{flex-direction:column;gap:var(--space-3)}.related-grid{grid-template-columns:1fr}.article-share{flex-direction:column;align-items:flex-start}}.article-body a{color:#2e7d32;text-decoration:underline;text-underline-offset:3px}.article-body a:hover{color:#1b5e20}.article-body table{width:100%;border-collapse:collapse;margin:0 0 var(--space-6);font-size:var(--text-base)}@media(max-width:600px){.article-body table{display:block;overflow-x:auto;font-size:var(--text-sm)}}.article-body th,.article-body td{padding:10px 12px;border-bottom:1px solid var(--gray-200);text-align:left;vertical-align:top}.article-body thead th{background:var(--gray-50);color:var(--gray-900);font-weight:700}.article-body .tip-box p:last-child{margin-bottom:0}.article-body .article-sources{font-size:var(--text-base)}.article-body .article-sources a::after{content:" ↗";text-decoration:none;display:inline-block;margin-left:2px}.article-body .article-note{font-size:var(--text-sm);color:var(--gray-500);border-top:1px solid var(--gray-200);padding-top:var(--space-4);margin-top:var(--space-8)}