:root{--category-primary: #2563eb;--category-primary-light: #3b82f6;--category-primary-dark: #1d4ed8;--category-surface: #ffffff;--category-surface-elevated: #f8fafc;--category-muted: #64748b;--category-border: #e2e8f0;--category-dark-color: #0f172a;--category-light-color: #475569;--category-light-border: #e2e8f0;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);}
@keyframes fadeInUp{from { opacity: 0;transform: translateY(24px);} to { opacity: 1;transform: translateY(0);};}
@keyframes fadeIn{from { opacity: 0;} to { opacity: 1;};}
@keyframes float{0%, 100% { transform: translateY(0);} 50% { transform: translateY(-12px);};}
@keyframes pulse-glow{0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);} 50% { box-shadow: 0 0 40px rgba(37, 99, 235, 0.25), 0 25px 50px -12px rgba(0, 0, 0, 0.25);};}
@keyframes slideInFromBottom{from { opacity: 0;transform: translateY(30px);} to { opacity: 1;transform: translateY(0);};}
@keyframes iconBounce{0%, 100% { transform: translateY(0);} 50% { transform: translateY(-6px);};}
.category-hero{color: var(--category-dark-color);padding-top: 64px;padding-bottom: 64px;position: relative;}
.category-title{font-size: clamp(2.25rem, 5vw, 3.5rem);font-weight: 800;line-height: 1.08;margin-top: 1.5rem;margin-bottom: 1.5rem;letter-spacing: -0.02em;color: var(--category-dark-color);opacity: 0;animation: fadeInUp 0.6s ease forwards;animation-delay: 0.2s;}
.category-lead{font-size: 1.125rem;line-height: 1.7;color: var(--category-light-color);max-width: 680px;opacity: 0;animation: fadeInUp 0.6s ease forwards;animation-delay: 0.3s;}
.hero-meta{margin-top: 2.5rem;opacity: 0;animation: fadeInUp 0.6s ease forwards;animation-delay: 0.4s;}
.meta-card{border: 1px solid var(--category-border);border-radius: 16px;padding: 1.25rem 1.5rem;min-width: 180px;box-shadow: var(--shadow-sm);transition: all 0.3s ease;}
.meta-card:hover{box-shadow: var(--shadow-md);transform: translateY(-2px);}
.meta-card:nth-child(1){animation-delay: 0.5s;}
.meta-card:nth-child(2){animation-delay: 0.6s;}
.meta-card:nth-child(3){animation-delay: 0.7s;}
.meta-label{display: block;font-size: 0.7rem;font-weight: 500;letter-spacing: 0.1em;text-transform: uppercase;color: var(--category-muted);margin-bottom: 0.5rem;}
.meta-value{font-size: 1rem;font-weight: 700;color: var(--category-dark-color);}
.hero-actions .btn{border-radius: 999px;border-width: 2px;}
.hero-preview{background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;overflow: hidden;padding: 1.5rem;color: #e2e8f0;animation: float 6s ease-in-out infinite, pulse-glow 4s ease-in-out infinite, fadeIn 0.8s ease forwards;animation-delay: 0.5s;opacity: 0;animation-fill-mode: forwards;}
.preview-header{display: flex;align-items: center;gap: 0.5rem;margin-bottom: 1rem;padding-bottom: 0.75rem;border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
.preview-dot{width: 10px;height: 10px;border-radius: 50%;display: inline-flex;}
.preview-code{background: rgba(0, 0, 0, 0.3);border-radius: 12px;padding: 1.25rem;font-size: 0.875rem;font-family: 'SF Mono', 'Fira Code', monospace;line-height: 1.8;white-space: pre-wrap;color: #94a3b8;}
.preview-code span{color: #60a5fa;}
.preview-footer{margin-top: 1rem;padding-top: 0.75rem;border-top: 1px solid rgba(255, 255, 255, 0.08);}
.preview-footer small{color: #64748b;font-size: 0.75rem;}
.section-title{font-size: clamp(1.875rem, 3vw, 2.75rem);font-weight: 800;color: var(--category-dark-color);letter-spacing: -0.02em;}
.section-subtitle, .category-overview p{font-size: 1.0625rem;color: var(--category-light-color);line-height: 1.7;}
.feature-card{background: var(--category-surface);border-radius: 20px;padding: 2rem;box-shadow: var(--shadow-lg);border: 1px solid var(--category-border);}
.feature-list li{display: flex;align-items: flex-start;gap: 0.75rem;font-size: 0.98rem;color: var(--category-light-color);padding: 0.35rem 0;}
.feature-list li::before{content: "";font-size: 1.4rem;line-height: 1;color: var(--category-primary);margin-top: -0.1rem;}
.tool-section{padding-bottom: 4rem;padding-top: 2rem;}
.section-heading{opacity: 0;animation: fadeInUp 0.6s ease forwards;}
.tool-card{display: flex;flex-direction: column;justify-content: space-between;height: 100%;text-decoration: none;background: var(--category-surface);border-radius: 16px;padding: 2rem 1.75rem;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);border: 1.5px solid var(--category-border);transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden;}
.tool-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, var(--category-primary), var(--category-primary-light));transform: scaleX(0);transform-origin: left;transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);}
.tool-card::after{content: '';position: absolute;inset: 0;background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, transparent 50%);opacity: 0;transition: opacity 0.35s ease;}
.tool-card:hover, .tool-card:focus{transform: translateY(-6px);box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);border-color: rgba(37, 99, 235, 0.25);}
.tool-card:hover::before{transform: scaleX(1);}
.tool-card:hover::after{opacity: 1;}
.tool-icon{width: 56px;height: 56px;border-radius: 14px;background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));display: grid;place-items: center;margin-bottom: 1.5rem;transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);position: relative;border: 1px solid rgba(37, 99, 235, 0.08);}
.tool-icon::after{content: '';position: absolute;inset: -3px;border-radius: 16px;background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), transparent);opacity: 0;transition: opacity 0.35s ease;z-index: -1;}
.tool-card:hover .tool-icon{animation: iconBounce 0.5s ease;background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.08));border-color: rgba(37, 99, 235, 0.2);transform: scale(1.05);}
.tool-card:hover .tool-icon::after{opacity: 1;}
.tool-icon img{width: 32px;height: 32px;object-fit: contain;transition: transform 0.3s ease;}
.tool-card:hover .tool-icon img{transform: scale(1.1);}
.tool-name{font-size: 1.125rem;font-weight: 700;color: var(--category-dark-color);margin-bottom: 0.75rem;transition: color 0.3s ease;line-height: 1.3;}
.tool-card:hover .tool-name{color: var(--category-primary);}
.tool-description{font-size: 0.9375rem;color: var(--category-light-color);margin-bottom: 1.25rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;min-height: 2.8rem;line-height: 1.5;}
.tool-link{font-size: 0.875rem;font-weight: 600;color: var(--category-primary);display: inline-flex;align-items: center;gap: 0.5rem;position: relative;}
.tool-link::after{content: "→";transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);display: inline-block;}
.tool-card:hover .tool-link::after{transform: translateX(6px);}
.tool-card-wrapper{opacity: 0;animation: slideInFromBottom 0.5s ease forwards;}
.tool-card-wrapper:nth-child(1){animation-delay: 0.1s;}
.tool-card-wrapper:nth-child(2){animation-delay: 0.15s;}
.tool-card-wrapper:nth-child(3){animation-delay: 0.2s;}
.tool-card-wrapper:nth-child(4){animation-delay: 0.25s;}
.tool-card-wrapper:nth-child(5){animation-delay: 0.3s;}
.tool-card-wrapper:nth-child(6){animation-delay: 0.35s;}
.tool-card-wrapper:nth-child(7){animation-delay: 0.4s;}
.tool-card-wrapper:nth-child(8){animation-delay: 0.45s;}
.tool-card-wrapper:nth-child(9){animation-delay: 0.5s;}
.tool-card-wrapper:nth-child(10){animation-delay: 0.55s;}
.tool-card-wrapper:nth-child(11){animation-delay: 0.6s;}
.tool-card-wrapper:nth-child(12){animation-delay: 0.65s;}
.capabilities-section{padding: 100px 0;}
.capabilities-header{text-align: center;margin-bottom: 4rem;opacity: 0;animation: fadeInUp 0.6s ease forwards;}
.capability-card{background: var(--category-surface);border-radius: 20px;padding: 2.5rem;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);border: 1.5px solid var(--category-border);height: 100%;transition: all 0.3s ease;opacity: 0;animation: slideInFromBottom 0.6s ease forwards;position: relative;overflow: hidden;}
.capability-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, var(--category-primary), var(--category-primary-light));transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease;}
.capability-card:hover{transform: translateY(-4px);box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);border-color: rgba(37, 99, 235, 0.2);}
.capability-card:hover::before{transform: scaleX(1);}
.capability-card:nth-child(1){animation-delay: 0.1s;}
.capability-card:nth-child(2){animation-delay: 0.2s;}
.capability-card:nth-child(3){animation-delay: 0.3s;}
.capability-card:nth-child(4){animation-delay: 0.4s;}
.capability-icon{width: 56px;height: 56px;border-radius: 14px;background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));display: grid;place-items: center;margin-bottom: 1.5rem;border: 1px solid rgba(37, 99, 235, 0.1);}
.capability-icon svg{width: 28px;height: 28px;color: var(--category-primary);}
.capability-title{font-size: 1.25rem;font-weight: 700;color: var(--category-dark-color);margin-bottom: 0.75rem;line-height: 1.3;}
.capability-description{font-size: 0.9375rem;color: var(--category-light-color);line-height: 1.6;margin: 0;}
.aspect-item{display: flex;align-items: flex-start;gap: 1rem;padding: 1.25rem;background: var(--category-surface);border-radius: 16px;border: 1.5px solid var(--category-border);transition: all 0.3s ease;opacity: 0;animation: slideInFromBottom 0.5s ease forwards;}
.aspect-item:hover{transform: translateX(4px);border-color: rgba(37, 99, 235, 0.2);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);}
.aspect-item:nth-child(1){animation-delay: 0.1s;}
.aspect-item:nth-child(2){animation-delay: 0.15s;}
.aspect-item:nth-child(3){animation-delay: 0.2s;}
.aspect-item:nth-child(4){animation-delay: 0.25s;}
.aspect-item:nth-child(5){animation-delay: 0.3s;}
.aspect-item:nth-child(6){animation-delay: 0.35s;}
.aspect-icon-wrapper{width: 44px;height: 44px;border-radius: 12px;background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));display: grid;place-items: center;flex-shrink: 0;border: 1px solid rgba(37, 99, 235, 0.08);}
.aspect-icon{width: 22px;height: 22px;color: var(--category-primary);}
.aspect-content{flex: 1;}
.aspect-title{font-size: 1rem;font-weight: 600;color: var(--category-dark-color);margin-bottom: 0.375rem;}
.aspect-description{font-size: 0.875rem;color: var(--category-light-color);line-height: 1.5;margin: 0;}
@media (max-width: 991.98px){.category-hero { padding-top: 80px;padding-bottom: 80px;} .hero-meta { gap: 1rem;} .meta-card { flex: 1 1 calc(50% - 0.5rem);min-width: auto;};}
@media (max-width: 767.98px){.category-hero { padding-top: 60px;padding-bottom: 60px;} .hero-actions .btn { width: 100%;} .meta-card { flex: 1 1 100%;} .feature-card { padding: 1.5rem;} .content-card { padding: 1.75rem;} .tool-section { padding-top: 3rem;padding-bottom: 4rem;} .capabilities-section { padding: 60px 0;} .capability-card { padding: 2rem;} .aspect-item { padding: 1rem;};}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}}