.plugins-main{position:relative;z-index:1} .plugins-hero{position:relative;padding-top:6rem;padding-bottom:3rem} .plugins-hero .container{display:flex;flex-direction:column;align-items:center;text-align:center} .plugins-bg-glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,123,255,0.12) 0%,transparent 65%);pointer-events:none;z-index:-1} .section-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.1;letter-spacing:-1px;margin-bottom:1.5rem} .hero-lead{font-size:1.15rem;color:var(--text-muted);line-height:1.7;max-width:800px;margin:0 auto} .plugins-grid-section{padding-top:2rem;padding-bottom:6rem} .plugins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;max-width:1200px;margin:0 auto} .plugin-card{background:rgba(13,17,22,0.6);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px;padding:2rem;display:flex;flex-direction:column;position:relative;overflow:hidden;text-decoration:none;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 10px 30px rgba(0,0,0,0.5);z-index:1} .card-glow{position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:var(--brand);filter:blur(80px);opacity:0.05;z-index:-1;transition:opacity 0.4s ease;border-radius:50%;pointer-events:none} .plugin-card:not(.disabled):hover{transform:translateY(-8px);border-color:var(--brand);background:rgba(13,17,22,0.9);box-shadow:0 20px 40px rgba(0,0,0,0.6),inset 0 0 20px rgba(255,255,255,0.02)} .plugin-card:not(.disabled):hover .card-glow{opacity:0.15} .plugin-card.disabled{cursor:not-allowed;filter:grayscale(80%);opacity:0.7} .card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem} .icon-box{width:55px;height:55px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--brand);transition:all 0.3s ease} .plugin-card:not(.disabled):hover .icon-box{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 20px var(--brand);transform:scale(1.1)} .card-body{flex:1} .card-body h3{font-size:1.3rem;color:#fff;margin-bottom:0.75rem;transition:color 0.3s ease} .plugin-card:not(.disabled):hover .card-body h3{color:var(--brand)} .card-body p{font-size:0.9rem;color:var(--text-muted);line-height:1.6;margin:0} .card-footer{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,0.05)} .learn-more{display:inline-flex;align-items:center;gap:8px;font-size:0.9rem;font-weight:600;color:var(--text-muted);transition:all 0.3s ease} .plugin-card:not(.disabled):hover .learn-more{color:var(--brand)} .learn-more iconify-icon{font-size:1.2rem;transition:transform 0.3s ease} .plugin-card:not(.disabled):hover .learn-more iconify-icon{transform:translateX(5px)} .plugins-seo-section{padding-top:6rem;padding-bottom:6rem;border-top:1px solid var(--border-color)} .seo-split-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;align-items:stretch} .seo-text-content{display:flex;flex-direction:column;justify-content:center} .seo-text-content h2{font-size:2.2rem;letter-spacing:-0.5px} .seo-text-content p{font-size:1.05rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.5rem} .seo-feature-list{display:flex;flex-direction:column;gap:1.5rem} .seo-feature-item{display:flex;align-items:flex-start;gap:1rem} .seo-feature-item iconify-icon{color:var(--primary);font-size:1.5rem;margin-top:3px;filter:drop-shadow(0 0 8px rgba(0,123,255,0.4))} .seo-feature-item strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:4px} .seo-feature-item span{display:block;font-size:0.9rem;color:var(--text-muted)} .seo-visual-box{background:rgba(10,12,16,0.6);border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 30px rgba(0,0,0,0.5);height:100%} .plugin-architecture-mockup{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem} .arch-node{display:flex;align-items:center;justify-content:center;background:#0d1116;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,0.5)} .core-node{padding:1rem 2rem;gap:10px;font-weight:600;color:#fff;border-color:rgba(0,123,255,0.4);box-shadow:0 0 20px rgba(0,123,255,0.1)} .core-node iconify-icon{font-size:1.5rem;color:var(--primary)} .arch-lines{display:flex;gap:40px;margin:15px 0} .arch-line{width:2px;height:40px;background:linear-gradient(to bottom,rgba(0,123,255,0.4),transparent);position:relative} .arch-line::after{content:'';position:absolute;top:0;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:flowDown 2s infinite ease-in-out} .line-1::after{animation-delay:0s} .line-2::after{animation-delay:0.6s} .line-3::after{animation-delay:1.2s} @keyframes flowDown{0%{transform:translateY(0);opacity:1} 100%{transform:translateY(40px);opacity:0}} .arch-plugins{display:flex;gap:20px} .small-node{width:60px;height:60px;font-size:2rem} .arch-caption{background:rgba(255,255,255,0.02);border-left:3px solid var(--primary);padding:1rem 1.5rem;border-radius:4px} .arch-caption p{margin:0;font-size:0.9rem;color:var(--text-muted);line-height:1.6} @media(max-width:992px){.seo-split-layout{grid-template-columns:1fr;gap:3rem} .seo-text-content{text-align:center} .seo-feature-item{text-align:left}} @media(max-width:768px){.plugins-grid{grid-template-columns:1fr} .arch-plugins{gap:10px} .arch-lines{gap:25px}}