/* Reset and Basics */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.47059; letter-spacing: -0.022em; color: #1d1d1f; background-color: #fbfbfd; }
a { color: #0066cc; text-decoration: none; }
ul { list-style: none; }

/* Layout */
.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section-title { text-align: center; margin-bottom: 50px; font-size: 40px; font-weight: 600; color: #1d1d1f; letter-spacing: -0.003em; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

/* Header */
.header { position: sticky; top: 20px; z-index: 100; background: transparent; display: flex; justify-content: center; }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 54px; width: 90%; max-width: 980px; background: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); border-radius: 50px; padding: 0 30px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.logo { font-size: 21px; font-weight: 600; color: #1d1d1f; }
.nav a { margin-left: 24px; color: #1d1d1f; font-size: 12px; font-weight: 400; opacity: 0.8; transition: opacity 0.3s; }
.nav a:hover { opacity: 1; }

/* Hero */
.hero { background: #fbfbfd; padding: 120px 0 80px; text-align: center; }
.hero-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-text h1 { font-size: 56px; line-height: 1.07143; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 16px; color: #1d1d1f; }
.hero-text h2 { font-size: 24px; line-height: 1.16667; font-weight: 400; letter-spacing: 0.009em; margin-bottom: 40px; color: #86868b; }
.hero-image { margin-top: 40px; }
.dynamic-element { font-size: 100px; animation: bounce 3s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* Cards */
.card { background: #ffffff; padding: 40px; border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); transition: transform 0.3s ease; }
.card:hover { transform: scale(1.02); }
.card h4 { font-size: 24px; font-weight: 600; margin-bottom: 12px; color: #1d1d1f; }
.card p { font-size: 17px; line-height: 1.47059; color: #86868b; }

/* Pricing */
.price-card { text-align: center; border: 1px solid transparent; }
.price-card.highlight { border-color: #0071e3; transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,113,227,0.15); }
.price-card.highlight:hover { transform: scale(1.04); }
.price { font-size: 48px; font-weight: 600; color: #1d1d1f; margin-bottom: 20px; }
.price span { font-size: 17px; color: #86868b; }
.price-card ul { margin-bottom: 40px; text-align: left; }
.price-card li { padding: 12px 0; border-bottom: 1px solid #d2d2d7; font-size: 14px; color: #1d1d1f; }

/* CTA Button */
.cta-btn { display: inline-block; background: #0071e3; color: #fff; padding: 12px 24px; border-radius: 980px; font-size: 17px; font-weight: 400; text-decoration: none; transition: background 0.3s; }
.cta-btn:hover { background: #0077ed; color: #fff; }

/* FAQ */
.faq-item { background: #ffffff; padding: 24px; margin-bottom: 16px; border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.faq-item h4 { font-weight: 600; font-size: 19px; margin-bottom: 8px; color: #1d1d1f; }
.faq-item p { font-size: 17px; color: #86868b; }

/* Footer */
.footer { background: #f5f5f7; color: #1d1d1f; padding: 40px 0; text-align: center; border-top: 1px solid #d2d2d7; }
.footer-links { margin-bottom: 20px; }
.footer-links a { color: #515154; margin: 0 15px; font-size: 12px; }
.footer-links a:hover { color: #1d1d1f; }
.copyright { font-size: 12px; color: #86868b; }
.friend-links { margin-top: 10px; }

/* Responsive */
@media (max-width: 768px) {
    .nav { display: none; }
    .hero-container { flex-direction: column; text-align: center; }
    .hero-text { padding-right: 0; }
    .hero-text h1 { font-size: 40px; }
    .hero-text h2 { font-size: 20px; }
    .price-card.highlight { transform: none; }
    .price-card.highlight:hover { transform: scale(1.02); }
}

/* Article Page Specific */
.article-header { padding: 80px 0 40px; text-align: center; }
.article-header h1 { font-size: 40px; font-weight: 600; margin-bottom: 16px; color: #1d1d1f; }
.article-meta { color: #86868b; font-size: 14px; margin-bottom: 40px; }
.article-content { font-size: 17px; line-height: 1.8; color: #1d1d1f; max-width: 800px; margin: 0 auto; background: #fff; padding: 60px; border-radius: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.article-content h2 { font-size: 28px; margin: 40px 0 20px; font-weight: 600; }
.article-content h3 { font-size: 22px; margin: 30px 0 16px; font-weight: 600; }
.article-content p { margin-bottom: 20px; color: #333336; }
.article-content ul { margin-bottom: 20px; padding-left: 20px; list-style: disc; }
.article-content li { margin-bottom: 10px; }
.article-content a { color: #0071e3; text-decoration: underline; }