/* =========================================================
   Integrate4me — Navy override
   Loaded AFTER assets/styles.css. Same DOM, recoloured so navy
   becomes the dominant brand, orange the secondary accent.
   ========================================================= */

:root {
  --navy:        #1B2D4E;
  --navy-deep:   #122140;
  --navy-soft:   #E8EDF6;
  --navy-tint:   #C8D3E6;
  --navy-line:   #2A3E66;
  --primary-soft: #E8EDF6;     /* repurpose to navy-soft */
  --primary-tint: #C8D3E6;
}

/* Eyebrows now read navy, with a small orange tick */
.eyebrow { color: var(--navy); }
.eyebrow::before { background: var(--navy); }
.eyebrow::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #E75134; margin-left: 4px;
}

/* Header — navy hairline */
.site-header { border-bottom: 1px solid var(--navy-tint); }
.nav-link[aria-current="page"] { color: var(--navy); }
.nav-link:hover { color: var(--navy); background: var(--navy-soft); }

/* Primary buttons turn navy; orange becomes a "secondary accent" */
.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 32px rgba(27, 45, 78, .28);
}
.btn-primary:hover { background: var(--navy-deep); }
.btn-secondary {
  border-color: var(--navy-tint);
  color: var(--navy);
}
.btn-secondary:hover { background: var(--navy-soft); border-color: var(--navy); }

