/* ============================================================
   MICROVE.AI — DARK EDITORIAL DESIGN SYSTEM
   ============================================================
   Direction: Dark precision editorial
   Display:   Fraunces (optical serif variable)
   Body:      DM Sans
   Palette:   #0A0B0D base · #E8E3D5 text · #FF4D12 accent
   ============================================================ */

/* --- CSS Variables --- */
:root {
  --bg:          #13141A;
  --bg-raised:   #1A1C24;
  --bg-card:     #1E2030;
  --bg-border:   rgba(255,255,255,0.07);
  --bg-border-strong: rgba(255,255,255,0.12);
  --text:        #E8E3D5;
  --text-muted:  #7C786E;
  --text-dim:    #2E2C28;
  --accent:      #FF4D12;
  --accent-sub:  rgba(255,77,18,0.15);
  --accent-glow: rgba(255,77,18,0.06);
  --rule:        rgba(255,255,255,0.055);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* --- Base Reset Overrides --- */
html {
  background: #13141A !important;
}

body {
  background-color: #13141A !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}

/* Subtle static texture — no mesh, no circuits */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* Ensure content sits above pseudo-element */
main, nav, footer, #cookie-consent-banner {
  position: relative;
  z-index: 10;
}

/* --- Remove old decorative elements --- */
.neural-mesh,
.noise-overlay,
.circuit-accent {
  display: none !important;
}

/* --- Typography: Display Headings use Fraunces --- */
h1, h2, h3 {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
  -webkit-font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  -webkit-font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* --- Navigation --- */
nav.sticky {
  background: rgba(10, 11, 13, 0.92) !important;
  border-color: var(--bg-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

nav .text-gray-900,
nav a.text-gray-900 {
  color: var(--text) !important;
}

nav a.text-gray-600 {
  color: var(--text-muted) !important;
}

nav a.text-gray-600:hover {
  color: var(--text) !important;
}

nav a.font-medium.text-gray-900 {
  color: var(--text) !important;
}

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

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

/* Mobile menu */
#mobile-menu {
  background: rgba(10, 11, 13, 0.98) !important;
  border-color: var(--bg-border) !important;
}

#mobile-menu a {
  color: var(--text-muted) !important;
}

#mobile-menu a:hover,
#mobile-menu a.text-gray-900 {
  color: var(--text) !important;
  background: rgba(255,255,255,0.04) !important;
}

button#mobile-menu-btn {
  color: var(--text-muted) !important;
}

button#mobile-menu-btn:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* --- Section Backgrounds --- */
.section-default {
  background: transparent !important;
}

.section-tint-blue,
.section-tint-warm,
.section-tint-gray {
  background: var(--bg-raised) !important;
}

/* Hero gradient box: remove in dark mode, let hero breathe */
section .bg-gradient-to-br.from-primary\/5.to-accent\/5 {
  background: transparent !important;
}

/* Also catch it by the pattern used */
.bg-gradient-to-br {
  background: transparent !important;
}

/* --- Global Text Color Overrides --- */
.text-gray-900 {
  color: var(--text) !important;
}

.text-gray-700 {
  color: rgba(232, 227, 213, 0.75) !important;
}

.text-gray-600 {
  color: rgba(232, 227, 213, 0.65) !important;
}

.text-gray-500 {
  color: var(--text-muted) !important;
}

.text-gray-400 {
  color: rgba(124, 120, 110, 0.8) !important;
}

.text-gray-200 {
  color: var(--text-dim) !important;
}

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

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

/* --- White surfaces become dark cards --- */
.bg-white {
  background: var(--bg-card) !important;
}

.bg-white\/95 {
  background: rgba(10, 11, 13, 0.95) !important;
}

.bg-gray-50,
.bg-gray-100 {
  background: var(--bg-raised) !important;
}

/* --- Borders --- */
.border-gray-200,
.border-gray-100,
.border-gray-200\/80,
.border-gray-200\/50,
.border-gray-300 {
  border-color: var(--bg-border) !important;
}

/* --- Cards (process steps etc.) --- */
.border.border-gray-100,
.border.border-gray-200 {
  border-color: var(--bg-border) !important;
}

