{"id":3643,"date":"2026-05-19T06:38:34","date_gmt":"2026-05-19T06:38:34","guid":{"rendered":"https:\/\/fontib.com\/?page_id=3643"},"modified":"2026-05-20T08:09:21","modified_gmt":"2026-05-20T08:09:21","slug":"home","status":"publish","type":"page","link":"https:\/\/fontib.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<!-- <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/unpkg.com\/boxicons@2.1.4\/css\/boxicons.min.css\" rel=\"stylesheet\"> -->\r\n\r\n<style>\r\n    :root {\r\n        --fontib-home-primary: #003EA4;\r\n        --fontib-home-secondary: #185cc9;\r\n        --fontib-home-btn-gradient: linear-gradient(90deg, rgb(0, 62, 164), rgb(24, 92, 201));\r\n        --fontib-home-hero-bg: linear-gradient(135deg, rgb(244, 247, 255) 0%, rgb(238, 253, 248) 100%);\r\n        --fontib-home-text-dark: #1a1a1a;\r\n        --fontib-home-text-muted: #5f6b7a;\r\n        --fontib-home-white: #ffffff;\r\n        --fontib-home-light-gray: #f8f9fc;\r\n        --fontib-home-border: #e2e8f0;\r\n        --fontib-home-glow: rgba(0, 62, 164, 0.15);\r\n        --fontib-home-font: 'Inter', sans-serif;\r\n    }\r\n\r\n    \/* 1. Hero Section *\/\r\n    .fontib-home-hero {\r\n        background: linear-gradient(135deg, #f4f7ff 0%, #e8f0fe 30%, #f0f7ff 60%, #f8f9fc 100%);\r\n        padding: 120px 0 100px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        min-height: 90vh;\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-home-hero::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -200px;\r\n        right: -200px;\r\n        width: 800px;\r\n        height: 800px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.08) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        z-index: 0;\r\n    }\r\n\r\n    .fontib-home-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -150px;\r\n        left: -150px;\r\n        width: 600px;\r\n        height: 600px;\r\n        background: radial-gradient(circle, rgba(24, 92, 201, 0.06) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        z-index: 0;\r\n    }\r\n\r\n    .fontib-home-hero-grid {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-home-hero-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 8px 20px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        color: var(--fontib-home-primary);\r\n        border-radius: 50px;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        margin-bottom: 24px;\r\n        border: 1px solid rgba(0, 62, 164, 0.12);\r\n        box-shadow: 0 4px 16px rgba(0, 62, 164, 0.06);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-home-hero-badge i {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .fontib-home-hero h1 {\r\n        font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n        font-weight: 800;\r\n        color: var(--fontib-home-text-dark);\r\n        line-height: 1.15;\r\n        margin-bottom: 24px;\r\n        letter-spacing: -0.02em;\r\n    }\r\n\r\n    .fontib-home-hero h1 span {\r\n        background: var(--fontib-home-btn-gradient);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-home-hero h1 span::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 2px;\r\n        left: 0;\r\n        right: 0;\r\n        height: 8px;\r\n        background: rgba(0, 62, 164, 0.1);\r\n        border-radius: 4px;\r\n        z-index: -1;\r\n    }\r\n\r\n    .fontib-home-hero p {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-home-text-muted);\r\n        margin-bottom: 36px;\r\n        max-width: 520px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .fontib-home-hero-buttons {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 16px;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .fontib-home-btn-primary {\r\n        background: var(--fontib-home-btn-gradient);\r\n        color: var(--fontib-home-white);\r\n        border: none;\r\n        padding: 16px 36px;\r\n        border-radius: 12px;\r\n        font-weight: 700;\r\n        font-size: 15px;\r\n        transition: all 0.3s ease;\r\n        box-shadow: 0 6px 24px rgba(0, 62, 164, 0.25);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .fontib-home-btn-primary::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.1));\r\n        transform: translateX(-100%);\r\n        transition: transform 0.6s ease;\r\n    }\r\n\r\n    .fontib-home-btn-primary:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 10px 36px rgba(0, 62, 164, 0.35);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-btn-primary:hover::before {\r\n        transform: translateX(100%);\r\n    }\r\n\r\n    .fontib-home-btn-outline {\r\n        background: rgba(255, 255, 255, 0.6);\r\n        backdrop-filter: blur(8px);\r\n        -webkit-backdrop-filter: blur(8px);\r\n        color: var(--fontib-home-primary);\r\n        border: 2px solid rgba(0, 62, 164, 0.15);\r\n        padding: 14px 34px;\r\n        border-radius: 12px;\r\n        font-weight: 700;\r\n        font-size: 15px;\r\n        transition: all 0.3s ease;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .fontib-home-btn-outline:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 8px 28px rgba(0, 62, 164, 0.2);\r\n    }\r\n\r\n    .fontib-home-hero-stats {\r\n        display: flex;\r\n        gap: 32px;\r\n    }\r\n\r\n    .fontib-home-hero-stat {\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-home-hero-stat-number {\r\n        font-size: 1.8rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-home-primary);\r\n        line-height: 1;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-home-hero-stat-label {\r\n        font-size: 12px;\r\n        color: var(--fontib-home-text-muted);\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    \/* Builder Mock UI *\/\r\n    .fontib-home-builder-mockup {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-home-builder-window {\r\n        background: rgba(255, 255, 255, 0.7);\r\n        backdrop-filter: blur(24px);\r\n        -webkit-backdrop-filter: blur(24px);\r\n        border-radius: 24px;\r\n        border: 1px solid rgba(255, 255, 255, 0.9);\r\n        box-shadow: 0 24px 64px rgba(0, 62, 164, 0.1), 0 8px 24px rgba(0, 62, 164, 0.05);\r\n        overflow: hidden;\r\n        position: relative;\r\n        transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .fontib-home-builder-window:hover {\r\n        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-home-builder-titlebar {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 16px 20px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border-bottom: 1px solid rgba(0, 62, 164, 0.06);\r\n        gap: 12px;\r\n    }\r\n\r\n    .fontib-home-builder-dots {\r\n        display: flex;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-home-builder-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-home-builder-dot-red {\r\n        background: #ff5f57;\r\n    }\r\n\r\n    .fontib-home-builder-dot-yellow {\r\n        background: #ffbd2e;\r\n    }\r\n\r\n    .fontib-home-builder-dot-green {\r\n        background: #28c840;\r\n    }\r\n\r\n    .fontib-home-builder-titlebar-text {\r\n        flex: 1;\r\n        text-align: center;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--fontib-home-text-muted);\r\n    }\r\n\r\n    .fontib-home-builder-toolbar {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 12px 20px;\r\n        background: rgba(248, 249, 252, 0.8);\r\n        border-bottom: 1px solid rgba(0, 62, 164, 0.06);\r\n        gap: 8px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .fontib-home-builder-tool-btn {\r\n        padding: 8px 12px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid rgba(0, 62, 164, 0.08);\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n        color: var(--fontib-home-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-home-builder-tool-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-builder-tool-btn.active {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-builder-tool-separator {\r\n        width: 1px;\r\n        height: 24px;\r\n        background: rgba(0, 62, 164, 0.1);\r\n        margin: 0 4px;\r\n    }\r\n\r\n    .fontib-home-builder-input-area {\r\n        padding: 24px 20px;\r\n        background: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .fontib-home-builder-input-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .fontib-home-builder-text-input {\r\n        width: 100%;\r\n        padding: 14px 18px !important;\r\n        background: var(--fontib-home-white);\r\n        border: 2px solid rgba(0, 62, 164, 0.08) !important;\r\n        border-radius: 12px;\r\n        font-size: 16px;\r\n        color: var(--fontib-home-text-dark) !important;\r\n        font-family: var(--fontib-home-font);\r\n        outline: none;\r\n        transition: all 0.3s ease;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-home-builder-text-input:focus {\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 0 0 4px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-home-builder-preview-area {\r\n        padding: 24px 20px;\r\n        background: rgba(248, 249, 252, 0.5);\r\n        border-top: 1px solid rgba(0, 62, 164, 0.06);\r\n    }\r\n\r\n    .fontib-home-builder-preview-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .fontib-home-builder-preview-text {\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-dark);\r\n        line-height: 1.4;\r\n        margin-bottom: 16px;\r\n        min-height: 60px;\r\n    }\r\n\r\n    .fontib-home-builder-style-chips {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-home-builder-chip {\r\n        padding: 6px 14px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid rgba(0, 62, 164, 0.1);\r\n        border-radius: 50px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--fontib-home-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-home-builder-chip:hover,\r\n    .fontib-home-builder-chip.active {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-builder-footer {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 14px 20px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border-top: 1px solid rgba(0, 62, 164, 0.06);\r\n    }\r\n\r\n    .fontib-home-builder-copy-btn {\r\n        padding: 8px 20px;\r\n        background: var(--fontib-home-btn-gradient);\r\n        color: var(--fontib-home-white);\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-builder-copy-btn:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 4px 16px rgba(0, 62, 164, 0.25);\r\n    }\r\n\r\n    .fontib-home-builder-char-count {\r\n        font-size: 12px;\r\n        color: var(--fontib-home-text-muted);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge {\r\n        position: absolute;\r\n        padding: 10px 16px;\r\n        background: rgba(255, 255, 255, 0.9);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border-radius: 12px;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-primary);\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.12);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        z-index: 2;\r\n        animation: fontib-home-float 3s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge.badge-top {\r\n        top: -20px;\r\n        right: -30px;\r\n        animation-delay: 0s;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge.badge-bottom {\r\n        bottom: 40px;\r\n        left: -40px;\r\n        animation-delay: 1.5s;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge i {\r\n        font-size: 18px;\r\n    }\r\n\r\n    @keyframes fontib-home-float {\r\n        0%, 100% {\r\n            transform: translateY(0);\r\n        }\r\n        50% {\r\n            transform: translateY(-10px);\r\n        }\r\n    }\r\n\r\n    \/* 2. Logo Marquee Slider *\/\r\n    .fontib-home-logo-marquee {\r\n        padding: 60px 0 50px;\r\n        background: var(--fontib-home-white);\r\n        border-bottom: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-marquee-heading {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .fontib-home-marquee-heading h3 {\r\n        font-size: 1.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-muted);\r\n        \/* text-transform: uppercase; *\/\r\n        letter-spacing: 2px;\r\n        margin: 0;\r\n    }\r\n\r\n    .fontib-home-marquee-heading h3 span {\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-marquee-wrapper {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        overflow: hidden;\r\n        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);\r\n        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);\r\n    }\r\n\r\n    .fontib-home-marquee-track {\r\n        display: flex;\r\n        width: max-content;\r\n        animation: fontib-home-marquee-scroll 30s linear infinite;\r\n    }\r\n\r\n    .fontib-home-marquee-track:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    .fontib-home-marquee-group {\r\n        display: flex;\r\n        gap: 40px;\r\n        align-items: center;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .fontib-home-marquee-item {\r\n        flex-shrink: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        height: 40px;\r\n        padding: 8px 16px;\r\n        background: rgba(248, 249, 252, 0.8);\r\n        border-radius: 8px;\r\n        border: none;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-marquee-item:hover {\r\n        background: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 4px 16px rgba(0, 62, 164, 0.1);\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .fontib-home-marquee-item a {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-decoration: none;\r\n        color: inherit;\r\n    }\r\n\r\n    .fontib-home-marquee-item img {\r\n        max-height: 24px;\r\n        max-width: 120px;\r\n        width: auto;\r\n        object-fit: contain;\r\n        filter: grayscale(100%);\r\n        opacity: 0.6;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-marquee-item:hover img {\r\n        filter: grayscale(0%);\r\n        opacity: 1;\r\n    }\r\n\r\n    @keyframes fontib-home-marquee-scroll {\r\n        0% {\r\n            transform: translateX(0);\r\n        }\r\n        100% {\r\n            transform: translateX(-50%);\r\n        }\r\n    }\r\n\r\n    @keyframes fontib-home-marquee-scroll-reverse {\r\n        0% {\r\n            transform: translateX(-50%);\r\n        }\r\n        100% {\r\n            transform: translateX(0);\r\n        }\r\n    }\r\n\r\n    .fontib-home-marquee-track-reverse {\r\n        display: flex;\r\n        width: max-content;\r\n        animation: fontib-home-marquee-scroll-reverse 30s linear infinite;\r\n    }\r\n\r\n    .fontib-home-marquee-track-reverse:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    \/* 3. Tool Preview *\/\r\n    .fontib-home-preview {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-light-gray);\r\n    }\r\n\r\n    .fontib-home-section-title {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-dark);\r\n        margin-bottom: 60px;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-home-preview-input-box {\r\n        background: var(--fontib-home-white);\r\n        padding: 40px;\r\n        border-radius: 20px;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-home-style-filters {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        margin-top: 25px;\r\n    }\r\n\r\n    .fontib-home-filter-btn {\r\n        background: var(--fontib-home-light-gray);\r\n        border: 1px solid var(--fontib-home-border);\r\n        color: var(--fontib-home-text-muted);\r\n        padding: 8px 20px;\r\n        border-radius: 50px;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-home-filter-btn.active,\r\n    .fontib-home-filter-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-output-card {\r\n        background: var(--fontib-home-white);\r\n        padding: 20px;\r\n        border-radius: 16px;\r\n        margin-bottom: 20px;\r\n        border: 1px solid var(--fontib-home-border);\r\n        transition: all 0.3s ease;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-home-output-card:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\r\n        border-color: var(--fontib-home-secondary);\r\n    }\r\n\r\n    .fontib-home-output-text {\r\n        font-size: 1.2rem;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-copy-btn {\r\n        background: var(--fontib-home-light-gray);\r\n        border: none;\r\n        padding: 8px 16px;\r\n        border-radius: 6px;\r\n        color: var(--fontib-home-primary);\r\n        font-weight: 600;\r\n        font-size: 14px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-home-copy-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    \/* 4. Feature Grid *\/\r\n    .fontib-home-features {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-feature-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 45px 40px;\r\n        border-radius: 16px;\r\n        height: 100%;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid transparent;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-home-feature-card:hover {\r\n        background: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-border);\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);\r\n        transform: translateY(-5px);\r\n    }\r\n\r\n    .fontib-home-feature-icon {\r\n        width: 90px;\r\n        height: 90px;\r\n        margin: 0 auto 25px;\r\n        background: linear-gradient(135deg, var(--fontib-home-primary), var(--fontib-home-secondary));\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-white);\r\n        font-size: 36px;\r\n        box-shadow: 0 10px 30px rgba(0, 62, 164, 0.25);\r\n    }\r\n\r\n    .fontib-home-feature-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.25rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-feature-card p {\r\n        color: var(--fontib-home-text-muted);\r\n        font-size: 1.05rem;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* 5. How It Works *\/\r\n    .fontib-home-how-it-works {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-step-card {\r\n        text-align: center;\r\n        position: relative;\r\n        padding: 40px 30px;\r\n        background: var(--fontib-home-white);\r\n        border-radius: 20px;\r\n        border: 1px solid var(--fontib-home-border);\r\n        transition: all 0.4s ease;\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-home-step-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 20px 50px rgba(0, 62, 164, 0.12);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-step-icon {\r\n        width: 90px;\r\n        height: 90px;\r\n        margin: 0 auto 25px;\r\n        background: linear-gradient(135deg, var(--fontib-home-primary), var(--fontib-home-secondary));\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-white);\r\n        font-size: 36px;\r\n        box-shadow: 0 10px 30px rgba(0, 62, 164, 0.25);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-home-step-badge {\r\n        position: absolute;\r\n        top: -8px;\r\n        right: -8px;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: var(--fontib-home-white);\r\n        border: 2px solid var(--fontib-home-primary);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-step-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.2rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-step-card p {\r\n        color: var(--fontib-home-text-muted);\r\n        font-size: 0.95rem;\r\n        margin: 0 auto;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* 6. Popular Styles *\/\r\n    .fontib-home-popular-styles {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-style-showcase-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 25px;\r\n        border-radius: 12px;\r\n        text-align: center;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid transparent;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .fontib-home-style-showcase-card:hover {\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 10px 25px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-home-style-preview-text {\r\n        font-size: 1.5rem;\r\n        margin: 20px 0;\r\n        color: var(--fontib-home-text-dark);\r\n        min-height: 60px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-home-style-name {\r\n        font-weight: 700;\r\n        margin-bottom: 10px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-try-style-btn {\r\n        background: transparent;\r\n        color: var(--fontib-home-primary);\r\n        border: 1px solid var(--fontib-home-primary);\r\n        padding: 8px 20px;\r\n        border-radius: 6px;\r\n        font-weight: 600;\r\n        font-size: 14px;\r\n        transition: all 0.2s ease;\r\n        width: 100%;\r\n    }\r\n\r\n    .fontib-home-try-style-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    \/* 7. Benefits *\/\r\n    .fontib-home-benefits {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-hero-bg);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-home-benefit-item {\r\n        margin-bottom: 30px;\r\n        display: flex;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .fontib-home-benefit-icon {\r\n        min-width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-home-white);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-right: 20px;\r\n        color: var(--fontib-home-primary);\r\n        font-size: 24px;\r\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .fontib-home-benefit-text h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-benefit-text p {\r\n        color: var(--fontib-home-text-muted);\r\n        margin: 0;\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .fontib-home-3d-object {\r\n        background: var(--fontib-home-white);\r\n        \/* height: 400px; *\/\r\n        border-radius: 24px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 30px 60px rgba(0, 62, 164, 0.1);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-home-3d-object::before {\r\n        content: 'Aa';\r\n        font-size: 12rem;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.05);\r\n        position: absolute;\r\n    }\r\n\r\n    \/* 8. Categories *\/\r\n    .fontib-home-categories {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-category-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 30px;\r\n        border-radius: 16px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid transparent;\r\n        height: 100%;\r\n\/*         cursor: pointer; *\/\r\n    }\r\n\r\n    .fontib-home-category-card:hover {\r\n        background: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    .fontib-home-category-card h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-home-text-dark);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .fontib-home-category-card p {\r\n        color: var(--fontib-home-text-muted);\r\n        margin: 0;\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .fontib-home-category-arrow {\r\n        color: var(--fontib-home-primary);\r\n        font-size: 24px;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-category-card:hover .fontib-home-category-arrow {\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    \/* 9. Comparison *\/\r\n    .fontib-home-comparison {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-light-gray);\r\n    }\r\n\r\n    .fontib-home-comparison-table {\r\n        background: var(--fontib-home-white);\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);\r\n    }\r\n\r\n    .fontib-home-comparison-table thead th {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        padding: 20px;\r\n        font-weight: 600;\r\n        border: none;\r\n    }\r\n\r\n    .fontib-home-comparison-table tbody td {\r\n        padding: 20px;\r\n        border-bottom: 1px solid var(--fontib-home-border);\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-comparison-table .bg-highlight {\r\n        background: rgba(0, 62, 164, 0.05);\r\n        font-weight: 600;\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    \/* 10. Testimonials *\/\r\n    .fontib-home-testimonials {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-testimonial-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 35px;\r\n        border-radius: 16px;\r\n        height: 100%;\r\n        border: 1px solid transparent;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-testimonial-card:hover {\r\n        border-color: var(--fontib-home-border);\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .fontib-home-testimonial-text {\r\n        font-style: italic;\r\n        color: var(--fontib-home-text-muted);\r\n        margin-bottom: 25px;\r\n        font-size: 1.05rem;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .fontib-home-testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-home-author-avatar {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-home-primary);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-white);\r\n        font-weight: 700;\r\n        font-size: 20px;\r\n        margin-right: 15px;\r\n    }\r\n\r\n    .fontib-home-author-info h6 {\r\n        font-weight: 700;\r\n        margin-bottom: 2px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-author-info span {\r\n        color: var(--fontib-home-text-muted);\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    \/* 11. Blog *\/\r\n    .fontib-home-blog {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-light-gray);\r\n    }\r\n\r\n    .fontib-home-blog-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 36px;\r\n    }\r\n\r\n    .fontib-home-blog-card {\r\n        display: block;\r\n        text-decoration: none;\r\n        color: inherit;\r\n        background: var(--fontib-home-white);\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        transition: all 0.4s ease;\r\n        border: 1px solid var(--fontib-home-border);\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);\r\n        cursor: pointer;\r\n    }\r\n\r\n    .fontib-home-blog-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 20px 50px rgba(0, 62, 164, 0.12);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-blog-card-img {\r\n        width: 100%;\r\n        display: block;\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .fontib-home-blog-card:hover .fontib-home-blog-card-img {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .fontib-home-blog-card-body {\r\n        padding: 25px 32px 10px;\r\n        border-top: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-blog-card-category {\r\n        display: inline-block;\r\n        padding: 8px 18px;\r\n        background: rgba(0, 62, 164, 0.08);\r\n        color: var(--fontib-home-primary);\r\n        border-radius: 50px;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        letter-spacing: 0.5px;\r\n        text-transform: uppercase;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .fontib-home-blog-card h4 {\r\n        font-size: 1.35rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-dark);\r\n        margin-bottom: 16px;\r\n        line-height: 1.4;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-blog-card:hover h4 {\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-blog-card p {\r\n        font-size: 1rem;\r\n        color: var(--fontib-home-text-muted);\r\n        line-height: 1.75;\r\n        margin-bottom: 22px;\r\n    }\r\n\r\n\r\n\r\n    @media (max-width: 991px) {\r\n        .fontib-home-blog-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-home-blog-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    \/* 12. FAQ *\/\r\n    .fontib-home-faq {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-accordion-item {\r\n        background: var(--fontib-home-white);\r\n        border: none;\r\n        border-radius: 16px !important;\r\n        margin-bottom: 20px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.4s ease;\r\n        border: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-accordion-item:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.12);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-accordion-button {\r\n        font-weight: 600;\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-home-text-dark);\r\n        padding: 24px 30px;\r\n        text-align: left;\r\n        border: none !important;\r\n        background: var(--fontib-home-white);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        width: 100%;\r\n        position: relative;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed) {\r\n        color: var(--fontib-home-primary);\r\n        background: var(--fontib-home-white);\r\n        border-bottom: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-accordion-button::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        right: 30px;\r\n        top: 50%;\r\n        transform: translateY(-50%) rotate(0deg);\r\n        width: 16px;\r\n        height: 16px;\r\n        background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23003EA4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n        background-size: contain;\r\n        background-repeat: no-repeat;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed)::after {\r\n        transform: translateY(-50%) rotate(180deg);\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed) .accordion-title-icon {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-accordion-body {\r\n        padding: 0 30px 24px 30px;\r\n        color: var(--fontib-home-text-muted);\r\n        line-height: 1.7;\r\n        font-size: 0.95rem;\r\n        border-top: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-accordion-item h2 {\r\n        margin: 0;\r\n        font-size: 0;\r\n    }\r\n\r\n    .accordion-title {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        flex: 1;\r\n    }\r\n\r\n    .accordion-title-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n        background: var(--fontib-home-light-gray);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-primary);\r\n        font-size: 18px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-home-wrapper {\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-home-wrapper-wide {\r\n        width: 100%;\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 0 24px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-home-wrapper-narrow {\r\n        width: 100%;\r\n        max-width: 900px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    @media (max-width: 991px) {\r\n        .fontib-home-wrapper,\r\n        .fontib-home-wrapper-wide,\r\n        .fontib-home-wrapper-narrow {\r\n            padding: 0 16px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-home-wrapper,\r\n        .fontib-home-wrapper-wide,\r\n        .fontib-home-wrapper-narrow {\r\n            padding: 0 12px;\r\n        }\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed) {\r\n        color: var(--fontib-home-primary);\r\n        background: rgba(0, 62, 164, 0.03);\r\n    }\r\n\r\n    .fontib-home-accordion-button::after {\r\n        background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23003EA4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n    }\r\n\r\n    \/* 12. Final CTA *\/\r\n    .fontib-home-final-cta {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-hero-bg);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-home-final-cta-card {\r\n        background: rgba(255, 255, 255, 0.8);\r\n        backdrop-filter: blur(20px);\r\n        padding: 80px 60px;\r\n        border-radius: 30px;\r\n        text-align: center;\r\n        box-shadow: 0 20px 60px rgba(0, 62, 164, 0.1);\r\n        border: 1px solid rgba(255, 255, 255, 0.9);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-home-final-cta-card h2 {\r\n        font-size: 2.8rem;\r\n        font-weight: 700;\r\n        margin-bottom: 20px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-final-cta-card p {\r\n        font-size: 1.15rem;\r\n        color: var(--fontib-home-text-muted);\r\n        max-width: 600px;\r\n        margin: 0 auto 40px;\r\n    }\r\n\r\n    .fontib-home-floating-letters {\r\n        position: absolute;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.05);\r\n        z-index: 0;\r\n        user-select: none;\r\n    }\r\n\r\n    @media (max-width: 991px) {\r\n        .fontib-home-hero {\r\n            padding: 80px 0 60px;\r\n            min-height: auto;\r\n        }\r\n\r\n        .fontib-home-hero h1 {\r\n            font-size: 2.2rem;\r\n        }\r\n\r\n        .fontib-home-hero p {\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .fontib-home-hero-buttons {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-home-hero-stats {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-home-builder-window {\r\n            transform: none;\r\n            margin-top: 40px;\r\n        }\r\n\r\n        .fontib-home-builder-floating-badge {\r\n            display: none;\r\n        }\r\n\r\n        .fontib-home-final-cta-card {\r\n            padding: 50px 30px;\r\n        }\r\n\r\n        .fontib-home-final-cta-card h2 {\r\n            font-size: 2.2rem;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- 1. Hero Section -->\r\n<!-- <section class=\"fontib-home-hero\">\r\n    <div class=\"fontib-home-wrapper fontib-home-hero-grid\">\r\n        <div class=\"row align-items-center\">\r\n            <div class=\"col-lg-6\" data-aos=\"fade-right\">\r\n                <span class=\"fontib-home-hero-badge\">\r\n                    <i class='bx bx-bolt'><\/i> Smart Font Builder for Creators\r\n                <\/span>\r\n                <h1>Build Fonts for <span>Social Media<\/span>, Branding, and Creative Text<\/h1>\r\n                <p>Create stylish, unique, and copy-ready fonts using a simple online font builder designed for creators, brands, and digital projects.<\/p>\r\n                <div class=\"fontib-home-hero-buttons\">\r\n                    <a href=\"#\" class=\"fontib-home-btn-primary\">\r\n                        Start Building Fonts <i class='bx bx-right-arrow-alt'><\/i>\r\n                    <\/a>\r\n                    <a href=\"#\" class=\"fontib-home-btn-outline\">\r\n                        <i class='bx bx-grid-alt'><\/i> Explore Font Styles\r\n                    <\/a>\r\n                <\/div>\r\n                <div class=\"fontib-home-hero-stats\">\r\n                    <div class=\"fontib-home-hero-stat\">\r\n                        <div class=\"fontib-home-hero-stat-number\">500+<\/div>\r\n                        <div class=\"fontib-home-hero-stat-label\">Font Styles<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-hero-stat\">\r\n                        <div class=\"fontib-home-hero-stat-number\">50K+<\/div>\r\n                        <div class=\"fontib-home-hero-stat-label\">Active Users<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-hero-stat\">\r\n                        <div class=\"fontib-home-hero-stat-number\">10M+<\/div>\r\n                        <div class=\"fontib-home-hero-stat-label\">Fonts Generated<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6 fontib-home-builder-mockup\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-home-builder-window\">\r\n                    <div class=\"fontib-home-builder-titlebar\">\r\n                        <div class=\"fontib-home-builder-dots\">\r\n                            <span class=\"fontib-home-builder-dot fontib-home-builder-dot-red\"><\/span>\r\n                            <span class=\"fontib-home-builder-dot fontib-home-builder-dot-yellow\"><\/span>\r\n                            <span class=\"fontib-home-builder-dot fontib-home-builder-dot-green\"><\/span>\r\n                        <\/div>\r\n                        <span class=\"fontib-home-builder-titlebar-text\">Fontib Builder<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-toolbar\">\r\n                        <div class=\"fontib-home-builder-tool-btn active\" title=\"Bold\"><i class='bx bx-bold'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Italic\"><i class='bx bx-italic'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Underline\"><i class='bx bx-underline'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Align Left\"><i class='bx bx-align-left'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Align Center\"><i class='bx bx-align-middle'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Align Right\"><i class='bx bx-align-right'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Copy\"><i class='bx bx-copy'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Download\"><i class='bx bx-download'><\/i><\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-input-area\">\r\n                        <div class=\"fontib-home-builder-input-label\">Type your text<\/div>\r\n                        <input type=\"text\" class=\"fontib-home-builder-text-input\" id=\"fontibBuilderInput\" placeholder=\"Hello World...\" value=\"Hello World!\">\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-preview-area\">\r\n                        <div class=\"fontib-home-builder-preview-label\">Preview<\/div>\r\n                        <div class=\"fontib-home-builder-preview-text\" id=\"fontibBuilderPreview\">\ud835\udc07\ud835\udc1e\ud835\udc25\ud835\udc25\ud835\udc28 \ud835\udc16\ud835\udc28\ud835\udc2b\ud835\udc25\ud835\udc1d!<\/div>\r\n                        <div class=\"fontib-home-builder-style-chips\">\r\n                            <span class=\"fontib-home-builder-chip active\" data-style=\"bold\">Bold<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"italic\">Italic<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"script\">Script<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"serif\">Serif<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"mono\">Mono<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-footer\">\r\n                        <span class=\"fontib-home-builder-char-count\">12 characters<\/span>\r\n                        <button class=\"fontib-home-builder-copy-btn\">\r\n                            <i class='bx bx-clipboard'><\/i> Copy\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-home-builder-floating-badge badge-top\">\r\n                    <i class='bx bx-check-circle'><\/i> Copy Ready\r\n                <\/div>\r\n                <div class=\"fontib-home-builder-floating-badge badge-bottom\">\r\n                    <i class='bx bx-palette'><\/i> 500+ Styles\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section> -->\r\n<div>\r\n\t<div class=\"ufg\">\r\n<style>\r\n.ufg, .ufg * { margin:0; padding:0; box-sizing:border-box; }\r\n.ufg { --ufg-bg-gradient: linear-gradient(135deg, #dce9f6 0%, #ffffff 50%, #d6d7d8 100%); --ufg-text-main: #111827; --ufg-text-muted: #6b7280; --ufg-text-light: #9ca3af; --ufg-border-color: #e5e7eb; --ufg-card-bg: #ffffff; --ufg-primary: #7c3aed; --ufg-primary-light: #f3f0ff; --ufg-icon-blue: #60a5fa; --ufg-icon-purple: #8b5cf6; --ufg-icon-pink: #f472b6; --ufg-icon-green: #34d399; --ufg-icon-orange: #fb923c; --ufg-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --ufg-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background:var(--ufg-bg-gradient); min-height:100vh; color:var(--ufg-text-main); padding:3rem 1rem; display:flex; justify-content:center; overflow-x:hidden; }\r\n.ufg-container { max-width:1150px; width:100%; display:flex; flex-direction:column; gap:2rem; }\r\n.ufg-header { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }\r\n.ufg-tag { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 1rem; background:#fff; border:1px solid var(--ufg-primary-light); border-radius:50px; color:var(--ufg-primary); font-size:0.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; box-shadow:var(--ufg-shadow-sm); }\r\n.ufg-tag svg { width:12px; height:12px; }\r\n.ufg-title { font-size:2.8rem; font-weight:800; letter-spacing:-1px; line-height:1.2; }\r\n.ufg-title-gradient { background:linear-gradient(90deg,#3b82f6 0%,#a855f7 50%,#ec4899 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }\r\n.ufg-subtitle { color:var(--ufg-text-muted); font-size:1.05rem; max-width:600px; line-height:1.5; }\r\n.ufg-tag { animation:ufgFadeSlideDown 0.6s ease both 0.1s; }\r\n.ufg-title { animation:ufgFadeSlideUp 0.7s ease both 0.3s; }\r\n.ufg-title-gradient { animation:ufgGradientFlow 3s ease-in-out infinite; background-size:200% 200%; }\r\n.ufg-subtitle { animation:ufgFadeSlideUp 0.7s ease both 0.5s; }\r\n@keyframes ufgFadeSlideDown { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }\r\n@keyframes ufgFadeSlideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }\r\n@keyframes ufgGradientFlow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }\r\n.ufg-input-wrapper { background:var(--ufg-card-bg); border-radius:12px; border:1px solid var(--ufg-border-color); border-top:2px solid #fbcfe8; box-shadow:var(--ufg-shadow-md); overflow:hidden; position:relative; max-width:1010px; margin:0 auto; width:100%; }\r\n.ufg-textarea-container { position:relative; }\r\n.ufg-textarea-container textarea { width:100%; height:136px; border:none; padding:1.5rem; font-size:1rem; resize:vertical; outline:none; color:var(--ufg-text-main); overflow-y:auto; padding-left:3rem; font-family:inherit; }\r\n.ufg-textarea-container textarea::-webkit-scrollbar { width:4px; }\r\n.ufg-textarea-container textarea::-webkit-scrollbar-track { background:transparent; }\r\n.ufg-textarea-container textarea::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }\r\n.ufg-textarea-container textarea::placeholder { color:var(--ufg-text-light); }\r\n.ufg-input-icon { position:absolute; top:1.5rem; left:1.5rem; color:var(--ufg-text-light); width:18px; height:18px; transition:opacity 0.25s ease; pointer-events:none; }\r\n.ufg-textarea-container:focus-within .ufg-input-icon { opacity:0; }\r\n.ufg-textarea-container textarea:focus { padding-left:1.5rem; }\r\n.ufg-input-toolbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; border-top:1px solid var(--ufg-border-color); background:#fafafa; }\r\n.ufg-toolbar-left, .ufg-toolbar-right { display:flex; gap:0.5rem; }\r\n.ufg-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; border:1px solid var(--ufg-border-color); border-radius:8px; background:var(--ufg-card-bg); color:var(--ufg-text-muted); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s ease; font-family:inherit; }\r\n.ufg-btn:hover { background:#f3f4f6; }\r\n.ufg-btn-primary { background:var(--ufg-primary-light); color:var(--ufg-primary); border-color:transparent; }\r\n.ufg-btn-primary:hover { background:#eedeef; }\r\n.ufg-btn svg { width:14px; height:14px; flex-shrink:0; }\r\n.ufg-filter-bar { display:flex; justify-content:space-between; background:var(--ufg-card-bg); padding:0.5rem; border-radius:12px; box-shadow:var(--ufg-shadow-sm); gap:0.25rem; overflow-x:auto; border:1px solid var(--ufg-border-color); -webkit-overflow-scrolling:touch; scrollbar-width:none; }\r\n.ufg-filter-bar::-webkit-scrollbar { display:none; }\r\n@media (max-width:768px) { .ufg-filter-bar { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#d1d5db transparent; } .ufg-filter-bar::-webkit-scrollbar { display:block; height:3px; } .ufg-filter-bar::-webkit-scrollbar-track { background:transparent; } .ufg-filter-bar::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; } }\r\n.ufg-filter-btn { display:flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; border:none; background:transparent; color:var(--ufg-text-muted); font-size:0.85rem; font-weight:500; border-radius:8px; cursor:pointer; white-space:nowrap; transition:all 0.2s ease; font-family:inherit; }\r\n.ufg-filter-btn:hover { background:#f3f4f6; }\r\n.ufg-filter-btn.active { background:var(--ufg-primary); color:white; }\r\n.ufg-filter-btn svg { width:20px; height:20px; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.08)); transition:transform 0.25s cubic-bezier(0.4,0,0.2,1), filter 0.25s ease; }\r\n.ufg-filter-btn:hover svg { transform:scale(1.18); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }\r\n.ufg-filter-btn.active svg { color:white; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.2)); transform:scale(1.1); }\r\n.ufg-filter-btn:not(.active) svg { color:var(--ufg-primary); }\r\n.ufg-filter-btn:nth-child(2):not(.active) svg { color:#7c3aed; }\r\n.ufg-filter-btn:nth-child(3):not(.active) svg { color:#2563eb; }\r\n.ufg-filter-btn:nth-child(4):not(.active) svg { color:#dc2626; }\r\n.ufg-filter-btn:nth-child(5):not(.active) svg { color:#059669; }\r\n.ufg-filter-btn:nth-child(6):not(.active) svg { color:#6366f1; }\r\n.ufg-filter-btn:nth-child(7):not(.active) svg { color:#0284c7; }\r\n.ufg-filter-btn:nth-child(8):not(.active) svg { color:#78716c; }\r\n.ufg-filter-btn:nth-child(9):not(.active) svg { color:#d97706; }\r\n.ufg-filter-btn:nth-child(10):not(.active) svg { color:#e11d48; }\r\n.ufg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }\r\n.ufg-card { background:var(--ufg-card-bg); border-radius:12px; padding:1.5rem; border:1px solid var(--ufg-border-color); box-shadow:var(--ufg-shadow-sm); display:flex; flex-direction:column; gap:1.5rem; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease; max-height:290px; overflow-y:auto; animation:ufgCardFadeIn 0.35s ease both; will-change:transform, opacity; }\r\n.ufg-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 12px 24px -4px rgba(124,58,237,0.12), 0 4px 8px -2px rgba(0,0,0,0.06); border-color:#d8b4fe; }\r\n@keyframes ufgCardFadeIn { from { opacity:0; transform:translateY(12px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }\r\n.ufg-card::-webkit-scrollbar { width:4px; }\r\n.ufg-card::-webkit-scrollbar-track { background:transparent; }\r\n.ufg-card::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }\r\n.ufg-card-header { display:flex; justify-content:space-between; align-items:flex-start; }\r\n.ufg-card-title-group { display:flex; gap:0.75rem; }\r\n.ufg-card-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:0.85rem; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease; }\r\n.ufg-card:hover .ufg-card-icon { transform:rotate(-8deg) scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,0.15); }\r\n.ufg-bg-purple { background:var(--ufg-icon-purple); }\r\n.ufg-bg-blue { background:var(--ufg-icon-blue); }\r\n.ufg-bg-pink { background:var(--ufg-icon-pink); }\r\n.ufg-bg-green { background:var(--ufg-icon-green); }\r\n.ufg-bg-orange { background:var(--ufg-icon-orange); }\r\n.ufg-bg-light-blue { background:#818cf8; }\r\n.ufg-card-text { display:flex; flex-direction:column; }\r\n.ufg-card-text h3 { font-size:0.9rem; font-weight:600; color:var(--ufg-text-main); transition:color 0.25s ease; margin:0; }\r\n.ufg-card:hover .ufg-card-text h3 { color:var(--ufg-primary); }\r\n.ufg-card-text p { font-size:0.75rem; color:var(--ufg-text-light); margin-top:0.2rem; transition:color 0.25s ease; }\r\n.ufg-card:hover .ufg-card-text p { color:var(--ufg-text-muted); }\r\n.ufg-badge { padding:0.3rem 0.6rem; font-size:0.7rem; border:1px solid var(--ufg-border-color); border-radius:6px; background:transparent; color:var(--ufg-text-main); font-weight:500; cursor:default; white-space:nowrap; transition:all 0.25s ease; font-family:inherit; }\r\n.ufg-card:hover .ufg-badge { background:var(--ufg-primary-light); color:var(--ufg-primary); border-color:#d8b4fe; }\r\n.ufg-card-body { display:flex; flex:1; overflow-y:auto; min-height:0; }\r\n.ufg-preview-text { font-size:1.2rem; font-weight:700; color:var(--ufg-text-main); word-break:break-all; letter-spacing:-0.5px; line-height:1.4; transition:color 0.25s ease, transform 0.3s cubic-bezier(0.4,0,0.2,1); }\r\n.ufg-card:hover .ufg-preview-text { color:var(--ufg-primary); transform:scale(1.02); }\r\n.ufg-card-actions { display:flex; gap:0.5rem; justify-content:flex-end; flex-shrink:0; padding-top:0.75rem; border-top:1px solid var(--ufg-border-color); }\r\n.ufg-action-btn { width:32px; height:32px; border-radius:6px; border:1px solid var(--ufg-border-color); background:transparent; display:flex; align-items:center; justify-content:center; color:var(--ufg-text-muted); cursor:pointer; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }\r\n.ufg-action-btn:hover { background:var(--ufg-primary-light); color:var(--ufg-primary); border-color:#d8b4fe; transform:scale(1.12); }\r\n.ufg-action-btn.copied { background:#d1fae5; color:#059669; border-color:#059669; }\r\n.ufg-action-btn svg { width:14px; height:14px; }\r\n.ufg-toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:#111827; color:white; padding:0.75rem 1.5rem; border-radius:8px; font-size:0.875rem; font-weight:500; opacity:0; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); z-index:10000; pointer-events:none; font-family:inherit; }\r\n.ufg-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }\r\n.ufg-load-more-wrap { text-align:center; padding:1rem 0; }\r\n.ufg-load-more-btn { padding:0.75rem 2rem; font-size:0.95rem; font-weight:600; border-radius:10px; background:var(--ufg-primary); color:white; border:none; cursor:pointer; display:none; font-family:inherit; transition:all 0.2s ease; }\r\n.ufg-load-more-btn:hover { opacity:0.9; transform:translateY(-1px); }\r\n.ufg-load-more-btn svg { margin-top: 7px; width:16px; height:16px; vertical-align:middle; margin-right:0.5rem; }\r\n@media (max-width:1024px) { .ufg { padding:2rem 1rem; } .ufg-title { font-size:2.4rem; } }\r\n@media (max-width:900px) { .ufg-grid { grid-template-columns:repeat(2,1fr); } .ufg-title { font-size:2.1rem; } .ufg-subtitle { font-size:1rem; } }\r\n@media (max-width:768px) { .ufg { padding:1.5rem 0.75rem; } .ufg-title { font-size:1.9rem; } .ufg-tag { font-size:0.65rem; padding:0.35rem 0.8rem; } .ufg-subtitle { font-size:0.95rem; max-width:380px; } .ufg-container { gap:1.25rem; } .ufg-card { padding:1.25rem; gap:1rem; max-height:260px; } .ufg-preview-text { font-size:1.05rem; } .ufg-filter-btn { padding:0.5rem 1rem; font-size:0.8rem; } .ufg-filter-btn svg { width:12px; height:12px; } .ufg-input-wrapper { border-radius:10px; } .ufg-textarea-container textarea { height:120px; font-size:0.95rem; padding:1.25rem; padding-left:2.75rem; } .ufg-input-icon { top:1.25rem; left:1.25rem; width:16px; height:16px; } .ufg-input-toolbar { padding:0.75rem 1.25rem; } .ufg-btn { padding:0.4rem 0.75rem; font-size:0.8rem; } }\r\n@media (max-width:600px) { .ufg { padding:1rem 0.5rem; } .ufg-title { font-size:1.5rem; line-height:1.2; } .ufg-tag { font-size:0.6rem; padding:0.3rem 0.7rem; letter-spacing:0.5px; } .ufg-subtitle { font-size:0.88rem; max-width:280px; } .ufg-header { gap:0.6rem; } .ufg-container { gap:1rem; } .ufg-grid { grid-template-columns:1fr; gap:1rem; } .ufg-card { padding:1rem; max-height:240px; gap:0.75rem; } .ufg-card-header { gap:0.5rem; } .ufg-card-icon { width:28px; height:28px; font-size:0.75rem; } .ufg-card-text h3 { font-size:0.82rem; } .ufg-card-text p { font-size:0.7rem; } .ufg-preview-text { font-size:0.95rem; } .ufg-badge { font-size:0.65rem; padding:0.2rem 0.5rem; } .ufg-action-btn { width:28px; height:28px; } .ufg-action-btn svg { width:12px; height:12px; } .ufg-card-actions { padding-top:0.5rem; } .ufg-input-toolbar { flex-direction:column; gap:0.75rem; align-items:flex-start; padding:0.6rem 1rem; } .ufg-toolbar-left, .ufg-toolbar-right { width:100%; } .ufg-toolbar-left { justify-content:space-between; } .ufg-toolbar-right { justify-content:flex-end; } .ufg-textarea-container textarea { height:110px; font-size:0.9rem; padding:1rem; padding-left:2.5rem; } .ufg-input-icon { top:1rem; left:1rem; width:15px; height:15px; } .ufg-btn { padding:0.35rem 0.65rem; font-size:0.75rem; border-radius:6px; } .ufg-btn svg { width:12px; height:12px; } .ufg-filter-bar { padding:0.35rem; gap:0.15rem; border-radius:10px; } .ufg-filter-btn { padding:0.45rem 0.8rem; font-size:0.75rem; border-radius:6px; gap:0.35rem; } .ufg-filter-btn svg { width:11px; height:11px; } .ufg-load-more-btn { padding:0.6rem 1.5rem; font-size:0.85rem; border-radius:8px; } .ufg-load-more-btn svg { width:14px; height:14px; } }\r\n@media (max-width:375px) { .ufg { padding:0.75rem 0.4rem; } .ufg-title { font-size:1.3rem; } .ufg-subtitle { font-size:0.8rem; max-width:240px; } .ufg-tag { font-size:0.55rem; padding:0.25rem 0.6rem; gap:0.35rem; } .ufg-grid { gap:0.75rem; } .ufg-card { padding:0.85rem; max-height:220px; } .ufg-card-text h3 { font-size:0.78rem; } .ufg-card-text p { font-size:0.65rem; } .ufg-preview-text { font-size:0.88rem; } .ufg-textarea-container textarea { height:100px; } .ufg-filter-btn { padding:0.4rem 0.65rem; font-size:0.7rem; } }\r\n<\/style>\r\n\r\n<div class=\"ufg-container\">\r\n    <header class=\"ufg-header\">\r\n        <div class=\"ufg-tag\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14\"\/><path d=\"M5 12h14\"\/><\/svg> UNICODE FONT GENERATOR<\/div>\r\n        <h1 class=\"ufg-title\">Font <span class=\"ufg-title-gradient\">Builder<\/span> - Smart Build Your <br> Font for Creative Text<\/h1>\r\n        <p class=\"ufg-subtitle\">Create stylish Unicode text for bios, captions, posts, and profiles in seconds.<\/p>\r\n    <\/header>\r\n    <section class=\"ufg-input-wrapper\">\r\n        <div class=\"ufg-textarea-container\">\r\n            <svg class=\"ufg-input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\"\/><\/svg>\r\n            <textarea id=\"ufg-text-input\" placeholder=\"Type your text here...\"><\/textarea>\r\n        <\/div>\r\n        <div class=\"ufg-input-toolbar\">\r\n            <div class=\"ufg-toolbar-left\">\r\n                <button class=\"ufg-btn\" id=\"ufg-clear-all\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"\/><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"\/><\/svg> Clear All<\/button>\r\n                <button class=\"ufg-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"\/><line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"\/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"\/><\/svg> <span id=\"ufg-char-count\">0<\/span> chars<\/button>\r\n            <\/div>\r\n            <div class=\"ufg-toolbar-right\">\r\n                <button class=\"ufg-btn ufg-btn-primary\" id=\"ufg-clear-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg> Clear<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n    <nav class=\"ufg-filter-bar\">\r\n        <button class=\"ufg-filter-btn active\" data-filter=\"all\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><path d=\"M6.5 6.5h1M17.5 6.5h1M6.5 17.5h1M17.5 17.5h1\" stroke-width=\"1.5\"\/><\/svg> All<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"bold\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6V4z\"\/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6V12z\"\/><path d=\"M6 4v16\"\/><circle cx=\"6\" cy=\"12\" r=\"1\" fill=\"currentColor\"\/><\/svg> Bold<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"italic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 4h-3\"\/><path d=\"M7 20h4\"\/><path d=\"M16 4l-6 16\"\/><path d=\"M10 12h7\"\/><circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"currentColor\"\/><circle cx=\"18\" cy=\"16\" r=\"1\" fill=\"currentColor\"\/><\/svg> Italic<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"script\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 4c-3 2-7 6-9 10-1.5 3-1.5 5.5 0 7 1 1 2.5 1.5 4 1\"\/><path d=\"M17 20c1-.5 2-1.5 2-3 0-1.5-1-2.5-2-3\"\/><path d=\"M12 12L4 22\"\/><path d=\"M3 16l3-2\"\/><path d=\"M8 8c1-1 2.5-1.5 4-1\" stroke-dasharray=\"2 2\"\/><\/svg> Script<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"gothic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2l-4 6 4 6-4 6\"\/><path d=\"M6 2l4 6-4 6 4 6\"\/><path d=\"M18 2l-4 6 4 6-4 6\"\/><path d=\"M14 8h-4\"\/><path d=\"M14 14h-4\"\/><\/svg> Gothic<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"double\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h4v16H4z\" stroke-width=\"2\"\/><path d=\"M9 4h4v16H9z\" stroke-width=\"2\"\/><path d=\"M16 4L8 20\" stroke-width=\"2\"\/><path d=\"M20 4L12 20\" stroke-width=\"2\"\/><\/svg> Double<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"sans\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20l8-18 8 18\" stroke-width=\"2.5\" stroke-linejoin=\"miter\"\/><path d=\"M7 15h10\" stroke-width=\"2.5\"\/><circle cx=\"12\" cy=\"7\" r=\"1.5\" fill=\"currentColor\"\/><\/svg> Sans<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"mono\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\" stroke-width=\"1.5\"\/><line x1=\"8\" y1=\"7\" x2=\"8\" y2=\"17\" stroke-width=\"3\"\/><line x1=\"12\" y1=\"7\" x2=\"12\" y2=\"17\" stroke-width=\"3\"\/><line x1=\"16\" y1=\"7\" x2=\"16\" y2=\"17\" stroke-width=\"3\"\/><\/svg> Mono<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"fullwidth\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"1\" stroke-width=\"1.5\"\/><path d=\"M7 7h10v10H7z\" stroke-width=\"1.5\"\/><line x1=\"12\" y1=\"7\" x2=\"12\" y2=\"17\" stroke-width=\"2\"\/><line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\" stroke-width=\"2\"\/><\/svg> Fullwidth<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"circled\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"7\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><circle cx=\"12\" cy=\"12\" r=\"1\" fill=\"currentColor\"\/><\/svg> Circled<\/button>\r\n    <\/nav>\r\n    <section class=\"ufg-grid\" id=\"ufg-cards-container\"><\/section>\r\n    <div class=\"ufg-load-more-wrap\">\r\n        <button class=\"ufg-load-more-btn\" id=\"ufg-load-more-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"8 12 12 16 16 12\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"16\"\/><\/svg> Load More<\/button>\r\n    <\/div>\r\n<\/div>\r\n<div id=\"ufg-toast\" class=\"ufg-toast\">Copied to clipboard!<\/div>\r\n\r\n<script>\r\n\/**\r\n * Unicode Font Generator - WordPress Friendly\r\n * No jQuery dependency, fully encapsulated, zero global leaks\r\n *\/\r\n(function() {\r\n    \"use strict\";\r\n    if (window.ufgFontGeneratorLoaded) return;\r\n    window.ufgFontGeneratorLoaded = true;\r\n\r\n    function ufgReady(fn) {\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', fn);\r\n        } else {\r\n            fn();\r\n        }\r\n    }\r\n\r\n    ufgReady(function() {\r\n\r\n    function genMap(u,l,d){var m={};if(u)for(var i=0;i<26;i++){m[String.fromCharCode(65+i)]=String.fromCodePoint(u+i);m[String.fromCharCode(97+i)]=String.fromCodePoint(l+i);}if(d)for(var i=0;i<10;i++)m[String.fromCharCode(48+i)]=String.fromCodePoint(d+i);return m;}\r\n    var scriptMap={'A':'\\u{1D49C}','B':'\\u212C','C':'\\u{1D49E}','D':'\\u{1D49F}','E':'\\u2130','F':'\\u2131','G':'\\u{1D4A0}','H':'\\u210B','I':'\\u2110','J':'\\u{1D4A1}','K':'\\u{1D4A2}','L':'\\u2112','M':'\\u2133','N':'\\u{1D4A3}','O':'\\u{1D4A4}','P':'\\u{1D4A5}','Q':'\\u{1D4A6}','R':'\\u211B','S':'\\u{1D4A7}','T':'\\u{1D4A8}','U':'\\u{1D4A9}','V':'\\u{1D4AA}','W':'\\u{1D4AB}','X':'\\u{1D4AC}','Y':'\\u{1D4AD}','Z':'\\u{1D4AE}','a':'\\u{1D4B6}','b':'\\u{1D4B7}','c':'\\u{1D4B8}','d':'\\u{1D4B9}','e':'\\u212F','f':'\\u{1D4BB}','g':'\\u210A','h':'\\u{1D4BD}','i':'\\u{1D4BE}','j':'\\u{1D4BF}','k':'\\u{1D4C0}','l':'\\u2113','m':'\\u{1D4C2}','n':'\\u{1D4C3}','o':'\\u2134','p':'\\u{1D4C5}','q':'\\u{1D4C6}','r':'\\u{1D4C7}','s':'\\u{1D4C8}','t':'\\u{1D4C9}','u':'\\u{1D4CA}','v':'\\u{1D4CB}','w':'\\u{1D4CC}','x':'\\u{1D4CD}','y':'\\u{1D4CE}','z':'\\u{1D4CF}'};\r\n    var frakturMap={'A':'\\u{1D504}','B':'\\u{1D505}','C':'\\u212D','D':'\\u{1D507}','E':'\\u{1D508}','F':'\\u{1D509}','G':'\\u{1D50A}','H':'\\u210C','I':'\\u2111','J':'\\u{1D50D}','K':'\\u{1D50E}','L':'\\u{1D50F}','M':'\\u{1D510}','N':'\\u{1D511}','O':'\\u{1D512}','P':'\\u{1D513}','Q':'\\u{1D514}','R':'\\u211C','S':'\\u{1D516}','T':'\\u{1D517}','U':'\\u{1D518}','V':'\\u{1D519}','W':'\\u{1D51A}','X':'\\u{1D51B}','Y':'\\u{1D51C}','Z':'\\u2128','a':'\\u{1D51E}','b':'\\u{1D51F}','c':'\\u{1D520}','d':'\\u{1D521}','e':'\\u{1D522}','f':'\\u{1D523}','g':'\\u{1D524}','h':'\\u{1D525}','i':'\\u{1D526}','j':'\\u{1D527}','k':'\\u{1D528}','l':'\\u{1D529}','m':'\\u{1D52A}','n':'\\u{1D52B}','o':'\\u{1D52C}','p':'\\u{1D52D}','q':'\\u{1D52E}','r':'\\u{1D52F}','s':'\\u{1D530}','t':'\\u{1D531}','u':'\\u{1D532}','v':'\\u{1D533}','w':'\\u{1D534}','x':'\\u{1D535}','y':'\\u{1D536}','z':'\\u{1D537}'};\r\n    var BM={bold:genMap(0x1D400,0x1D41A,0x1D7CE),italic:genMap(0x1D434,0x1D44E,0x1D7F2),boldItalic:genMap(0x1D468,0x1D482,0x1D7F2),script:scriptMap,boldScript:genMap(0x1D4D0,0x1D4EA),fraktur:frakturMap,boldFraktur:genMap(0x1D571,0x1D58B),double:genMap(0x1D538,0x1D552,0x1D7D8),boldDouble:genMap(0x1D56C,0x1D586,0x1D7E2),sans:genMap(0x1D5A0,0x1D5BA,0x1D7E2),sansBold:genMap(0x1D5D4,0x1D5EE,0x1D7EC),sansItalic:genMap(0x1D608,0x1D622,0x1D7E2),sansBoldItalic:genMap(0x1D63C,0x1D656,0x1D7EC),mono:genMap(0x1D670,0x1D68A,0x1D7F6),fullwidth:genMap(0xFF21,0xFF41,0xFF10),circled:genMap(0x24B6,0x249C,0x2460)};\r\n    function addComb(t,m){return Array.from(t).map(function(c){return c+m}).join('');}\r\n    var DEC=[{n:'Under',f:function(t){return addComb(t,'\\u0332')}},{n:'Strike',f:function(t){return addComb(t,'\\u0336')}},{n:'DblUnder',f:function(t){return addComb(t,'\\u0333')}},{n:'Over',f:function(t){return addComb(t,'\\u0305')}},{n:'Wavy',f:function(t){return addComb(t,'\\u0330')}},{n:'Dot',f:function(t){return addComb(t,'\\u0307')}},{n:'Ring',f:function(t){return addComb(t,'\\u030A')}},{n:'Acute',f:function(t){return addComb(t,'\\u0301')}},{n:'Tilde',f:function(t){return addComb(t,'\\u0303')}},{n:'Macron',f:function(t){return addComb(t,'\\u0304')}},{n:'Umlaut',f:function(t){return addComb(t,'\\u0308')}},{n:'Circum',f:function(t){return addComb(t,'\\u0302')}},{n:'Caron',f:function(t){return addComb(t,'\\u030C')}},{n:'Cedilla',f:function(t){return addComb(t,'\\u0327')}},{n:'Hook',f:function(t){return addComb(t,'\\u0309')}},{n:'SqBracket',f:function(t){return '['+t+']'}},{n:'Paren',f:function(t){return '('+t+')'}},{n:'CurlyBrace',f:function(t){return '{'+t+'}'}},{n:'Angle',f:function(t){return '\\u3008'+t+'\\u3009'}},{n:'DblAngle',f:function(t){return '\\u300A'+t+'\\u300B'}},{n:'Bracket',f:function(t){return '\\u3010'+t+'\\u3011'}},{n:'Corner',f:function(t){return '\\u300C'+t+'\\u300D'}},{n:'WCnr',f:function(t){return '\\u300E'+t+'\\u300F'}},{n:'Tortoise',f:function(t){return '\\u3014'+t+'\\u3015'}},{n:'Lenticular',f:function(t){return '\\u3016'+t+'\\u3017'}},{n:'MBrace',f:function(t){return '\\u27E6'+t+'\\u27E7'}},{n:'MAngle',f:function(t){return '\\u27E8'+t+'\\u27E9'}},{n:'FParen',f:function(t){return '\\u2983'+t+'\\u2984'}},{n:'Guillemet',f:function(t){return '\\u00AB'+t+'\\u00BB'}},{n:'Quot',f:function(t){return '\\u201C'+t+'\\u201D'}},{n:'Star',f:function(t){return '\\u2605'+t+'\\u2605'}},{n:'Heart',f:function(t){return '\\u2665'+t+'\\u2665'}},{n:'Diamond',f:function(t){return '\\u25C6'+t+'\\u25C6'}},{n:'Circle',f:function(t){return '\\u25CF'+t+'\\u25CF'}},{n:'WCircle',f:function(t){return '\\u25CB'+t+'\\u25CB'}},{n:'Square',f:function(t){return '\\u25A0'+t+'\\u25A0'}},{n:'WSquare',f:function(t){return '\\u25A1'+t+'\\u25A1'}},{n:'Triangle',f:function(t){return '\\u25B2'+t+'\\u25B2'}},{n:'WTriangle',f:function(t){return '\\u25B3'+t+'\\u25B3'}},{n:'DDiamond',f:function(t){return '\\u2756'+t+'\\u2756'}},{n:'4Star',f:function(t){return '\\u2726'+t+'\\u2726'}},{n:'Pipe',f:function(t){return '\\u2502'+t+'\\u2502'}},{n:'Dash',f:function(t){return '\\u2015'+t+'\\u2015'}},{n:'TildeW',f:function(t){return '~'+t+'~'}},{n:'Wave',f:function(t){return '\\u3030'+t+'\\u3030'}},{n:'Spade',f:function(t){return '\\u2660'+t+'\\u2660'}},{n:'Club',f:function(t){return '\\u2663'+t+'\\u2663'}},{n:'Sun',f:function(t){return '\\u2600'+t+'\\u2600'}},{n:'Moon',f:function(t){return '\\u263E'+t+'\\u263E'}},{n:'Lightning',f:function(t){return '\\u26A1'+t+'\\u26A1'}},{n:'Skull',f:function(t){return '\\u2620'+t+'\\u2620'}},{n:'YinYang',f:function(t){return '\\u262F'+t+'\\u262F'}},{n:'Peace',f:function(t){return '\\u262E'+t+'\\u262E'}},{n:'Recycle',f:function(t){return '\\u267B'+t+'\\u267B'}},{n:'Male',f:function(t){return '\\u2642'+t+'\\u2642'}},{n:'Female',f:function(t){return '\\u2640'+t+'\\u2640'}},{n:'Note',f:function(t){return '\\u266A'+t+'\\u266A'}},{n:'DNote',f:function(t){return '\\u266B'+t+'\\u266B'}},{n:'Anchor',f:function(t){return '\\u2693'+t+'\\u2693'}},{n:'Floral',f:function(t){return '\\u2766'+t+'\\u2767'}},{n:'Leaf',f:function(t){return '\\u2618'+t+'\\u2618'}},{n:'Snow',f:function(t){return '\\u2744'+t+'\\u2744'}},{n:'Cloud',f:function(t){return '\\u2601'+t+'\\u2601'}},{n:'Umbrella',f:function(t){return '\\u2602'+t+'\\u2602'}},{n:'Target',f:function(t){return '\\u2B55'+t+'\\u2B55'}},{n:'Sparkle',f:function(t){return '\\u2728'+t+'\\u2728'}},{n:'CrossS',f:function(t){return '\\u271A'+t+'\\u271A'}},{n:'Flower',f:function(t){return '\\u273F'+t+'\\u2740'}},{n:'Check',f:function(t){return '\\u2714'+t+'\\u2714'}},{n:'Cross2',f:function(t){return '\\u2718'+t+'\\u2718'}},{n:'Gear',f:function(t){return '\\u2699'+t+'\\u2699'}},{n:'Rainbow',f:function(t){return '\\u{1F308}'+t+'\\u{1F308}'}},{n:'Arrow',f:function(t){return '\\u27A1'+t+'\\u27A1'}},{n:'Cross3',f:function(t){return '\\u2720'+t+'\\u2720'}},{n:'Fleur',f:function(t){return '\\u269C'+t+'\\u269C'}},{n:'Scissors',f:function(t){return '\\u2702'+t+'\\u2702'}},{n:'Pencil',f:function(t){return '\\u270E'+t+'\\u270E'}},{n:'Phone',f:function(t){return '\\u260E'+t+'\\u260E'}},{n:'Ball',f:function(t){return '\\u26BE'+t+'\\u26BE'}},{n:'Trophy',f:function(t){return '\\u26C6'+t+'\\u26C6'}},{n:'Crown',f:function(t){return '\\u265B'+t+'\\u265B'}},{n:'Key',f:function(t){return '\\u26BF'+t+'\\u26BF'}},{n:'Flag',f:function(t){return '\\u2691'+t+'\\u2691'}}];\r\n    var CAT={bold:{icon:'B',cls:'ufg-bg-purple',maps:['bold','boldItalic','boldScript','boldFraktur','boldDouble','sansBold','sansBoldItalic']},italic:{icon:'I',cls:'ufg-bg-blue',maps:['italic','sansItalic']},script:{icon:'S',cls:'ufg-bg-green',maps:['script','boldScript']},gothic:{icon:'F',cls:'ufg-bg-orange',maps:['fraktur','boldFraktur']},double:{icon:'D',cls:'ufg-bg-light-blue',maps:['double','boldDouble']},sans:{icon:'N',cls:'ufg-bg-purple',maps:['sans','sansBold','sansItalic','sansBoldItalic']},mono:{icon:'M',cls:'ufg-bg-green',maps:['mono']},fullwidth:{icon:'FW',cls:'ufg-bg-orange',maps:['fullwidth']},circled:{icon:'C',cls:'ufg-bg-pink',maps:['circled']}};\r\n    var SN={bold:'Bold',italic:'Itlc',boldItalic:'BdIt',script:'Scrp',boldScript:'BdSc',fraktur:'Frak',boldFraktur:'BdFk',double:'Dble',boldDouble:'BdDl',sans:'Sans',sansBold:'SnsB',sansItalic:'SnsI',sansBoldItalic:'SnBI',mono:'Mono',fullwidth:'Fuld',circled:'Circ'};\r\n    var allFonts=[];\r\n    for(var catId in CAT){if(!CAT.hasOwnProperty(catId))continue;var cfg=CAT[catId],maps=cfg.maps,decCount=Math.ceil(DEC.length\/maps.length);for(var mi=0;mi<maps.length;mi++){var mapName=maps[mi],map=BM[mapName];if(!map)continue;var startDec=mi*decCount;for(var di=0;di<decCount&&(startDec+di)<DEC.length;di++){var dec=DEC[startDec+di];allFonts.push({id:catId+'-'+mapName+'-'+dec.n,name:(SN[mapName]||mapName)+dec.n,cat:catId,map:map,dec:dec.f,icon:cfg.icon,iconClass:cfg.cls});}}}\r\n    var fontMap={};for(var fi=0;fi<allFonts.length;fi++)fontMap[allFonts[fi].id]=allFonts[fi];\r\n    function convertText(text,font){var input=text||'ENTER YOUR TEXT',chars=Array.from(input),mapped='';for(var i=0;i<chars.length;i++)mapped+=font.map[chars[i]]||chars[i];return font.dec(mapped);}\r\n    var starSVG='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>';\r\n    var copySVG='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>';\r\n    var checkSVG='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\r\n    var container=document.getElementById('ufg-cards-container'),loadMoreBtn=document.getElementById('ufg-load-more-btn'),BATCH=12,visibleCount=0,activeFilter='all',renderedPreviews={};\r\n    function createCard(font,index,currentText){var card=document.createElement('div');card.className='ufg-card';card.dataset.category=font.cat;card.style.animationDelay=(index*0.03)+'s';var header=document.createElement('div');header.className='ufg-card-header';var titleGroup=document.createElement('div');titleGroup.className='ufg-card-title-group';var iconDiv=document.createElement('div');iconDiv.className='ufg-card-icon '+font.iconClass;iconDiv.textContent=font.icon;var textDiv=document.createElement('div');textDiv.className='ufg-card-text';var h3=document.createElement('h3');h3.textContent=font.name;var p=document.createElement('p');p.textContent=font.cat+' style';textDiv.appendChild(h3);textDiv.appendChild(p);titleGroup.appendChild(iconDiv);titleGroup.appendChild(textDiv);var badge=document.createElement('button');badge.className='ufg-badge';badge.textContent='Unicode';badge.disabled=true;header.appendChild(titleGroup);header.appendChild(badge);var body=document.createElement('div');body.className='ufg-card-body';var preview=document.createElement('div');preview.className='ufg-preview-text';preview.id='p-'+font.id;preview.textContent=convertText(currentText||null,font);body.appendChild(preview);renderedPreviews[font.id]=preview;var actions=document.createElement('div');actions.className='ufg-card-actions';var starBtn=document.createElement('button');starBtn.className='ufg-action-btn ufg-star-btn';starBtn.title='Favorite';starBtn.innerHTML=starSVG;var copyBtn=document.createElement('button');copyBtn.className='ufg-action-btn ufg-copy-btn';copyBtn.dataset.font=font.id;copyBtn.title='Copy';copyBtn.innerHTML=copySVG;actions.appendChild(starBtn);actions.appendChild(copyBtn);card.appendChild(header);card.appendChild(body);card.appendChild(actions);return card;}\r\n    function getFilteredFonts(){return activeFilter==='all'?allFonts:allFonts.filter(function(f){return f.cat===activeFilter});}\r\n    var filteredCache=null,filteredCacheKey=null;function getCachedFilteredFonts(){if(filteredCacheKey!==activeFilter){filteredCache=getFilteredFonts();filteredCacheKey=activeFilter;}return filteredCache;}\r\n    function updateLoadMore(){var filtered=getCachedFilteredFonts();loadMoreBtn.style.display=visibleCount<filtered.length?'inline-flex':'none';}\r\n    function loadBatch(currentText){var filtered=getCachedFilteredFonts(),fragment=document.createDocumentFragment(),end=Math.min(visibleCount+BATCH,filtered.length);for(var i=visibleCount;i<end;i++)fragment.appendChild(createCard(filtered[i],i-visibleCount,currentText));container.appendChild(fragment);visibleCount=end;updateLoadMore();}\r\n    loadBatch();loadMoreBtn.addEventListener('click',loadBatch);\r\n    var textInput=document.getElementById('ufg-text-input'),charCount=document.getElementById('ufg-char-count'),inputTimeout=null;\r\n    textInput.addEventListener('input',function(e){var text=e.target.value;charCount.textContent=text.length;if(inputTimeout)cancelAnimationFrame(inputTimeout);inputTimeout=requestAnimationFrame(function(){var keys=Object.keys(renderedPreviews);for(var i=0;i<keys.length;i++){var fid=keys[i],fontObj=fontMap[fid];if(fontObj)renderedPreviews[fid].textContent=convertText(text,fontObj);}});});\r\n    function clearInput(){textInput.value='';charCount.textContent='0';var keys=Object.keys(renderedPreviews);for(var i=0;i<keys.length;i++){var fontObj=fontMap[keys[i]];if(fontObj)renderedPreviews[keys[i]].textContent=convertText(null,fontObj);}}\r\n    document.getElementById('ufg-clear-btn').addEventListener('click',clearInput);\r\n    document.getElementById('ufg-clear-all').addEventListener('click',clearInput);\r\n    container.addEventListener('click',function(e){var copyBtn=e.target.closest('.ufg-copy-btn');if(copyBtn){e.stopPropagation();var fid=copyBtn.dataset.font,fontObj=fontMap[fid],el=renderedPreviews[fid];if(!fontObj||!el)return;var textToCopy=convertText(textInput.value||null,fontObj);if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(textToCopy).then(function(){showCopiedFeedback(copyBtn,fontObj.name)}).catch(function(){fallbackCopy(textToCopy,copyBtn,fontObj.name)});}else fallbackCopy(textToCopy,copyBtn,fontObj.name);return;}var starBtn=e.target.closest('.ufg-star-btn');if(starBtn){e.stopPropagation();var ic=starBtn.querySelector('svg');if(ic){ic.setAttribute('fill','currentColor');ic.setAttribute('stroke','none');starBtn.style.color='#f59e0b';starBtn.style.borderColor='#f59e0b';}else{starBtn.style.color='';starBtn.style.borderColor='';}}});\r\n    function fallbackCopy(text,btn,name){var ta=document.createElement('textarea');ta.value=text;ta.style.cssText='position:fixed;left:-9999px;top:-9999px';document.body.appendChild(ta);ta.select();try{document.execCommand('copy');showCopiedFeedback(btn,name);}catch(e){}document.body.removeChild(ta);}\r\n    function showCopiedFeedback(btn,fontName){btn.classList.add('copied');btn.innerHTML=checkSVG;showToast('\\u201c'+fontName+'\\u201d copied!');setTimeout(function(){btn.classList.remove('copied');btn.innerHTML=copySVG;},2000);}\r\n    var toastTimeout=null;function showToast(msg){var t=document.getElementById('ufg-toast');t.textContent=msg||'Copied!';t.classList.add('show');if(toastTimeout)clearTimeout(toastTimeout);toastTimeout=setTimeout(function(){t.classList.remove('show');},2000);}\r\n    var filterBtns = document.querySelectorAll('.ufg-filter-btn');\r\n    for (var fb = 0; fb < filterBtns.length; fb++) {\r\n        (function(btn) {\r\n            btn.addEventListener('click', function() {\r\n                for (var b = 0; b < filterBtns.length; b++) {\r\n                    filterBtns[b].classList.remove('active');\r\n                }\r\n                btn.classList.add('active');\r\n                activeFilter = btn.dataset.filter;\r\n                filteredCacheKey = null;\r\n                container.innerHTML = '';\r\n                renderedPreviews = {};\r\n                visibleCount = 0;\r\n                var currentText = textInput.value || null;\r\n                loadBatch(currentText);\r\n            });\r\n        })(filterBtns[fb]);\r\n    }\r\n\r\n    }); \/* end ufgReady *\/\r\n})();\r\n<\/script>\r\n<\/div>\r\n<\/div>\r\n<!-- 2. Logo Marquee Slider -->\r\n<section class=\"fontib-home-logo-marquee\">\r\n    <div class=\"fontib-home-marquee-heading\">\r\n        <h3>Trusted by <span>Leading Brands & Platforms<\/span><\/h3>\r\n    <\/div>\r\n    <div class=\"fontib-home-marquee-wrapper\">\r\n    <div class=\"fontib-home-marquee-track\">\r\n        <div class=\"fontib-home-marquee-group\">\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/themeton.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Themeton-Logo.png\" alt=\"Themeton\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/followerins.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Follower-Logo@4x-1024x155-1.png\" alt=\"Follower\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/twiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Asset-5@2x-1.png\" alt=\"Asset 5\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/commentiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Commentiewer-Insta@4x-2048x257-1.png\" alt=\"Commentiewer\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/gramiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Gram-New@2x.png\" alt=\"Gram New\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x.png\" alt=\"Snap Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapstoryamerica.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x-1.png\" alt=\"Snap Logo 2\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/tiktosry.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Tik-Logo-New@2x.png\" alt=\"Tik Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontigen.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontigen-logo-scaled.png\" alt=\"Fontigen\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontlye.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontlye-main-logo.png\" alt=\"Fontlye\">\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"fontib-home-marquee-group\">\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/themeton.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Themeton-Logo.png\" alt=\"Themeton\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/followerins.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Follower-Logo@4x-1024x155-1.png\" alt=\"Follower\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/twiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Asset-5@2x-1.png\" alt=\"Asset 5\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/commentiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Commentiewer-Insta@4x-2048x257-1.png\" alt=\"Commentiewer\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/gramiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Gram-New@2x.png\" alt=\"Gram New\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x.png\" alt=\"Snap Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapstoryamerica.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x-1.png\" alt=\"Snap Logo 2\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/tiktosry.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Tik-Logo-New@2x.png\" alt=\"Tik Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontigen.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontigen-logo-scaled.png\" alt=\"Fontigen\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontlye.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontlye-main-logo.png\" alt=\"Fontlye\">\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<!-- 4. Feature Grid Section -->\r\n<section class=\"fontib-home-features\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Everything You Need in One Font Builder<\/h2>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bxs-bolt'><\/i>\r\n                    <\/div>\r\n                    <h5>Instant Font Preview<\/h5>\r\n                    <p>See your text change into multiple styles instantly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-clipboard'><\/i>\r\n                    <\/div>\r\n                    <h5>Copy and Paste Ready<\/h5>\r\n                    <p>Use generated fonts on social media, websites, bios, and messages.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-category'><\/i>\r\n                    <\/div>\r\n                    <h5>Multiple Font Categories<\/h5>\r\n                    <p>Explore bold, fancy, script, aesthetic, and creative font styles.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-pointer'><\/i>\r\n                    <\/div>\r\n                    <h5>No Design Skill Needed<\/h5>\r\n                    <p>Build stylish text without using complex design software.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-mobile-alt'><\/i>\r\n                    <\/div>\r\n                    <h5>Mobile Friendly<\/h5>\r\n                    <p>Create fonts smoothly from desktop, tablet, or phone.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-lock-open-alt'><\/i>\r\n                    <\/div>\r\n                    <h5>Free to Use<\/h5>\r\n                    <p>Start creating stylish text without signup barriers.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 5. How It Works Section -->\r\n<section class=\"fontib-home-how-it-works\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">How the Font Builder Works<\/h2>\r\n        <div class=\"row g-4 justify-content-center\">\r\n            <div class=\"col-12 col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-step-card\">\r\n                    <div class=\"fontib-home-step-icon\">\r\n                        <i class='bx bx-edit'><\/i>\r\n                        <span class=\"fontib-home-step-badge\">1<\/span>\r\n                    <\/div>\r\n                    <h5>Type Your Text<\/h5>\r\n                    <p>Enter your word, name, quote, caption, or bio text.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-12 col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-step-card\">\r\n                    <div class=\"fontib-home-step-icon\">\r\n                        <i class='bx bx-palette'><\/i>\r\n                        <span class=\"fontib-home-step-badge\">2<\/span>\r\n                    <\/div>\r\n                    <h5>Choose a Font Style<\/h5>\r\n                    <p>Browse different styles and pick the one that matches your vibe.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-12 col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-step-card\">\r\n                    <div class=\"fontib-home-step-icon\">\r\n                        <i class='bx bx-clipboard'><\/i>\r\n                        <span class=\"fontib-home-step-badge\">3<\/span>\r\n                    <\/div>\r\n                    <h5>Copy and Use Anywhere<\/h5>\r\n                    <p>Copy your favorite font and paste it into your profile, post, or design.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- 7. Benefits Section -->\r\n<section class=\"fontib-home-benefits\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <div class=\"row align-items-center\">\r\n            <div class=\"col-lg-5 mb-5 mb-lg-0\" data-aos=\"fade-right\">\r\n                <div class=\"fontib-home-3d-object\">\r\n                    <!-- Abstract representation of 3D font blocks -->\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/font-builder.webp\"\r\n                        style=\"width: 100%; height: auto;\" alt=\"font builder\" \/>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-7\" data-aos=\"fade-left\">\r\n                <h2 class=\"fontib-home-section-title text-start\" style=\"margin-bottom: 40px;\">Why Use an Online Font\r\n                    Builder?<\/h2>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-show'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Make Text Stand Out<\/h5>\r\n                        <p>Turn plain words into eye-catching text for profiles, posts, and creative projects.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-time-five'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Save Time<\/h5>\r\n                        <p>No need to install apps or design tools.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-fingerprint'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Create a Unique Style<\/h5>\r\n                        <p>Build text that matches your personal, brand, or creator identity.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-globe'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Use Anywhere<\/h5>\r\n                        <p>Paste your generated fonts into supported platforms, bios, messages, and captions.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 8. Font Categories Section -->\r\n<section class=\"fontib-home-categories\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\"> Type of Font Builder<\/h2>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Fancy Font<\/h5>\r\n                        <p>Create elegant and decorative text styles.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Cursive Font <\/h5>\r\n                        <p>Generate flowing, handwritten text.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Stylish Font<\/h5>\r\n                        <p>Build modern and trendy text formats.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Instagram Font<\/h5>\r\n                        <p>Optimized fonts for IG bios and captions.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Signature Font<\/h5>\r\n                        <p>Design personal signature-style text.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Cool Font<\/h5>\r\n                        <p>Create edgy and unique text looks.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Name Font<\/h5>\r\n                        <p>Stylize usernames and personal names.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"350\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Bio Font<\/h5>\r\n                        <p>Perfect fonts for social media bios.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 9. Comparison Section -->\r\n<section class=\"fontib-home-comparison\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Font Builder vs Regular Text Editor<\/h2>\r\n        <div class=\"table-responsive\" data-aos=\"fade-up\">\r\n            <table class=\"table table-borderless fontib-home-comparison-table mb-0\">\r\n                <thead>\r\n                    <tr>\r\n                        <th style=\"width: 40%;\">Feature<\/th>\r\n                        <th style=\"width: 30%;\">Regular Text Editor<\/th>\r\n                        <th style=\"width: 30%;\">Online Font Builder<\/th>\r\n                    <\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <tr>\r\n                        <td>Stylish text output<\/td>\r\n                        <td>Limited<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Yes<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Copy-paste fonts<\/td>\r\n                        <td>No<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Yes<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Social media ready<\/td>\r\n                        <td>No<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Yes<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Multiple styles<\/td>\r\n                        <td>Limited<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Many styles<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Fast preview<\/td>\r\n                        <td>Basic<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Instant<\/td>\r\n                    <\/tr>\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 10. Testimonials \/ User Feedback Section -->\r\n<section class=\"fontib-home-testimonials\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Loved by Creators and Everyday Users<\/h2>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-testimonial-card\">\r\n                    <p class=\"fontib-home-testimonial-text\">\"This font builder makes it easy to create stylish bios and\r\n                        captions without opening a design app. It saves me so much time!\"<\/p>\r\n                    <div class=\"fontib-home-testimonial-author\">\r\n                        <div class=\"fontib-home-author-avatar\">S<\/div>\r\n                        <div class=\"fontib-home-author-info\">\r\n                            <h6>Sarah J.<\/h6>\r\n                            <span>Content Creator<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-testimonial-card\">\r\n                    <p class=\"fontib-home-testimonial-text\">\"I use it to make my brand name stand out on social media.\r\n                        The fancy fonts give my small business a professional touch.\"<\/p>\r\n                    <div class=\"fontib-home-testimonial-author\">\r\n                        <div class=\"fontib-home-author-avatar\">M<\/div>\r\n                        <div class=\"fontib-home-author-info\">\r\n                            <h6>Mike R.<\/h6>\r\n                            <span>Small Business Owner<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-testimonial-card\">\r\n                    <p class=\"fontib-home-testimonial-text\">\"Perfect for making my gaming username look cool. I use it\r\n                        for my TikTok and Instagram bios all the time.\"<\/p>\r\n                    <div class=\"fontib-home-testimonial-author\">\r\n                        <div class=\"fontib-home-author-avatar\">A<\/div>\r\n                        <div class=\"fontib-home-author-info\">\r\n                            <h6>Alex T.<\/h6>\r\n                            <span>Student \/ Gamer<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 11. Blog Section -->\r\n<section class=\"fontib-home-blog\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Fontib <span class=\"\">Guide and Tips<\/span><\/h2>\r\n        <div class=\"fontib-home-blog-grid\">\r\n            <a href=\"https:\/\/fontib.com\/what-font-size-should-a-cover-letter-be\/\" class=\"fontib-home-blog-card\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/what-font-size-should-a-cover-letter-be-400x250.webp\" alt=\"What Font Size Should A Cover Letter Be?\" class=\"fontib-home-blog-card-img\">\r\n                <div class=\"fontib-home-blog-card-body\">\r\n                    <span class=\"fontib-home-blog-card-category\">Career<\/span>\r\n                    <h4>What Font Size Should A Cover Letter Be?<\/h4>\r\n                <\/div>\r\n            <\/a>\r\n            <a href=\"https:\/\/fontib.com\/how-to-get-papyrus-font-on-instagram-stories-easily\/\" class=\"fontib-home-blog-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/how-to-get-papyrus-font-on-instagram-400x250.webp\" alt=\"How To Get Papyrus Font On Instagram Stories Easily\" class=\"fontib-home-blog-card-img\">\r\n                <div class=\"fontib-home-blog-card-body\">\r\n                    <span class=\"fontib-home-blog-card-category\">Instagram Tips<\/span>\r\n                    <h4>How To Get Papyrus Font On Instagram Stories Easily<\/h4>\r\n                <\/div>\r\n            <\/a>\r\n            <a href=\"https:\/\/fontib.com\/what-font-does-instagram-use-for-captions-guide\/\" class=\"fontib-home-blog-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/what-font-does-instagram-use-for-captions-400x250.webp\" alt=\"What Font Does Instagram Use For Captions? Guide\" class=\"fontib-home-blog-card-img\">\r\n                <div class=\"fontib-home-blog-card-body\">\r\n                    <span class=\"fontib-home-blog-card-category\">Instagram Guide<\/span>\r\n                    <h4>What Font Does Instagram Use For Captions? Guide<\/h4>\r\n                <\/div>\r\n            <\/a>\r\n        <\/div>\r\n        <div style=\"text-align:center;margin-top:48px;\" data-aos=\"fade-up\">\r\n            <a href=\"https:\/\/fontib.com\/blog\/\" class=\"fontib-home-btn-outline\" style=\"border-radius:50px;\">\r\n                <i class='bx bx-book-open'><\/i> View All Blog\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 12. FAQ Section -->\r\n<section class=\"fontib-home-faq\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Common Questions<\/h2>\r\n        <div class=\"row justify-content-center\">\r\n            <div class=\"col-lg-8\" data-aos=\"fade-up\">\r\n                <div class=\"accordion\" id=\"fontibAboutFaqAccordion\">\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqOne\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-info-circle'><\/i><\/div>\r\n                                    What is a font builder?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqOne\" class=\"accordion-collapse collapse show\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                A font builder is an online tool that converts your standard text into various stylish,\r\n                                fancy, or creative fonts using special Unicode characters. These fonts can be copied and\r\n                                pasted into social media platforms, messaging apps, and websites.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqTwo\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-copy'><\/i><\/div>\r\n                                    Can I copy and paste the fonts anywhere?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqTwo\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                Yes! The fonts generated by our tool are made from Unicode characters, which are\r\n                                supported by most modern devices and platforms. You can paste them into Instagram,\r\n                                TikTok, Twitter, Facebook, YouTube, Discord, and many other apps.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqThree\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-wallet'><\/i><\/div>\r\n                                    Is this font builder free?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqThree\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                Absolutely. Our font builder is 100% free to use. There are no hidden fees, and you\r\n                                don't need to create an account or sign up to start generating fonts.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqFour\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bxl-instagram'><\/i><\/div>\r\n                                    Can I use these fonts for Instagram and TikTok?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqFour\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                Yes, these fonts are perfect for Instagram bios, captions, TikTok captions, and\r\n                                comments. They are specifically designed to work seamlessly on social media platforms to\r\n                                help your profile stand out.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqFive\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-download'><\/i><\/div>\r\n                                    Do I need to install anything?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqFive\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                No installation is required. The font builder runs entirely in your web browser. Simply\r\n                                visit the website, type your text, and copy your favorite style.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqSix\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-font'><\/i><\/div>\r\n                                    What types of fonts can I create?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqSix\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                You can create a wide variety of fonts including Fancy, Cursive, Bold, Script,\r\n                                Aesthetic, Cool, Cute, Gaming, Signature, and more. We are constantly adding new styles\r\n                                to give you more options.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 12. Final CTA Section -->\r\n<section class=\"fontib-home-final-cta\">\r\n    <!-- Floating Letters Background -->\r\n    <div class=\"fontib-home-floating-letters\" style=\"top: 10%; left: 5%; font-size: 15rem; transform: rotate(-15deg);\">\r\n        A<\/div>\r\n    <div class=\"fontib-home-floating-letters\"\r\n        style=\"bottom: 5%; right: 5%; font-size: 12rem; transform: rotate(10deg);\">B<\/div>\r\n    <div class=\"fontib-home-floating-letters\" style=\"top: 40%; right: 15%; font-size: 8rem; transform: rotate(20deg);\">\r\n        x<\/div>\r\n\r\n    <div class=\"fontib-home-wrapper\">\r\n        <div class=\"fontib-home-final-cta-card\" data-aos=\"zoom-in\">\r\n            <h2>Ready to Build Your Own Font Style?<\/h2>\r\n            <p>Start creating stylish, copy-ready text with a fast and easy font builder made for social profiles,\r\n                captions, names, and creative projects.<\/p>\r\n            <div class=\"d-flex flex-wrap justify-content-center gap-3\">\r\n                <a href=\"#\" class=\"btn fontib-home-btn-primary btn-lg px-5\">Start Using Font Builder<\/a>\r\n                <a href=\"#\" class=\"btn fontib-home-btn-outline btn-lg px-4\">Browse Font Styles<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n\r\n        \/\/ Simple interaction for preview section\r\n        const copyBtns = document.querySelectorAll('.fontib-home-copy-btn');\r\n        copyBtns.forEach(btn => {\r\n            btn.addEventListener('click', function () {\r\n                const originalText = this.innerText;\r\n                this.innerText = 'Copied!';\r\n                this.style.background = 'var(--fontib-home-primary)';\r\n                this.style.color = '#fff';\r\n                setTimeout(() => {\r\n                    this.innerText = originalText;\r\n                    this.style.background = '';\r\n                    this.style.color = '';\r\n                }, 1500);\r\n            });\r\n        });\r\n\r\n        \/\/ Filter button toggle\r\n        const filterBtns = document.querySelectorAll('.fontib-home-filter-btn');\r\n        filterBtns.forEach(btn => {\r\n            btn.addEventListener('click', function () {\r\n                filterBtns.forEach(b => b.classList.remove('active'));\r\n                this.classList.add('active');\r\n            });\r\n        });\r\n\r\n        \/\/ Builder Mockup - Live Preview\r\n        const builderInput = document.getElementById('fontibBuilderInput');\r\n        const builderPreview = document.getElementById('fontibBuilderPreview');\r\n        const builderChips = document.querySelectorAll('.fontib-home-builder-chip');\r\n        const builderCopyBtn = document.querySelector('.fontib-home-builder-copy-btn');\r\n        const charCount = document.querySelector('.fontib-home-builder-char-count');\r\n\r\n        const fontStyles = {\r\n            bold: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D400 + base) : String.fromCodePoint(0x1D41A + base);\r\n            }),\r\n            italic: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D434 + base) : String.fromCodePoint(0x1D44E + base);\r\n            }),\r\n            script: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D49C + base) : String.fromCodePoint(0x1D4B6 + base);\r\n            }),\r\n            serif: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D400 + base) : String.fromCodePoint(0x1D41A + base);\r\n            }),\r\n            mono: (text) => text.replace(\/[a-zA-Z0-9]\/g, (c) => {\r\n                if (c >= 'a' && c <= 'z') return String.fromCodePoint(0x1D670 + c.charCodeAt(0) - 97);\r\n                if (c >= 'A' && c <= 'Z') return String.fromCodePoint(0x1D656 + c.charCodeAt(0) - 65);\r\n                if (c >= '0' && c <= '9') return String.fromCodePoint(0x1D7F6 + c.charCodeAt(0) - 48);\r\n                return c;\r\n            })\r\n        };\r\n\r\n        function updatePreview() {\r\n            const text = builderInput.value || 'Hello World!';\r\n            const activeChip = document.querySelector('.fontib-home-builder-chip.active');\r\n            const style = activeChip ? activeChip.dataset.style : 'bold';\r\n            const converter = fontStyles[style] || fontStyles.bold;\r\n            builderPreview.textContent = converter(text);\r\n            charCount.textContent = text.length + ' characters';\r\n        }\r\n\r\n        if (builderInput) {\r\n            builderInput.addEventListener('input', updatePreview);\r\n        }\r\n\r\n        builderChips.forEach(chip => {\r\n            chip.addEventListener('click', function () {\r\n                builderChips.forEach(c => c.classList.remove('active'));\r\n                this.classList.add('active');\r\n                updatePreview();\r\n            });\r\n        });\r\n\r\n        if (builderCopyBtn) {\r\n            builderCopyBtn.addEventListener('click', function () {\r\n                const text = builderPreview.textContent;\r\n                navigator.clipboard.writeText(text).then(() => {\r\n                    this.innerHTML = \"<i class='bx bx-check'><\/i> Copied!\";\r\n                    setTimeout(() => {\r\n                        this.innerHTML = \"<i class='bx bx-clipboard'><\/i> Copy\";\r\n                    }, 1500);\r\n                });\r\n            });\r\n        }\r\n\r\n        \/\/ Toolbar button toggle\r\n        const toolBtns = document.querySelectorAll('.fontib-home-builder-tool-btn');\r\n        toolBtns.forEach(btn => {\r\n            btn.addEventListener('click', function () {\r\n                this.classList.toggle('active');\r\n            });\r\n        });\r\n    });\r\n<\/script>[\/et_pb_fullwidth_code][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<!-- <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/unpkg.com\/boxicons@2.1.4\/css\/boxicons.min.css\" rel=\"stylesheet\"> -->\r\n\r\n<style>\r\n    :root {\r\n        --fontib-home-primary: #003EA4;\r\n        --fontib-home-secondary: #185cc9;\r\n        --fontib-home-btn-gradient: linear-gradient(90deg, rgb(0, 62, 164), rgb(24, 92, 201));\r\n        --fontib-home-hero-bg: linear-gradient(135deg, rgb(244, 247, 255) 0%, rgb(238, 253, 248) 100%);\r\n        --fontib-home-text-dark: #1a1a1a;\r\n        --fontib-home-text-muted: #5f6b7a;\r\n        --fontib-home-white: #ffffff;\r\n        --fontib-home-light-gray: #f8f9fc;\r\n        --fontib-home-border: #e2e8f0;\r\n        --fontib-home-glow: rgba(0, 62, 164, 0.15);\r\n        --fontib-home-font: 'Inter', sans-serif;\r\n    }\r\n\r\n    \/* 1. Hero Section *\/\r\n    .fontib-home-hero {\r\n        background: linear-gradient(135deg, #f4f7ff 0%, #e8f0fe 30%, #f0f7ff 60%, #f8f9fc 100%);\r\n        padding: 120px 0 100px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        min-height: 90vh;\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-home-hero::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -200px;\r\n        right: -200px;\r\n        width: 800px;\r\n        height: 800px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.08) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        z-index: 0;\r\n    }\r\n\r\n    .fontib-home-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -150px;\r\n        left: -150px;\r\n        width: 600px;\r\n        height: 600px;\r\n        background: radial-gradient(circle, rgba(24, 92, 201, 0.06) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        z-index: 0;\r\n    }\r\n\r\n    .fontib-home-hero-grid {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-home-hero-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 8px 20px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        color: var(--fontib-home-primary);\r\n        border-radius: 50px;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        margin-bottom: 24px;\r\n        border: 1px solid rgba(0, 62, 164, 0.12);\r\n        box-shadow: 0 4px 16px rgba(0, 62, 164, 0.06);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-home-hero-badge i {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .fontib-home-hero h1 {\r\n        font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n        font-weight: 800;\r\n        color: var(--fontib-home-text-dark);\r\n        line-height: 1.15;\r\n        margin-bottom: 24px;\r\n        letter-spacing: -0.02em;\r\n    }\r\n\r\n    .fontib-home-hero h1 span {\r\n        background: var(--fontib-home-btn-gradient);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-home-hero h1 span::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 2px;\r\n        left: 0;\r\n        right: 0;\r\n        height: 8px;\r\n        background: rgba(0, 62, 164, 0.1);\r\n        border-radius: 4px;\r\n        z-index: -1;\r\n    }\r\n\r\n    .fontib-home-hero p {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-home-text-muted);\r\n        margin-bottom: 36px;\r\n        max-width: 520px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .fontib-home-hero-buttons {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 16px;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .fontib-home-btn-primary {\r\n        background: var(--fontib-home-btn-gradient);\r\n        color: var(--fontib-home-white);\r\n        border: none;\r\n        padding: 16px 36px;\r\n        border-radius: 12px;\r\n        font-weight: 700;\r\n        font-size: 15px;\r\n        transition: all 0.3s ease;\r\n        box-shadow: 0 6px 24px rgba(0, 62, 164, 0.25);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .fontib-home-btn-primary::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.1));\r\n        transform: translateX(-100%);\r\n        transition: transform 0.6s ease;\r\n    }\r\n\r\n    .fontib-home-btn-primary:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 10px 36px rgba(0, 62, 164, 0.35);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-btn-primary:hover::before {\r\n        transform: translateX(100%);\r\n    }\r\n\r\n    .fontib-home-btn-outline {\r\n        background: rgba(255, 255, 255, 0.6);\r\n        backdrop-filter: blur(8px);\r\n        -webkit-backdrop-filter: blur(8px);\r\n        color: var(--fontib-home-primary);\r\n        border: 2px solid rgba(0, 62, 164, 0.15);\r\n        padding: 14px 34px;\r\n        border-radius: 12px;\r\n        font-weight: 700;\r\n        font-size: 15px;\r\n        transition: all 0.3s ease;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .fontib-home-btn-outline:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 8px 28px rgba(0, 62, 164, 0.2);\r\n    }\r\n\r\n    .fontib-home-hero-stats {\r\n        display: flex;\r\n        gap: 32px;\r\n    }\r\n\r\n    .fontib-home-hero-stat {\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-home-hero-stat-number {\r\n        font-size: 1.8rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-home-primary);\r\n        line-height: 1;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-home-hero-stat-label {\r\n        font-size: 12px;\r\n        color: var(--fontib-home-text-muted);\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    \/* Builder Mock UI *\/\r\n    .fontib-home-builder-mockup {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-home-builder-window {\r\n        background: rgba(255, 255, 255, 0.7);\r\n        backdrop-filter: blur(24px);\r\n        -webkit-backdrop-filter: blur(24px);\r\n        border-radius: 24px;\r\n        border: 1px solid rgba(255, 255, 255, 0.9);\r\n        box-shadow: 0 24px 64px rgba(0, 62, 164, 0.1), 0 8px 24px rgba(0, 62, 164, 0.05);\r\n        overflow: hidden;\r\n        position: relative;\r\n        transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .fontib-home-builder-window:hover {\r\n        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-home-builder-titlebar {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 16px 20px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border-bottom: 1px solid rgba(0, 62, 164, 0.06);\r\n        gap: 12px;\r\n    }\r\n\r\n    .fontib-home-builder-dots {\r\n        display: flex;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-home-builder-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-home-builder-dot-red {\r\n        background: #ff5f57;\r\n    }\r\n\r\n    .fontib-home-builder-dot-yellow {\r\n        background: #ffbd2e;\r\n    }\r\n\r\n    .fontib-home-builder-dot-green {\r\n        background: #28c840;\r\n    }\r\n\r\n    .fontib-home-builder-titlebar-text {\r\n        flex: 1;\r\n        text-align: center;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--fontib-home-text-muted);\r\n    }\r\n\r\n    .fontib-home-builder-toolbar {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 12px 20px;\r\n        background: rgba(248, 249, 252, 0.8);\r\n        border-bottom: 1px solid rgba(0, 62, 164, 0.06);\r\n        gap: 8px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .fontib-home-builder-tool-btn {\r\n        padding: 8px 12px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid rgba(0, 62, 164, 0.08);\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n        color: var(--fontib-home-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-home-builder-tool-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-builder-tool-btn.active {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-builder-tool-separator {\r\n        width: 1px;\r\n        height: 24px;\r\n        background: rgba(0, 62, 164, 0.1);\r\n        margin: 0 4px;\r\n    }\r\n\r\n    .fontib-home-builder-input-area {\r\n        padding: 24px 20px;\r\n        background: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .fontib-home-builder-input-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .fontib-home-builder-text-input {\r\n        width: 100%;\r\n        padding: 14px 18px !important;\r\n        background: var(--fontib-home-white);\r\n        border: 2px solid rgba(0, 62, 164, 0.08) !important;\r\n        border-radius: 12px;\r\n        font-size: 16px;\r\n        color: var(--fontib-home-text-dark) !important;\r\n        font-family: var(--fontib-home-font);\r\n        outline: none;\r\n        transition: all 0.3s ease;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-home-builder-text-input:focus {\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 0 0 4px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-home-builder-preview-area {\r\n        padding: 24px 20px;\r\n        background: rgba(248, 249, 252, 0.5);\r\n        border-top: 1px solid rgba(0, 62, 164, 0.06);\r\n    }\r\n\r\n    .fontib-home-builder-preview-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .fontib-home-builder-preview-text {\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-dark);\r\n        line-height: 1.4;\r\n        margin-bottom: 16px;\r\n        min-height: 60px;\r\n    }\r\n\r\n    .fontib-home-builder-style-chips {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-home-builder-chip {\r\n        padding: 6px 14px;\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid rgba(0, 62, 164, 0.1);\r\n        border-radius: 50px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--fontib-home-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-home-builder-chip:hover,\r\n    .fontib-home-builder-chip.active {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-builder-footer {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 14px 20px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border-top: 1px solid rgba(0, 62, 164, 0.06);\r\n    }\r\n\r\n    .fontib-home-builder-copy-btn {\r\n        padding: 8px 20px;\r\n        background: var(--fontib-home-btn-gradient);\r\n        color: var(--fontib-home-white);\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-builder-copy-btn:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 4px 16px rgba(0, 62, 164, 0.25);\r\n    }\r\n\r\n    .fontib-home-builder-char-count {\r\n        font-size: 12px;\r\n        color: var(--fontib-home-text-muted);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge {\r\n        position: absolute;\r\n        padding: 10px 16px;\r\n        background: rgba(255, 255, 255, 0.9);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border-radius: 12px;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-primary);\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.12);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        z-index: 2;\r\n        animation: fontib-home-float 3s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge.badge-top {\r\n        top: -20px;\r\n        right: -30px;\r\n        animation-delay: 0s;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge.badge-bottom {\r\n        bottom: 40px;\r\n        left: -40px;\r\n        animation-delay: 1.5s;\r\n    }\r\n\r\n    .fontib-home-builder-floating-badge i {\r\n        font-size: 18px;\r\n    }\r\n\r\n    @keyframes fontib-home-float {\r\n        0%, 100% {\r\n            transform: translateY(0);\r\n        }\r\n        50% {\r\n            transform: translateY(-10px);\r\n        }\r\n    }\r\n\r\n    \/* 2. Logo Marquee Slider *\/\r\n    .fontib-home-logo-marquee {\r\n        padding: 60px 0 50px;\r\n        background: var(--fontib-home-white);\r\n        border-bottom: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-marquee-heading {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .fontib-home-marquee-heading h3 {\r\n        font-size: 1.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-muted);\r\n        \/* text-transform: uppercase; *\/\r\n        letter-spacing: 2px;\r\n        margin: 0;\r\n    }\r\n\r\n    .fontib-home-marquee-heading h3 span {\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-marquee-wrapper {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        overflow: hidden;\r\n        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);\r\n        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);\r\n    }\r\n\r\n    .fontib-home-marquee-track {\r\n        display: flex;\r\n        width: max-content;\r\n        animation: fontib-home-marquee-scroll 30s linear infinite;\r\n    }\r\n\r\n    .fontib-home-marquee-track:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    .fontib-home-marquee-group {\r\n        display: flex;\r\n        gap: 40px;\r\n        align-items: center;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .fontib-home-marquee-item {\r\n        flex-shrink: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        height: 40px;\r\n        padding: 8px 16px;\r\n        background: rgba(248, 249, 252, 0.8);\r\n        border-radius: 8px;\r\n        border: none;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-marquee-item:hover {\r\n        background: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 4px 16px rgba(0, 62, 164, 0.1);\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .fontib-home-marquee-item a {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-decoration: none;\r\n        color: inherit;\r\n    }\r\n\r\n    .fontib-home-marquee-item img {\r\n        max-height: 24px;\r\n        max-width: 120px;\r\n        width: auto;\r\n        object-fit: contain;\r\n        filter: grayscale(100%);\r\n        opacity: 0.6;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-marquee-item:hover img {\r\n        filter: grayscale(0%);\r\n        opacity: 1;\r\n    }\r\n\r\n    @keyframes fontib-home-marquee-scroll {\r\n        0% {\r\n            transform: translateX(0);\r\n        }\r\n        100% {\r\n            transform: translateX(-50%);\r\n        }\r\n    }\r\n\r\n    @keyframes fontib-home-marquee-scroll-reverse {\r\n        0% {\r\n            transform: translateX(-50%);\r\n        }\r\n        100% {\r\n            transform: translateX(0);\r\n        }\r\n    }\r\n\r\n    .fontib-home-marquee-track-reverse {\r\n        display: flex;\r\n        width: max-content;\r\n        animation: fontib-home-marquee-scroll-reverse 30s linear infinite;\r\n    }\r\n\r\n    .fontib-home-marquee-track-reverse:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    \/* 3. Tool Preview *\/\r\n    .fontib-home-preview {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-light-gray);\r\n    }\r\n\r\n    .fontib-home-section-title {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-dark);\r\n        margin-bottom: 60px;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-home-preview-input-box {\r\n        background: var(--fontib-home-white);\r\n        padding: 40px;\r\n        border-radius: 20px;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-home-style-filters {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        margin-top: 25px;\r\n    }\r\n\r\n    .fontib-home-filter-btn {\r\n        background: var(--fontib-home-light-gray);\r\n        border: 1px solid var(--fontib-home-border);\r\n        color: var(--fontib-home-text-muted);\r\n        padding: 8px 20px;\r\n        border-radius: 50px;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-home-filter-btn.active,\r\n    .fontib-home-filter-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-output-card {\r\n        background: var(--fontib-home-white);\r\n        padding: 20px;\r\n        border-radius: 16px;\r\n        margin-bottom: 20px;\r\n        border: 1px solid var(--fontib-home-border);\r\n        transition: all 0.3s ease;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-home-output-card:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\r\n        border-color: var(--fontib-home-secondary);\r\n    }\r\n\r\n    .fontib-home-output-text {\r\n        font-size: 1.2rem;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-copy-btn {\r\n        background: var(--fontib-home-light-gray);\r\n        border: none;\r\n        padding: 8px 16px;\r\n        border-radius: 6px;\r\n        color: var(--fontib-home-primary);\r\n        font-weight: 600;\r\n        font-size: 14px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-home-copy-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    \/* 4. Feature Grid *\/\r\n    .fontib-home-features {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-feature-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 45px 40px;\r\n        border-radius: 16px;\r\n        height: 100%;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid transparent;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-home-feature-card:hover {\r\n        background: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-border);\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);\r\n        transform: translateY(-5px);\r\n    }\r\n\r\n    .fontib-home-feature-icon {\r\n        width: 90px;\r\n        height: 90px;\r\n        margin: 0 auto 25px;\r\n        background: linear-gradient(135deg, var(--fontib-home-primary), var(--fontib-home-secondary));\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-white);\r\n        font-size: 36px;\r\n        box-shadow: 0 10px 30px rgba(0, 62, 164, 0.25);\r\n    }\r\n\r\n    .fontib-home-feature-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.25rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-feature-card p {\r\n        color: var(--fontib-home-text-muted);\r\n        font-size: 1.05rem;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* 5. How It Works *\/\r\n    .fontib-home-how-it-works {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-step-card {\r\n        text-align: center;\r\n        position: relative;\r\n        padding: 40px 30px;\r\n        background: var(--fontib-home-white);\r\n        border-radius: 20px;\r\n        border: 1px solid var(--fontib-home-border);\r\n        transition: all 0.4s ease;\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-home-step-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 20px 50px rgba(0, 62, 164, 0.12);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-step-icon {\r\n        width: 90px;\r\n        height: 90px;\r\n        margin: 0 auto 25px;\r\n        background: linear-gradient(135deg, var(--fontib-home-primary), var(--fontib-home-secondary));\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-white);\r\n        font-size: 36px;\r\n        box-shadow: 0 10px 30px rgba(0, 62, 164, 0.25);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-home-step-badge {\r\n        position: absolute;\r\n        top: -8px;\r\n        right: -8px;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: var(--fontib-home-white);\r\n        border: 2px solid var(--fontib-home-primary);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-step-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.2rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-step-card p {\r\n        color: var(--fontib-home-text-muted);\r\n        font-size: 0.95rem;\r\n        margin: 0 auto;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* 6. Popular Styles *\/\r\n    .fontib-home-popular-styles {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-style-showcase-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 25px;\r\n        border-radius: 12px;\r\n        text-align: center;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid transparent;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .fontib-home-style-showcase-card:hover {\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 10px 25px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-home-style-preview-text {\r\n        font-size: 1.5rem;\r\n        margin: 20px 0;\r\n        color: var(--fontib-home-text-dark);\r\n        min-height: 60px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-home-style-name {\r\n        font-weight: 700;\r\n        margin-bottom: 10px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-try-style-btn {\r\n        background: transparent;\r\n        color: var(--fontib-home-primary);\r\n        border: 1px solid var(--fontib-home-primary);\r\n        padding: 8px 20px;\r\n        border-radius: 6px;\r\n        font-weight: 600;\r\n        font-size: 14px;\r\n        transition: all 0.2s ease;\r\n        width: 100%;\r\n    }\r\n\r\n    .fontib-home-try-style-btn:hover {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    \/* 7. Benefits *\/\r\n    .fontib-home-benefits {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-hero-bg);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-home-benefit-item {\r\n        margin-bottom: 30px;\r\n        display: flex;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .fontib-home-benefit-icon {\r\n        min-width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-home-white);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-right: 20px;\r\n        color: var(--fontib-home-primary);\r\n        font-size: 24px;\r\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .fontib-home-benefit-text h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-benefit-text p {\r\n        color: var(--fontib-home-text-muted);\r\n        margin: 0;\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .fontib-home-3d-object {\r\n        background: var(--fontib-home-white);\r\n        \/* height: 400px; *\/\r\n        border-radius: 24px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 30px 60px rgba(0, 62, 164, 0.1);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-home-3d-object::before {\r\n        content: 'Aa';\r\n        font-size: 12rem;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.05);\r\n        position: absolute;\r\n    }\r\n\r\n    \/* 8. Categories *\/\r\n    .fontib-home-categories {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-category-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 30px;\r\n        border-radius: 16px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid transparent;\r\n        height: 100%;\r\n\/*         cursor: pointer; *\/\r\n    }\r\n\r\n    .fontib-home-category-card:hover {\r\n        background: var(--fontib-home-white);\r\n        border-color: var(--fontib-home-primary);\r\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    .fontib-home-category-card h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-home-text-dark);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .fontib-home-category-card p {\r\n        color: var(--fontib-home-text-muted);\r\n        margin: 0;\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .fontib-home-category-arrow {\r\n        color: var(--fontib-home-primary);\r\n        font-size: 24px;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-category-card:hover .fontib-home-category-arrow {\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    \/* 9. Comparison *\/\r\n    .fontib-home-comparison {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-light-gray);\r\n    }\r\n\r\n    .fontib-home-comparison-table {\r\n        background: var(--fontib-home-white);\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);\r\n    }\r\n\r\n    .fontib-home-comparison-table thead th {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n        padding: 20px;\r\n        font-weight: 600;\r\n        border: none;\r\n    }\r\n\r\n    .fontib-home-comparison-table tbody td {\r\n        padding: 20px;\r\n        border-bottom: 1px solid var(--fontib-home-border);\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-comparison-table .bg-highlight {\r\n        background: rgba(0, 62, 164, 0.05);\r\n        font-weight: 600;\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    \/* 10. Testimonials *\/\r\n    .fontib-home-testimonials {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-testimonial-card {\r\n        background: var(--fontib-home-light-gray);\r\n        padding: 35px;\r\n        border-radius: 16px;\r\n        height: 100%;\r\n        border: 1px solid transparent;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-testimonial-card:hover {\r\n        border-color: var(--fontib-home-border);\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .fontib-home-testimonial-text {\r\n        font-style: italic;\r\n        color: var(--fontib-home-text-muted);\r\n        margin-bottom: 25px;\r\n        font-size: 1.05rem;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .fontib-home-testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-home-author-avatar {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-home-primary);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-white);\r\n        font-weight: 700;\r\n        font-size: 20px;\r\n        margin-right: 15px;\r\n    }\r\n\r\n    .fontib-home-author-info h6 {\r\n        font-weight: 700;\r\n        margin-bottom: 2px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-author-info span {\r\n        color: var(--fontib-home-text-muted);\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    \/* 11. Blog *\/\r\n    .fontib-home-blog {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-light-gray);\r\n    }\r\n\r\n    .fontib-home-blog-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 36px;\r\n    }\r\n\r\n    .fontib-home-blog-card {\r\n        display: block;\r\n        text-decoration: none;\r\n        color: inherit;\r\n        background: var(--fontib-home-white);\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        transition: all 0.4s ease;\r\n        border: 1px solid var(--fontib-home-border);\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);\r\n        cursor: pointer;\r\n    }\r\n\r\n    .fontib-home-blog-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 20px 50px rgba(0, 62, 164, 0.12);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-blog-card-img {\r\n        width: 100%;\r\n        display: block;\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .fontib-home-blog-card:hover .fontib-home-blog-card-img {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .fontib-home-blog-card-body {\r\n        padding: 25px 32px 10px;\r\n        border-top: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-blog-card-category {\r\n        display: inline-block;\r\n        padding: 8px 18px;\r\n        background: rgba(0, 62, 164, 0.08);\r\n        color: var(--fontib-home-primary);\r\n        border-radius: 50px;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        letter-spacing: 0.5px;\r\n        text-transform: uppercase;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .fontib-home-blog-card h4 {\r\n        font-size: 1.35rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-home-text-dark);\r\n        margin-bottom: 16px;\r\n        line-height: 1.4;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-blog-card:hover h4 {\r\n        color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-blog-card p {\r\n        font-size: 1rem;\r\n        color: var(--fontib-home-text-muted);\r\n        line-height: 1.75;\r\n        margin-bottom: 22px;\r\n    }\r\n\r\n\r\n\r\n    @media (max-width: 991px) {\r\n        .fontib-home-blog-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-home-blog-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    \/* 12. FAQ *\/\r\n    .fontib-home-faq {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-accordion-item {\r\n        background: var(--fontib-home-white);\r\n        border: none;\r\n        border-radius: 16px !important;\r\n        margin-bottom: 20px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.4s ease;\r\n        border: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-accordion-item:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.12);\r\n        border-color: var(--fontib-home-primary);\r\n    }\r\n\r\n    .fontib-home-accordion-button {\r\n        font-weight: 600;\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-home-text-dark);\r\n        padding: 24px 30px;\r\n        text-align: left;\r\n        border: none !important;\r\n        background: var(--fontib-home-white);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        width: 100%;\r\n        position: relative;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed) {\r\n        color: var(--fontib-home-primary);\r\n        background: var(--fontib-home-white);\r\n        border-bottom: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-accordion-button::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        right: 30px;\r\n        top: 50%;\r\n        transform: translateY(-50%) rotate(0deg);\r\n        width: 16px;\r\n        height: 16px;\r\n        background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23003EA4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n        background-size: contain;\r\n        background-repeat: no-repeat;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed)::after {\r\n        transform: translateY(-50%) rotate(180deg);\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed) .accordion-title-icon {\r\n        background: var(--fontib-home-primary);\r\n        color: var(--fontib-home-white);\r\n    }\r\n\r\n    .fontib-home-accordion-body {\r\n        padding: 0 30px 24px 30px;\r\n        color: var(--fontib-home-text-muted);\r\n        line-height: 1.7;\r\n        font-size: 0.95rem;\r\n        border-top: 1px solid var(--fontib-home-border);\r\n    }\r\n\r\n    .fontib-home-accordion-item h2 {\r\n        margin: 0;\r\n        font-size: 0;\r\n    }\r\n\r\n    .accordion-title {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        flex: 1;\r\n    }\r\n\r\n    .accordion-title-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n        background: var(--fontib-home-light-gray);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-home-primary);\r\n        font-size: 18px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-home-wrapper {\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-home-wrapper-wide {\r\n        width: 100%;\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 0 24px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-home-wrapper-narrow {\r\n        width: 100%;\r\n        max-width: 900px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    @media (max-width: 991px) {\r\n        .fontib-home-wrapper,\r\n        .fontib-home-wrapper-wide,\r\n        .fontib-home-wrapper-narrow {\r\n            padding: 0 16px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-home-wrapper,\r\n        .fontib-home-wrapper-wide,\r\n        .fontib-home-wrapper-narrow {\r\n            padding: 0 12px;\r\n        }\r\n    }\r\n\r\n    .fontib-home-accordion-button:not(.collapsed) {\r\n        color: var(--fontib-home-primary);\r\n        background: rgba(0, 62, 164, 0.03);\r\n    }\r\n\r\n    .fontib-home-accordion-button::after {\r\n        background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23003EA4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n    }\r\n\r\n    \/* 12. Final CTA *\/\r\n    .fontib-home-final-cta {\r\n        padding: 100px 0;\r\n        background: var(--fontib-home-hero-bg);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-home-final-cta-card {\r\n        background: rgba(255, 255, 255, 0.8);\r\n        backdrop-filter: blur(20px);\r\n        padding: 80px 60px;\r\n        border-radius: 30px;\r\n        text-align: center;\r\n        box-shadow: 0 20px 60px rgba(0, 62, 164, 0.1);\r\n        border: 1px solid rgba(255, 255, 255, 0.9);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-home-final-cta-card h2 {\r\n        font-size: 2.8rem;\r\n        font-weight: 700;\r\n        margin-bottom: 20px;\r\n        color: var(--fontib-home-text-dark);\r\n    }\r\n\r\n    .fontib-home-final-cta-card p {\r\n        font-size: 1.15rem;\r\n        color: var(--fontib-home-text-muted);\r\n        max-width: 600px;\r\n        margin: 0 auto 40px;\r\n    }\r\n\r\n    .fontib-home-floating-letters {\r\n        position: absolute;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.05);\r\n        z-index: 0;\r\n        user-select: none;\r\n    }\r\n\r\n    @media (max-width: 991px) {\r\n        .fontib-home-hero {\r\n            padding: 80px 0 60px;\r\n            min-height: auto;\r\n        }\r\n\r\n        .fontib-home-hero h1 {\r\n            font-size: 2.2rem;\r\n        }\r\n\r\n        .fontib-home-hero p {\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .fontib-home-hero-buttons {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-home-hero-stats {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-home-builder-window {\r\n            transform: none;\r\n            margin-top: 40px;\r\n        }\r\n\r\n        .fontib-home-builder-floating-badge {\r\n            display: none;\r\n        }\r\n\r\n        .fontib-home-final-cta-card {\r\n            padding: 50px 30px;\r\n        }\r\n\r\n        .fontib-home-final-cta-card h2 {\r\n            font-size: 2.2rem;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- 1. Hero Section -->\r\n<!-- <section class=\"fontib-home-hero\">\r\n    <div class=\"fontib-home-wrapper fontib-home-hero-grid\">\r\n        <div class=\"row align-items-center\">\r\n            <div class=\"col-lg-6\" data-aos=\"fade-right\">\r\n                <span class=\"fontib-home-hero-badge\">\r\n                    <i class='bx bx-bolt'><\/i> Smart Font Builder for Creators\r\n                <\/span>\r\n                <h1>Build Fonts for <span>Social Media<\/span>, Branding, and Creative Text<\/h1>\r\n                <p>Create stylish, unique, and copy-ready fonts using a simple online font builder designed for creators, brands, and digital projects.<\/p>\r\n                <div class=\"fontib-home-hero-buttons\">\r\n                    <a href=\"#\" class=\"fontib-home-btn-primary\">\r\n                        Start Building Fonts <i class='bx bx-right-arrow-alt'><\/i>\r\n                    <\/a>\r\n                    <a href=\"#\" class=\"fontib-home-btn-outline\">\r\n                        <i class='bx bx-grid-alt'><\/i> Explore Font Styles\r\n                    <\/a>\r\n                <\/div>\r\n                <div class=\"fontib-home-hero-stats\">\r\n                    <div class=\"fontib-home-hero-stat\">\r\n                        <div class=\"fontib-home-hero-stat-number\">500+<\/div>\r\n                        <div class=\"fontib-home-hero-stat-label\">Font Styles<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-hero-stat\">\r\n                        <div class=\"fontib-home-hero-stat-number\">50K+<\/div>\r\n                        <div class=\"fontib-home-hero-stat-label\">Active Users<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-hero-stat\">\r\n                        <div class=\"fontib-home-hero-stat-number\">10M+<\/div>\r\n                        <div class=\"fontib-home-hero-stat-label\">Fonts Generated<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6 fontib-home-builder-mockup\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-home-builder-window\">\r\n                    <div class=\"fontib-home-builder-titlebar\">\r\n                        <div class=\"fontib-home-builder-dots\">\r\n                            <span class=\"fontib-home-builder-dot fontib-home-builder-dot-red\"><\/span>\r\n                            <span class=\"fontib-home-builder-dot fontib-home-builder-dot-yellow\"><\/span>\r\n                            <span class=\"fontib-home-builder-dot fontib-home-builder-dot-green\"><\/span>\r\n                        <\/div>\r\n                        <span class=\"fontib-home-builder-titlebar-text\">Fontib Builder<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-toolbar\">\r\n                        <div class=\"fontib-home-builder-tool-btn active\" title=\"Bold\"><i class='bx bx-bold'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Italic\"><i class='bx bx-italic'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Underline\"><i class='bx bx-underline'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Align Left\"><i class='bx bx-align-left'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Align Center\"><i class='bx bx-align-middle'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Align Right\"><i class='bx bx-align-right'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Copy\"><i class='bx bx-copy'><\/i><\/div>\r\n                        <div class=\"fontib-home-builder-tool-btn\" title=\"Download\"><i class='bx bx-download'><\/i><\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-input-area\">\r\n                        <div class=\"fontib-home-builder-input-label\">Type your text<\/div>\r\n                        <input type=\"text\" class=\"fontib-home-builder-text-input\" id=\"fontibBuilderInput\" placeholder=\"Hello World...\" value=\"Hello World!\">\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-preview-area\">\r\n                        <div class=\"fontib-home-builder-preview-label\">Preview<\/div>\r\n                        <div class=\"fontib-home-builder-preview-text\" id=\"fontibBuilderPreview\">\ud835\udc07\ud835\udc1e\ud835\udc25\ud835\udc25\ud835\udc28 \ud835\udc16\ud835\udc28\ud835\udc2b\ud835\udc25\ud835\udc1d!<\/div>\r\n                        <div class=\"fontib-home-builder-style-chips\">\r\n                            <span class=\"fontib-home-builder-chip active\" data-style=\"bold\">Bold<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"italic\">Italic<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"script\">Script<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"serif\">Serif<\/span>\r\n                            <span class=\"fontib-home-builder-chip\" data-style=\"mono\">Mono<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-builder-footer\">\r\n                        <span class=\"fontib-home-builder-char-count\">12 characters<\/span>\r\n                        <button class=\"fontib-home-builder-copy-btn\">\r\n                            <i class='bx bx-clipboard'><\/i> Copy\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-home-builder-floating-badge badge-top\">\r\n                    <i class='bx bx-check-circle'><\/i> Copy Ready\r\n                <\/div>\r\n                <div class=\"fontib-home-builder-floating-badge badge-bottom\">\r\n                    <i class='bx bx-palette'><\/i> 500+ Styles\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section> -->\r\n<div>\r\n\t<div class=\"ufg\">\r\n<style>\r\n.ufg, .ufg * { margin:0; padding:0; box-sizing:border-box; }\r\n.ufg { --ufg-bg-gradient: linear-gradient(135deg, #dce9f6 0%, #ffffff 50%, #d6d7d8 100%); --ufg-text-main: #111827; --ufg-text-muted: #6b7280; --ufg-text-light: #9ca3af; --ufg-border-color: #e5e7eb; --ufg-card-bg: #ffffff; --ufg-primary: #7c3aed; --ufg-primary-light: #f3f0ff; --ufg-icon-blue: #60a5fa; --ufg-icon-purple: #8b5cf6; --ufg-icon-pink: #f472b6; --ufg-icon-green: #34d399; --ufg-icon-orange: #fb923c; --ufg-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --ufg-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background:var(--ufg-bg-gradient); min-height:100vh; color:var(--ufg-text-main); padding:3rem 1rem; display:flex; justify-content:center; overflow-x:hidden; }\r\n.ufg-container { max-width:1150px; width:100%; display:flex; flex-direction:column; gap:2rem; }\r\n.ufg-header { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }\r\n.ufg-tag { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 1rem; background:#fff; border:1px solid var(--ufg-primary-light); border-radius:50px; color:var(--ufg-primary); font-size:0.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; box-shadow:var(--ufg-shadow-sm); }\r\n.ufg-tag svg { width:12px; height:12px; }\r\n.ufg-title { font-size:2.8rem; font-weight:800; letter-spacing:-1px; line-height:1.2; }\r\n.ufg-title-gradient { background:linear-gradient(90deg,#3b82f6 0%,#a855f7 50%,#ec4899 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }\r\n.ufg-subtitle { color:var(--ufg-text-muted); font-size:1.05rem; max-width:600px; line-height:1.5; }\r\n.ufg-tag { animation:ufgFadeSlideDown 0.6s ease both 0.1s; }\r\n.ufg-title { animation:ufgFadeSlideUp 0.7s ease both 0.3s; }\r\n.ufg-title-gradient { animation:ufgGradientFlow 3s ease-in-out infinite; background-size:200% 200%; }\r\n.ufg-subtitle { animation:ufgFadeSlideUp 0.7s ease both 0.5s; }\r\n@keyframes ufgFadeSlideDown { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }\r\n@keyframes ufgFadeSlideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }\r\n@keyframes ufgGradientFlow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }\r\n.ufg-input-wrapper { background:var(--ufg-card-bg); border-radius:12px; border:1px solid var(--ufg-border-color); border-top:2px solid #fbcfe8; box-shadow:var(--ufg-shadow-md); overflow:hidden; position:relative; max-width:1010px; margin:0 auto; width:100%; }\r\n.ufg-textarea-container { position:relative; }\r\n.ufg-textarea-container textarea { width:100%; height:136px; border:none; padding:1.5rem; font-size:1rem; resize:vertical; outline:none; color:var(--ufg-text-main); overflow-y:auto; padding-left:3rem; font-family:inherit; }\r\n.ufg-textarea-container textarea::-webkit-scrollbar { width:4px; }\r\n.ufg-textarea-container textarea::-webkit-scrollbar-track { background:transparent; }\r\n.ufg-textarea-container textarea::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }\r\n.ufg-textarea-container textarea::placeholder { color:var(--ufg-text-light); }\r\n.ufg-input-icon { position:absolute; top:1.5rem; left:1.5rem; color:var(--ufg-text-light); width:18px; height:18px; transition:opacity 0.25s ease; pointer-events:none; }\r\n.ufg-textarea-container:focus-within .ufg-input-icon { opacity:0; }\r\n.ufg-textarea-container textarea:focus { padding-left:1.5rem; }\r\n.ufg-input-toolbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; border-top:1px solid var(--ufg-border-color); background:#fafafa; }\r\n.ufg-toolbar-left, .ufg-toolbar-right { display:flex; gap:0.5rem; }\r\n.ufg-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; border:1px solid var(--ufg-border-color); border-radius:8px; background:var(--ufg-card-bg); color:var(--ufg-text-muted); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s ease; font-family:inherit; }\r\n.ufg-btn:hover { background:#f3f4f6; }\r\n.ufg-btn-primary { background:var(--ufg-primary-light); color:var(--ufg-primary); border-color:transparent; }\r\n.ufg-btn-primary:hover { background:#eedeef; }\r\n.ufg-btn svg { width:14px; height:14px; flex-shrink:0; }\r\n.ufg-filter-bar { display:flex; justify-content:space-between; background:var(--ufg-card-bg); padding:0.5rem; border-radius:12px; box-shadow:var(--ufg-shadow-sm); gap:0.25rem; overflow-x:auto; border:1px solid var(--ufg-border-color); -webkit-overflow-scrolling:touch; scrollbar-width:none; }\r\n.ufg-filter-bar::-webkit-scrollbar { display:none; }\r\n@media (max-width:768px) { .ufg-filter-bar { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#d1d5db transparent; } .ufg-filter-bar::-webkit-scrollbar { display:block; height:3px; } .ufg-filter-bar::-webkit-scrollbar-track { background:transparent; } .ufg-filter-bar::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; } }\r\n.ufg-filter-btn { display:flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; border:none; background:transparent; color:var(--ufg-text-muted); font-size:0.85rem; font-weight:500; border-radius:8px; cursor:pointer; white-space:nowrap; transition:all 0.2s ease; font-family:inherit; }\r\n.ufg-filter-btn:hover { background:#f3f4f6; }\r\n.ufg-filter-btn.active { background:var(--ufg-primary); color:white; }\r\n.ufg-filter-btn svg { width:20px; height:20px; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.08)); transition:transform 0.25s cubic-bezier(0.4,0,0.2,1), filter 0.25s ease; }\r\n.ufg-filter-btn:hover svg { transform:scale(1.18); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }\r\n.ufg-filter-btn.active svg { color:white; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.2)); transform:scale(1.1); }\r\n.ufg-filter-btn:not(.active) svg { color:var(--ufg-primary); }\r\n.ufg-filter-btn:nth-child(2):not(.active) svg { color:#7c3aed; }\r\n.ufg-filter-btn:nth-child(3):not(.active) svg { color:#2563eb; }\r\n.ufg-filter-btn:nth-child(4):not(.active) svg { color:#dc2626; }\r\n.ufg-filter-btn:nth-child(5):not(.active) svg { color:#059669; }\r\n.ufg-filter-btn:nth-child(6):not(.active) svg { color:#6366f1; }\r\n.ufg-filter-btn:nth-child(7):not(.active) svg { color:#0284c7; }\r\n.ufg-filter-btn:nth-child(8):not(.active) svg { color:#78716c; }\r\n.ufg-filter-btn:nth-child(9):not(.active) svg { color:#d97706; }\r\n.ufg-filter-btn:nth-child(10):not(.active) svg { color:#e11d48; }\r\n.ufg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }\r\n.ufg-card { background:var(--ufg-card-bg); border-radius:12px; padding:1.5rem; border:1px solid var(--ufg-border-color); box-shadow:var(--ufg-shadow-sm); display:flex; flex-direction:column; gap:1.5rem; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease; max-height:290px; overflow-y:auto; animation:ufgCardFadeIn 0.35s ease both; will-change:transform, opacity; }\r\n.ufg-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 12px 24px -4px rgba(124,58,237,0.12), 0 4px 8px -2px rgba(0,0,0,0.06); border-color:#d8b4fe; }\r\n@keyframes ufgCardFadeIn { from { opacity:0; transform:translateY(12px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }\r\n.ufg-card::-webkit-scrollbar { width:4px; }\r\n.ufg-card::-webkit-scrollbar-track { background:transparent; }\r\n.ufg-card::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }\r\n.ufg-card-header { display:flex; justify-content:space-between; align-items:flex-start; }\r\n.ufg-card-title-group { display:flex; gap:0.75rem; }\r\n.ufg-card-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:0.85rem; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease; }\r\n.ufg-card:hover .ufg-card-icon { transform:rotate(-8deg) scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,0.15); }\r\n.ufg-bg-purple { background:var(--ufg-icon-purple); }\r\n.ufg-bg-blue { background:var(--ufg-icon-blue); }\r\n.ufg-bg-pink { background:var(--ufg-icon-pink); }\r\n.ufg-bg-green { background:var(--ufg-icon-green); }\r\n.ufg-bg-orange { background:var(--ufg-icon-orange); }\r\n.ufg-bg-light-blue { background:#818cf8; }\r\n.ufg-card-text { display:flex; flex-direction:column; }\r\n.ufg-card-text h3 { font-size:0.9rem; font-weight:600; color:var(--ufg-text-main); transition:color 0.25s ease; margin:0; }\r\n.ufg-card:hover .ufg-card-text h3 { color:var(--ufg-primary); }\r\n.ufg-card-text p { font-size:0.75rem; color:var(--ufg-text-light); margin-top:0.2rem; transition:color 0.25s ease; }\r\n.ufg-card:hover .ufg-card-text p { color:var(--ufg-text-muted); }\r\n.ufg-badge { padding:0.3rem 0.6rem; font-size:0.7rem; border:1px solid var(--ufg-border-color); border-radius:6px; background:transparent; color:var(--ufg-text-main); font-weight:500; cursor:default; white-space:nowrap; transition:all 0.25s ease; font-family:inherit; }\r\n.ufg-card:hover .ufg-badge { background:var(--ufg-primary-light); color:var(--ufg-primary); border-color:#d8b4fe; }\r\n.ufg-card-body { display:flex; flex:1; overflow-y:auto; min-height:0; }\r\n.ufg-preview-text { font-size:1.2rem; font-weight:700; color:var(--ufg-text-main); word-break:break-all; letter-spacing:-0.5px; line-height:1.4; transition:color 0.25s ease, transform 0.3s cubic-bezier(0.4,0,0.2,1); }\r\n.ufg-card:hover .ufg-preview-text { color:var(--ufg-primary); transform:scale(1.02); }\r\n.ufg-card-actions { display:flex; gap:0.5rem; justify-content:flex-end; flex-shrink:0; padding-top:0.75rem; border-top:1px solid var(--ufg-border-color); }\r\n.ufg-action-btn { width:32px; height:32px; border-radius:6px; border:1px solid var(--ufg-border-color); background:transparent; display:flex; align-items:center; justify-content:center; color:var(--ufg-text-muted); cursor:pointer; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }\r\n.ufg-action-btn:hover { background:var(--ufg-primary-light); color:var(--ufg-primary); border-color:#d8b4fe; transform:scale(1.12); }\r\n.ufg-action-btn.copied { background:#d1fae5; color:#059669; border-color:#059669; }\r\n.ufg-action-btn svg { width:14px; height:14px; }\r\n.ufg-toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:#111827; color:white; padding:0.75rem 1.5rem; border-radius:8px; font-size:0.875rem; font-weight:500; opacity:0; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); z-index:10000; pointer-events:none; font-family:inherit; }\r\n.ufg-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }\r\n.ufg-load-more-wrap { text-align:center; padding:1rem 0; }\r\n.ufg-load-more-btn { padding:0.75rem 2rem; font-size:0.95rem; font-weight:600; border-radius:10px; background:var(--ufg-primary); color:white; border:none; cursor:pointer; display:none; font-family:inherit; transition:all 0.2s ease; }\r\n.ufg-load-more-btn:hover { opacity:0.9; transform:translateY(-1px); }\r\n.ufg-load-more-btn svg { margin-top: 7px; width:16px; height:16px; vertical-align:middle; margin-right:0.5rem; }\r\n@media (max-width:1024px) { .ufg { padding:2rem 1rem; } .ufg-title { font-size:2.4rem; } }\r\n@media (max-width:900px) { .ufg-grid { grid-template-columns:repeat(2,1fr); } .ufg-title { font-size:2.1rem; } .ufg-subtitle { font-size:1rem; } }\r\n@media (max-width:768px) { .ufg { padding:1.5rem 0.75rem; } .ufg-title { font-size:1.9rem; } .ufg-tag { font-size:0.65rem; padding:0.35rem 0.8rem; } .ufg-subtitle { font-size:0.95rem; max-width:380px; } .ufg-container { gap:1.25rem; } .ufg-card { padding:1.25rem; gap:1rem; max-height:260px; } .ufg-preview-text { font-size:1.05rem; } .ufg-filter-btn { padding:0.5rem 1rem; font-size:0.8rem; } .ufg-filter-btn svg { width:12px; height:12px; } .ufg-input-wrapper { border-radius:10px; } .ufg-textarea-container textarea { height:120px; font-size:0.95rem; padding:1.25rem; padding-left:2.75rem; } .ufg-input-icon { top:1.25rem; left:1.25rem; width:16px; height:16px; } .ufg-input-toolbar { padding:0.75rem 1.25rem; } .ufg-btn { padding:0.4rem 0.75rem; font-size:0.8rem; } }\r\n@media (max-width:600px) { .ufg { padding:1rem 0.5rem; } .ufg-title { font-size:1.5rem; line-height:1.2; } .ufg-tag { font-size:0.6rem; padding:0.3rem 0.7rem; letter-spacing:0.5px; } .ufg-subtitle { font-size:0.88rem; max-width:280px; } .ufg-header { gap:0.6rem; } .ufg-container { gap:1rem; } .ufg-grid { grid-template-columns:1fr; gap:1rem; } .ufg-card { padding:1rem; max-height:240px; gap:0.75rem; } .ufg-card-header { gap:0.5rem; } .ufg-card-icon { width:28px; height:28px; font-size:0.75rem; } .ufg-card-text h3 { font-size:0.82rem; } .ufg-card-text p { font-size:0.7rem; } .ufg-preview-text { font-size:0.95rem; } .ufg-badge { font-size:0.65rem; padding:0.2rem 0.5rem; } .ufg-action-btn { width:28px; height:28px; } .ufg-action-btn svg { width:12px; height:12px; } .ufg-card-actions { padding-top:0.5rem; } .ufg-input-toolbar { flex-direction:column; gap:0.75rem; align-items:flex-start; padding:0.6rem 1rem; } .ufg-toolbar-left, .ufg-toolbar-right { width:100%; } .ufg-toolbar-left { justify-content:space-between; } .ufg-toolbar-right { justify-content:flex-end; } .ufg-textarea-container textarea { height:110px; font-size:0.9rem; padding:1rem; padding-left:2.5rem; } .ufg-input-icon { top:1rem; left:1rem; width:15px; height:15px; } .ufg-btn { padding:0.35rem 0.65rem; font-size:0.75rem; border-radius:6px; } .ufg-btn svg { width:12px; height:12px; } .ufg-filter-bar { padding:0.35rem; gap:0.15rem; border-radius:10px; } .ufg-filter-btn { padding:0.45rem 0.8rem; font-size:0.75rem; border-radius:6px; gap:0.35rem; } .ufg-filter-btn svg { width:11px; height:11px; } .ufg-load-more-btn { padding:0.6rem 1.5rem; font-size:0.85rem; border-radius:8px; } .ufg-load-more-btn svg { width:14px; height:14px; } }\r\n@media (max-width:375px) { .ufg { padding:0.75rem 0.4rem; } .ufg-title { font-size:1.3rem; } .ufg-subtitle { font-size:0.8rem; max-width:240px; } .ufg-tag { font-size:0.55rem; padding:0.25rem 0.6rem; gap:0.35rem; } .ufg-grid { gap:0.75rem; } .ufg-card { padding:0.85rem; max-height:220px; } .ufg-card-text h3 { font-size:0.78rem; } .ufg-card-text p { font-size:0.65rem; } .ufg-preview-text { font-size:0.88rem; } .ufg-textarea-container textarea { height:100px; } .ufg-filter-btn { padding:0.4rem 0.65rem; font-size:0.7rem; } }\r\n<\/style>\r\n\r\n<div class=\"ufg-container\">\r\n    <header class=\"ufg-header\">\r\n        <div class=\"ufg-tag\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14\"\/><path d=\"M5 12h14\"\/><\/svg> UNICODE FONT GENERATOR<\/div>\r\n        <h1 class=\"ufg-title\">Font <span class=\"ufg-title-gradient\">Builder<\/span> - Smart Build Your <br> Font for Creative Text<\/h1>\r\n        <p class=\"ufg-subtitle\">Create stylish Unicode text for bios, captions, posts, and profiles in seconds.<\/p>\r\n    <\/header>\r\n    <section class=\"ufg-input-wrapper\">\r\n        <div class=\"ufg-textarea-container\">\r\n            <svg class=\"ufg-input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\"\/><\/svg>\r\n            <textarea id=\"ufg-text-input\" placeholder=\"Type your text here...\"><\/textarea>\r\n        <\/div>\r\n        <div class=\"ufg-input-toolbar\">\r\n            <div class=\"ufg-toolbar-left\">\r\n                <button class=\"ufg-btn\" id=\"ufg-clear-all\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"\/><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"\/><\/svg> Clear All<\/button>\r\n                <button class=\"ufg-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"\/><line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"\/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"\/><\/svg> <span id=\"ufg-char-count\">0<\/span> chars<\/button>\r\n            <\/div>\r\n            <div class=\"ufg-toolbar-right\">\r\n                <button class=\"ufg-btn ufg-btn-primary\" id=\"ufg-clear-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg> Clear<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n    <nav class=\"ufg-filter-bar\">\r\n        <button class=\"ufg-filter-btn active\" data-filter=\"all\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><path d=\"M6.5 6.5h1M17.5 6.5h1M6.5 17.5h1M17.5 17.5h1\" stroke-width=\"1.5\"\/><\/svg> All<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"bold\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6V4z\"\/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6V12z\"\/><path d=\"M6 4v16\"\/><circle cx=\"6\" cy=\"12\" r=\"1\" fill=\"currentColor\"\/><\/svg> Bold<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"italic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 4h-3\"\/><path d=\"M7 20h4\"\/><path d=\"M16 4l-6 16\"\/><path d=\"M10 12h7\"\/><circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"currentColor\"\/><circle cx=\"18\" cy=\"16\" r=\"1\" fill=\"currentColor\"\/><\/svg> Italic<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"script\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 4c-3 2-7 6-9 10-1.5 3-1.5 5.5 0 7 1 1 2.5 1.5 4 1\"\/><path d=\"M17 20c1-.5 2-1.5 2-3 0-1.5-1-2.5-2-3\"\/><path d=\"M12 12L4 22\"\/><path d=\"M3 16l3-2\"\/><path d=\"M8 8c1-1 2.5-1.5 4-1\" stroke-dasharray=\"2 2\"\/><\/svg> Script<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"gothic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2l-4 6 4 6-4 6\"\/><path d=\"M6 2l4 6-4 6 4 6\"\/><path d=\"M18 2l-4 6 4 6-4 6\"\/><path d=\"M14 8h-4\"\/><path d=\"M14 14h-4\"\/><\/svg> Gothic<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"double\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h4v16H4z\" stroke-width=\"2\"\/><path d=\"M9 4h4v16H9z\" stroke-width=\"2\"\/><path d=\"M16 4L8 20\" stroke-width=\"2\"\/><path d=\"M20 4L12 20\" stroke-width=\"2\"\/><\/svg> Double<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"sans\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20l8-18 8 18\" stroke-width=\"2.5\" stroke-linejoin=\"miter\"\/><path d=\"M7 15h10\" stroke-width=\"2.5\"\/><circle cx=\"12\" cy=\"7\" r=\"1.5\" fill=\"currentColor\"\/><\/svg> Sans<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"mono\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\" stroke-width=\"1.5\"\/><line x1=\"8\" y1=\"7\" x2=\"8\" y2=\"17\" stroke-width=\"3\"\/><line x1=\"12\" y1=\"7\" x2=\"12\" y2=\"17\" stroke-width=\"3\"\/><line x1=\"16\" y1=\"7\" x2=\"16\" y2=\"17\" stroke-width=\"3\"\/><\/svg> Mono<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"fullwidth\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"1\" stroke-width=\"1.5\"\/><path d=\"M7 7h10v10H7z\" stroke-width=\"1.5\"\/><line x1=\"12\" y1=\"7\" x2=\"12\" y2=\"17\" stroke-width=\"2\"\/><line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\" stroke-width=\"2\"\/><\/svg> Fullwidth<\/button>\r\n        <button class=\"ufg-filter-btn\" data-filter=\"circled\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"7\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><circle cx=\"12\" cy=\"12\" r=\"1\" fill=\"currentColor\"\/><\/svg> Circled<\/button>\r\n    <\/nav>\r\n    <section class=\"ufg-grid\" id=\"ufg-cards-container\"><\/section>\r\n    <div class=\"ufg-load-more-wrap\">\r\n        <button class=\"ufg-load-more-btn\" id=\"ufg-load-more-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"8 12 12 16 16 12\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"16\"\/><\/svg> Load More<\/button>\r\n    <\/div>\r\n<\/div>\r\n<div id=\"ufg-toast\" class=\"ufg-toast\">Copied to clipboard!<\/div>\r\n\r\n<script>\r\n\/**\r\n * Unicode Font Generator - WordPress Friendly\r\n * No jQuery dependency, fully encapsulated, zero global leaks\r\n *\/\r\n(function() {\r\n    \"use strict\";\r\n    if (window.ufgFontGeneratorLoaded) return;\r\n    window.ufgFontGeneratorLoaded = true;\r\n\r\n    function ufgReady(fn) {\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', fn);\r\n        } else {\r\n            fn();\r\n        }\r\n    }\r\n\r\n    ufgReady(function() {\r\n\r\n    function genMap(u,l,d){var m={};if(u)for(var i=0;i<26;i++){m[String.fromCharCode(65+i)]=String.fromCodePoint(u+i);m[String.fromCharCode(97+i)]=String.fromCodePoint(l+i);}if(d)for(var i=0;i<10;i++)m[String.fromCharCode(48+i)]=String.fromCodePoint(d+i);return m;}\r\n    var scriptMap={'A':'\\u{1D49C}','B':'\\u212C','C':'\\u{1D49E}','D':'\\u{1D49F}','E':'\\u2130','F':'\\u2131','G':'\\u{1D4A0}','H':'\\u210B','I':'\\u2110','J':'\\u{1D4A1}','K':'\\u{1D4A2}','L':'\\u2112','M':'\\u2133','N':'\\u{1D4A3}','O':'\\u{1D4A4}','P':'\\u{1D4A5}','Q':'\\u{1D4A6}','R':'\\u211B','S':'\\u{1D4A7}','T':'\\u{1D4A8}','U':'\\u{1D4A9}','V':'\\u{1D4AA}','W':'\\u{1D4AB}','X':'\\u{1D4AC}','Y':'\\u{1D4AD}','Z':'\\u{1D4AE}','a':'\\u{1D4B6}','b':'\\u{1D4B7}','c':'\\u{1D4B8}','d':'\\u{1D4B9}','e':'\\u212F','f':'\\u{1D4BB}','g':'\\u210A','h':'\\u{1D4BD}','i':'\\u{1D4BE}','j':'\\u{1D4BF}','k':'\\u{1D4C0}','l':'\\u2113','m':'\\u{1D4C2}','n':'\\u{1D4C3}','o':'\\u2134','p':'\\u{1D4C5}','q':'\\u{1D4C6}','r':'\\u{1D4C7}','s':'\\u{1D4C8}','t':'\\u{1D4C9}','u':'\\u{1D4CA}','v':'\\u{1D4CB}','w':'\\u{1D4CC}','x':'\\u{1D4CD}','y':'\\u{1D4CE}','z':'\\u{1D4CF}'};\r\n    var frakturMap={'A':'\\u{1D504}','B':'\\u{1D505}','C':'\\u212D','D':'\\u{1D507}','E':'\\u{1D508}','F':'\\u{1D509}','G':'\\u{1D50A}','H':'\\u210C','I':'\\u2111','J':'\\u{1D50D}','K':'\\u{1D50E}','L':'\\u{1D50F}','M':'\\u{1D510}','N':'\\u{1D511}','O':'\\u{1D512}','P':'\\u{1D513}','Q':'\\u{1D514}','R':'\\u211C','S':'\\u{1D516}','T':'\\u{1D517}','U':'\\u{1D518}','V':'\\u{1D519}','W':'\\u{1D51A}','X':'\\u{1D51B}','Y':'\\u{1D51C}','Z':'\\u2128','a':'\\u{1D51E}','b':'\\u{1D51F}','c':'\\u{1D520}','d':'\\u{1D521}','e':'\\u{1D522}','f':'\\u{1D523}','g':'\\u{1D524}','h':'\\u{1D525}','i':'\\u{1D526}','j':'\\u{1D527}','k':'\\u{1D528}','l':'\\u{1D529}','m':'\\u{1D52A}','n':'\\u{1D52B}','o':'\\u{1D52C}','p':'\\u{1D52D}','q':'\\u{1D52E}','r':'\\u{1D52F}','s':'\\u{1D530}','t':'\\u{1D531}','u':'\\u{1D532}','v':'\\u{1D533}','w':'\\u{1D534}','x':'\\u{1D535}','y':'\\u{1D536}','z':'\\u{1D537}'};\r\n    var BM={bold:genMap(0x1D400,0x1D41A,0x1D7CE),italic:genMap(0x1D434,0x1D44E,0x1D7F2),boldItalic:genMap(0x1D468,0x1D482,0x1D7F2),script:scriptMap,boldScript:genMap(0x1D4D0,0x1D4EA),fraktur:frakturMap,boldFraktur:genMap(0x1D571,0x1D58B),double:genMap(0x1D538,0x1D552,0x1D7D8),boldDouble:genMap(0x1D56C,0x1D586,0x1D7E2),sans:genMap(0x1D5A0,0x1D5BA,0x1D7E2),sansBold:genMap(0x1D5D4,0x1D5EE,0x1D7EC),sansItalic:genMap(0x1D608,0x1D622,0x1D7E2),sansBoldItalic:genMap(0x1D63C,0x1D656,0x1D7EC),mono:genMap(0x1D670,0x1D68A,0x1D7F6),fullwidth:genMap(0xFF21,0xFF41,0xFF10),circled:genMap(0x24B6,0x249C,0x2460)};\r\n    function addComb(t,m){return Array.from(t).map(function(c){return c+m}).join('');}\r\n    var DEC=[{n:'Under',f:function(t){return addComb(t,'\\u0332')}},{n:'Strike',f:function(t){return addComb(t,'\\u0336')}},{n:'DblUnder',f:function(t){return addComb(t,'\\u0333')}},{n:'Over',f:function(t){return addComb(t,'\\u0305')}},{n:'Wavy',f:function(t){return addComb(t,'\\u0330')}},{n:'Dot',f:function(t){return addComb(t,'\\u0307')}},{n:'Ring',f:function(t){return addComb(t,'\\u030A')}},{n:'Acute',f:function(t){return addComb(t,'\\u0301')}},{n:'Tilde',f:function(t){return addComb(t,'\\u0303')}},{n:'Macron',f:function(t){return addComb(t,'\\u0304')}},{n:'Umlaut',f:function(t){return addComb(t,'\\u0308')}},{n:'Circum',f:function(t){return addComb(t,'\\u0302')}},{n:'Caron',f:function(t){return addComb(t,'\\u030C')}},{n:'Cedilla',f:function(t){return addComb(t,'\\u0327')}},{n:'Hook',f:function(t){return addComb(t,'\\u0309')}},{n:'SqBracket',f:function(t){return '['+t+']'}},{n:'Paren',f:function(t){return '('+t+')'}},{n:'CurlyBrace',f:function(t){return '{'+t+'}'}},{n:'Angle',f:function(t){return '\\u3008'+t+'\\u3009'}},{n:'DblAngle',f:function(t){return '\\u300A'+t+'\\u300B'}},{n:'Bracket',f:function(t){return '\\u3010'+t+'\\u3011'}},{n:'Corner',f:function(t){return '\\u300C'+t+'\\u300D'}},{n:'WCnr',f:function(t){return '\\u300E'+t+'\\u300F'}},{n:'Tortoise',f:function(t){return '\\u3014'+t+'\\u3015'}},{n:'Lenticular',f:function(t){return '\\u3016'+t+'\\u3017'}},{n:'MBrace',f:function(t){return '\\u27E6'+t+'\\u27E7'}},{n:'MAngle',f:function(t){return '\\u27E8'+t+'\\u27E9'}},{n:'FParen',f:function(t){return '\\u2983'+t+'\\u2984'}},{n:'Guillemet',f:function(t){return '\\u00AB'+t+'\\u00BB'}},{n:'Quot',f:function(t){return '\\u201C'+t+'\\u201D'}},{n:'Star',f:function(t){return '\\u2605'+t+'\\u2605'}},{n:'Heart',f:function(t){return '\\u2665'+t+'\\u2665'}},{n:'Diamond',f:function(t){return '\\u25C6'+t+'\\u25C6'}},{n:'Circle',f:function(t){return '\\u25CF'+t+'\\u25CF'}},{n:'WCircle',f:function(t){return '\\u25CB'+t+'\\u25CB'}},{n:'Square',f:function(t){return '\\u25A0'+t+'\\u25A0'}},{n:'WSquare',f:function(t){return '\\u25A1'+t+'\\u25A1'}},{n:'Triangle',f:function(t){return '\\u25B2'+t+'\\u25B2'}},{n:'WTriangle',f:function(t){return '\\u25B3'+t+'\\u25B3'}},{n:'DDiamond',f:function(t){return '\\u2756'+t+'\\u2756'}},{n:'4Star',f:function(t){return '\\u2726'+t+'\\u2726'}},{n:'Pipe',f:function(t){return '\\u2502'+t+'\\u2502'}},{n:'Dash',f:function(t){return '\\u2015'+t+'\\u2015'}},{n:'TildeW',f:function(t){return '~'+t+'~'}},{n:'Wave',f:function(t){return '\\u3030'+t+'\\u3030'}},{n:'Spade',f:function(t){return '\\u2660'+t+'\\u2660'}},{n:'Club',f:function(t){return '\\u2663'+t+'\\u2663'}},{n:'Sun',f:function(t){return '\\u2600'+t+'\\u2600'}},{n:'Moon',f:function(t){return '\\u263E'+t+'\\u263E'}},{n:'Lightning',f:function(t){return '\\u26A1'+t+'\\u26A1'}},{n:'Skull',f:function(t){return '\\u2620'+t+'\\u2620'}},{n:'YinYang',f:function(t){return '\\u262F'+t+'\\u262F'}},{n:'Peace',f:function(t){return '\\u262E'+t+'\\u262E'}},{n:'Recycle',f:function(t){return '\\u267B'+t+'\\u267B'}},{n:'Male',f:function(t){return '\\u2642'+t+'\\u2642'}},{n:'Female',f:function(t){return '\\u2640'+t+'\\u2640'}},{n:'Note',f:function(t){return '\\u266A'+t+'\\u266A'}},{n:'DNote',f:function(t){return '\\u266B'+t+'\\u266B'}},{n:'Anchor',f:function(t){return '\\u2693'+t+'\\u2693'}},{n:'Floral',f:function(t){return '\\u2766'+t+'\\u2767'}},{n:'Leaf',f:function(t){return '\\u2618'+t+'\\u2618'}},{n:'Snow',f:function(t){return '\\u2744'+t+'\\u2744'}},{n:'Cloud',f:function(t){return '\\u2601'+t+'\\u2601'}},{n:'Umbrella',f:function(t){return '\\u2602'+t+'\\u2602'}},{n:'Target',f:function(t){return '\\u2B55'+t+'\\u2B55'}},{n:'Sparkle',f:function(t){return '\\u2728'+t+'\\u2728'}},{n:'CrossS',f:function(t){return '\\u271A'+t+'\\u271A'}},{n:'Flower',f:function(t){return '\\u273F'+t+'\\u2740'}},{n:'Check',f:function(t){return '\\u2714'+t+'\\u2714'}},{n:'Cross2',f:function(t){return '\\u2718'+t+'\\u2718'}},{n:'Gear',f:function(t){return '\\u2699'+t+'\\u2699'}},{n:'Rainbow',f:function(t){return '\\u{1F308}'+t+'\\u{1F308}'}},{n:'Arrow',f:function(t){return '\\u27A1'+t+'\\u27A1'}},{n:'Cross3',f:function(t){return '\\u2720'+t+'\\u2720'}},{n:'Fleur',f:function(t){return '\\u269C'+t+'\\u269C'}},{n:'Scissors',f:function(t){return '\\u2702'+t+'\\u2702'}},{n:'Pencil',f:function(t){return '\\u270E'+t+'\\u270E'}},{n:'Phone',f:function(t){return '\\u260E'+t+'\\u260E'}},{n:'Ball',f:function(t){return '\\u26BE'+t+'\\u26BE'}},{n:'Trophy',f:function(t){return '\\u26C6'+t+'\\u26C6'}},{n:'Crown',f:function(t){return '\\u265B'+t+'\\u265B'}},{n:'Key',f:function(t){return '\\u26BF'+t+'\\u26BF'}},{n:'Flag',f:function(t){return '\\u2691'+t+'\\u2691'}}];\r\n    var CAT={bold:{icon:'B',cls:'ufg-bg-purple',maps:['bold','boldItalic','boldScript','boldFraktur','boldDouble','sansBold','sansBoldItalic']},italic:{icon:'I',cls:'ufg-bg-blue',maps:['italic','sansItalic']},script:{icon:'S',cls:'ufg-bg-green',maps:['script','boldScript']},gothic:{icon:'F',cls:'ufg-bg-orange',maps:['fraktur','boldFraktur']},double:{icon:'D',cls:'ufg-bg-light-blue',maps:['double','boldDouble']},sans:{icon:'N',cls:'ufg-bg-purple',maps:['sans','sansBold','sansItalic','sansBoldItalic']},mono:{icon:'M',cls:'ufg-bg-green',maps:['mono']},fullwidth:{icon:'FW',cls:'ufg-bg-orange',maps:['fullwidth']},circled:{icon:'C',cls:'ufg-bg-pink',maps:['circled']}};\r\n    var SN={bold:'Bold',italic:'Itlc',boldItalic:'BdIt',script:'Scrp',boldScript:'BdSc',fraktur:'Frak',boldFraktur:'BdFk',double:'Dble',boldDouble:'BdDl',sans:'Sans',sansBold:'SnsB',sansItalic:'SnsI',sansBoldItalic:'SnBI',mono:'Mono',fullwidth:'Fuld',circled:'Circ'};\r\n    var allFonts=[];\r\n    for(var catId in CAT){if(!CAT.hasOwnProperty(catId))continue;var cfg=CAT[catId],maps=cfg.maps,decCount=Math.ceil(DEC.length\/maps.length);for(var mi=0;mi<maps.length;mi++){var mapName=maps[mi],map=BM[mapName];if(!map)continue;var startDec=mi*decCount;for(var di=0;di<decCount&&(startDec+di)<DEC.length;di++){var dec=DEC[startDec+di];allFonts.push({id:catId+'-'+mapName+'-'+dec.n,name:(SN[mapName]||mapName)+dec.n,cat:catId,map:map,dec:dec.f,icon:cfg.icon,iconClass:cfg.cls});}}}\r\n    var fontMap={};for(var fi=0;fi<allFonts.length;fi++)fontMap[allFonts[fi].id]=allFonts[fi];\r\n    function convertText(text,font){var input=text||'ENTER YOUR TEXT',chars=Array.from(input),mapped='';for(var i=0;i<chars.length;i++)mapped+=font.map[chars[i]]||chars[i];return font.dec(mapped);}\r\n    var starSVG='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>';\r\n    var copySVG='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>';\r\n    var checkSVG='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\r\n    var container=document.getElementById('ufg-cards-container'),loadMoreBtn=document.getElementById('ufg-load-more-btn'),BATCH=12,visibleCount=0,activeFilter='all',renderedPreviews={};\r\n    function createCard(font,index,currentText){var card=document.createElement('div');card.className='ufg-card';card.dataset.category=font.cat;card.style.animationDelay=(index*0.03)+'s';var header=document.createElement('div');header.className='ufg-card-header';var titleGroup=document.createElement('div');titleGroup.className='ufg-card-title-group';var iconDiv=document.createElement('div');iconDiv.className='ufg-card-icon '+font.iconClass;iconDiv.textContent=font.icon;var textDiv=document.createElement('div');textDiv.className='ufg-card-text';var h3=document.createElement('h3');h3.textContent=font.name;var p=document.createElement('p');p.textContent=font.cat+' style';textDiv.appendChild(h3);textDiv.appendChild(p);titleGroup.appendChild(iconDiv);titleGroup.appendChild(textDiv);var badge=document.createElement('button');badge.className='ufg-badge';badge.textContent='Unicode';badge.disabled=true;header.appendChild(titleGroup);header.appendChild(badge);var body=document.createElement('div');body.className='ufg-card-body';var preview=document.createElement('div');preview.className='ufg-preview-text';preview.id='p-'+font.id;preview.textContent=convertText(currentText||null,font);body.appendChild(preview);renderedPreviews[font.id]=preview;var actions=document.createElement('div');actions.className='ufg-card-actions';var starBtn=document.createElement('button');starBtn.className='ufg-action-btn ufg-star-btn';starBtn.title='Favorite';starBtn.innerHTML=starSVG;var copyBtn=document.createElement('button');copyBtn.className='ufg-action-btn ufg-copy-btn';copyBtn.dataset.font=font.id;copyBtn.title='Copy';copyBtn.innerHTML=copySVG;actions.appendChild(starBtn);actions.appendChild(copyBtn);card.appendChild(header);card.appendChild(body);card.appendChild(actions);return card;}\r\n    function getFilteredFonts(){return activeFilter==='all'?allFonts:allFonts.filter(function(f){return f.cat===activeFilter});}\r\n    var filteredCache=null,filteredCacheKey=null;function getCachedFilteredFonts(){if(filteredCacheKey!==activeFilter){filteredCache=getFilteredFonts();filteredCacheKey=activeFilter;}return filteredCache;}\r\n    function updateLoadMore(){var filtered=getCachedFilteredFonts();loadMoreBtn.style.display=visibleCount<filtered.length?'inline-flex':'none';}\r\n    function loadBatch(currentText){var filtered=getCachedFilteredFonts(),fragment=document.createDocumentFragment(),end=Math.min(visibleCount+BATCH,filtered.length);for(var i=visibleCount;i<end;i++)fragment.appendChild(createCard(filtered[i],i-visibleCount,currentText));container.appendChild(fragment);visibleCount=end;updateLoadMore();}\r\n    loadBatch();loadMoreBtn.addEventListener('click',loadBatch);\r\n    var textInput=document.getElementById('ufg-text-input'),charCount=document.getElementById('ufg-char-count'),inputTimeout=null;\r\n    textInput.addEventListener('input',function(e){var text=e.target.value;charCount.textContent=text.length;if(inputTimeout)cancelAnimationFrame(inputTimeout);inputTimeout=requestAnimationFrame(function(){var keys=Object.keys(renderedPreviews);for(var i=0;i<keys.length;i++){var fid=keys[i],fontObj=fontMap[fid];if(fontObj)renderedPreviews[fid].textContent=convertText(text,fontObj);}});});\r\n    function clearInput(){textInput.value='';charCount.textContent='0';var keys=Object.keys(renderedPreviews);for(var i=0;i<keys.length;i++){var fontObj=fontMap[keys[i]];if(fontObj)renderedPreviews[keys[i]].textContent=convertText(null,fontObj);}}\r\n    document.getElementById('ufg-clear-btn').addEventListener('click',clearInput);\r\n    document.getElementById('ufg-clear-all').addEventListener('click',clearInput);\r\n    container.addEventListener('click',function(e){var copyBtn=e.target.closest('.ufg-copy-btn');if(copyBtn){e.stopPropagation();var fid=copyBtn.dataset.font,fontObj=fontMap[fid],el=renderedPreviews[fid];if(!fontObj||!el)return;var textToCopy=convertText(textInput.value||null,fontObj);if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(textToCopy).then(function(){showCopiedFeedback(copyBtn,fontObj.name)}).catch(function(){fallbackCopy(textToCopy,copyBtn,fontObj.name)});}else fallbackCopy(textToCopy,copyBtn,fontObj.name);return;}var starBtn=e.target.closest('.ufg-star-btn');if(starBtn){e.stopPropagation();var ic=starBtn.querySelector('svg');if(ic){ic.setAttribute('fill','currentColor');ic.setAttribute('stroke','none');starBtn.style.color='#f59e0b';starBtn.style.borderColor='#f59e0b';}else{starBtn.style.color='';starBtn.style.borderColor='';}}});\r\n    function fallbackCopy(text,btn,name){var ta=document.createElement('textarea');ta.value=text;ta.style.cssText='position:fixed;left:-9999px;top:-9999px';document.body.appendChild(ta);ta.select();try{document.execCommand('copy');showCopiedFeedback(btn,name);}catch(e){}document.body.removeChild(ta);}\r\n    function showCopiedFeedback(btn,fontName){btn.classList.add('copied');btn.innerHTML=checkSVG;showToast('\\u201c'+fontName+'\\u201d copied!');setTimeout(function(){btn.classList.remove('copied');btn.innerHTML=copySVG;},2000);}\r\n    var toastTimeout=null;function showToast(msg){var t=document.getElementById('ufg-toast');t.textContent=msg||'Copied!';t.classList.add('show');if(toastTimeout)clearTimeout(toastTimeout);toastTimeout=setTimeout(function(){t.classList.remove('show');},2000);}\r\n    var filterBtns = document.querySelectorAll('.ufg-filter-btn');\r\n    for (var fb = 0; fb < filterBtns.length; fb++) {\r\n        (function(btn) {\r\n            btn.addEventListener('click', function() {\r\n                for (var b = 0; b < filterBtns.length; b++) {\r\n                    filterBtns[b].classList.remove('active');\r\n                }\r\n                btn.classList.add('active');\r\n                activeFilter = btn.dataset.filter;\r\n                filteredCacheKey = null;\r\n                container.innerHTML = '';\r\n                renderedPreviews = {};\r\n                visibleCount = 0;\r\n                var currentText = textInput.value || null;\r\n                loadBatch(currentText);\r\n            });\r\n        })(filterBtns[fb]);\r\n    }\r\n\r\n    }); \/* end ufgReady *\/\r\n})();\r\n<\/script>\r\n<\/div>\r\n<\/div>\r\n<!-- 2. Logo Marquee Slider -->\r\n<section class=\"fontib-home-logo-marquee\">\r\n    <div class=\"fontib-home-marquee-heading\">\r\n        <h3>Trusted by <span>Leading Brands & Platforms<\/span><\/h3>\r\n    <\/div>\r\n    <div class=\"fontib-home-marquee-wrapper\">\r\n    <div class=\"fontib-home-marquee-track\">\r\n        <div class=\"fontib-home-marquee-group\">\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/themeton.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Themeton-Logo.png\" alt=\"Themeton\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/followerins.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Follower-Logo@4x-1024x155-1.png\" alt=\"Follower\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/twiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Asset-5@2x-1.png\" alt=\"Asset 5\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/commentiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Commentiewer-Insta@4x-2048x257-1.png\" alt=\"Commentiewer\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/gramiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Gram-New@2x.png\" alt=\"Gram New\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x.png\" alt=\"Snap Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapstoryamerica.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x-1.png\" alt=\"Snap Logo 2\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/tiktosry.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Tik-Logo-New@2x.png\" alt=\"Tik Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontigen.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontigen-logo-scaled.png\" alt=\"Fontigen\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontlye.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontlye-main-logo.png\" alt=\"Fontlye\">\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"fontib-home-marquee-group\">\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/themeton.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Themeton-Logo.png\" alt=\"Themeton\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/followerins.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Follower-Logo@4x-1024x155-1.png\" alt=\"Follower\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/twiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Asset-5@2x-1.png\" alt=\"Asset 5\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/commentiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Commentiewer-Insta@4x-2048x257-1.png\" alt=\"Commentiewer\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/gramiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Gram-New@2x.png\" alt=\"Gram New\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapiewer.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x.png\" alt=\"Snap Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/snapstoryamerica.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Snap-LOGO@2x-1.png\" alt=\"Snap Logo 2\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/tiktosry.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Tik-Logo-New@2x.png\" alt=\"Tik Logo\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontigen.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontigen-logo-scaled.png\" alt=\"Fontigen\">\r\n                <\/a>\r\n            <\/div>\r\n            <div class=\"fontib-home-marquee-item\">\r\n                <a href=\"https:\/\/fontlye.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/fontlye-main-logo.png\" alt=\"Fontlye\">\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<!-- 4. Feature Grid Section -->\r\n<section class=\"fontib-home-features\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Everything You Need in One Font Builder<\/h2>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bxs-bolt'><\/i>\r\n                    <\/div>\r\n                    <h5>Instant Font Preview<\/h5>\r\n                    <p>See your text change into multiple styles instantly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-clipboard'><\/i>\r\n                    <\/div>\r\n                    <h5>Copy and Paste Ready<\/h5>\r\n                    <p>Use generated fonts on social media, websites, bios, and messages.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-category'><\/i>\r\n                    <\/div>\r\n                    <h5>Multiple Font Categories<\/h5>\r\n                    <p>Explore bold, fancy, script, aesthetic, and creative font styles.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-pointer'><\/i>\r\n                    <\/div>\r\n                    <h5>No Design Skill Needed<\/h5>\r\n                    <p>Build stylish text without using complex design software.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-mobile-alt'><\/i>\r\n                    <\/div>\r\n                    <h5>Mobile Friendly<\/h5>\r\n                    <p>Create fonts smoothly from desktop, tablet, or phone.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                <div class=\"fontib-home-feature-card\">\r\n                    <div class=\"fontib-home-feature-icon\">\r\n                        <i class='bx bx-lock-open-alt'><\/i>\r\n                    <\/div>\r\n                    <h5>Free to Use<\/h5>\r\n                    <p>Start creating stylish text without signup barriers.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 5. How It Works Section -->\r\n<section class=\"fontib-home-how-it-works\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">How the Font Builder Works<\/h2>\r\n        <div class=\"row g-4 justify-content-center\">\r\n            <div class=\"col-12 col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-step-card\">\r\n                    <div class=\"fontib-home-step-icon\">\r\n                        <i class='bx bx-edit'><\/i>\r\n                        <span class=\"fontib-home-step-badge\">1<\/span>\r\n                    <\/div>\r\n                    <h5>Type Your Text<\/h5>\r\n                    <p>Enter your word, name, quote, caption, or bio text.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-12 col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-step-card\">\r\n                    <div class=\"fontib-home-step-icon\">\r\n                        <i class='bx bx-palette'><\/i>\r\n                        <span class=\"fontib-home-step-badge\">2<\/span>\r\n                    <\/div>\r\n                    <h5>Choose a Font Style<\/h5>\r\n                    <p>Browse different styles and pick the one that matches your vibe.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-12 col-md-6 col-lg-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-step-card\">\r\n                    <div class=\"fontib-home-step-icon\">\r\n                        <i class='bx bx-clipboard'><\/i>\r\n                        <span class=\"fontib-home-step-badge\">3<\/span>\r\n                    <\/div>\r\n                    <h5>Copy and Use Anywhere<\/h5>\r\n                    <p>Copy your favorite font and paste it into your profile, post, or design.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- 7. Benefits Section -->\r\n<section class=\"fontib-home-benefits\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <div class=\"row align-items-center\">\r\n            <div class=\"col-lg-5 mb-5 mb-lg-0\" data-aos=\"fade-right\">\r\n                <div class=\"fontib-home-3d-object\">\r\n                    <!-- Abstract representation of 3D font blocks -->\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/font-builder.webp\"\r\n                        style=\"width: 100%; height: auto;\" alt=\"font builder\" \/>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-7\" data-aos=\"fade-left\">\r\n                <h2 class=\"fontib-home-section-title text-start\" style=\"margin-bottom: 40px;\">Why Use an Online Font\r\n                    Builder?<\/h2>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-show'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Make Text Stand Out<\/h5>\r\n                        <p>Turn plain words into eye-catching text for profiles, posts, and creative projects.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-time-five'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Save Time<\/h5>\r\n                        <p>No need to install apps or design tools.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-fingerprint'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Create a Unique Style<\/h5>\r\n                        <p>Build text that matches your personal, brand, or creator identity.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"fontib-home-benefit-item\">\r\n                    <div class=\"fontib-home-benefit-icon\"><i class='bx bx-globe'><\/i><\/div>\r\n                    <div class=\"fontib-home-benefit-text\">\r\n                        <h5>Use Anywhere<\/h5>\r\n                        <p>Paste your generated fonts into supported platforms, bios, messages, and captions.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 8. Font Categories Section -->\r\n<section class=\"fontib-home-categories\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\"> Type of Font Builder<\/h2>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Fancy Font<\/h5>\r\n                        <p>Create elegant and decorative text styles.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Cursive Font <\/h5>\r\n                        <p>Generate flowing, handwritten text.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Stylish Font<\/h5>\r\n                        <p>Build modern and trendy text formats.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Instagram Font<\/h5>\r\n                        <p>Optimized fonts for IG bios and captions.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Signature Font<\/h5>\r\n                        <p>Design personal signature-style text.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Cool Font<\/h5>\r\n                        <p>Create edgy and unique text looks.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Name Font<\/h5>\r\n                        <p>Stylize usernames and personal names.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"350\">\r\n                <div class=\"fontib-home-category-card\">\r\n                    <div>\r\n                        <h5>Bio Font<\/h5>\r\n                        <p>Perfect fonts for social media bios.<\/p>\r\n                    <\/div>\r\n                    <i class='bx bx-right-arrow-alt fontib-home-category-arrow'><\/i>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 9. Comparison Section -->\r\n<section class=\"fontib-home-comparison\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Font Builder vs Regular Text Editor<\/h2>\r\n        <div class=\"table-responsive\" data-aos=\"fade-up\">\r\n            <table class=\"table table-borderless fontib-home-comparison-table mb-0\">\r\n                <thead>\r\n                    <tr>\r\n                        <th style=\"width: 40%;\">Feature<\/th>\r\n                        <th style=\"width: 30%;\">Regular Text Editor<\/th>\r\n                        <th style=\"width: 30%;\">Online Font Builder<\/th>\r\n                    <\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <tr>\r\n                        <td>Stylish text output<\/td>\r\n                        <td>Limited<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Yes<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Copy-paste fonts<\/td>\r\n                        <td>No<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Yes<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Social media ready<\/td>\r\n                        <td>No<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Yes<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Multiple styles<\/td>\r\n                        <td>Limited<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Many styles<\/td>\r\n                    <\/tr>\r\n                    <tr>\r\n                        <td>Fast preview<\/td>\r\n                        <td>Basic<\/td>\r\n                        <td class=\"bg-highlight\"><i class='bx bx-check-circle me-2'><\/i>Instant<\/td>\r\n                    <\/tr>\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 10. Testimonials \/ User Feedback Section -->\r\n<section class=\"fontib-home-testimonials\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Loved by Creators and Everyday Users<\/h2>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-home-testimonial-card\">\r\n                    <p class=\"fontib-home-testimonial-text\">\"This font builder makes it easy to create stylish bios and\r\n                        captions without opening a design app. It saves me so much time!\"<\/p>\r\n                    <div class=\"fontib-home-testimonial-author\">\r\n                        <div class=\"fontib-home-author-avatar\">S<\/div>\r\n                        <div class=\"fontib-home-author-info\">\r\n                            <h6>Sarah J.<\/h6>\r\n                            <span>Content Creator<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-home-testimonial-card\">\r\n                    <p class=\"fontib-home-testimonial-text\">\"I use it to make my brand name stand out on social media.\r\n                        The fancy fonts give my small business a professional touch.\"<\/p>\r\n                    <div class=\"fontib-home-testimonial-author\">\r\n                        <div class=\"fontib-home-author-avatar\">M<\/div>\r\n                        <div class=\"fontib-home-author-info\">\r\n                            <h6>Mike R.<\/h6>\r\n                            <span>Small Business Owner<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-home-testimonial-card\">\r\n                    <p class=\"fontib-home-testimonial-text\">\"Perfect for making my gaming username look cool. I use it\r\n                        for my TikTok and Instagram bios all the time.\"<\/p>\r\n                    <div class=\"fontib-home-testimonial-author\">\r\n                        <div class=\"fontib-home-author-avatar\">A<\/div>\r\n                        <div class=\"fontib-home-author-info\">\r\n                            <h6>Alex T.<\/h6>\r\n                            <span>Student \/ Gamer<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 11. Blog Section -->\r\n<section class=\"fontib-home-blog\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Fontib <span class=\"\">Guide and Tips<\/span><\/h2>\r\n        <div class=\"fontib-home-blog-grid\">\r\n            <a href=\"https:\/\/fontib.com\/what-font-size-should-a-cover-letter-be\/\" class=\"fontib-home-blog-card\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/what-font-size-should-a-cover-letter-be-400x250.webp\" alt=\"What Font Size Should A Cover Letter Be?\" class=\"fontib-home-blog-card-img\">\r\n                <div class=\"fontib-home-blog-card-body\">\r\n                    <span class=\"fontib-home-blog-card-category\">Career<\/span>\r\n                    <h4>What Font Size Should A Cover Letter Be?<\/h4>\r\n                <\/div>\r\n            <\/a>\r\n            <a href=\"https:\/\/fontib.com\/how-to-get-papyrus-font-on-instagram-stories-easily\/\" class=\"fontib-home-blog-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/how-to-get-papyrus-font-on-instagram-400x250.webp\" alt=\"How To Get Papyrus Font On Instagram Stories Easily\" class=\"fontib-home-blog-card-img\">\r\n                <div class=\"fontib-home-blog-card-body\">\r\n                    <span class=\"fontib-home-blog-card-category\">Instagram Tips<\/span>\r\n                    <h4>How To Get Papyrus Font On Instagram Stories Easily<\/h4>\r\n                <\/div>\r\n            <\/a>\r\n            <a href=\"https:\/\/fontib.com\/what-font-does-instagram-use-for-captions-guide\/\" class=\"fontib-home-blog-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/what-font-does-instagram-use-for-captions-400x250.webp\" alt=\"What Font Does Instagram Use For Captions? Guide\" class=\"fontib-home-blog-card-img\">\r\n                <div class=\"fontib-home-blog-card-body\">\r\n                    <span class=\"fontib-home-blog-card-category\">Instagram Guide<\/span>\r\n                    <h4>What Font Does Instagram Use For Captions? Guide<\/h4>\r\n                <\/div>\r\n            <\/a>\r\n        <\/div>\r\n        <div style=\"text-align:center;margin-top:48px;\" data-aos=\"fade-up\">\r\n            <a href=\"https:\/\/fontib.com\/blog\/\" class=\"fontib-home-btn-outline\" style=\"border-radius:50px;\">\r\n                <i class='bx bx-book-open'><\/i> View All Blog\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 12. FAQ Section -->\r\n<section class=\"fontib-home-faq\">\r\n    <div class=\"fontib-home-wrapper\">\r\n        <h2 class=\"fontib-home-section-title\" data-aos=\"fade-up\">Common Questions<\/h2>\r\n        <div class=\"row justify-content-center\">\r\n            <div class=\"col-lg-8\" data-aos=\"fade-up\">\r\n                <div class=\"accordion\" id=\"fontibAboutFaqAccordion\">\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqOne\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-info-circle'><\/i><\/div>\r\n                                    What is a font builder?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqOne\" class=\"accordion-collapse collapse show\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                A font builder is an online tool that converts your standard text into various stylish,\r\n                                fancy, or creative fonts using special Unicode characters. These fonts can be copied and\r\n                                pasted into social media platforms, messaging apps, and websites.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqTwo\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-copy'><\/i><\/div>\r\n                                    Can I copy and paste the fonts anywhere?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqTwo\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                Yes! The fonts generated by our tool are made from Unicode characters, which are\r\n                                supported by most modern devices and platforms. You can paste them into Instagram,\r\n                                TikTok, Twitter, Facebook, YouTube, Discord, and many other apps.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqThree\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-wallet'><\/i><\/div>\r\n                                    Is this font builder free?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqThree\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                Absolutely. Our font builder is 100% free to use. There are no hidden fees, and you\r\n                                don't need to create an account or sign up to start generating fonts.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqFour\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bxl-instagram'><\/i><\/div>\r\n                                    Can I use these fonts for Instagram and TikTok?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqFour\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                Yes, these fonts are perfect for Instagram bios, captions, TikTok captions, and\r\n                                comments. They are specifically designed to work seamlessly on social media platforms to\r\n                                help your profile stand out.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqFive\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-download'><\/i><\/div>\r\n                                    Do I need to install anything?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqFive\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                No installation is required. The font builder runs entirely in your web browser. Simply\r\n                                visit the website, type your text, and copy your favorite style.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-home-accordion-item\">\r\n                        <h2 class=\"accordion-header\" style=\"margin: 0;\">\r\n                            <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faqSix\">\r\n                                <div class=\"accordion-title\">\r\n                                    <div class=\"accordion-title-icon\"><i class='bx bx-font'><\/i><\/div>\r\n                                    What types of fonts can I create?\r\n                                <\/div>\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"faqSix\" class=\"accordion-collapse collapse\" data-bs-parent=\"#fontibAboutFaqAccordion\">\r\n                            <div class=\"accordion-body fontib-home-accordion-body\">\r\n                                You can create a wide variety of fonts including Fancy, Cursive, Bold, Script,\r\n                                Aesthetic, Cool, Cute, Gaming, Signature, and more. We are constantly adding new styles\r\n                                to give you more options.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 12. Final CTA Section -->\r\n<section class=\"fontib-home-final-cta\">\r\n    <!-- Floating Letters Background -->\r\n    <div class=\"fontib-home-floating-letters\" style=\"top: 10%; left: 5%; font-size: 15rem; transform: rotate(-15deg);\">\r\n        A<\/div>\r\n    <div class=\"fontib-home-floating-letters\"\r\n        style=\"bottom: 5%; right: 5%; font-size: 12rem; transform: rotate(10deg);\">B<\/div>\r\n    <div class=\"fontib-home-floating-letters\" style=\"top: 40%; right: 15%; font-size: 8rem; transform: rotate(20deg);\">\r\n        x<\/div>\r\n\r\n    <div class=\"fontib-home-wrapper\">\r\n        <div class=\"fontib-home-final-cta-card\" data-aos=\"zoom-in\">\r\n            <h2>Ready to Build Your Own Font Style?<\/h2>\r\n            <p>Start creating stylish, copy-ready text with a fast and easy font builder made for social profiles,\r\n                captions, names, and creative projects.<\/p>\r\n            <div class=\"d-flex flex-wrap justify-content-center gap-3\">\r\n                <a href=\"#\" class=\"btn fontib-home-btn-primary btn-lg px-5\">Start Using Font Builder<\/a>\r\n                <a href=\"#\" class=\"btn fontib-home-btn-outline btn-lg px-4\">Browse Font Styles<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n\r\n        \/\/ Simple interaction for preview section\r\n        const copyBtns = document.querySelectorAll('.fontib-home-copy-btn');\r\n        copyBtns.forEach(btn => {\r\n            btn.addEventListener('click', function () {\r\n                const originalText = this.innerText;\r\n                this.innerText = 'Copied!';\r\n                this.style.background = 'var(--fontib-home-primary)';\r\n                this.style.color = '#fff';\r\n                setTimeout(() => {\r\n                    this.innerText = originalText;\r\n                    this.style.background = '';\r\n                    this.style.color = '';\r\n                }, 1500);\r\n            });\r\n        });\r\n\r\n        \/\/ Filter button toggle\r\n        const filterBtns = document.querySelectorAll('.fontib-home-filter-btn');\r\n        filterBtns.forEach(btn => {\r\n            btn.addEventListener('click', function () {\r\n                filterBtns.forEach(b => b.classList.remove('active'));\r\n                this.classList.add('active');\r\n            });\r\n        });\r\n\r\n        \/\/ Builder Mockup - Live Preview\r\n        const builderInput = document.getElementById('fontibBuilderInput');\r\n        const builderPreview = document.getElementById('fontibBuilderPreview');\r\n        const builderChips = document.querySelectorAll('.fontib-home-builder-chip');\r\n        const builderCopyBtn = document.querySelector('.fontib-home-builder-copy-btn');\r\n        const charCount = document.querySelector('.fontib-home-builder-char-count');\r\n\r\n        const fontStyles = {\r\n            bold: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D400 + base) : String.fromCodePoint(0x1D41A + base);\r\n            }),\r\n            italic: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D434 + base) : String.fromCodePoint(0x1D44E + base);\r\n            }),\r\n            script: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D49C + base) : String.fromCodePoint(0x1D4B6 + base);\r\n            }),\r\n            serif: (text) => text.replace(\/[a-zA-Z]\/g, (c) => {\r\n                const base = c.toLowerCase().charCodeAt(0) - 97;\r\n                return c === c.toUpperCase() ? String.fromCodePoint(0x1D400 + base) : String.fromCodePoint(0x1D41A + base);\r\n            }),\r\n            mono: (text) => text.replace(\/[a-zA-Z0-9]\/g, (c) => {\r\n                if (c >= 'a' && c <= 'z') return String.fromCodePoint(0x1D670 + c.charCodeAt(0) - 97);\r\n                if (c >= 'A' && c <= 'Z') return String.fromCodePoint(0x1D656 + c.charCodeAt(0) - 65);\r\n                if (c >= '0' && c <= '9') return String.fromCodePoint(0x1D7F6 + c.charCodeAt(0) - 48);\r\n                return c;\r\n            })\r\n        };\r\n\r\n        function updatePreview() {\r\n            const text = builderInput.value || 'Hello World!';\r\n            const activeChip = document.querySelector('.fontib-home-builder-chip.active');\r\n            const style = activeChip ? activeChip.dataset.style : 'bold';\r\n            const converter = fontStyles[style] || fontStyles.bold;\r\n            builderPreview.textContent = converter(text);\r\n            charCount.textContent = text.length + ' characters';\r\n        }\r\n\r\n        if (builderInput) {\r\n            builderInput.addEventListener('input', updatePreview);\r\n        }\r\n\r\n        builderChips.forEach(chip => {\r\n            chip.addEventListener('click', function () {\r\n                builderChips.forEach(c => c.classList.remove('active'));\r\n                this.classList.add('active');\r\n                updatePreview();\r\n            });\r\n        });\r\n\r\n        if (builderCopyBtn) {\r\n            builderCopyBtn.addEventListener('click', function () {\r\n                const text = builderPreview.textContent;\r\n                navigator.clipboard.writeText(text).then(() => {\r\n                    this.innerHTML = \"<i class='bx bx-check'><\/i> Copied!\";\r\n                    setTimeout(() => {\r\n                        this.innerHTML = \"<i class='bx bx-clipboard'><\/i> Copy\";\r\n                    }, 1500);\r\n                });\r\n            });\r\n        }\r\n\r\n        \/\/ Toolbar button toggle\r\n        const toolBtns = document.querySelectorAll('.fontib-home-builder-tool-btn');\r\n        toolBtns.forEach(btn => {\r\n            btn.addEventListener('click', function () {\r\n                this.classList.toggle('active');\r\n            });\r\n        });\r\n    });\r\n<\/script>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:divi\/placeholder \/-->","_et_gb_content_width":"","footnotes":""},"class_list":["post-3643","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/comments?post=3643"}],"version-history":[{"count":4,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3643\/revisions"}],"predecessor-version":[{"id":3706,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3643\/revisions\/3706"}],"wp:attachment":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/media?parent=3643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}