/* ==== SEO GUNSLINGER COMPONENT STYLES ==== */
.hero-section { position: relative; padding: 100px 0; color: var(--color-text-light); overflow: hidden; min-height: 70vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-primary-base); }
.hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('path/to/your/hero-image.jpg'); background-size: cover; background-position: center; filter: brightness(0.4); z-index: 0; } /* <<< NOTE: Placeholder for hero image */
.hero-content { position: relative; z-index: 1; max-width: 960px; padding: 0 20px; }
.hero-content h1 { font-family: var(--font-heading); font-size: 4em; font-weight: 700; margin-bottom: 15px; line-height: 1.1; color: var(--color-primary-accent); }
.hero-content p { font-size: 1.4em; font-weight: 400; line-height: 1.6; margin-bottom: 40px; color: var(--color-text-muted); }
.hero-cta-buttons a { margin: 0 15px; }
@media (max-width: 992px) { .hero-content h1 { font-size: 3em; } .hero-content p { font-size: 1.2em; } }
@media (max-width: 768px) { .hero-content h1 { font-size: 2.5em; } .hero-content p { font-size: 1.1em; } }
@media (max-width: 480px) { .hero-content h1 { font-size: 2em; } .hero-content p { font-size: 1em; } .hero-cta-buttons a { display: block; margin: 10px auto; width: 80%; } }

.seo-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.seo-package-card { /* ... (full CSS content from previous response) ... */ border: 1px solid var(--color-secondary-accent); justify-content: space-between; } /* Ensure buttons are pushed down */
.package-title { font-family: var(--font-heading); font-size: 2.2em; color: var(--color-primary-accent); }
.package-subtitle { font-size: 1.1em; font-style: italic; color: var(--color-text-muted); margin-bottom: 20px; }
.package-cost { margin-bottom: 25px; }
.client-price { font-size: 2.8em; font-weight: 700; color: var(--color-primary-accent); line-height: 1; }
.monthly { font-size: 0.5em; font-weight: normal; color: var(--color-text-muted); }
.cost-breakdown { font-size: 0.9em; color: var(--color-text-muted); margin-top: 8px; }
.cost-breakdown span { font-weight: bold; color: var(--color-highlight); }
.package-features { list-style: none; padding: 0; margin: 0 0 30px 0; text-align: left; color: var(--color-text-muted); font-size: 0.95em; line-height: 1.7; flex-grow: 1; }
.package-features li { position: relative; padding-left: 30px; margin-bottom: 15px; }
.package-features li::before { content: '✔'; position: absolute; left: 0; top: 0; color: var(--color-primary-accent); font-weight: bold; font-size: 1.1em; }
.package-features li strong { color: var(--color-highlight); }
.package-actions { margin-top: auto; /* Pushes buttons to bottom of card */ }

.process-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 40px; }
.process-step { margin-bottom: 40px; text-align: center; padding: 20px; }
.process-step h4 { font-size: 1.8em; margin-bottom: 10px; color: var(--color-primary-accent); }
.process-step p { font-size: 1em; color: var(--color-text-muted); }

.differentiators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }
.differentiator-item { background-color: var(--color-neutral-background); padding: 25px; border-radius: 8px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.differentiator-item h5 { font-size: 1.4em; color: var(--color-text-dark); margin-bottom: 10px; }
.differentiator-item p { font-size: 0.95em; color: var(--color-text-dark); }
.faq-item { margin-bottom: 25px; border-bottom: 1px solid var(--color-text-muted); padding-bottom: 20px; }
.faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.faq-question { font-family: var(--font-heading); font-size: 1.4em; font-weight: 700; color: var(--color-primary-accent); margin-bottom: 10px; cursor: pointer; position: relative; }
.faq-question::after { content: '+'; position: absolute; right: 10px; font-size: 1.5em; top: 50%; transform: translateY(-50%); }
.faq-answer { font-size: 1em; color: var(--color-text-dark); display: none; margin-top: 10px; }
.faq-answer.open { display: block; }
.faq-question.open::after { content: '−'; }

.contact-form label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--color-text-dark); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; font-family: var(--font-body); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.payment-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; }
.payment-method-item { text-align: center; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #FFFFFF; min-width: 100px; }
.payment-method-item img { max-width: 80px; height: auto; display: block; margin: 0 auto 10px auto; }

.payment-details { background-color: #f9f9f9; padding: 30px; border-radius: 8px; border: 1px solid #e0e0e0; }
.payment-details h3 { text-align: center; }
.payment-details p { margin-bottom: 15px; color: var(--color-text-dark); }
.payment-details p:last-child { margin-bottom: 0; }
.payment-details p.italic { font-style: italic; }