| .pricing { padding: 100px 0; } |
| .pricing__grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 20px; |
| align-items: start; |
| max-width: 960px; |
| margin: 0 auto; |
| } |
| .pricing__card { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: 20px; |
| padding: 32px; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| position: relative; |
| transition: border-color 0.2s, transform 0.2s; |
| } |
| .pricing__card:hover { transform: translateY(-2px); } |
| .pricing__card--popular { |
| border-color: rgba(249,115,22,0.4); |
| box-shadow: 0 0 40px rgba(249,115,22,0.1); |
| transform: scale(1.02); |
| } |
| .pricing__card--popular:hover { transform: scale(1.02) translateY(-2px); } |
| .pricing__badge { |
| position: absolute; |
| top: -12px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: linear-gradient(135deg, var(--purple), var(--blue)); |
| color: white; |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| padding: 4px 14px; |
| border-radius: 999px; |
| white-space: nowrap; |
| } |
| .pricing__name { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } |
| .pricing__price { display: flex; align-items: baseline; gap: 4px; } |
| .pricing__amount { font-size: 42px; font-weight: 900; letter-spacing: -0.03em; color: var(--text); } |
| .pricing__period { font-size: 15px; color: var(--text-dim); } |
| .pricing__desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; } |
| .pricing__features { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; } |
| .pricing__features li { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 13px; |
| color: var(--text-muted); |
| } |
| .pricing__features li svg { flex-shrink: 0; } |
|
|
| @media (max-width: 900px) { .pricing__grid { grid-template-columns: 1fr; max-width: 400px; } } |
|
|
