* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
body { background-color: #f4f7fe; color: #333; line-height: 1.6; }

/* Header & Nav */
header { background: #111827; color: #fff; padding: 18px 8%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; }
.logo { font-size: 24px; font-weight: bold; color: #3b82f6; text-decoration: none; }
.logo span { color: #fff; }
nav a { color: #d1d5db; margin-left: 20px; text-decoration: none; font-size: 15px; }
nav a:hover { color: #3b82f6; }

/* Hero Section */
.hero { background: linear-gradient(135deg, #1e3a8a, #0f172a); color: white; padding: 70px 8%; text-align: center; }
.hero h1 { font-size: 38px; margin-bottom: 15px; }
.hero p { font-size: 18px; color: #93c5fd; max-width: 700px; margin: 0 auto 25px auto; }
.cta-btn { background: #2563eb; color: white; padding: 12px 28px; border-radius: 6px; text-decoration: none; font-weight: bold; display: inline-block; transition: 0.3s; }
.cta-btn:hover { background: #1d4ed8; }

/* Pricing Grid */
.section-title { text-align: center; font-size: 30px; margin: 50px 0 20px 0; color: #1e293b; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; padding: 0 8% 40px 8%; }
.card { background: white; border-radius: 10px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; position: relative; text-align: center; }
.card.popular { border: 2px solid #2563eb; }
.badge { position: absolute; top: -12px; right: 20px; background: #2563eb; color: white; padding: 4px 12px; font-size: 12px; border-radius: 12px; text-transform: uppercase; font-weight: bold; }
.price { font-size: 36px; font-weight: bold; color: #1e293b; margin: 15px 0; }
.price span { font-size: 16px; color: #6b7280; }
.features { list-style: none; text-align: left; margin-bottom: 25px; }
.features li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; color: #4b5563; }
.features li::before { content: "✓ "; color: #10b981; font-weight: bold; }

/* Static Pages Layout */
.page-container { background: white; max-width: 900px; margin: 40px auto; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.page-container h1 { color: #1e3a8a; margin-bottom: 20px; }
.page-container h2 { color: #2563eb; margin-top: 25px; margin-bottom: 10px; font-size: 20px; }

/* Footer */
footer { background: #0f172a; color: #9ca3af; text-align: center; padding: 30px 8%; font-size: 14px; margin-top: 50px; }
footer a { color: #d1d5db; text-decoration: none; margin: 0 10px; }
footer a:hover { color: #3b82f6; }