/* ===========================
   MODIFIX HIGH-CONTRAST THEME
   =========================== */

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg: #f5f7fb;            /* light page background */
  --text: #0e1628;          /* primary text (very dark) */
  --text-2: #1f2937;        /* body copy */
  --heading: #0b1120;       /* headings (almost black/navy) */
  --muted: #4b5563;         /* muted text */
  --border: #cbd5e1;        /* light border */
  --card: #ffffff;          /* cards / panels */
  --brand: #1d4ed8;         /* primary brand blue */
  --brand-strong: #153db0;  /* hover/strong blue */

  --dark: #0b1120;          /* dark section background */
  --dark-text: #ffffff;     /* text on dark sections */
  --dark-text-2: #e2e8f0;   /* softer light text */
}

html, body { height: 100%; }

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4 { color: var(--heading); line-height: 1.25; }
p, li { color: var(--text-2); }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout helper */
.container{ width: 90%; max-width: 1200px; margin: 0 auto; }

/* Header / Nav (dark header, light text) */
.site-header{
  background: var(--dark);
  color: var(--dark-text);
  position: sticky; top: 0; z-index: 50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
}
.logo{ display:flex; align-items:center; font-weight:800; font-size:1.1rem; letter-spacing:.12em; }
.logo img{ height:34px; }

.nav a{
  color: #dde7ff;
  margin-left: 1rem;
  font-size: .95rem;
}
.nav a:hover, .nav a.active{ color:#ffffff; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font-size:.95rem; cursor:pointer; white-space:nowrap; text-decoration:none;
}
.btn.primary{ background: var(--brand); color:#fff; font-weight:600; }
.btn.primary:hover{ background: var(--brand-strong); }
.btn.outline{ background:#fff; color:var(--heading); border-color: var(--border); }
.btn.outline:hover{ border-color: var(--heading); }

/* HERO (light background, dark text) */
.hero-ima{
  background: #eef2f9;      /* LIGHT – ensures dark text is readable */
  color: var(--text);
  padding: 4rem 0 3rem;
}
.hero-inner{ display:grid; gap:2.2rem; grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.hero-text h1{ font-size:2.6rem; margin-bottom:1rem; color:var(--heading); }
.hero-text p{ max-width:42rem; font-size:1.05rem; color: var(--text-2); }

.hero-panel{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 1rem;
  padding: 1.4rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.hero-tag{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.hero-panel ul{ margin-top:.7rem; padding-left:1.1rem; }
.hero-panel li{ color: var(--text-2); }

/* Generic strips/sections */
.strip{
  background: var(--dark);
  color: var(--dark-text);
  padding: 1rem 0;
  border-top: 1px solid #0a1021; border-bottom: 1px solid #0a1021;
}
.strip-inner{ text-align:center; }

/* Cards & grids (light cards with dark text) */
.grid-3{ display:grid; gap:1.4rem; }
@media (min-width: 768px){ .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:.9rem;
  padding:1.4rem;
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
}
.card h3{ color: var(--heading); margin-bottom:.5rem; }
.card p{ color: var(--text-2); }

/* Sections (light by default) */
.page-main{ padding-bottom: 3rem; }
.page-hero{
  background:#eaf0f8;  /* light */
  color: var(--text);
  padding: 2.2rem 0;
}
.page-hero h1{ color: var(--heading); }

/* Ecosystem / sectors (light) */
.ecosystem{ padding: 3rem 0 2.5rem; background: #fff; }
.sector-grid{ display:grid; gap:1.2rem; }
@media (min-width: 900px){ .sector-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sector-card{
  position:relative; overflow:hidden;
  background: var(--card); color: var(--text);
  border:1px solid var(--border); border-top:3px solid var(--brand);
  border-radius:.9rem; padding:1.2rem 1.3rem;
}
.sector-card h3{ color: var(--heading); margin-bottom:.35rem; }
.sector-card p{ color: var(--text-2); }
/* If you add background images, darken them so text stays readable */
.sector-card::before{ content:none; } /* remove light overlays that washed text */

/* Cross-tech (DARK section, enforce light text) */
.cross-tech{
  background: var(--dark);
  color: var(--dark-text);
  padding: 3rem 0;
}
.cross-grid{ display:grid; gap:1.2rem; margin-top:1rem; }
@media (min-width: 900px){ .cross-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cross-card{
  background:#111827;
  color: var(--dark-text-2);
  border:1px solid #1f2937;
  border-radius:.9rem; padding:1.3rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.cross-card h3{ color:#ffffff; }
.link-arrow{ color:#bfdbfe; text-decoration:none; }
.link-arrow:hover{ color:#e5efff; text-decoration:underline; }

/* Highlight banner (DARK) */
.highlight-banner{
  background:#0f172a; color: var(--dark-text);
  padding: 2.4rem 0;
}
.highlight-inner{ display:grid; gap:1.2rem; }
@media (min-width: 900px){ .highlight-inner{ grid-template-columns:3fr 2fr; align-items:center; } }
.highlight-label{ color:#c7d2fe; text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; margin-bottom:.4rem; }

/* Modifix Digital (light) */
.modifix-digital{ background:#f1f5f9; padding:3rem 0; }
.digital-inner{ display:grid; gap:1.4rem; }
@media (min-width: 900px){ .digital-inner{ grid-template-columns:3fr 2fr; } }
.bullet-list{ list-style:disc; padding-left:1.3rem; }

/* Efficiency block (light with strong text) */
.modifix-zero{ background:#e6eeff; padding:3rem 0; }
.zero-inner > p{ max-width:40rem; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.pill{ list-style:none; background: var(--brand); color:#fff; border-radius:999px; padding:.3rem .9rem; font-size:.8rem; }

/* Updates (light) */
.updates{ background:#fff; padding:3rem 0; }
.updates-grid{ display:grid; gap:1.3rem; margin-top:1.1rem; }
@media (min-width: 900px){ .updates-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.update-card{ background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:.9rem; padding:1.2rem; }

/* Contact */
.contact-grid{ display:grid; gap:2rem; padding:2.5rem 0; }
@media (min-width: 900px){ .contact-grid{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); } }

.contact-form label{ display:block; font-size:.92rem; margin-bottom:.8rem; color:var(--heading); }
.contact-form input, .contact-form textarea{
  width:100%; margin-top:.25rem; padding:.58rem .7rem;
  border-radius:.5rem; border:1px solid var(--border); font:inherit; color: var(--text);
  background:#fff;
}
.contact-form textarea{ resize:vertical; }
.form-note{ color: var(--muted); font-size:.85rem; margin-top:.4rem; }

.contact-details p{ margin-bottom:.4rem; color:var(--text-2); }

/* CTA (DARK) */
.cta{ background: var(--dark); color: var(--dark-text); padding:2.6rem 0; }
.cta-inner{ text-align:center; }
.cta-actions{ margin-top:1.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Footer (DARK) */
.site-footer{ background: var(--dark); color:#9ca3af; padding:1.2rem 0; }
.footer-inner{ text-align:center; font-size:.85rem; }

/* Responsive */
@media (max-width: 768px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-panel{ order:-1; }
  .nav a{ margin-left:.7rem; }
}