.fonts-nav {
            position: sticky;
            top: 0;
            z-index: 999;

            background:
                rgba(255,
                    255,
                    255,
                    .92);

            border-bottom:
                1px solid #e2e8f0;

            backdrop-filter:
                blur(15px);
        }

        .fonts-nav-container {
            max-width: 1280px;
            margin: auto;

            min-height: 72px;

            padding:
                0 24px;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .fonts-logo {
            display: flex;
            align-items: center;
            gap: 10px;

            text-decoration: none;
            color: #111827;
        }

        .fonts-logo img {
            width: 42px;
            height: 42px;
            object-fit: contain;
        }

        .fonts-logo-text {
            font-family:
                'Sora',
                sans-serif;

            font-size: 22px;
            font-weight: 800;

            color:
                #1a56db;
        }

        .fonts-nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .fonts-nav-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;

            padding:
                10px 15px;

            border-radius:
                10px;

            color:
                #475569;

            text-decoration:
                none;

            font-size:
                14px;

            font-weight:
                600;

            transition:
                .2s ease;
        }

        .fonts-nav-link:hover {
            background:
                #eff6ff;
            color:
                #1d4ed8;
        }

        .fonts-nav-link.primary {
            background:
                #1a56db;

            color:
                #fff;
        }

        .fonts-nav-link.primary:hover {
            background:
                #1d4ed8;
        }

        /*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */



.fonts-nav-container{position:relative}
.fonts-nav-links{display:flex;align-items:center;gap:10px}
.fonts-menu-toggle{display:none}
.fonts-logo-text{color:#6550ff;white-space:nowrap}
@media(max-width:768px){
 .fonts-nav-container{min-height:80px;gap:12px}
 .fonts-logo{gap:12px;flex-shrink:0}
 .fonts-logo img{width:42px;height:42px}
 .fonts-logo-text{font-size:20px}
 .fonts-nav-actions{gap:12px}
 .fonts-nav-actions>.fonts-nav-link.primary{order:0;flex-shrink:0;width:46px;height:46px;padding:0;justify-content:center;border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#7655ff,#4822e6);color:#fff;box-shadow:0 0 0 3px #eee9ff,0 4px 12px rgba(91,53,220,.3);box-sizing:border-box}
 .fonts-nav-actions>.fonts-nav-link.primary i{font-size:30px}
 .fonts-nav-actions>.home-language-switch{order:1}
 .fonts-nav-links{order:2}
 .fonts-menu-toggle{order:3;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid #ddd1ff;border-radius:9px;background:linear-gradient(145deg,#faf8ff,#e8dfff);color:#475569;font-size:26px;box-shadow:inset 0 1px 1px #fff,0 3px 8px rgba(112,72,221,.16);cursor:pointer}
 .fonts-menu-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
 .fonts-nav-links{display:none;position:absolute;top:calc(100% + 8px);right:15px;left:15px;padding:10px;background:#fff;border:1px solid #dce4f0;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.12);flex-direction:column;align-items:stretch;gap:6px}
 .fonts-nav-links.is-open{display:flex}
 .fonts-nav-links .fonts-nav-link{display:flex;width:100%;height:auto;min-height:44px;padding:10px 14px;justify-content:flex-start;box-sizing:border-box}
 .fonts-nav-links .fonts-nav-link span{display:inline}
 .fonts-nav-actions>.fonts-nav-link.primary span{display:none}
}
@media(max-width:480px){
 .fonts-nav-container{gap:8px;padding:0 12px}
 .fonts-nav-actions{gap:9px}
 .fonts-nav-link{width:34px;height:38px}
 .fonts-logo{gap:8px}
 .fonts-logo img{width:36px;height:36px}
 .fonts-logo-text{font-size:18px}
}
@media(max-width:359px){
 .fonts-nav-container{padding:0 8px;gap:5px}
 .fonts-nav-actions{gap:6px}
 .fonts-logo{gap:5px}
 .fonts-logo img{width:28px;height:28px}
 .fonts-logo-text{font-size:14px}
 .fonts-nav-actions>.fonts-nav-link.primary,.fonts-menu-toggle{width:38px;height:38px}
 .fonts-nav-actions>.fonts-nav-link.primary i{font-size:26px}
 .fonts-nav-actions .home-language-switch summary{padding:4px;min-height:30px}
}

.fonts-logo-text{color:#7052ff!important}.fonts-nav{position:sticky;top:0;z-index:100}.fonts-nav-container{gap:16px}