/* In-text links — keep orange as the click signal */
.link { color: var(--navy); }
.link:hover { color: #E75134; }

/* ===================== HERO ===================== */
.hero {
  background: linear-gradient(180deg, #F4F7FC 0%, #FFFFFF 78%);
}
.hero::before {
  background:
    radial-gradient(ellipse 640px 420px at 86% 18%, rgba(27, 45, 78, 0.14), transparent 60%),
    radial-gradient(ellipse 520px 320px at 8% 88%, rgba(231, 81, 52, 0.07), transparent 60%);
}
.hero h1 em {
  color: var(--navy);
  background-image: linear-gradient(transparent 70%, rgba(231,81,52,.28) 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
}
.hero-meta .dot { background: var(--navy); box-shadow: 0 0 0 4px rgba(27,45,78,.12); }

/* Hub flips to navy; satellite cards get a navy border */
.node-card { border-color: var(--navy-tint); }
.node-card.is-hub {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 14px 36px rgba(27, 45, 78, .32);
}
.node-card .ni { background: var(--navy-soft); color: var(--navy); }
.node-card.is-hub .ni { background: rgba(255,255,255,.15); color: #fff; }
.node-diagram svg path[data-animate] { stroke: var(--navy); }

/* ===================== PAIN POINTS ===================== */
/* deepen the existing navy band so it feels intentional */
section.bg-soft[style*="27, 45, 78"] {
  background-color: var(--navy-deep) !important;
  background-image:
    radial-gradient(circle 600px at 80% 0%, rgba(231,81,52,.10), transparent 60%),
    radial-gradient(circle 500px at 0% 100%, rgba(255,255,255,.04), transparent 60%);
}
section.bg-soft[style*="27, 45, 78"] .eyebrow { color: #F0B8AB; }
section.bg-soft[style*="27, 45, 78"] .eyebrow::before { background: #E75134; }
section.bg-soft[style*="27, 45, 78"] .pain-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
section.bg-soft[style*="27, 45, 78"] .pain-card h3 { color: #fff; }
section.bg-soft[style*="27, 45, 78"] .pain-icon {
  background: rgba(231,81,52,.18);
  color: #FF9F86;
}

/* ===================== PHILOSOPHY ===================== */
.philosophy-diagram svg g { stroke: var(--navy) !important; opacity: .65 !important; }
.philosophy-core {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 18px 40px rgba(27,45,78,.26);
}
.philosophy-core .core-eyebrow { color: #F0B8AB; }
.philosophy-core .core-sub { color: rgba(255,255,255,.78); }
.satellite {
  border-color: var(--navy-tint);
  color: var(--navy);
}
.philosophy-points li strong { color: var(--navy); }
.philosophy-points li a { color: #E75134; }

/* ===================== 4 LAYERS ===================== */
.layer-card { border-color: var(--navy-tint); }
.layer-card:hover {
  border-color: var(--navy);
  box-shadow: 0 18px 40px rgba(27, 45, 78, .14);
}
.layer-num { color: var(--navy); }
.layer-icon { background: var(--navy-soft); color: var(--navy); }
.layer-card .link { color: var(--navy); }
.layer-card:hover .layer-icon { background: var(--navy); color: #fff; }

/* ===================== PROCESS ===================== */
.step-num { background: var(--navy); color: #fff; }
.step .badge { background: rgba(231,81,52,.12); color: #E75134; }

/* ===================== TOOLS / METRICS ===================== */
.tool-cell { border-color: var(--navy-tint); }
.tool-cell:hover { border-color: var(--navy); background: var(--navy-soft); }
.metric-num { color: var(--navy); }
.metric-num .unit { color: #E75134; }
.metric { border-color: var(--navy-tint); }

/* ===================== EXAMPLE PROJECT ===================== */
.case-feature {
  background: linear-gradient(135deg, #F4F7FC 0%, #FFFFFF 100%);
  border: 1px solid var(--navy-tint);
}
.case-tag { background: var(--navy-soft); color: var(--navy); }
.case-spec-label { color: var(--navy); }

/* Recolour the inline mini-workflow SVG (overrides inline fill/stroke) */
.case-visual svg rect[fill="#FDEEEA"] { fill: #E8EDF6 !important; }
.case-visual svg rect[stroke="#E75134"] { stroke: var(--navy) !important; }
.case-visual svg text[fill="#E75134"] { fill: var(--navy) !important; }
.case-visual svg g[stroke="#E75134"] { stroke: var(--navy) !important; }
.case-visual svg marker path { fill: var(--navy) !important; }

/* ===================== INSIGHTS ===================== */
.insight-card { border-color: var(--navy-tint); }
.insight-card:hover { border-color: var(--navy); }
.insight-meta { color: var(--navy); }
.insight-thumb .placeholder {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(255,255,255,.7);
}

/* ===================== ABOUT ===================== */
.about-signature > div:first-child {
  background: var(--navy) !important;
  color: #fff !important;
}
.about-photo .placeholder {
  background: linear-gradient(135deg, var(--navy-soft) 0%, var(--navy-tint) 100%);
  color: var(--navy);
}

/* ===================== FINAL CTA ===================== */
.final-cta { background: var(--navy-deep); color: #fff; }
.final-cta::before {
  background:
    radial-gradient(circle 480px at 90% 20%, rgba(231,81,52,0.18), transparent 60%),
    radial-gradient(circle 360px at 10% 80%, rgba(255,255,255,0.04), transparent 60%);
}
.final-cta h2 { color: #fff; }
.final-cta .lead { color: rgba(255,255,255,.78); }
.final-cta .btn-primary {
  background: #E75134;
  box-shadow: 0 16px 40px rgba(231,81,52,.34);
}
.final-cta .btn-primary:hover { background: #CC4427; }
.final-cta-phone { color: rgba(255,255,255,.85); }
.final-cta-phone:hover { color: #fff; }
.final-cta .eyebrow { color: #F0B8AB; }

/* Floating CTA on mobile */
.floating-cta { background: var(--navy); }

/* =========================================================
   Service-page chrome (.svc-hero, .pricing-box, .svc-steps,
   .crumbs, .persona, .checklist, .faq) — applies on the four
   diensten/* pages.
   ========================================================= */
.svc-hero {
  background: linear-gradient(180deg, #F4F7FC 0%, #FFFFFF 78%);
}
.svc-hero::before {
  background:
    radial-gradient(ellipse 620px 380px at 90% 15%, rgba(27, 45, 78, 0.14), transparent 60%),
    radial-gradient(ellipse 500px 300px at 10% 90%, rgba(231, 81, 52, 0.06), transparent 60%) !important;
}
.svc-hero h1 em { color: var(--navy); }
.crumbs a:hover { color: var(--navy); }

.persona-card { border-color: var(--navy-tint); }
.persona-card:hover { border-color: var(--navy); }
.persona-card .layer-icon,
.persona-card svg { color: var(--navy); }

.svc-steps li { border: 1px solid var(--navy-tint); }
.svc-steps li::before { color: var(--navy); }

.checklist svg { color: var(--navy) !important; }

.pricing-box {
  background: linear-gradient(135deg, #F4F7FC 0%, #FFFFFF 100%);
  border-color: var(--navy-tint);
}
.pricing-box .price { color: var(--navy); }

.faq summary:hover { color: var(--navy); }
.faq[open] summary,
.faq details[open] summary { color: var(--navy); }

/* Section header alignment on dark navy bands (used outside the
   pain-points selector above, e.g. on service pages with explicit
   navy-deep backgrounds) */
.section[style*="navy"] h2,
.section[style*="navy"] h3,
section.bg-navy h2,
section.bg-navy h3 { color: #fff; }