/* Hover state for cards */
.hover\:shadow-premium:hover,
.hover\:shadow-lg:hover {
  box-shadow: 0 0 0 1px var(--bg-border-strong), 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* --- Process Step Icons --- */
.bg-primary {
  background: var(--accent-sub) !important;
  border: 1px solid rgba(255,77,18,0.35) !important;
}

.bg-green-600 {
  background: var(--accent-sub) !important;
  border: 1px solid rgba(255,77,18,0.35) !important;
}

/* Icon color in process steps */
.bg-primary svg.text-white,
.bg-green-600 svg.text-white {
  color: var(--accent) !important;
}

/* --- Gradient Line (timeline connector) --- */
.gradient-line {
  background: linear-gradient(
    to right,
    rgba(255, 77, 18, 0.15),
    rgba(255, 77, 18, 0.4),
    var(--accent)
  ) !important;
  opacity: 0.8;
}

.gradient-line.h-0\.5 {
  background: linear-gradient(
    to right,
    rgba(255, 77, 18, 0.15),
    rgba(255, 77, 18, 0.4),
    var(--accent)
  ) !important;
  opacity: 0.8;
}

.gradient-line.w-0\.5 {
  background: linear-gradient(
    to bottom,
    rgba(255, 77, 18, 0.15),
    rgba(255, 77, 18, 0.4),
    var(--accent)
  ) !important;
  opacity: 0.8;
}

/* --- SVG Diagrams Style Overrides (Cross browser fixes) --- */
svg rect[fill="white"] {
  fill: var(--bg-card) !important;
  stroke: var(--bg-border-strong) !important;
}

svg rect[fill="#F9FAFB"] {
  fill: var(--bg-raised) !important;
  stroke: var(--bg-border) !important;
}

svg text[fill="#17212B"] {
  fill: var(--text) !important;
}

svg text[fill="#636E72"] {
  fill: var(--text-muted) !important;
}

svg line[stroke="#1E293B"] {
  stroke: var(--text-muted) !important;
}

svg path[fill="#1E293B"] {
  fill: var(--text-muted) !important;
}

/* --- Integration Logo Items --- */
.hover\:text-gray-600:hover {
  color: var(--text) !important;
}

/* --- Hero Section Specific --- */
section.section-default.animate-fade-in-up,
section.max-w-6xl.mx-auto.px-6.py-24.text-center {
  padding-top: 5rem;
  padding-bottom: 4rem;
}

/* Tagline treatment */
.text-xs.uppercase.tracking-widest {
  letter-spacing: 0.18em;
}

/* The large h1 in Fraunces */
h1.tight-tracking {
  font-weight: 700;
  font-optical-sizing: auto;
  -webkit-font-optical-sizing: auto;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

/* H2 headlines */
h2.tight-tracking {
  font-weight: 600;
  letter-spacing: -0.025em !important;
}

/* --- "Why Microve Exists" label div --- */
.max-w-6xl.mx-auto.px-6.py-24 p.text-accent,
.max-w-6xl.mx-auto.px-6.pb-4 p.text-accent {
  color: var(--accent) !important;
}

/* --- Section: Why Microve Exists --- */
section.section-tint-blue .text-xl.text-gray-600 {
  color: rgba(232, 227, 213, 0.65) !important;
}

/* --- Footer --- */
footer {
  background: var(--bg-raised) !important;
  border-color: var(--bg-border) !important;
}

footer .text-primary,
footer a.text-xl.font-bold {
  color: var(--text) !important;
}

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

footer .text-gray-600 {
  color: var(--text-muted) !important;
}

footer a.text-gray-600:hover {
  color: var(--text) !important;
}

footer .text-gray-500 {
  color: var(--text-muted) !important;
}

footer .text-gray-400 {
  color: rgba(124,120,110,0.6) !important;
}

footer .border-gray-200\/50 {
  border-color: var(--bg-border) !important;
}

/* --- Cookie Consent Banner --- */
#cookie-consent-banner {
  background: var(--bg-raised) !important;
  border-color: var(--bg-border) !important;
  color: var(--text) !important;
}

#cookie-consent-banner h3 {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

#cookie-consent-banner p {
  color: var(--text-muted) !important;
}

#cookie-consent-banner a {
  color: var(--accent) !important;
}

button#cookie-reject {
  background: transparent !important;
  border-color: var(--bg-border-strong) !important;
  color: var(--text-muted) !important;
}

button#cookie-reject:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
}

button#cookie-accept {
  background: var(--accent) !important;
  color: white !important;
}

button#cookie-accept:hover {
  background: #e04310 !important;
}

/* --- Skip Link --- */
a.sr-only:focus {
  background: var(--accent) !important;
  color: white !important;
}

