/* Global font & base colors */
body { 
  font-family: 'Inter', sans-serif; 
  background:#3b0764; 
  color:#f0eaff; 
}

/* Handwritten font utility */
.font-hand { font-family: 'Caveat', cursive; }

/* Animated gradient background (apply with bodyClass: animated-gradient) */
@keyframes gradientShift { 
  0%,100%{background-position:0% 50%;} 
  50%{background-position:100% 50%;} 
}
.animated-gradient {
  background:linear-gradient(135deg,#4c1d95,#3b0764,#581c87,#2e1065);
  background-size:300% 300%;
  animation:gradientShift 15s ease infinite;
}

/* Success message animation */
.success-message { opacity: 0; transform: translateY(20px); transition: all 600ms ease-out; }
.success-message.show { opacity: 1; transform: translateY(0); }

/* Contact page layout helpers */
.contact-grid { display:grid; gap:3rem; }
@media (min-width: 1024px){ .contact-grid { grid-template-columns: 1fr 1fr; align-items:start; } }
.glass-card { background:rgba(88,28,135,0.55); border:2px solid rgba(168,85,247,0.35); box-shadow:0 10px 40px -10px rgba(0,0,0,0.5); backdrop-filter:blur(18px); }
.soft-gradient-text { background:linear-gradient(90deg,#fff,#e9d5ff,#d8b4fe); -webkit-background-clip:text; background-clip:text; color:transparent; }
.map-wrapper { position:relative; overflow:hidden; border-radius:1rem; border:2px solid rgba(168,85,247,0.4); box-shadow:0 8px 30px -8px rgba(0,0,0,0.45); }
.map-wrapper iframe { width:100%; height:100%; position:absolute; inset:0; }
.map-wrapper .leaflet-container { width:100%; height:100%; position:absolute; inset:0; }
.map-aspect { aspect-ratio:16/10; }
@supports not (aspect-ratio:16/10) { .map-aspect { padding-top:62.5%; } }
.info-badge { font-size:.65rem; letter-spacing:.1em; font-weight:700; text-transform:uppercase; background:rgba(255,255,255,0.08); padding:.4rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,0.15); }
.story p { line-height:1.65; }
.story strong { color:#f5d0fe; font-weight:600; }

/* Header styles */
#nav-menu { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
#nav-trigger .line { transition: all 0.3s ease-in-out; transform-origin: center; }
#nav-trigger.is-active .line-1 { transform: translateY(7px) rotate(45deg); }
#nav-trigger.is-active .line-2 { opacity: 0; }
#nav-trigger.is-active .line-3 { transform: translateY(-7px) rotate(-45deg); }
#typno-logo, .typno-logo { font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.5rem; color: #f0eaff; text-shadow: 0 0 15px rgba(255,255,255,0.3); letter-spacing: -2px; transition: transform 0.2s ease-out; }
#typno-logo:hover, .typno-logo:hover { transform: rotate(-3deg) scale(1.05); }