/* ===== Animated logo ===== */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.logo:hover { color: var(--navy); }
.logo-mark { width: 52px; height: 52px; flex: none; transition: transform .35s; }
.logo:hover .logo-mark { transform: rotate(-4deg) scale(1.06); }
.logo-mark .bar { transform-box: fill-box; transform-origin: bottom; animation: bar-rise 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
.logo-mark .b1 { animation-delay: .05s; } .logo-mark .b2 { animation-delay: .2s; }
.logo-mark .b3 { animation-delay: .35s; } .logo-mark .b4 { animation-delay: .5s; }
.logo-mark .trend { stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw 1.2s .7s ease forwards; }
.logo-mark .rupee { animation: pop .6s 1.1s both; transform-box: fill-box; transform-origin: center; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.logo-name span { color: var(--blue); }
.logo-name em { font-style: normal; color: var(--orange); }
.logo-name b { display: inline-block; animation: name-in .7s both; }
.logo-tag { font-size: .66rem; color: var(--muted); font-weight: 500; letter-spacing: .02em; margin-top: 3px; }
.logo.light { color: #fff; } .logo.light .logo-name span { color: #fff; } .logo.light .logo-tag { color: #b8c6d6; }
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes name-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-mark .bar, .logo-mark .trend, .logo-mark .rupee, .logo-name b { animation: none; stroke-dashoffset: 0; } }