/* ============================================
   KYVERA DIGITAL — Global light premium layer
   Loaded last on every page. Forces consistency
   across landings, blog, legal, cookies, IA.
   ============================================ */

:root {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.9);
  --bg-footer: #0f172a;
  --border-glass: #e2e8f0;
  --accent: #2563eb;
  --accent-dim: #1d4ed8;
  --blue-primary: #1d4ed8;
  --blue-secondary: #1e40af;
  --blue-glow: #2563eb;
  --cyan: #2563eb;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --gradient-main: linear-gradient(135deg, #2563eb 0%, #4f46e5 48%, #7c3aed 100%);
  --shadow-glow: 0 12px 40px rgba(37, 99, 235, 0.14);
  --shadow-card: 0 8px 30px rgba(15, 23, 42, 0.07);
  --font-display: "Space Grotesk", "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --kyvera-surface-3: #f1f5f9;
  --kyvera-ink-soft: #475569;
  --kyvera-ink-muted: #64748b;
  --kyvera-line: #e2e8f0;
  --kyvera-line-strong: #cbd5e1;
}

html {
  color-scheme: light;
}

body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ---- Header / brand ---- */
.header,
.header.scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--border-glass) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand-wordmark,
.nav-logo .brand-wordmark,
.nav-logo span.brand-wordmark {
  display: flex !important;
  flex-direction: column;
  line-height: 1.05;
  visibility: visible !important;
  opacity: 1 !important;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.brand-a {
  color: var(--accent);
}

.brand-tag {
  color: var(--text-muted);
}

.nav-toggle {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: var(--border-glass) !important;
}

.nav-toggle span {
  background: var(--text-primary) !important;
}

@media (max-width: 1100px) {
  .nav-menu {
    background: #ffffff !important;
    border-left: 1px solid var(--border-glass) !important;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.08);
  }
}

/* ---- Cards / surfaces ---- */
.service-card,
.portfolio-card,
.faq-item,
.sector-card,
.seo-hub-card,
.guarantee-card,
.compare-col,
.blog-card,
.legal-card,
.plan-card,
.plan-bundle,
.svc-feature,
.svc-card,
.case-card {
  background: #ffffff !important;
  border-color: var(--border-glass) !important;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.plan-bundle-breakdown,
.plan-bundle-features,
.plan-includes {
  background: #f8fafc !important;
  border-color: var(--border-glass) !important;
  color: var(--text-primary);
}

.plan-features li,
.plan-include-item,
.plan-label,
.plan-price,
.plans-note,
.plan-bundle-lead,
.plan-bundle-lines li {
  color: var(--text-secondary) !important;
}

.plan-bundle-header h3,
.plan-card h3,
.plan-bundle-price,
.plan-bundle-lines li strong {
  color: var(--text-primary) !important;
}

/* ---- Promo bar ---- */
.promo-offer-bar {
  border-block: 1px solid rgba(37, 99, 235, 0.2) !important;
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.08) 0%,
    rgba(124, 58, 237, 0.05) 50%,
    rgba(37, 99, 235, 0.08) 100%
  ) !important;
}

.promo-offer-text {
  color: var(--text-secondary) !important;
}

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

.promo-offer-badge {
  background: var(--gradient-main) !important;
  color: #fff !important;
}

/* ---- Forms / inputs ---- */
input,
textarea,
select,
.form-group input,
.form-group textarea,
.contact-form input,
.contact-form textarea {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: var(--border-glass) !important;
}

/* ---- AI assistant ---- */
.kyvera-ai-panel {
  background: #ffffff !important;
  border: 1px solid var(--border-glass) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

.kyvera-ai-header {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, transparent 100%) !important;
  border-bottom-color: var(--border-glass) !important;
}

.kyvera-ai-header h3,
.kyvera-ai-msg,
.kyvera-ai-input,
.kyvera-ai-status {
  color: var(--text-primary);
}

.kyvera-ai-messages,
.kyvera-ai-body {
  background: #f8fafc;
}

.kyvera-ai-msg.bot,
.kyvera-ai-msg--assistant {
  background: #ffffff !important;
  border: 1px solid var(--border-glass);
  color: var(--text-primary) !important;
}

