/* ==========================================================================
   EMNC page light - brings the inner pages onto the same visual system as the
   homepage and products.html.

   Every inner page (pricing, blog, cases, saft, e-invoicing, cbam, e-customs,
   e-cmr) shares the same .page-hero markup, so one override converts them all
   from the old navy hero to the current light one.

   Loaded after the page's own <style>, so it wins without editing each file.
   ========================================================================== */

/* ── nav ─────────────────────────────────────────────────────────────────── */
/* the inner pages hard-code a navy bar; with a light hero underneath it has to
   become the same glass bar the rest of the site uses */
nav {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
nav .nav-logo-text { color: var(--ink); }
nav .nav-logo-sub { color: var(--goldink); }
nav .nav-logo img { filter: none; }
nav .nav-links a, nav .nav-trigger { color: rgba(0,0,0,0.6); }
nav .nav-links a:hover, nav .nav-trigger:hover,
nav .nav-links a.active, nav .nav-trigger.active { color: var(--goldink); }
nav .nav-cta { background: var(--ink); color: #fff; }
nav .nav-cta:hover { background: #000; }
nav .nav-hamburger span { background: var(--ink); }
nav .lang-current {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.16); color: rgba(0,0,0,0.72);
}
/* the dropdown panel keeps its own white card styling from emnc-core.css */
nav .nav-drop a.nd { color: var(--ink) !important; }

/* ── hero: navy -> light ─────────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
  padding: 132px 40px 68px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
/* the grid texture and gold glow only read on a dark ground */
.page-hero-grid, .page-hero-glow { display: none; }

.page-hero-inner { max-width: 1120px; }
.page-hero-tag-line { background: var(--goldink); }
.page-hero-tag-text { color: var(--goldink); }

.page-hero h1 {
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 700;
  letter-spacing: -0.028em; line-height: 1.07;
  color: var(--ink); margin-bottom: 20px;
}
.page-hero h1 span { color: var(--goldink); }

.page-hero-sub {
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 400; line-height: 1.55;
  color: var(--ink2); max-width: 620px;
}
.page-hero-sub strong { color: var(--ink); font-weight: 600; }

/* the stat box that sits beside some hero headlines */
.hero-count-box {
  border: 1px solid var(--card-line); background: #fff;
  border-radius: 16px; padding: 22px 30px; box-shadow: var(--card-sh);
}
.hero-count-num { color: var(--goldink); font-weight: 700; letter-spacing: -0.03em; }
.hero-count-lbl { color: var(--ink2); }

/* ── section headings across the inner pages ─────────────────────────────── */
.section-title, .section-title.light { color: var(--ink); letter-spacing: -0.025em; }
.section-title span { color: var(--goldink); }
.section-desc, .section-sub { color: var(--ink2); }
.section-label, .section-label-text { color: var(--goldink); }
.section-label-line { background: var(--goldink); }

/* ── buttons inherited from the old dark system ──────────────────────────── */
.btn-primary, .btn-gold, .cta-btn {
  border-radius: 980px; text-transform: none;
  letter-spacing: -0.01em; font-weight: 500; font-size: 15px;
}
.btn-outline, .btn-ghost {
  text-transform: none; letter-spacing: -0.01em; font-weight: 500; font-size: 15px;
}

/* ── breadcrumbs / back links ────────────────────────────────────────────── */
.breadcrumb, .back-link { color: var(--ink2); }
.breadcrumb a, .back-link a, a.back-link { color: var(--goldink); }
