* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: hsl(194, 100%, 46%);
  --secondary: hsl(189, 100%, 23%);
  --secondary-foreground: hsl(0, 0%, 100%);
}
body { font-family: 'Inter', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; }

.footer {
  background: var(--secondary); color: var(--secondary-foreground); padding: 4rem 2rem 2rem;
  position: relative;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
}
.footer-container { max-width: 1280px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 3rem; margin-bottom: 3rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer-brand-icon {
  width: 2.75rem; height: 2.75rem; background: linear-gradient(135deg, var(--primary), hsl(194, 100%, 60%));
  border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-size: 1.375rem; box-shadow: 0 4px 20px hsla(194, 100%, 46%, 0.4);
}
.footer-brand-text { font-size: 1.375rem; font-weight: 800; font-family: 'Outfit', sans-serif; }
.footer h4 { font-weight: 700; margin-bottom: 1.25rem; font-size: 1.0625rem; letter-spacing: 0.02em; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.75rem; }
.footer a {
  color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.9375rem;
  transition: all 0.3s ease; display: inline-block; position: relative;
}
.footer a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
  background: var(--primary); transition: width 0.3s ease;
}
.footer a:hover { color: var(--primary); transform: translateX(4px); }
.footer a:hover::after { width: 100%; }
.footer-bottom {
  padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}