/* --- Hover states on integration logos --- */
.flex.items-center.gap-2.text-gray-400:hover {
  color: var(--text) !important;
}

/* --- Page-level: what-we-do, about, etc. --- */

/* Hero-style page headers */
.py-16.text-center h1,
.py-20 h1 {
  color: var(--text) !important;
}

/* Prose text blocks */
.prose p, .leading-relaxed {
  color: rgba(232, 227, 213, 0.7) !important;
}

/* ---- Pricing page ---- */
.rounded-2xl.border,
.rounded-xl.border {
  border-color: var(--bg-border) !important;
  background: var(--bg-card) !important;
}

/* Pricing accent ring */
.ring-accent, .ring-orange-400, .border-accent {
  border-color: var(--accent) !important;
}

/* --- Blog / Article pages --- */
article .prose,
.blog-content {
  color: rgba(232,227,213,0.75) !important;
}

/* --- Cases pages --- */
.case-card, .cases-grid article {
  background: var(--bg-card) !important;
  border-color: var(--bg-border) !important;
}

/* --- Contact page --- */
input, textarea, select {
  background: var(--bg-raised) !important;
  border-color: var(--bg-border-strong) !important;
  color: var(--text) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

input:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-sub) !important;
  outline: none !important;
}

label {
  color: var(--text-muted) !important;
}

/* Form submit button */
button[type="submit"],
a.bg-accent {
  background: var(--accent) !important;
  color: white !important;
}

button[type="submit"]:hover,
a.bg-accent:hover {
  background: #e04310 !important;
}

/* --- General utility: any bg-primary in body content --- */
main .bg-primary {
  background: var(--accent-sub) !important;
  border: 1px solid rgba(255,77,18,0.3) !important;
}

/* --- Dividers in content --- */
hr {
  border-color: var(--bg-border) !important;
}

/* --- Links in body text --- */
main a:not(.text-accent):not([class*="bg-"]):not([class*="text-gray"]):not([class*="text-white"]):not(nav a) {
  color: var(--accent) !important;
}

/* --- Animations: refined page-load reveal --- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Stagger child elements in hero */
section.animate-fade-in-up > div:nth-child(1) { animation-delay: 0s; }
section.animate-fade-in-up > div:nth-child(2) { animation-delay: 0.1s; }
section.animate-fade-in-up > div:nth-child(3) { animation-delay: 0.2s; }

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* --- Selection --- */
::selection {
  background: var(--accent-sub);
  color: var(--text);
}

/* ============================================================
   EDITORIAL ACCENT: thin top rule on key sections
   ============================================================ */

/* Thin accent top-bar on section-tint variants */
.section-tint-blue,
.section-tint-warm {
  position: relative;
}

.section-tint-blue::before,
.section-tint-warm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.2;
}

/* ============================================================
   PRIVACY & TERMS — inline style overrides
   ============================================================ */

.privacy-content h2,
.terms-content h2 {
  color: var(--text) !important;
}

.privacy-content h3,
.terms-content h3 {
  color: rgba(232, 227, 213, 0.85) !important;
}

.privacy-content p,
.terms-content p,
.privacy-content ul li,
.terms-content ul li,
.privacy-content ol li,
.terms-content ol li {
  color: rgba(232, 227, 213, 0.65) !important;
}

.privacy-content a,
.terms-content a {
  color: var(--accent) !important;
}

/* Highlight box on dark background */
.highlight-box {
  background-color: var(--bg-raised) !important;
  border-left-color: var(--accent) !important;
  color: var(--text) !important;
}

.highlight-box p,
.highlight-box ol li {
  color: rgba(232, 227, 213, 0.75) !important;
}

/* Warning box on dark background */
.warning-box {
  background-color: var(--accent-sub) !important;
  border-color: rgba(255, 77, 18, 0.4) !important;
  color: var(--text) !important;
}

.warning-box p,
.warning-box ol li {
  color: rgba(232, 227, 213, 0.8) !important;
}

/* No-training badge on dark background */
.no-training-badge {
  background-color: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: var(--text) !important;
}

.no-training-badge svg {
  color: #10b981 !important;
}

/* ============================================================
   LOGO — nav and footer
   transparent-bg PNG; force own compositing layer so backdrop-filter
   on nav/footer doesn't swallow the semi-transparent orange square
   ============================================================ */
img[src*="microve-logos"] {
  flex-shrink: 0 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);          /* own GPU layer, avoids backdrop-filter bleed */
}