.kyvera-ai-msg.user,
.kyvera-ai-msg--user {
  background: rgba(37, 99, 235, 0.1) !important;
  color: var(--text-primary) !important;
}

.kyvera-ai-input-area,
.kyvera-ai-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--border-glass) !important;
}

.kyvera-ai-input-area input,
.kyvera-ai-input-area textarea {
  background: #f8fafc !important;
}

/* ---- Cookies ---- */
.cookie-banner-inner {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.08);
}

.cookie-banner-text {
  color: var(--text-secondary) !important;
}

.cookie-banner-inner a {
  color: var(--accent) !important;
}

/* ---- Legal / blog reading surfaces ---- */
.legal-content,
.blog-article,
.blog-post,
.article-body,
.page-content,
.privacy-content,
.terms-content {
  color: var(--text-primary);
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.blog-article h1,
.blog-article h2,
.article-body h1,
.article-body h2 {
  color: var(--text-primary);
  font-family: var(--font-display);
}

/* ---- Footer stays dark slate ---- */
.footer {
  background: var(--bg-footer) !important;
  color: #cbd5e1 !important;
  border-top-color: rgba(148, 163, 184, 0.2) !important;
}

.footer a {
  color: #e2e8f0;
}

.footer a:hover {
  color: #fff;
}

.footer-brand p,
.footer-links a,
.footer-copy,
.footer-bottom {
  color: #94a3b8 !important;
}

.footer .brand-name {
  color: #fff !important;
}

.footer .brand-tag {
  color: #94a3b8 !important;
}

.footer .brand-a {
  color: #60a5fa !important;
}

/* ---- Buttons ---- */
.btn-ghost,
.btn-outline {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-glass) !important;
}

.btn-primary,
.btn.btn-primary {
  background: var(--gradient-main) !important;
  color: #fff !important;
  border: none !important;
}

/* ---- Overlay ---- */
.nav-overlay.active,
.nav-overlay[aria-hidden="false"] {
  background: rgba(15, 23, 42, 0.35) !important;
}

/* ---- Cookies: mobile card, no crop ---- */
.cookie-banner {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

.cookie-banner-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .cookie-banner {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    background: transparent !important;
  }

  .cookie-banner-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0.9rem 1rem !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14) !important;
  }

  .cookie-banner-text {
    flex: none !important;
    width: 100% !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  .cookie-banner-short {
    display: inline !important;
  }

  .cookie-banner-full {
    display: none !important;
  }

  .cookie-banner-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 0.5rem !important;
    flex-shrink: 0;
  }

  .cookie-banner-actions .btn,
  .cookie-banner-actions .btn-sm {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body:has(#kyvera-cookie-banner) .fab-dock {
    bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---- AI assistant removed ---- */
.kyvera-ai-agent,
.kyvera-ai-toggle,
.kyvera-ai-panel,
.kyvera-ai-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ai-panel-open {
  overflow: auto !important;
}

/* ---- Mobile readability & less clutter ---- */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  body:has(.marketing-strip.visible) {
    padding-bottom: 0 !important;
  }

  .marketing-strip {
    display: none !important;
  }

  .brand-wordmark {
    display: flex !important;
  }

  .nav-logo span {
    display: flex !important;
  }

  .fab-dock {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 0.5rem;
  }

  body:has(#kyvera-cookie-banner) .fab-dock {
    bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }

  .hero-title,
  h1.hero-title,
  .svc-page-hero h1 {
    font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    line-height: 1.2 !important;
  }

  .section-title {
    font-size: clamp(1.45rem, 6vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }

  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Home mobile: no centering leaks, no floating WA duplicate */
  body.home-v2 .hero-copy,
  body.home-v2 .hero-title,
  body.home-v2 .hero-title-sub,
  body.home-v2 .hero-tagline,
  body.home-v2 .hero-badge {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home-v2 .hero-actions {
    margin-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.home-v2 .fab-dock {
    display: none !important;
  }

  body.home-v2 .hero-v2 .hero-title {
    font-size: 1.65rem !important;
  }
}