/* ══════════════════════════════════════════════════════════════
   LEM GLOBAL — components.css
   Header, buttons, cards, lists, forms, footer.
   Component vocabulary mirrors the HubPal product landing.
   ══════════════════════════════════════════════════════════════ */

/* ── HEADER ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 10px; }

/* The LEM logo is a wide lockup, not a square glyph — size it by height and
   let the width follow so the artwork is never cropped or distorted. On the
   white header its own pale backdrop blends in, so it needs no framing. */
.brand-mark {
  height: 40px;
  width: auto;
  border-radius: 6px;
  flex-shrink: 0;
}

.brand-word {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-light) 35%, var(--orange) 70%, var(--lilac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.brand-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
  margin-top: 1px;
}

.main-nav { display: flex; gap: 26px; }

.main-nav a {
  position: relative;
  color: var(--text-soft);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s;
}

.main-nav a:hover { color: var(--navy); }
.main-nav a.is-active { color: var(--navy); font-weight: 600; }

.main-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.header-actions { display: flex; align-items: center; gap: 10px; }


/* ── LANGUAGE SWITCH ───────────────────────────────────────── */
.lang-switch {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}

.lang-switch button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-mute);
  padding: 6px 11px;
  transition: background 0.15s, color 0.15s;
}

.lang-switch button:hover { color: var(--navy); }
.lang-switch button.active { background: var(--navy); color: #fff; }


/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-lg    { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover {
  background: var(--navy-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-accent {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(240, 122, 31, 0.35);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(240, 122, 31, 0.45);
}

/* For use on navy surfaces. */
.btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Same button on a light surface. */
.on-light .btn-outline,
.btn-outline.dark { color: var(--navy); border-color: var(--navy); }
.on-light .btn-outline:hover,
.btn-outline.dark:hover { background: var(--navy); color: #fff; }

.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--bg); }

.btn-arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }


/* ── BURGER + DRAWER ───────────────────────────────────────── */
.burger {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 16px; height: 1.8px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }

.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--surface);
  padding: 28px var(--gutter);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  overflow-y: auto;
}

.drawer.is-open { transform: translateX(0); }

.drawer-links { display: flex; flex-direction: column; margin-bottom: 26px; }

.drawer-links a {
  padding: 15px 2px;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.22s var(--ease);
}

.drawer-links a:hover { padding-left: 10px; }

.drawer-actions { display: flex; flex-direction: column; gap: 12px; }


/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card h3 { margin: 16px 0 8px; }
.card p  { font-size: 14px; color: var(--text-soft); }

.card-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.card-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.icon-navy   { background: #e5edf7;           color: var(--navy); }
.icon-orange { background: var(--orange-soft); color: var(--orange-dark); }
.icon-lilac  { background: var(--lilac-soft);  color: var(--lilac); }

/* Card variant for navy sections. */
.sec-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
  height: 100%;
}

.sec-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-4px); }
.sec-card svg { width: 30px; height: 30px; color: var(--orange); fill: none; stroke: currentColor; stroke-width: 1.8; }
.sec-card h3 { margin: 14px 0 8px; font-size: 16px; }
.sec-card p  { font-size: 13.5px; color: #b6c6dc; }


/* ── CHECK LIST ────────────────────────────────────────────── */
.check-list { margin-top: 20px; }

.check-list li {
  position: relative;
  padding: 8px 0 8px 34px;
  font-size: 15px;
  color: var(--text);
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background-color: var(--orange-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d96710' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.section-dark .check-list li { color: #dbe5f2; }


/* ── CHIPS, TAGS, DOTS ─────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px rgba(4, 18, 42, 0.35);
}

.chip-float { position: absolute; animation: float 5s ease-in-out infinite; }
.chip-a { top: 5%;    right: -2%; }
.chip-b { bottom: 4%; left: -3%; animation-delay: 2.2s; }

/* The chips deliberately hang outside the mockup on desktop. On narrow
   screens that overhang lands past the viewport edge, so tuck them in. */
@media (max-width: 620px) {
  .chip-float { font-size: 11.5px; padding: 8px 12px; }
  .chip-a { right: 0; }
  .chip-b { left: 0; }
}

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.ok     { background: var(--ok); }
.dot.orange { background: var(--orange); }
.dot.navy   { background: var(--navy); }

/* Live indicator with an expanding halo. */
.dot-live { position: relative; }
.dot-live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.2s var(--ease) infinite;
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

.tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-soft);
  white-space: nowrap;
}

.section-dark .tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #dbe5f2;
}


/* ── TRUST STRIP ───────────────────────────────────────────── */
.trust-list {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 13.5px;
  color: #9db4d1;
}

.trust-list li { display: flex; align-items: center; gap: 7px; }

.trust-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}


/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(36px, 6vw, 76px);
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee img {
  height: clamp(28px, 4vw, 40px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.25s, opacity 0.25s;
}

.marquee img:hover { filter: grayscale(0); opacity: 1; }


/* ── FORM ──────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.field label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-mute);
}

.req { color: var(--orange-dark); }
.opt { text-transform: none; letter-spacing: 0; }

.field input,
.field textarea {
  font: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(26, 85, 152, 0.15);
}

.field textarea { min-height: 120px; }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.form-note { font-size: 12.5px; color: var(--text-mute); }

/* Honeypot: off-screen, invisible to humans, present for bots. */
.hp { position: absolute; left: -9999px; top: -9999px; }

.form-msg {
  border-radius: 10px;
  font-size: 13.5px;
  padding: 11px 15px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.form-msg--ok  { background: #e2f5ec; color: #147a4d; border: 1px solid #b6e3cd; }
.form-msg--err { background: #fdeaea; color: var(--err); border: 1px solid #f3c2c2; }


/* ── BACK TO TOP ───────────────────────────────────────────── */
/* Hidden until ui.js adds .is-shown past the fold. visibility (not display)
   so it can transition, and so it leaves the tab order while hidden. */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s var(--ease),
              visibility 0.25s, background 0.2s;
}

.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }

.to-top:hover {
  background: var(--orange);
  box-shadow: 0 10px 26px rgba(240, 122, 31, 0.4);
}

.to-top svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep clear of the drawer while it is open. */
.drawer.is-open ~ .to-top { display: none; }


/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-deep);
  color: #b6c6dc;
  padding: clamp(44px, 6vw, 64px) 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(26px, 4vw, 52px);
  margin-bottom: 40px;
}

/* Same reasoning as .logo-plate: white card so the artwork's pale backdrop
   blends rather than sitting as a grey block on the navy footer. */
.footer-logo {
  width: 190px;
  height: auto;
  display: block;
  background: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.footer-brand p { font-size: 13.5px; color: #8fa5c2; max-width: 36ch; }

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #6f87a8;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: #cbd8e8;
  transition: color 0.15s, transform 0.2s var(--ease);
}

.footer-col a:hover { color: var(--orange); transform: translateX(3px); }

.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
  color: #6f87a8;
}


/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .main-nav,
  .header-actions .lang-switch,
  .header-actions .btn { display: none; }

  .burger { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .brand-word { font-size: 17px; }
}