/* NIO Elegant Footer – v1.4.0 (columns + CTA + legal + tagline) */
:root{
  --nioftr-logo-size: 72px;
}

/* Base */
.nioftr-footer{
  background: linear-gradient(180deg, var(--ftr-bg-start, #10283c), var(--ftr-bg-end, #173247));
  color: var(--ftr-ink, #ECF6FF);
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  z-index: 2;
  position: relative;
}

/* 3-column layout */
.nioftr-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) minmax(220px, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
@media (max-width: 920px){
  .nioftr-inner{ grid-template-columns: 1fr; text-align:center; }
}

/* Brand */
.nioftr-brand{ display:flex; flex-direction:column; gap:10px; }
@media (max-width: 920px){ .nioftr-brand{ align-items:center; } }
.nioftr-logo{
  height: var(--nioftr-logo-size); width:auto; display:block;
  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,.30))
    drop-shadow(0 0 10px color-mix(in srgb, var(--ftr-accent, #00BF63) 26%, transparent));
  border-radius: 6px;
}
.nioftr-tagline{
  margin: 2px 0 0;
  font-size: .95rem;
  color: color-mix(in srgb, var(--ftr-ink, #ECF6FF) 88%, #000);
  max-width: 36ch;
}
@media (max-width:920px){ .nioftr-tagline{ max-width: 46ch; } }

/* Nav */
.nioftr-nav ul{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 14px;
}
@media (max-width: 920px){
  .nioftr-nav ul{ grid-template-columns: repeat(3, minmax(0,1fr)); justify-items:center; }
}
@media (max-width: 560px){
  .nioftr-nav ul{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.nioftr-nav a{
  color: var(--ftr-ink, #ECF6FF);
  text-decoration:none;
  padding:8px 10px;
  border-radius: 10px;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nioftr-nav a:hover{
  color: var(--ftr-ink-hover, #FFFFFF);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.2);
  transform: translateY(-1px);
}

/* Actions */
.nioftr-actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
@media (max-width: 920px){ .nioftr-actions{ align-items:center; } }

.nioftr-cta{
  display:inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  color: #0f1f1a;
  background: var(--ftr-accent, #00BF63);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ftr-accent, #00BF63) 35%, transparent);
  border: 2px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.nioftr-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ftr-accent, #00BF63) 45%, transparent);
  border-color: rgba(255,255,255,.30);
  color: #0a1612;
}

/* Legal */
.nioftr-legal{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  color: color-mix(in srgb, var(--ftr-ink, #ECF6FF) 80%, #000);
}
.nioftr-legal a{
  color: inherit; text-decoration:none; padding: 4px 6px; border-radius: 8px;
  transition: color .18s ease, background .18s ease;
}
.nioftr-legal a:hover{
  color: var(--ftr-ink-hover, #FFFFFF);
  background: rgba(255,255,255,.08);
}
.nioftr-legal .sep{ opacity: .6; font-size: .95em; }

/* Copyright */
.nioftr-copy{
  text-align:center;
  font-size: 12px;
  letter-spacing: .2px;
  padding: 12px 12px 16px;
  color: color-mix(in srgb, var(--ftr-ink, #ECF6FF) 80%, #000);
  border-top: 1px solid rgba(255,255,255,.08);
}