/* iNuba site shell — shared nav + footer + lang toggle + mobile menu.
   Source of truth: extracted from index.html (canonical), with cross-page
   drift resolved in favour of the most-recent and most-feature-complete
   variant. Per-page CSS (hero, product-grid, legal-main, contact-form,
   etc.) stays inline per page.
   Cookie banner styles live in /assets/css/cookie-consent.css. */

/* ── Nav ─────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(247,246,242,0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(0,0,0,.07);
  transition: box-shadow .2s;
}
/* Full-width teal accent line */
.nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #1a9980 25%, #64FFE1 50%, #1a9980 75%, transparent 100%);
}
.nav.scrolled { box-shadow: 0 1px 24px rgba(0,0,0,.07); }
.nav-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 2.5rem; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo img {
  height: 24px; width: auto; display: block;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.nav-logo:hover img { transform: scale(1.04); opacity: .8; }

/* Nav links + sliding pill */
.nav-links-wrap { position: relative; display: flex; align-items: center; }
.nav-pill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 28px; border-radius: 9999px;
  background: rgba(0,0,0,.06);
  transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1), opacity .18s;
  pointer-events: none; opacity: 0;
}
.nav-links { display: flex; align-items: center; gap: .2rem; list-style: none; }
.nav-links a {
  position: relative; z-index: 1;
  font-size: .8125rem; color: #999; text-decoration: none; font-weight: 400;
  letter-spacing: .005em; transition: color .15s; white-space: nowrap;
  padding: .38rem .9rem; border-radius: 9999px; display: block;
}
.nav-links a:hover { color: #111; }
.nav-links a.active { color: #111; font-weight: 500; }
/* Teal underline on active */
.nav-links a.active::after {
  content: '';
  position: absolute; bottom: 0; left: .9rem; right: .9rem;
  height: 1.5px; border-radius: 9999px;
  background: linear-gradient(90deg, #1a9980, #64FFE1);
  animation: shellUnderlineIn .3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes shellUnderlineIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Right area */
.nav-right { display: flex; align-items: center; gap: .375rem; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .5rem;
}
.hamburger span {
  display: block; width: 20px; height: 1.5px; background: #444; border-radius: 2px;
  transition: all .25s cubic-bezier(.4,0,.2,1); transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mob-menu {
  position: absolute; top: 56px; left: .75rem; right: .75rem;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,.07); border-radius: 18px; padding: .5rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);
  transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.34,1.2,.64,1), opacity .18s ease;
}
.mob-menu.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.mob-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; font-size: .875rem; color: #555;
  text-decoration: none; border-radius: 10px; transition: background .12s, color .12s;
}
.mob-menu a:hover { background: #F7F6F2; color: #111; }
.mob-menu a.active { color: #111; font-weight: 500; }
.mob-menu a.active::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #1a9980; flex-shrink: 0;
}
.mob-menu .mob-divider { height: 1px; background: #F0EFE9; margin: .3rem .5rem; }
.mob-menu .mob-cta { padding: .3rem .3rem 0; }
.mob-menu .mob-cta .btn-dark {
  display: block; text-align: center; border-radius: 12px;
  padding: .75rem 1.25rem; font-size: .875rem;
  background: linear-gradient(135deg, #0d3d33 0%, #1DB89D 50%, #0d3d33 100%);
  background-size: 200% 100%;
  animation: nav-shimmer 3s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(29,184,157,.35), 0 2px 6px rgba(0,0,0,.18);
  color: #fff;
}

/* Hardware desktop dropdown */
.has-drop { position: relative; display: flex; align-items: center; gap: 1px; }
.drop-caret {
  background: none; border: none; padding: 2px 6px 2px 2px; cursor: pointer;
  color: #888; display: flex; align-items: center; transition: color .2s;
}
.drop-caret:hover { color: #111; }
.drop-caret svg { transition: transform .22s ease; }
.has-drop.open .drop-caret svg { transform: rotate(180deg); }
.hw-drop {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(255,255,255,.98); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,.09); border-radius: 14px;
  box-shadow: 0 8px 36px rgba(0,0,0,.13); padding: 6px;
  min-width: 168px; list-style: none; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 500;
}
.has-drop.open .hw-drop { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Bridge to prevent gap losing hover */
.hw-drop::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.hw-drop li a {
  display: block; padding: 7px 14px; border-radius: 9px;
  font-size: .82rem; color: #333; text-decoration: none;
  white-space: nowrap; transition: background .13s;
}
.hw-drop li a:hover { background: #f5f5f3; color: #111; }
.hw-drop-sep { border-top: 1px solid rgba(0,0,0,.07); margin: 5px 0; }
.hw-drop-all a { color: #1DB89D !important; font-weight: 500; }

/* Hardware mobile sub-menu */
.mob-hw-wrap { display: flex; flex-direction: column; }
.mob-hw-row { display: flex; align-items: center; }
.mob-hw-row > a { flex: 1; }
.mob-hw-toggle {
  background: none; border: none; border-left: 1px solid rgba(0,0,0,.13);
  cursor: pointer; padding: 5px 10px 5px 12px; margin-left: 6px; color: #888;
  flex-shrink: 0; border-radius: 0 8px 8px 0;
  transition: background .15s, color .15s;
}
.mob-hw-toggle:hover { background: rgba(0,0,0,.05); color: #444; }
.mob-hw-toggle svg { transition: transform .22s ease; display: block; }
.mob-hw-wrap.open .mob-hw-toggle svg { transform: rotate(180deg); }
.mob-hw-sub {
  display: none; flex-direction: column; gap: 0; margin: 6px 0 8px;
  border-radius: 12px; background: #F5F4EF;
  border: 1px solid rgba(0,0,0,.07); overflow: hidden;
}
.mob-hw-sub.open { display: flex; }
.mob-hw-sub a {
  display: flex; align-items: center; gap: .65rem;
  font-size: .84rem; font-weight: 500; color: #333;
  padding: 11px 14px; text-decoration: none; border: none; background: none;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background .12s, color .12s;
}
.mob-hw-sub a:last-child { border-bottom: none; }
.mob-hw-sub a::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #ccc; flex-shrink: 0; transition: background .15s;
}
.mob-hw-sub a::after {
  content: '›'; font-size: 1.2rem; color: #bbb; margin-left: auto;
  line-height: 1; font-weight: 300;
}
.mob-hw-sub a:hover { background: rgba(0,0,0,.04); color: #111; }
.mob-hw-sub a:hover::before { background: #1DB89D; }
.mob-hw-sub .mob-hw-all {
  justify-content: center; color: #1DB89D !important;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; background: rgba(29,184,157,.06);
  border-top: 1px solid rgba(29,184,157,.12); border-bottom: none;
}
.mob-hw-sub .mob-hw-all::before, .mob-hw-sub .mob-hw-all::after { display: none; }

/* ── Lang toggle ─────────────────────────────── */
.lang-toggle {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .75rem; color: #999; background: none; border: none;
  cursor: pointer; padding: .3rem .5rem; border-radius: 9999px;
  font-family: inherit; font-weight: 500; letter-spacing: .04em;
  transition: color .15s, background .15s;
}
.lang-toggle:hover { background: rgba(0,0,0,.05); color: #111; }
.lang-toggle .lt-sep { color: #ddd; margin: 0 .1rem; }
.lang-toggle .lt-active { color: #111; }
.mob-lang {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .5rem 1rem; font-size: .8125rem;
  color: #888; cursor: pointer;
}
.mob-lang button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .8125rem; color: #888; padding: .25rem .5rem; border-radius: 6px;
  transition: background .12s, color .12s;
}
.mob-lang button.active { color: #111; font-weight: 600; }
.mob-lang button:hover { background: #F7F6F2; color: #111; }
.mob-lang .lt-sep { color: #ddd; }

/* Nav CTA — shimmering primary button (used as desktop CTA in nav-right) */
.btn-nav-cta {
  display: inline-flex; align-items: center;
  padding: .48rem 1.25rem; border-radius: 9999px;
  background: linear-gradient(135deg, #0d3d33 0%, #1DB89D 50%, #0d3d33 100%);
  background-size: 200% 100%;
  animation: nav-shimmer 3s ease-in-out infinite;
  color: #fff; font-size: .8rem; font-weight: 500;
  text-decoration: none; font-family: inherit;
  letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 0 14px rgba(29,184,157,.35), 0 2px 6px rgba(0,0,0,.18);
  transition: box-shadow .2s;
}
.btn-nav-cta:hover {
  box-shadow: 0 0 28px rgba(29,184,157,.6), 0 4px 14px rgba(0,0,0,.22);
}
@keyframes nav-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* Responsive — collapse desktop nav into hamburger */
@media (max-width: 768px) {
  .nav-links-wrap { display: none; }
  .nav-right .lang-toggle { display: none; }
  .hamburger { display: flex; }
  .btn-nav-cta { padding: .38rem .85rem; font-size: .72rem; }
}

/* ── Footer ──────────────────────────────────── */
.site-footer { background: #0D0D0D; padding: 5rem 0 0; }
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 max(1.5rem, 5vw);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem; padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-logo { font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: .5rem; }
.footer-tagline { font-size: .78rem; color: #64FFE1; margin-bottom: 1.5rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { color: rgba(255,255,255,.35); transition: color .15s; }
.footer-social a:hover { color: #64FFE1; }
.footer-col h4 {
  font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #64FFE1; margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .65rem; }
.footer-col ul a {
  font-size: .825rem; color: rgba(255,255,255,.5);
  text-decoration: none; transition: color .15s;
}
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding: 1.5rem max(1.5rem, 5vw);
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; color: rgba(255,255,255,.2);
}
.footer-bottom a { color: rgba(255,255,255,.35); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}