/* --- BUTTONS --- */
.btn-hero { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; padding: 16px 36px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; transition: all var(--transition); border: 2px solid var(--primary); }
.btn-hero:hover { background: var(--primary-hover); box-shadow: 0 8px 32px rgba(0,102,255,0.35); transform: translateY(-2px); color: #fff; }
.btn-hero-outline { background: transparent; border: 2px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); padding: 16px 36px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; transition: all var(--transition); display: inline-flex; align-items: center; }
.btn-hero-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }
.btn-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; font-size: 14px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 16px; transition: gap var(--transition); }
.btn-inline:hover { gap: 12px; color: var(--primary); }

.card-btn { display: block; width: 100%; text-align: center; padding: 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; transition: all var(--transition); }
.card-btn-primary { background: var(--primary); color: #fff; }
.card-btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 16px rgba(0,102,255,0.3); color: #fff; }
.card-btn-ghost { background: var(--wolf-1); color: var(--wolf-6); border: 1px solid var(--wolf-3); }
.card-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

.pricing-btn { display: block; width: 100%; padding: 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; transition: all var(--transition); text-align: center; cursor: pointer; border: none; font-family: inherit; }
.pricing-btn-primary { background: var(--primary); color: #fff; }
.pricing-btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 16px rgba(0,102,255,0.3); }
.pricing-btn-outline { background: transparent; color: var(--text); border: 2px solid var(--wolf-3); }
.pricing-btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* --- CARDS --- */
.plugin-card { background: var(--wolf-card); border: 1px solid var(--border-light); border-radius: var(--radius-2xl); padding: 36px; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.plugin-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary); opacity: 0; transition: opacity var(--transition-slow); }
.plugin-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.plugin-card:hover::before { opacity: 1; }
.plugin-card .icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--primary); border-radius: var(--radius-lg); margin-bottom: 24px; }
.plugin-card .icon svg { width: 26px; height: 26px; color: #fff; }
.plugin-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: -0.01em; }
.plugin-card p { color: var(--wolf-6); font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.plugin-card .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.plugin-card .price { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--radius-full); }
.status-live { background: #ECFDF5; color: #059669; }
.status-soon { background: #FEF3C7; color: #D97706; }

.feature-card { background: var(--wolf-card); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 36px; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-num { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 18px; font-weight: 900; border-radius: var(--radius-lg); margin-bottom: 20px; }
.feature-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.feature-card p { color: var(--wolf-6); font-size: 14px; line-height: 1.7; }

/* Pricing cards */
.pricing-card { border: 1px solid var(--border-light); border-radius: var(--radius-2xl); padding: 44px 36px; text-align: center; position: relative; background: var(--wolf-card); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pricing-card.featured { border: 2px solid var(--primary); box-shadow: 0 0 0 1px var(--primary-glow), var(--shadow-lg); transform: scale(1.04); background: #fff; }
.pricing-card.featured:hover { transform: scale(1.06); }
.pricing-card.featured .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }
.pricing-card h3 { font-size: 14px; font-weight: 700; color: var(--wolf-5); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.pricing-card .amount { font-size: 52px; font-weight: 900; letter-spacing: -0.03em; }
.pricing-card .period { display: block; font-size: 13px; color: var(--wolf-5); margin-bottom: 32px; text-transform: uppercase; letter-spacing: 0.04em; }
.pricing-card ul { list-style: none; text-align: left; margin-bottom: 32px; }
.pricing-card li { padding: 12px 0; border-bottom: 1px solid var(--wolf-2); font-size: 14px; color: var(--wolf-6); }
.pricing-card li::before { content: "\2713"; color: var(--primary); font-weight: 800; margin-right: 10px; }

/* Testimonial cards */
.test-card { background: var(--wolf-card); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 32px; min-width: 340px; max-width: 340px; flex-shrink: 0; scroll-snap-align: start; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.test-card .stars { color: #FBBF24; font-size: 16px; margin-bottom: 16px; letter-spacing: 2px; }
.test-card blockquote { font-size: 14px; line-height: 1.7; color: var(--text); flex-grow: 1; margin-bottom: 24px; }
.test-card .author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--wolf-2); padding-top: 16px; }
.test-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #3B82F6); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
.test-card .author-name { font-weight: 700; font-size: 14px; }
.test-card .author-role { font-size: 12px; color: var(--wolf-5); }

/* Code window */
.code-window { background: var(--wolf-darker); border-radius: var(--radius-xl); padding: 0; box-shadow: var(--shadow-xl); overflow: hidden; }
.code-window__bar { background: rgba(255,255,255,0.06); padding: 12px 16px; display: flex; gap: 8px; }
.code-window__dot { width: 10px; height: 10px; border-radius: 50%; }
.code-window__dot--red { background: #FF5F56; }
.code-window__dot--yellow { background: #FFBD2E; }
.code-window__dot--green { background: #27C93F; }
.code-window__code { padding: 24px; font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: #E2E8F0; }
.code-window__code .kw { color: #A78BFA; }
.code-window__code .fn { color: #60A5FA; }
.code-window__code .str { color: #34D399; }
.code-window__code .cm { color: #475569; }

/* Float card */
.float-card { background: var(--wolf-card); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); }
.float-card .float-number { font-size: 32px; font-weight: 900; color: var(--primary); letter-spacing: -0.02em; }
.float-card .float-label { font-size: 12px; color: var(--wolf-5); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }