/**
 * SEO SolutionX — Light-first theme (white bg, blue typography)
 * Dark mode: html[data-theme="dark"]
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* Site colour tokens — fixed brand palette (OSDGLO blue) */
:root {
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --color-primary: #2563eb;
  --color-secondary: #1e40af;
  --color-accent: #3b82f6;
  --color-bg-light: #f2f5f9;
  --color-bg-dark: #0f172a;
  --color-text: #1e3a8a;
  --color-text-muted: #64748b;
  --color-heading-light: #1e40af;
  --color-text-dark: #e2e8f0;
  --color-text-muted-dark: #94a3b8;
  --color-heading-dark: #93c5fd;
  --color-card-dark: #1e293b;
  --color-bg-alt-dark: #1e293b;
}

/* Light mode (default) — soft off-white, not pure white */
:root,
html[data-theme="light"] {
  --site-bg: var(--color-bg-light);
  --site-bg-alt: #e9eef4;
  --site-bg-card: #ffffff;
  --site-text: var(--color-text);
  --site-text-heading: var(--color-heading-light, #1e40af);
  --site-text-muted: #5b6b7c;
  --site-border: rgba(30, 64, 175, 0.14);
  --site-header-bg: rgba(255, 255, 255, 0.96);
  --site-header-border: rgba(30, 64, 175, 0.12);
  --site-header-link: #5b6b7c;
  --site-header-link-hover: #1e40af;
  --site-header-link-active-bg: rgba(37, 99, 235, 0.1);
  --site-header-chip-bg: #ffffff;
  --site-header-chip-border: rgba(30, 64, 175, 0.14);
  --site-header-chip-color: #2563eb;
  --site-topbar-bg: #ffffff;
  --site-topbar-text: #1e293b;
  --site-topbar-border: #e2e8f0;
  --site-shadow: 0 6px 28px rgba(30, 64, 175, 0.1);
  --site-btn-text: #ffffff;
  --brush-opacity: 0.08;
  --site-grid-line: rgba(30, 64, 175, 0.13);
  --site-grid-opacity: 0.42;
}

/* Dark mode — black base + lime accent (#c4ef17) */
html[data-theme="dark"] {
  --color-primary: #c4ef17;
  --color-secondary: #a8d012;
  --color-accent: #d8f94a;
  --color-heading-dark: #c4ef17;
  --site-accent: #c4ef17;
  --site-on-accent: #000000;
  --site-bg: #000000;
  --site-bg-alt: #000000;
  --site-bg-card: #111111;
  --site-text: #ffffff;
  --site-text-heading: #ffffff;
  --site-text-muted: #d4d4d8;
  --site-border: rgba(255, 255, 255, 0.14);
  --site-header-bg: rgba(0, 0, 0, 0.94);
  --site-header-border: rgba(196, 239, 23, 0.12);
  --site-header-link: #ffffff;
  --site-header-link-hover: #c4ef17;
  --site-header-link-active-bg: rgba(196, 239, 23, 0.14);
  --site-header-chip-bg: rgba(255, 255, 255, 0.05);
  --site-header-chip-border: rgba(196, 239, 23, 0.2);
  --site-header-chip-color: #c4ef17;
  --site-topbar-bg: #000000;
  --site-topbar-text: #ffffff;
  --site-topbar-border: rgba(196, 239, 23, 0.16);
  --site-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  --site-btn-text: #000000;
  --brush-opacity: 0.07;
  --bg: #000000;
  --bg-card: #111111;
  --muted: #d4d4d8;
  --border: rgba(255, 255, 255, 0.14);
  --site-grid-line: rgba(196, 239, 23, 0.12);
  --site-grid-opacity: 0.55;
}

html {
  font-family: var(--font-sans);
}

body.site-body {
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background 0.35s ease, color 0.35s ease;
}

button,
input,
textarea,
select,
optgroup {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--site-text-heading);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-primary { color: var(--color-primary) !important; }

/* Brush-style section backgrounds */
.section-brush {
  position: relative;
  overflow: hidden;
  background: var(--site-bg);
}
.section-brush::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--site-grid-opacity, 0.38);
  background-image:
    linear-gradient(var(--site-grid-line, rgba(30, 64, 175, 0.11)) 1px, transparent 1px),
    linear-gradient(90deg, var(--site-grid-line, rgba(30, 64, 175, 0.11)) 1px, transparent 1px);
  background-size: 48px 48px;
}
.section-brush > * { position: relative; z-index: 1; }

