/* ================================================================
   Meili Machining — Brand design system (2026 logo refresh)
   Navy + blue from the logo, light-first industrial layout.
   Pages migrated so far: / and /supplier-information.
   ================================================================ */

:root {
  --navy: #102844;
  --navy-2: #16304F;
  --blue: #064BFA;
  --blue-hover: #003FD6;
  --blue-soft: #EAF0FD;
  --blue-on-dark: #8FB0FF;
  --ink: #0F1B2D;
  --mid: #5B6472;
  --dim: #8A929E;
  --line: #E3E7ED;
  --soft: #F4F6F9;
  --white: #FFFFFF;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  /* legacy names still read by nav.css mega menu */
  --text: var(--ink);
  --text-mid: var(--mid);
  --border: var(--line);
  --light: var(--soft);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 84px }
body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { max-width: 100%; display: block }
a { color: inherit }

/* ── Type ── */
.eyebrow { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: inline-block }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--blue-on-dark) }
.h-xl { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; font-size: clamp(38px, 5vw, 66px); color: var(--navy) }
.h-lg { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(30px, 3.6vw, 46px); color: var(--navy) }
.h-md { font-family: var(--font-display); font-weight: 650; letter-spacing: -.015em; line-height: 1.18; font-size: clamp(24px, 2.4vw, 32px); color: var(--navy) }
.on-dark .h-xl, .on-dark .h-lg, .on-dark .h-md { color: #fff }
.lead { font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.7; color: var(--mid) }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 15px 26px; border-radius: 6px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .18s, border-color .18s, color .18s }
.btn-primary { background: var(--blue); color: #fff }
.btn-primary:hover { background: var(--blue-hover) }
.btn-outline { background: #fff; color: var(--navy); border-color: #C9D1DC }
.btn-outline:hover { border-color: var(--navy) }
.btn-navy { background: var(--navy); color: #fff }
.btn-navy:hover { background: var(--navy-2) }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35) }
.btn-ghost:hover { border-color: #fff }
.arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none }

/* ── Layout ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 36px }
.section { padding: 104px 0 }
.section-soft { background: var(--soft) }
.section-navy { background: var(--navy); color: #fff }
.section-head { max-width: 740px; margin-bottom: 52px }
.section-head .eyebrow { margin-bottom: 16px }
.section-head p { font-size: 17px; color: var(--mid); margin-top: 16px; line-height: 1.7 }
.section-navy .section-head p { color: rgba(255,255,255,.72) }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 48px }
.head-row .section-head { margin-bottom: 0 }

/* ── Cookie banner & WhatsApp ── */
.cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999; max-width: 640px; margin: 0 auto; background: var(--navy); color: #fff; border-radius: 10px; padding: 18px 22px; box-shadow: 0 12px 40px rgba(15,37,68,.3); display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
.cookie-consent p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.8); flex: 1; min-width: 220px }
.cookie-consent a { color: var(--blue-on-dark); text-decoration: underline }
.cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0 }
.cookie-consent .btn { padding: 10px 18px; font-size: 13.5px }
.cookie-consent .btn-ghost { color: #fff }
.cookie-consent[hidden] { display: none }
.wa { position: fixed; bottom: 26px; right: 26px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(37,211,102,.35); transition: transform .2s }
.wa:hover { transform: scale(1.06) }

@media (max-width: 760px) {
  .wrap { padding: 0 16px }
  .section { padding: 64px 0 }
  .cookie-consent { left: 12px; right: 12px; bottom: 12px; padding: 16px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }