/* ── Suan Finance 2 — 3D logo (sf-logo.js bilan ishlaydi) ── */
.sf-logo { --size: 120px; --k: 1; position: relative; display: inline-flex; align-items: center; gap: calc(var(--size) * .14); flex: none; }
.sf-logo .mark { position: relative; width: var(--size); height: var(--size); perspective: calc(900px * var(--k)); flex: none; }
.sf-logo .tilt, .sf-logo .turn, .sf-logo .float, .sf-logo .stage, .sf-logo .layer { position: absolute; inset: 0; transform-style: preserve-3d; }
.sf-logo .tilt { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s ease-out; }
.sf-logo .turn { animation: sf-turn 8s cubic-bezier(.5, 0, .25, 1) infinite; }
.sf-logo .float { animation: sf-float 6s ease-in-out infinite; }
.sf-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; transform: translateZ(calc(var(--z) * 1px * var(--k))); }
.sf-logo .glint { stroke: #fff; stroke-width: 4; opacity: .9; stroke-dasharray: 90 910; animation: sf-glint 2.8s linear infinite; }
.sf-logo .ping { fill: none; stroke: #4ade80; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: sf-ping 2.8s ease-out infinite; }
.sf-logo .glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 197, 94, .35), transparent);
  filter: blur(calc(12px * var(--k))); animation: sf-breathe 4s ease-in-out infinite; }

/* Yozuv ("full" rejimi) */
.sf-logo .word { display: flex; flex-direction: column; line-height: 1; font-family: 'Arial Black', Arial, sans-serif; color: #fff; }
.sf-logo .w1 { display: flex; align-items: flex-start; font-size: calc(var(--size) * .42); font-weight: 900; letter-spacing: .02em; }
.sf-logo .w1 span { background: linear-gradient(100deg, #fff 0 40%, #bbf7d0 50%, #fff 60% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; filter: drop-shadow(0 calc(var(--size) * .02) 0 rgba(15, 23, 42, .55)); animation: sf-shine 6s ease-in-out infinite; }
.sf-logo .w1 b { font-size: .6em; color: #22c55e; margin-left: .08em; filter: drop-shadow(0 0 calc(var(--size) * .06) rgba(34, 197, 94, .7)); animation: sf-two 4s ease-in-out infinite; }
.sf-logo .w2 { font-family: Arial, sans-serif; font-weight: 400; font-size: calc(var(--size) * .18); letter-spacing: .38em; color: rgba(255, 255, 255, .5); margin-top: calc(var(--size) * .05); }

@keyframes sf-turn { 0%, 60% { transform: rotateY(0); } 80%, 100% { transform: rotateY(360deg); } }
@keyframes sf-float { 0%, 100% { transform: rotateY(-16deg) rotateX(6deg) translateY(0); } 50% { transform: rotateY(16deg) rotateX(-4deg) translateY(calc(-4px * var(--k))); } }
@keyframes sf-glint { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes sf-ping { 0%, 84% { opacity: 0; transform: scale(1); } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes sf-breathe { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes sf-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes sf-two { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--size) * -.03)); } }
@media (prefers-reduced-motion: reduce) {
  .sf-logo .turn, .sf-logo .float, .sf-logo .glint, .sf-logo .ping, .sf-logo .glow, .sf-logo .w1 span, .sf-logo .w1 b { animation: none; }
}