.section-brush-blue {
  background:
    radial-gradient(ellipse 70% 55% at 15% 30%, rgba(37, 99, 235, var(--brush-opacity)), transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 70%, rgba(30, 64, 175, calc(var(--brush-opacity) * 0.8)), transparent 60%),
    var(--site-bg);
}

.section-brush-wave {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(59, 130, 246, calc(var(--brush-opacity) * 1.2)), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(37, 99, 235, var(--brush-opacity)), transparent 55%),
    var(--site-bg-alt);
}

.section-brush-soft {
  background:
    radial-gradient(circle at 20% 80%, rgba(147, 197, 253, calc(var(--brush-opacity) * 1.5)), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, var(--brush-opacity)), transparent 40%),
    var(--site-bg);
}

.section-brush-corner {
  background:
    radial-gradient(ellipse 55% 65% at 0% 100%, rgba(30, 64, 175, calc(var(--brush-opacity) * 1.3)), transparent 55%),
    radial-gradient(ellipse 45% 50% at 100% 0%, rgba(59, 130, 246, var(--brush-opacity)), transparent 50%),
    var(--site-bg);
}

.section-brush-card {
  background: var(--site-bg-card);
  border: 1px solid var(--site-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--site-shadow);
}

html[data-theme="dark"] .section-brush-blue,
html[data-theme="dark"] .section-brush-wave,
html[data-theme="dark"] .section-brush-soft,
html[data-theme="dark"] .section-brush-corner {
  background-color: #000000;
}

