/* ============================================
   Sana Site — Clean Main Stylesheet
   ============================================ */
:root {
  --pink-400: #ec407a; --purple-400: #ab47bc; --purple-600: #7c4d8a;
  --text-primary: #4a345a; --text-muted: #b39ddb;
  --gradient-pink-purple: linear-gradient(135deg, #ec407a, #ab47bc);
  --gradient-bg: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 40%, #e8eaf6 100%);
  --font-display: 'Dancing Script', cursive;
  --font-body: 'Quicksand', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); min-height: 100vh; background: var(--gradient-bg); color: var(--text-primary); overflow-x: hidden; }

/* === NAV: Bottom tab bar (mobile), Top bar (desktop) === */
.mini-nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: 60px; z-index: 1000;
  display: flex; align-items: center; justify-content: space-around;
  background: linear-gradient(135deg, #ec407a, #ab47bc);
  border-top: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 -2px 20px rgba(233,30,99,0.2);
}
.mini-link {
  display: flex; align-items: center; justify-content: center; flex: 1; height: 100%;
  font-size: 1.6rem; text-decoration: none; color: rgba(255,255,255,0.6);
  transition: all 0.2s;
}
.mini-link.active { color: #fff; font-size: 1.8rem; }
.mini-link:active { background: rgba(255,255,255,0.15); }
body { padding-bottom: 80px; }

/* Desktop */
@media (min-width: 769px) {
  .mini-nav { top: 0; bottom: auto; height: 56px; }
  .mini-link { font-size: 1rem; gap: 6px; color: rgba(255,255,255,0.8); }
  .mini-link::after { content: attr(data-label); font-size: 0.85rem; font-weight: 600; }
  .mini-link.active { font-size: 1rem; background: rgba(255,255,255,0.15); border-radius: 50px; margin: 6px; padding: 0 16px; }
  body { padding-bottom: 0; padding-top: 66px; }
}

/* === Hub pages === */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 20px; }
.hub-card { padding: 24px 16px; border-radius: 20px; background: rgba(255,255,255,0.88); text-align: center; cursor: pointer; text-decoration: none; color: var(--text-primary); transition: all 0.3s; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 4px 16px rgba(233,30,99,0.06); }
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(233,30,99,0.12); }
.hub-card .emoji { font-size: 2.5rem; margin-bottom: 8px; }
.hub-card .name { font-weight: 600; font-size: .9rem; }
.hub-card .desc { font-size: .75rem; color: #b39ddb; margin-top: 4px; }

/* === Glass card === */
.glass-card { max-width: 700px; margin: 20px auto; background: rgba(255,255,255,0.88); backdrop-filter: blur(20px); border-radius: 32px; padding: 30px 24px; box-shadow: 0 20px 60px rgba(233,30,99,0.1); border: 1px solid rgba(255,255,255,0.5); }
.divider { width: 60px; height: 3px; background: var(--gradient-pink-purple); border-radius: 10px; margin: 0 auto 24px; }
.page-title { font-family: var(--font-display); font-size: 2rem; background: var(--gradient-pink-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; }

/* Footer */

.site-footer .footer-brand { font-family: var(--font-display); font-size: 1.2rem; background: var(--gradient-pink-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.site-footer .footer-stat { display: inline-block; margin: 8px 16px; }
.site-footer .footer-stat .num { font-size: 1.2rem; font-weight: 700; color: var(--purple-400); display: block; }
.site-footer .footer-stat .label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; }



/* === Home page styles === */
.home-decor { position: relative; }
.badge { display: inline-block; background: linear-gradient(135deg,#ec407a,#ab47bc); color: #fff; padding: 6px 20px; border-radius: 50px; font-size: .8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(233,30,99,0.3); }
h1 { font-family: 'Dancing Script', cursive; font-size: 3.2rem; background: linear-gradient(135deg,#e91e63,#9c27b0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; line-height: 1.2; }
.subtitle { font-size: 1.1rem; color: #7c4d8a; font-weight: 300; margin-bottom: 32px; letter-spacing: 2px; }
.divider { width: 60px; height: 3px; background: linear-gradient(90deg,#ec407a,#ab47bc); border-radius: 10px; margin: 0 auto 28px; transition: width .5s ease; }
.message { font-size: 1.1rem; color: #4a345a; line-height: 1.8; margin-bottom: 36px; font-weight: 300; max-width: 500px; margin-left: auto; margin-right: auto; }
.message .highlight { font-weight: 600; background: linear-gradient(135deg,#ec407a,#ab47bc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn { padding: 14px 36px; border: none; border-radius: 50px; font-family: 'Quicksand', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all .3s; position: relative; overflow: hidden; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: linear-gradient(135deg,#ec407a,#ab47bc); color: #fff; box-shadow: 0 4px 20px rgba(233,30,99,0.35); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(233,30,99,0.45); }
.btn-secondary { background: rgba(171,71,188,0.1); color: #7c4d8a; border: 1.5px solid rgba(171,71,188,0.25); }
.btn-secondary:hover { background: rgba(171,71,188,0.2); transform: translateY(-3px); }
.music-note { display: inline-block; font-size: 1.4rem; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.floating-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.burst-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }
.inline-message-area { margin-top: 24px; min-height: 0; }
.inline-msg { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 4px 20px rgba(233,30,99,0.1); border: 1px solid rgba(233,30,99,0.1); font-size: 1.1rem; line-height: 1.8; color: #4a345a; animation: fadeInMsg .5s ease; }
.msg-icon { font-size: 1.8rem; margin-bottom: 8px; }
@keyframes fadeInMsg { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }

@media (max-width: 600px) {
  h1 { font-size: 2.2rem; }
  .subtitle { font-size: .95rem; }
  .message { font-size: 1rem; }
  .btn { width: 100%; justify-content: center; padding: 12px 28px; }
  .buttons { flex-direction: column; }
}

/* Page sections */
.page-section { display: none; padding: 16px 16px 90px; animation: fadeIn .4s ease; }
.page-section.active { display: block; }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

.site-footer .footer-heart{color:#ec407a;display:inline-block;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}