/*
 * B&W THEME OVERRIDE
 * Remaps the retro green-on-dark theme to black-on-white.
 * Loaded AFTER styles.css to win specificity wars via !important parity.
 */

/* ── CSS VARIABLE REDEFINITIONS ── */
:root {
  --retro-green:       #000000 !important;
  --retro-green-dim:   #444444 !important;
  --retro-bg:          #ffffff !important;
  --retro-glow:        none    !important;
  --retro-grid:        rgba(0,0,0,0.06) !important;
  --retro-grid-size:   40px !important;
  --primary-color:     #000000 !important;
  --primary-dark:      #333333 !important;
  --primary-light:     #555555 !important;
}

/* ── BASE ── */
html, body {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* ── SCROLLING GRID — override keyframe so only background-position moves ── */
/* Redefining retro-grid-scroll here wins because this file loads after styles.css */
@keyframes retro-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 40px, 0 40px; }
}

body::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.12) 1px, transparent 1px) !important;
  background-size: 40px 40px, 40px 40px !important;
  /* Keep the original animation name — the keyframe above now controls it */
  animation: retro-grid-scroll 4s linear infinite !important;
  transform: none !important;
  background-color: transparent !important;
}

/* ── SCANLINES — light grey horizontal lines on white ── */
body::after {
  display: block !important;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  ) !important;
}

/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
  color: #000000 !important;
  text-shadow: none !important;
}

/* ── LINKS ── */
a { color: #000000 !important; }
a:hover { text-shadow: none !important; color: #444444 !important; }

/* ── NAVIGATION ── */
header, .header, .site-header, .navbar {
  background: #000000 !important;
  border-bottom: 1px solid #333333 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  z-index: 10001 !important;
  position: fixed !important;
}

/* ── SCROLLED STATE — compressed floating box with white border ── */
.navbar.scrolled {
  top: 12px !important;
  left: 10% !important;
  right: 10% !important;
  background: #000000 !important;
  border-top: none !important;
  border-left: 3px solid #ffffff !important;
  border-right: 3px solid #ffffff !important;
  border-bottom: 3px solid #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-links a,
.navbar.scrolled .nav-links a,
.navbar .nav-links a {
  color: #ffffff !important;
}
.nav-links a:hover {
  color: #cccccc !important;
  text-shadow: none !important;
}
.logo, .nav-logo, .brand-name, .site-logo {
  color: #ffffff !important;
  text-shadow: none !important;
}
.logo .logo-icon, nav .logo-icon, .navbar .logo-icon {
  filter: brightness(0) invert(1) !important;
}
/* Logo text — white on black header */
.logo-main,
.logo-tld,
a.logo .logo-main,
a.logo .logo-tld,
.navbar .logo-main,
.navbar .logo-tld,
nav .logo-main,
nav .logo-tld {
  color: #ffffff !important;
  text-shadow: none !important;
}
/* Nav CTA button — white bg, black text on black header */
.nav-cta,
.nav-links .nav-cta,
.nav-links .nav-cta.active,
.navbar .nav-links a.nav-cta,
.navbar .nav-links a.nav-cta.active {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.nav-cta:hover,
.nav-links .nav-cta:hover,
.navbar .nav-links a.nav-cta:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}
/* Instagram icon in nav — white on black header */
.nav-social a {
  color: #ffffff !important;
}
.nav-social a:hover {
  color: #cccccc !important;
}
.menu-toggle, .hamburger-btn {
  color: #000000 !important;
}
.mobile-nav, .mobile-menu {
  background: rgba(255,255,255,0.99) !important;
  border: 1px solid #cccccc !important;
}

/* ── HERO ── */
.hero-headline, .hero-title, .hero-subheadline, .hero-sub-mobile {
  color: #111111 !important;
  text-shadow: none !important;
}
.hero-headline {
  line-height: 0.9 !important;
}
.hero-rotating-text {
  height: auto !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}
@media (min-width: 769px) {
  .hero-headline {
    font-size: 130px !important;
  }
  .hero-content {
    max-width: 1450px !important;
  }
}
.hero-name-highlight { color: #000000 !important; text-shadow: none !important; }

/* rotating text cursor */
.retro-cursor {
  background: #000000 !important;
  color: #000000 !important;
}

/* hero rotating text */
#heroRotatingText, .hero-rotating-wrap {
  color: #000000 !important;
  text-shadow: none !important;
}

/* ── HERO EMAIL BUTTON ── */
.hero-email-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
@media (max-width: 768px) {
  .hero-email-cta {
    margin-top: 60px !important;
  }
}
.hero-email-btn:hover {
  background: #333333 !important;
  box-shadow: none !important;
}

/* ── SERVICE TILES ── */
.service-tile {
  background: #ffffff !important;
  border: 1px solid #222222 !important;
  color: #000000 !important;
  position: relative !important;
  z-index: 9999 !important;
}
.service-tile:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}
.service-tile-logo-bw {
  filter: none !important;
  transition: filter 0.2s ease !important;
}
.service-tile:hover .service-tile-logo-bw {
  filter: invert(1) !important;
}
.service-tile-name, .service-tile-arrow {
  color: #000000 !important;
}
.service-tile:hover .service-tile-name,
.service-tile:hover .service-tile-arrow {
  color: #ffffff !important;
}
/* Logos go white on hover — invert coloured logos */
.service-tile:hover .service-tile-logo {
  filter: brightness(0) invert(1) !important;
}
/* Web Design tile: use swapped image directly — no filter */
a[href="/custom-website-design"]:hover .service-tile-logo {
  filter: none !important;
}
.service-tile-more {
  border-style: dashed !important;
  border-color: #888888 !important;
}
.service-tile-more:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  border-style: solid !important;
}
.service-tile-more:hover .service-tile-name,
.service-tile-more:hover .service-tile-arrow {
  color: #ffffff !important;
}
.services-tiles-section {
  border-top: 1px solid #222222 !important;
  border-bottom: 1px solid #222222 !important;
}

/* ── BUTTONS ── */
.btn {
  border-radius: 0 !important;
  clip-path: none !important;
}
.btn-primary, .btn.btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
}
.btn-primary:hover {
  background: #333333 !important;
  box-shadow: none !important;
}
.btn-outline {
  background: transparent !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}