/* Dark mode — sections & readable text */
html[data-theme="dark"] .gm-hero-wrap {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 45%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 40%),
    #000000;
}
html[data-theme="dark"] .gm-showcase-wrap,
html[data-theme="dark"] .gm-services-wrap,
html[data-theme="dark"] .gm-clients-wrap,
html[data-theme="dark"] .gm-testimonials-wrap,
html[data-theme="dark"] .gm-about-wrap,
html[data-theme="dark"] .gm-steps-wrap,
html[data-theme="dark"] .gm-pricing-wrap,
html[data-theme="dark"] .gm-cta-wrap,
html[data-theme="dark"] .clients-section,
html[data-theme="dark"] .main-footer {
  background: #000000;
}
html[data-theme="dark"] .gm-cta-inner,
html[data-theme="dark"] .gm-pricing-wrap .pricing-card,
html[data-theme="dark"] .gm-services-wrap .service-card,
html[data-theme="dark"] .gm-step-card {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .gm-step-icon {
  background:
    linear-gradient(#111111, #111111) padding-box,
    linear-gradient(135deg, rgba(196, 239, 23, 0.55), rgba(168, 208, 18, 0.45)) border-box;
  color: #c4ef17;
  box-shadow: 0 10px 24px rgba(196, 239, 23, 0.14);
}
html[data-theme="dark"] .gm-step-num {
  color: #c4ef17;
  background: rgba(196, 239, 23, 0.12);
  border-color: rgba(196, 239, 23, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .showcase-heading,
html[data-theme="dark"] .showcase-title {
  color: #ffffff;
}
html[data-theme="dark"] .showcase-desc {
  color: #d4d4d8;
}
html[data-theme="dark"] .testimonial-card {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .client-logo-card {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .btn-outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
html[data-theme="dark"] .btn-outline:hover {
  color: #000000;
  background: #ffffff;
  border-color: #ffffff;
}
html[data-theme="dark"] p,
html[data-theme="dark"] .footer-desc,
html[data-theme="dark"] .footer-links a {
  color: #d4d4d8;
}
html[data-theme="dark"] .footer-links h4,
html[data-theme="dark"] .footer-contact {
  color: #ffffff;
}

/* Theme toggle — sketch icons + swap rotate */
.swap {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.swap > * {
  grid-column-start: 1;
  grid-row-start: 1;
}
.theme-toggle-input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.theme-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.35s ease;
}
.theme-icon-moon {
  color: var(--color-primary);
  transform: rotate(-18deg);
}
.theme-icon-sun {
  color: var(--site-text);
}
html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  color: #c4ef17;
}
.swap-on {
  opacity: 0;
  transform: rotate(90deg) scale(0.35);
}
.swap-off {
  opacity: 1;
  transform: rotate(-18deg) scale(1);
}
.swap input:checked ~ .swap-on,
.swap:has(input:checked) .swap-on {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.swap input:checked ~ .swap-off,
.swap:has(input:checked) .swap-off {
  opacity: 0;
  transform: rotate(-90deg) scale(0.35);
  pointer-events: none;
}
/* White / light mode — moon spins in */
.theme-toggle.is-to-light .swap-off {
  opacity: 1;
  animation: theme-moon-spin-in 0.62s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.theme-toggle.is-to-light {
  animation: theme-btn-glow-light 0.65s ease;
}
@keyframes theme-moon-spin-in {
  0% { opacity: 0; transform: rotate(-360deg) scale(0.35); }
  70% { opacity: 1; transform: rotate(12deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-18deg) scale(1); }
}
@keyframes theme-btn-glow-light {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent); }
  45% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent);
    background: color-mix(in srgb, #fff 88%, var(--color-primary));
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Dark mode — sun spins in */
.theme-toggle.is-to-dark .swap-on {
  opacity: 1;
  animation: theme-sun-spin-in 0.62s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.theme-toggle.is-to-dark {
  animation: theme-btn-glow-dark 0.65s ease;
}
@keyframes theme-sun-spin-in {
  0% { opacity: 0; transform: rotate(360deg) scale(0.35); }
  70% { opacity: 1; transform: rotate(-12deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes theme-btn-glow-dark {
  0% { box-shadow: 0 0 0 0 transparent; }
  45% {
    box-shadow: 0 0 0 5px rgba(196, 239, 23, 0.22);
    background: color-mix(in srgb, var(--site-bg-card) 70%, #111111);
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle.is-to-light,
  .theme-toggle.is-to-dark,
  .theme-toggle.is-to-light .swap-off,
  .theme-toggle.is-to-dark .swap-on {
    animation: none !important;
  }
  .swap-on,
  .swap-off {
    transition: opacity 0.2s ease;
  }
}

/* Dark mode — lime fill / white hover: text always black */
html[data-theme="dark"] .header-login-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .header-signup-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .header-login-btn:hover,
html[data-theme="dark"] .header-login-btn:focus-visible,
html[data-theme="dark"] .header-signup-btn:hover,
html[data-theme="dark"] .header-signup-btn:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000000;
}

html[data-theme="dark"] :is(
  .btn-primary,
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .blog-search-btn,
  .blog-search-btn:hover,
  .tab-btn.is-active,
  .tab-btn.is-active:hover,
  .service-tab.is-active,
  .service-tab.is-active:hover,
  .filter-pill.is-active,
  .portfolio-metric-badge,
  .package-popular-badge,
  .package-card-cta,
  .package-card-cta:hover,
  .header-cta,
  .header-cta:hover,
  .header-badge,
  .popular-badge,
  .payment-option-check,
  .showcase-tab.is-active,
  .showcase-tab.is-active[data-tab="search"],
  .footer-social-link:hover,
  .gm-cta-inner .btn-primary,
  .gm-cta-inner .btn-primary:hover,
  .gm-marquee-wrap .marquee-item,
  .gm-marquee-wrap .marquee-dot,
  .gm-stats-wrap .stat-value,
  .gm-stats-wrap .stat-label,
  .newsletter-form-btn,
  .newsletter-form-btn:hover,
  .pricing-card .popular-badge,
  .package-card-btn-primary,
  .header-signup-btn:hover,
  .header-signup-btn:focus-visible,
  .header-login-btn:hover,
  .header-login-btn:focus-visible
) {
  color: #000000 !important;
}

html[data-theme="dark"] .btn-outline:hover {
  background: #ffffff;
  border-color: #ffffff;
}

html[data-theme="dark"] .packages-filter-item input:checked::before {
  background: #000000;
}

html[data-theme="dark"] .header-menu-link:hover,
html[data-theme="dark"] .header-menu-link.is-active {
  color: var(--color-primary);
}

html[data-theme="dark"] .header-icon-btn:hover {
  color: var(--color-primary);
}

html[data-theme="dark"] .footer-links a:hover,
html[data-theme="dark"] .footer-contact:hover {
  color: var(--color-primary);
}

html[data-theme="dark"] .text-primary {
  color: var(--color-primary) !important;
}

html[data-theme="dark"] .alert-success {
  color: var(--color-primary);
  border-color: rgba(196, 239, 23, 0.35);
  background: rgba(196, 239, 23, 0.1);
}

html[data-theme="dark"] .site-notif-toast--info .site-notif-toast-icon {
  background: var(--color-primary);
  color: #000000;
}