/* NAV */
nav { position: fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.25rem 4rem; background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:0.5px solid var(--glass-border); transition:padding 0.3s, background 0.3s, box-shadow 0.3s; }
nav.scrolled { padding:0.8rem 4rem; background:rgba(255, 255, 255, 0.95); box-shadow:0 4px 20px rgba(0,0,0,0.05); }
.nav-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; }
.nav-logo img { width:48px; height:48px; object-fit:contain; }
.nav-wordmark { font-family:var(--sans); font-size:13px; letter-spacing:0.18em; font-weight:500; color:var(--ink); text-transform:uppercase; }
.nav-wordmark span { color:var(--teal); font-weight: 600; }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { text-decoration:none; font-size:13px; letter-spacing:0.06em; color:var(--ink-mid); font-weight:500; transition:color 0.2s, transform 0.2s; display: inline-block; }
.nav-links a:hover { color:var(--teal); transform: translateY(-2px); }
.nav-cta { font-family:var(--sans); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); background: var(--teal); border:0.5px solid var(--teal); padding:0.6rem 1.5rem; border-radius: 4px; text-decoration:none; font-weight:500; transition:all 0.3s ease; box-shadow: 0 4px 14px rgba(29,158,117,0.3); }
.nav-cta:hover { background:var(--teal-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,158,117,0.4); }
.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; border:0; background:transparent; padding:0.5rem; border-radius:4px; }
.menu-toggle span { width: 25px; height: 2px; background: var(--ink); transition: 0.3s; }

/* FOOTER */
footer { background:var(--ink-mid); padding:4rem 4rem 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 2rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 3rem; margin-bottom: 2rem; }
.footer-logo { display:flex; align-items:center; gap:0.8rem; }
.footer-logo img { width:40px; height:40px; object-fit:contain; filter:brightness(0) invert(1) opacity(0.8); }
.footer-text { font-family:var(--sans); font-size:18px; font-weight: 500; color:var(--white); }
.footer-links { display:flex; gap:2.5rem; list-style:none; flex-wrap: wrap; }
.footer-links a { font-size:12px; letter-spacing:0.1em; color:rgba(255,255,255,0.5); text-decoration:none; text-transform:uppercase; font-family:var(--mono); transition:color 0.3s; }
.footer-links a:hover { color:var(--teal-light); }
.footer-bottom { text-align: center; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.3); letter-spacing: 0.1em; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes rotate-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:0.3; transform: translateX(-50%) scale(1); } 50% { opacity:1; transform: translateX(-50%) scale(1.5); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* LAYOUT RESPONSIVE */
@media (max-width: 768px) {
  nav { padding: 1rem 2rem; }
  nav.scrolled { padding: 0.8rem 2rem; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); padding: 2rem; text-align: center; border-bottom: 1px solid var(--glass-border); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
  .nav-links.active { display: flex; }
  .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}