.btn-outline:hover {
  background: rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
}

/* ── SERVICES TABS ── */
.services-tab-btn {
  color: #555555 !important;
  border: 1px solid #aaaaaa !important;
  background: transparent !important;
}
.services-tab-btn.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.services-tab-btn:hover:not(.active) {
  background: rgba(0,0,0,0.06) !important;
  color: #000000 !important;
  border-color: #555555 !important;
}
.services-tab-nav {
  background: transparent !important;
  border: none !important;
}
.tab-features li::before {
  color: #000000 !important;
}

/* ── TAB MOCKUP VISUALS ── */
.tab-visual-mockup {
  background: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
}
.tab-mockup-bar {
  background: #eeeeee !important;
  border-bottom: 1px solid #cccccc !important;
}
.tab-mockup-url-bar {
  background: transparent !important;
  color: #555555 !important;
  border: none !important;
}
.tab-mockup-body, .mockup-app {
  background: #f8f8f8 !important;
  color: #111111 !important;
}
.dot.red   { background: #ff5f57 !important; }
.dot.yellow{ background: #febc2e !important; }
.dot.green { background: #28c840 !important; }

/* ── GOOGLE MAP MOCK ── */
.mock-gmap-result, .mock-gmap-pin, .mock-gmap-addr {
  color: #333333 !important;
}
.mock-gmap-result.top { border-left: 3px solid #000000 !important; }

/* ── GOOGLE ADS MOCK ── */
.mock-gads-active { color: #000000 !important; }

/* ── CARDS / PANELS ── */
.card, .feature-card, .service-card, .info-card, .result-card,
.step-card, .industry-card, .pricing-tier, .pricing-card {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pricing-tier.featured, .pricing-card.featured {
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

/* ── SECTION BACKGROUNDS ── */
section, .section, .hero, .services-tabs, .trusted-by-section,
.contact-section, .faq-section, .how-it-works-section,
.cta-section, .steps-section, .results-section, .industries-section,
.pricing-section, .about-section, .stats-section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Search engines section — transparent so grid shows through */
.seo-geo-section {
  background: transparent !important;
  background-color: transparent !important;
}
/* Remove dark left/right edge gradients from ALL sections that use them */
.seo-geo-section::after,
.services-tabs::after,
.ai-stats::after,
.custom-software::after,
.social-media-section::after,
.voicement-section::after,
.faq::after,
.contact::after {
  background: none !important;
  display: none !important;
}
.seo-geo-section .section-heading-lg,
.seo-geo-section .page-heading {
  color: #000000 !important;
}
.seo-geo-section .section-subtitle-lg,
.seo-geo-section .section-subtitle {
  color: #444444 !important;
}
.seo-geo-section .section-label {
  color: #666666 !important;
}
.seo-card {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.seo-card:hover {
  border-color: #000000 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.seo-card h3 {
  color: #000000 !important;
}
.seo-card-label {
  color: #555555 !important;
}
.seo-card > p:last-of-type {
  color: #555555 !important;
}
.seo-card-metrics {
  border-top-color: rgba(0,0,0,0.1) !important;
}
.seo-metric-val {
  color: #000000 !important;
}
.seo-metric-lbl {
  color: #555555 !important;
}
/* AIO logos — original SVG is dark, make it black on white bg */
.aio-logo-white {
  filter: brightness(0) !important;
}

/* Client logos carousel — invert all to black for clean B&W look */
.logo-carousel-item img {
  filter: brightness(0) !important;
}

/* Web Design tile — black image default, white image on hover (via JS src swap) */
.service-tile-logo-swap {
  filter: none !important;
}
a[href="/custom-website-design"] .service-tile-logo-swap {
  filter: none !important;
}
a[href="/custom-website-design"]:hover .service-tile-logo-swap {
  filter: none !important;
}

/* ── SECTION LABELS ── */
.services-tabs-label, .section-label, .eyebrow, .overline {
  color: #555555 !important;
}

/* ── FAQ ── */
.faq-container {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.faq-item {
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.faq-question { color: #000000 !important; }
.faq-question span { color: #000000 !important; }
.faq-answer { color: #333333 !important; }
.faq-answer p { color: #333333 !important; }
.faq-toggle { color: #000000 !important; }
.faq-icon { color: #000000 !important; border-color: #cccccc !important; }

/* ── FORMS ── */
input, textarea, select {
  background: #ffffff !important;
  border: 1px solid #aaaaaa !important;
  color: #111111 !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder {
  color: #999999 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
}
.form-group input,
.form-group textarea,
.form-group select {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #aaaaaa !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999999 !important;
}

/* ── ABOVE SCANLINES — these elements sit above body::after (z-index:9998) ── */
/* Images */
img {
  position: relative !important;
  z-index: 9999 !important;
}
/* Service tiles section */
.services-tiles-section {
  position: relative !important;
  z-index: 9999 !important;
}
/* Contact / lead forms */
.contact-section,
.contact-form-wrap {
  position: relative !important;
  z-index: 9999 !important;
}
/* Footer */
footer, .site-footer, .footer {
  position: relative !important;
  z-index: 9999 !important;
}
/* Header already at z-index: 10001 via styles.css */

/* ── FOOTER ── */
footer, .site-footer, .footer {
  background: #111111 !important;
  border-top: 1px solid #333333 !important;
}
footer *, .site-footer *, .footer * {
  color: rgba(255,255,255,0.85) !important;
}
.footer-heading,
.footer-links-col h3,
.footer-links-col h4 {
  color: #ffffff !important;
}
.footer-description,
.footer-about-text,
.footer-cta-text,
.footer-trust-item,
.footer-contact-line,
.footer-links-col ul li a,
.footer-bottom p,
.footer-bottom-links a,
.footer-social-link,
.footer-tagline,
.footer-nap,
.footer-why-label,
.footer-why-text {
  color: rgba(255,255,255,0.6) !important;
}
.footer-links-col ul li a:hover,
.footer-bottom-links a:hover {
  color: #ffffff !important;
}
.footer-top {
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
.footer-brand-name, .logo-main { color: #ffffff !important; }
.logo-tld { color: rgba(255,255,255,0.5) !important; }
.footer-social-link svg { stroke: rgba(255,255,255,0.6); }
.footer-social-link:hover svg { stroke: #ffffff; }

/* ── TRUSTED-BY LOGOS ── */
.trusted-by-section, .logo-carousel-wrap {
  border-top: 1px solid rgba(0,0,0,0.1) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* ── STATS / COUNTERS ── */
.stat-number, .counter, .big-number {
  color: #000000 !important;
  text-shadow: none !important;
}

/* ── MEET TEAM (Arkie) ── */
.meet-team-section {
  background: transparent !important;
  border-top: 1px solid #dddddd !important;
  border-bottom: 1px solid #dddddd !important;
}
.meet-team-pricing-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.meet-team-pricing-btn:hover {
  background: #333333 !important;
  border-color: #333333 !important;
}

/* ── PROCESS / HOW IT WORKS ── */
.process-check-icon { color: #000000 !important; }
.process-step-label { color: #555555 !important; }

/* ── TRUSTED-BY / PRICING BANNER ── */
.tp-banner {
  background: #f2f2f2 !important;
  border-top: 1px solid #dddddd !important;
  border-bottom: 1px solid #dddddd !important;
  border-radius: 0 !important;
}
.tp-banner::before {
  background: linear-gradient(120deg, #000000 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.06) 60%, #000000 100%) !important;
  border-radius: 0 !important;
}
.tp-glow {
  background: none !important;
  display: none !important;
}
.tp-eyebrow {
  color: #000000 !important;
}
.tp-eyebrow::before {
  background: #000000 !important;
}
.tp-check-item { color: #111111 !important; }
.tp-check-icon { color: #000000 !important; }
.tp-check-label { color: #111111 !important; }
.tp-banner-right .meet-team-pricing-btn {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ── PORTFOLIO ── */
/* Portfolio tiles sit above the scanlines — no grey lines over the cards */
.portfolio-section {
  background: transparent !important;
  position: relative !important;
  z-index: 9999 !important;
  border-top: none !important;
}
.portfolio-card,
.portfolio-browser,
.portfolio-screenshot {
  position: relative !important;
  z-index: 9999 !important;
}
.portfolio-card {
  background: #ffffff !important;
  border: 1px solid #222222 !important;
}
.portfolio-card:hover {
  border-color: #000000 !important;
  transform: translateY(-3px);
}
.portfolio-browser {
  background: #f0f0f0 !important;
  border-bottom: 1px solid #cccccc !important;
}
.portfolio-browser-bar {
  background: #f0f0f0 !important;
  border-bottom: 1px solid #dddddd !important;
}
.portfolio-dots span {
  background: #666666 !important;
  opacity: 1 !important;
}
.portfolio-url {
  color: #444444 !important;
}
.portfolio-screenshot {
  background: #e8e8e8 !important;
}
.portfolio-card-info {
  background: #ffffff !important;
}
.portfolio-card-name {
  color: #000000 !important;
}
.portfolio-card-type {
  color: #444444 !important;
}
.portfolio-card-url {
  color: #555555 !important;
}
.portfolio-card-label { color: #555555 !important; }
.portfolio-open-btn {
  color: #000000 !important;
  border: none !important;
  background: transparent !important;
}
.portfolio-open-btn:hover {
  color: #333333 !important;
}

/* ── CONTACT SECTION ── */
.contact-section { background: transparent !important; }
.contact {
  background: transparent !important;
}
.contact-main-heading,
.contact .section-heading-lg,
.contact .section-subtitle-lg,
.contact .section-label {
  color: #000000 !important;
}
.form-group label {
  color: #ffffff !important;
}
.form-group label .required {
  color: #ff6b6b !important;
}
.char-counter {
  color: #aaaaaa !important;
}
/* Form card sits above the scanlines — no grey lines on the form */
.contact-content {
  position: relative !important;
  z-index: 9999 !important;
}
.contact-form-wrap {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  position: relative !important;
  z-index: 9999 !important;
}
.contact-form {
  position: relative !important;
  z-index: 9999 !important;
}
.contact-form button {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}
.contact-form button:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

/* ── SCROLLBAR ── */
/* ── ARKIE PHOTO — above scanlines ── */
.meet-team-photo {
  position: relative !important;
  z-index: 9999 !important;
}

::-webkit-scrollbar-track { background: #f0f0f0 !important; }
::-webkit-scrollbar-thumb {
  background: #aaaaaa !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar-thumb:hover { background: #555555 !important; }

/* ── SELECTION ── */
::selection {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ── BADGES ── */
.badge, .tag, .chip, .label-pill {
  background: rgba(0,0,0,0.06) !important;
  color: #000000 !important;
  border: 1px solid #aaaaaa !important;
}

/* ── BACK BUTTON ── */
.back-btn, .back-link, .breadcrumb a {
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ── HERO EMAIL FORM ── */
.hero-email-form, .hero-email-input-wrap {
  background: #ffffff !important;
  border-color: #999999 !important;
}
.hero-email-input { color: #111111 !important; }

/* ── SECTION BORDERS ── */
.section-divider { border-color: #dddddd !important; }

/* ── GLOWING TEXT — remove all glows ── */
* {
  text-shadow: none !important;
}
/* Re-allow font-family overrides to remain */

/* ── LOGO IN FOOTER (keep logo visible on dark bg) ── */
.footer-logo .logo-icon { filter: brightness(0) invert(1); }

/* ══════════════════════════════════════════════════════
   CATCH-ALL: every remaining hardcoded #45C87A green
   override to black on light backgrounds.
   ══════════════════════════════════════════════════════ */
.hero-email-success,
.tab-social-stat,
.mock-stat-value,
.mock-wf-label,
.mock-wf-node.trigger,
.wf-label,
.wf-stat-num,
.workflow-node.wf-trigger,
.workflow-arrow,
.metric-num,
.seo-stat-value,
.seo-card-label,
.seo-metric-val,
.voicement-url,
.voicement-stat-number,
.voicement-phone-timer,
.voicement-transcript-label,
.transcript-tag.ai-tag,
.transform-accent,
.transform-eyebrow,
.type-heading,
.process-num,
.service-areas-label,
.social-result-static,
.social-platform-card:hover,
.tab-features li::before,
.clients-eyebrow,
.client-category,
.ga-hub-label,
.ga-hub-why-title,
.pricing-section-label,
.pricing-card-popular,
.industry-no-match a,
.city-seo-faq-q,
.state-card-count,
.stats-sources-popover li strong,
.svc-tag,
.svc-seo-val,
.update-log::before,
.platform-badge.active-badge {
  color: #000000 !important;
  border-color: #cccccc !important;
}

/* Footer stats — dark background so these must stay white */
.footer-why-num,
.footer-why-label,
.footer-why-text {
  color: #ffffff !important;
}

/* Hover states that flash green border → black border */
.hero-email-form:focus-within,
.client-card:hover,
.ga-city-card:hover,
.industry-card:hover,
.industry-pill:hover,
.industry-search-box:focus-within,
.mock-platform-icon:hover,
.seo-card:hover,
.state-card:hover,
.tab-social-card:hover,
.startup-form select:focus,
.pricing-demo-btn:hover,
.pricing-back-btn:hover {
  border-color: #000000 !important;
  color: #000000 !important;
}

/* Tab features list — both the marker and the text */
.tab-features li,
.tab-features li::before { color: #000000 !important; }

/* Active nav link & tab buttons — green → black */
.nav-links a.active { color: #000000 !important; }
.services-tab-btn:hover { color: #000000 !important; border-color: #aaaaaa !important; }

/* Pricing & state cards */
.state-card-btn,
.pricing-other-notice a { color: #000000 !important; }

/* USA/geo highlight sections */
.usa-pride-section .transform-accent,
.usa-pride-section .transform-eyebrow { color: #000000 !important; }

/* ══════════════════════════════════════════════════════════════
   NUCLEAR RGBA OVERRIDE
   Kills every hardcoded rgba(69,200,122,…) that bypasses
   the --retro-green CSS variable already set to #000000.
   ══════════════════════════════════════════════════════════════ */

/* — Text colours on LIGHT backgrounds → black — */
.faq-answer,
.hero-subheadline, .hero-sub-desktop, .hero-sub-mobile,
.services-tab-btn,
.tab-panel-text p,
.tab-features li,
.step p, .step-desc, .process-step p,
.step h3, .step-title, .process-step h3, .step-label,
.process-card p,
.process-checklist li,
.tp-check-item,
.seo-card > p:last-of-type,
.seo-metric-lbl,
.meet-team-bio,
.meet-team-points li,
.meet-team-points li::before,
.retro-cursor { color: #000000 !important; }

/* — Text colours on DARK backgrounds (footer) → white — */
.footer-description,
.footer-about-text,
.footer-cta-text,
.footer-trust-item,
.footer-contact-line,
.footer-links-col ul li a,
.footer-bottom p,
.footer-bottom-links a,
.footer-social-link,
.footer-tagline,
.footer-nap,
.footer-why-label,
.footer-why-text,
.footer-links-col ul li a:hover,
.footer-bottom-links a:hover,
.footer-contact-line:hover { color: rgba(255,255,255,0.75) !important; }

/* — Placeholder text → grey — */
.form-group input::placeholder,
.form-group textarea::placeholder { color: #999999 !important; }

/* — Borders with rgba green → neutral — */
.navbar, .navbar.scrolled { border-bottom-color: #dddddd !important; }
.footer-top { border-bottom-color: #333333 !important; }
.footer-about { border-top-color: #333333 !important; }
.trusted-by-section, .logo-carousel-wrap { border-color: #dddddd !important; }
.portfolio-browser-bar { border-bottom-color: #dddddd !important; }
.white-bg, .light-bg, .alt-section { border-color: #dddddd !important; }
.form-group input,
.form-group textarea,
.form-group select { border-color: #aaaaaa !important; }

/* — Box-shadows with rgba green → none — */
.btn-primary:hover,
.btn-outline:hover,
.tab-visual-mockup,
.pricing-tier.featured, .pricing-card.featured,
input:focus, textarea:focus, select:focus,
.form-group input:focus, .form-group textarea:focus,
.hero-email-form:focus-within,
.hero-email-btn:hover,
.nav-links .nav-cta:hover,
.nav-cta:hover { box-shadow: none !important; }

/* — Backgrounds with rgba green → transparent / light — */
.btn-outline:hover { background: rgba(0,0,0,0.04) !important; }
.services-tab-btn:hover:not(.active) { background: rgba(0,0,0,0.05) !important; }
.nav-links .nav-cta:hover, .nav-cta:hover { background: #ffffff !important; }

/* ── LEFT/RIGHT EDGE GRADIENTS — remove all ── */
.transform-section::after {
  background: none !important;
  display: none !important;
}
.logo-carousel {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.logo-carousel-wrap::before,
.logo-carousel-wrap::after,
.trusted-by-section::before,
.trusted-by-section::after {
  background: none !important;
  display: none !important;
}

/* ── PROCESS CARDS ── */
.how-it-works { background: transparent !important; }
.process-card {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  box-shadow: none !important;
}
.process-card:hover { background: #f8f8f8 !important; }
.process-num { color: #000000 !important; }
.process-card h3 { color: #000000 !important; }
.process-card p { color: #444444 !important; }
.process-checklist { border-top-color: rgba(0,0,0,0.1) !important; }
.process-checklist li { color: #555555 !important; }
.process-checklist li::before { background: #000000 !important; }

/* ── SEQUENTIAL WORD FLASH — SEO → Google Ads → website builds ── */
/* Total cycle: 14s  |  each word flashes 3× then waits its turn   */
/* Flash ON = white text on black bg (inverted) like a screen pulse */

.flash-word {
  display: inline;
  padding: 0 1px;
  transition: none;
}

/* SEO: flashes at 0-10%, silent 11-100% */
@keyframes flash-seo {
  0%,  2%,  4%,  6%,  8%, 10%, 100% { filter: none; }
  1%,  3%,  5%  { filter: invert(1); }
}

/* Google Ads: silent 0-24%, flashes 25-35%, silent 36-100% */
@keyframes flash-gads {
  0%, 24%, 27%, 29%, 31%, 33%, 35%, 100% { filter: none; }
  25%, 28%, 30%, 32%, 34% { filter: invert(1); }
}

/* Website builds: silent 0-49%, flashes 50-60%, silent 61-100% */
@keyframes flash-web {
  0%, 49%, 52%, 54%, 56%, 58%, 60%, 100% { filter: none; }
  50%, 53%, 55%, 57%, 59% { filter: invert(1); }
}

.flash-seo  { animation: flash-seo  14s step-end infinite; }
.flash-gads { animation: flash-gads 14s step-end infinite; }
.flash-web  { animation: flash-web  14s step-end infinite; }