{"id":3632,"date":"2026-05-19T06:03:38","date_gmt":"2026-05-19T06:03:38","guid":{"rendered":"https:\/\/fontib.com\/?page_id=3632"},"modified":"2026-06-06T03:48:11","modified_gmt":"2026-06-06T03:48:11","slug":"about","status":"publish","type":"page","link":"https:\/\/fontib.com\/about\/","title":{"rendered":"About"},"content":{"rendered":"\n[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<!-- <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@500;600;700&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<!-- <link href=\"https:\/\/unpkg.com\/aos@2.3.4\/dist\/aos.css\" rel=\"stylesheet\"> -->\r\n\r\n <style>\r\n    :root {\r\n        --fontib-about-primary: #003EA4;\r\n        --fontib-about-secondary: #185cc9;\r\n        --fontib-about-btn-gradient: linear-gradient(90deg, rgb(0, 62, 164), rgb(24, 92, 201));\r\n        --fontib-about-hero-bg: linear-gradient(135deg, rgb(244, 247, 255) 0%, rgb(238, 253, 248) 100%);\r\n        --fontib-about-text-dark: #1a1a1a;\r\n        --fontib-about-text-muted: #5f6b7a;\r\n        --fontib-about-white: #ffffff;\r\n        --fontib-about-light-gray: #f8f9fc;\r\n        --fontib-about-border: #e2e8f0;\r\n        --fontib-about-glow: rgba(0, 62, 164, 0.15);\r\n        --fontib-about-font: 'Inter', sans-serif;\r\n    }\r\n\r\n    .fontib-about-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-about-wrapper-wide {\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 24px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-about-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    .fontib-about-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-about-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-about-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-about-hero-grid {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-hero-badge i {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .fontib-about-hero h1 {\r\n        font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n        font-weight: 800;\r\n        color: var(--fontib-about-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-about-hero h1 span {\r\n        background: var(--fontib-about-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-about-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-about-hero p {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-about-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-about-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-about-btn-primary {\r\n        background: var(--fontib-about-btn-gradient);\r\n        color: var(--fontib-about-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-about-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-about-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-about-white);\r\n    }\r\n\r\n    .fontib-about-btn-primary:hover::before {\r\n        transform: translateX(100%);\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-btn-outline:hover {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-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-about-hero-stats {\r\n        display: flex;\r\n        gap: 32px;\r\n    }\r\n\r\n    .fontib-about-hero-stat {\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-about-hero-stat-number {\r\n        font-size: 1.8rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-about-primary);\r\n        line-height: 1;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-about-hero-stat-label {\r\n        font-size: 12px;\r\n        color: var(--fontib-about-text-muted);\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    \/* \u2500\u2500 Builder Mockup \u2500\u2500 *\/\r\n    .fontib-about-builder-mockup {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-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-about-builder-window:hover {\r\n        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-dots {\r\n        display: flex;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-about-builder-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-about-builder-dot-red { background: #ff5f57; }\r\n    .fontib-about-builder-dot-yellow { background: #ffbd2e; }\r\n    .fontib-about-builder-dot-green { background: #28c840; }\r\n\r\n    .fontib-about-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-about-text-muted);\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-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-about-builder-tool-btn:hover,\r\n    .fontib-about-builder-tool-btn.active {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-input-area {\r\n        padding: 24px 20px;\r\n        background: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .fontib-about-builder-input-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-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-about-builder-text-input {\r\n        width: 100%;\r\n        padding: 14px 18px!important;\r\n        background: var(--fontib-about-white)!important;\r\n        border: 2px solid rgba(0, 62, 164, 0.08) !important;\r\n        border-radius: 12px!important;\r\n        font-size: 16px!important;\r\n        color: var(--fontib-about-text-dark)!important;\r\n        font-family: var(--fontib-about-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-about-builder-text-input:focus {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 0 0 4px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-preview-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-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-about-builder-preview-text {\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-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-about-builder-style-chips {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-about-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-about-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-about-builder-chip:hover,\r\n    .fontib-about-builder-chip.active {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-copy-btn {\r\n        padding: 8px 20px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        color: var(--fontib-about-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-about-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-about-builder-char-count {\r\n        font-size: 12px;\r\n        color: var(--fontib-about-text-muted);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-float 3s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-builder-floating-badge i {\r\n        font-size: 18px;\r\n    }\r\n\r\n    @keyframes fontib-about-float {\r\n        0%, 100% { transform: translateY(0); }\r\n        50% { transform: translateY(-10px); }\r\n    }\r\n\r\n    \/* \u2500\u2500 Dashboard Mockup \u2500\u2500 *\/\r\n    .fontib-about-dashboard-mockup {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-dashboard-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-about-dashboard-window:hover {\r\n        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-about-dashboard-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\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    }\r\n\r\n    .fontib-about-dashboard-logo {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-dashboard-logo i {\r\n        font-size: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-user {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .fontib-about-dashboard-avatar {\r\n        width: 32px;\r\n        height: 32px;\r\n        border-radius: 50%;\r\n        background: var(--fontib-about-btn-gradient);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #fff;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n    }\r\n\r\n    .fontib-about-dashboard-username {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-dashboard-body {\r\n        display: flex;\r\n        min-height: 380px;\r\n    }\r\n\r\n    .fontib-about-dashboard-sidebar {\r\n        width: 60px;\r\n        background: rgba(248, 249, 252, 0.8);\r\n        border-right: 1px solid rgba(0, 62, 164, 0.06);\r\n        padding: 16px 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 4px;\r\n    }\r\n\r\n    .fontib-about-dashboard-nav-item {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 18px;\r\n        color: var(--fontib-about-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-about-dashboard-nav-item:hover,\r\n    .fontib-about-dashboard-nav-item.active {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-dashboard-main {\r\n        flex: 1;\r\n        padding: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-welcome {\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-about-dashboard-subtitle {\r\n        font-size: 12px;\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-stats {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 12px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-stat-card {\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid rgba(0, 62, 164, 0.06);\r\n        border-radius: 12px;\r\n        padding: 14px;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-about-dashboard-stat-value {\r\n        font-size: 20px;\r\n        font-weight: 800;\r\n        color: var(--fontib-about-primary);\r\n        line-height: 1;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-about-dashboard-stat-label {\r\n        font-size: 10px;\r\n        color: var(--fontib-about-text-muted);\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-about-dashboard-recent {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 12px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        padding: 10px 12px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border-radius: 10px;\r\n        border: 1px solid rgba(0, 62, 164, 0.04);\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-item:hover {\r\n        background: rgba(255, 255, 255, 0.9);\r\n        border-color: rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-about-dashboard-project-icon {\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 8px;\r\n        background: rgba(0, 62, 164, 0.08);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 16px;\r\n        color: var(--fontib-about-primary);\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-info {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-name {\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--fontib-about-text-dark);\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-date {\r\n        font-size: 10px;\r\n        color: var(--fontib-about-text-muted);\r\n    }\r\n\r\n    .fontib-about-dashboard-project-badge {\r\n        font-size: 9px;\r\n        font-weight: 700;\r\n        padding: 4px 8px;\r\n        border-radius: 50px;\r\n        background: rgba(25, 135, 84, 0.1);\r\n        color: #198754;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-about-dashboard-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-about-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-about-float 3s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-about-dashboard-floating-badge.badge-top {\r\n        top: -20px;\r\n        right: -30px;\r\n        animation-delay: 0s;\r\n    }\r\n\r\n    .fontib-about-dashboard-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-about-dashboard-floating-badge i {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .fontib-about-section-title {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 20px;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-about-section-subtitle {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 60px;\r\n        text-align: center;\r\n        max-width: 700px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    \/* Mission Section *\/\r\n    .fontib-about-mission {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-mission-text h2 {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 20px;\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-about-mission-text p {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-about-text-muted);\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .fontib-about-mission-visual {\r\n        background: var(--fontib-about-light-gray);\r\n        border-radius: 20px;\r\n        min-height: 350px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: 1px solid var(--fontib-about-border);\r\n    }\r\n\r\n    .fontib-about-mission-visual i {\r\n        font-size: 8rem;\r\n        color: var(--fontib-about-primary);\r\n        opacity: 0.15;\r\n    }\r\n\r\n    \/* How It Works Section *\/\r\n    .fontib-about-how-it-works {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-light-gray);\r\n    }\r\n\r\n    .fontib-about-step-card {\r\n        text-align: center;\r\n        position: relative;\r\n        padding: 40px 30px;\r\n        background: var(--fontib-about-white);\r\n        border-radius: 20px;\r\n        border: 1px solid var(--fontib-about-border);\r\n        transition: all 0.4s ease;\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-about-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-about-primary);\r\n    }\r\n\r\n    .fontib-about-step-icon {\r\n        width: 90px;\r\n        height: 90px;\r\n        margin: 0 auto 25px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-about-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-about-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-about-white);\r\n        border: 2px solid var(--fontib-about-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-about-primary);\r\n    }\r\n\r\n    .fontib-about-step-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.25rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-step-card p {\r\n        color: var(--fontib-about-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    \/* Features Section *\/\r\n    .fontib-about-features {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-feature-card {\r\n        background: var(--fontib-about-light-gray);\r\n        padding: 40px 30px;\r\n        border-radius: 20px;\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-about-feature-card:hover {\r\n        background: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 15px 40px rgba(0, 62, 164, 0.1);\r\n        transform: translateY(-5px);\r\n    }\r\n\r\n    .fontib-about-feature-icon {\r\n        width: 80px;\r\n        height: 80px;\r\n        margin: 0 auto 20px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-about-white);\r\n        font-size: 32px;\r\n        box-shadow: 0 8px 25px rgba(0, 62, 164, 0.2);\r\n    }\r\n\r\n    .fontib-about-feature-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.2rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-feature-card p {\r\n        color: var(--fontib-about-text-muted);\r\n        font-size: 0.95rem;\r\n        margin: 0;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* Why Choose Section *\/\r\n    .fontib-about-why-choose {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-hero-bg);\r\n    }\r\n\r\n    .fontib-about-why-item {\r\n        margin-bottom: 30px;\r\n        display: flex;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .fontib-about-why-icon {\r\n        min-width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-about-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-about-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-about-why-text h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-why-text p {\r\n        color: var(--fontib-about-text-muted);\r\n        margin: 0;\r\n        font-size: 0.95rem;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .fontib-about-comparison-visual {\r\n        background: var(--fontib-about-white);\r\n        border-radius: 20px;\r\n        min-height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 20px 40px rgba(0, 62, 164, 0.08);\r\n        border: 1px solid var(--fontib-about-border);\r\n    }\r\n\r\n    .fontib-about-comparison-visual i {\r\n        font-size: 6rem;\r\n        color: var(--fontib-about-primary);\r\n        opacity: 0.12;\r\n    }\r\n\r\n    \/* Testimonials Section *\/\r\n    .fontib-about-testimonials {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-testimonial-card {\r\n        background: var(--fontib-about-light-gray);\r\n        padding: 35px;\r\n        border-radius: 20px;\r\n        height: 100%;\r\n        border: 1px solid var(--fontib-about-border);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-about-testimonial-card:hover {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 15px 40px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-about-testimonial-text {\r\n        font-style: italic;\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 25px;\r\n        font-size: 1.05rem;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .fontib-about-testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-about-author-avatar {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-about-white);\r\n        font-weight: 700;\r\n        font-size: 20px;\r\n        margin-right: 15px;\r\n    }\r\n\r\n    .fontib-about-author-info h6 {\r\n        font-weight: 700;\r\n        margin-bottom: 2px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-author-info span {\r\n        color: var(--fontib-about-text-muted);\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    \/* Team Section *\/\r\n    .fontib-about-team {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-light-gray);\r\n    }\r\n\r\n    .fontib-about-team-card {\r\n        background: var(--fontib-about-white);\r\n        padding: 30px;\r\n        border-radius: 20px;\r\n        text-align: center;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid var(--fontib-about-border);\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-about-team-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 40px rgba(0, 62, 164, 0.1);\r\n        border-color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-team-photo {\r\n        width: 100px;\r\n        height: 100px;\r\n        background: var(--fontib-about-light-gray);\r\n        border-radius: 50%;\r\n        margin: 0 auto 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 40px;\r\n        color: var(--fontib-about-primary);\r\n        border: 3px solid var(--fontib-about-primary);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-about-team-card:hover .fontib-about-team-photo {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .fontib-about-team-card h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-team-card .role {\r\n        color: var(--fontib-about-primary);\r\n        font-weight: 600;\r\n        font-size: 0.9rem;\r\n        margin-bottom: 12px;\r\n        display: block;\r\n    }\r\n\r\n    .fontib-about-team-card p {\r\n        color: var(--fontib-about-text-muted);\r\n        font-size: 0.9rem;\r\n        margin: 0;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* FAQ Section *\/\r\n    .fontib-about-faq {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-light-gray);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-about-faq::before {\r\n        content: '?';\r\n        position: absolute;\r\n        top: -80px;\r\n        right: -60px;\r\n        font-size: 30rem;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.03);\r\n        line-height: 1;\r\n        z-index: 0;\r\n        user-select: none;\r\n    }\r\n\r\n    .fontib-about-faq::after {\r\n        content: '?';\r\n        position: absolute;\r\n        bottom: -100px;\r\n        left: -40px;\r\n        font-size: 20rem;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.03);\r\n        line-height: 1;\r\n        z-index: 0;\r\n        user-select: none;\r\n        transform: rotate(15deg);\r\n    }\r\n\r\n    .fontib-about-faq-card {\r\n        background: rgba(255, 255, 255, 0.85);\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        border-radius: 24px;\r\n        padding: 50px;\r\n        box-shadow: 0 20px 60px rgba(0, 62, 164, 0.08);\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-about-accordion-item {\r\n        background: var(--fontib-about-white);\r\n        border: 1px solid var(--fontib-about-border);\r\n        border-radius: 16px !important;\r\n        margin-bottom: 16px;\r\n        overflow: hidden;\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-about-accordion-item:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .fontib-about-accordion-item::before {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n        width: 4px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        border-radius: 0 4px 4px 0;\r\n    }\r\n\r\n    .fontib-about-accordion-item:hover {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-about-accordion-item.active {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 12px 45px rgba(0, 62, 164, 0.15);\r\n        background: linear-gradient(135deg, var(--fontib-about-white) 0%, rgba(0, 62, 164, 0.02) 100%);\r\n    }\r\n\r\n    .fontib-about-accordion-item.active::before {\r\n        opacity: 1;\r\n    }\r\n\r\n    .fontib-about-accordion-button {\r\n        font-weight: 600;\r\n        color: var(--fontib-about-text-dark) !important;\r\n        box-shadow: none !important;\r\n        background: transparent !important;\r\n        padding: 24px 30px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        width: 100%;\r\n        border: none !important;\r\n        text-align: left;\r\n        font-size: 1.1rem;\r\n        gap: 16px;\r\n        transition: all 0.3s ease;\r\n        text-decoration: none !important;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-accordion-button::after {\r\n        content: '+';\r\n        font-family: inherit;\r\n        font-size: 1.6rem;\r\n        font-weight: 300;\r\n        color: var(--fontib-about-primary);\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        flex-shrink: 0;\r\n        line-height: 1;\r\n        display: inline-block;\r\n        width: 36px;\r\n        height: 36px;\r\n        background: var(--fontib-about-light-gray);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-about-accordion-button:not(.collapsed)::after {\r\n        content: '\u2212';\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    .fontib-about-accordion-button .question-text {\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n    }\r\n\r\n    .fontib-about-accordion-body {\r\n        padding: 0 30px 24px 30px;\r\n        color: var(--fontib-about-text-muted);\r\n        line-height: 1.8;\r\n        font-size: 0.95rem;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-faq-footer {\r\n        text-align: center;\r\n        margin-top: 40px;\r\n        padding: 30px 0 0;\r\n        border-top: 1px solid var(--fontib-about-border);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-faq-footer p {\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 0;\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .fontib-about-faq-footer a {\r\n        color: var(--fontib-about-primary);\r\n        font-weight: 600;\r\n        text-decoration: none;\r\n        transition: all 0.3s ease;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .fontib-about-faq-footer a:hover {\r\n        color: var(--fontib-about-secondary);\r\n        gap: 10px;\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-about-faq-card {\r\n            padding: 24px;\r\n        }\r\n\r\n        .fontib-about-accordion-button {\r\n            padding: 20px;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .fontib-about-accordion-button::after {\r\n            width: 30px;\r\n            height: 30px;\r\n            font-size: 1.3rem;\r\n        }\r\n\r\n        .fontib-about-accordion-body {\r\n            padding: 0 20px 20px;\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .fontib-about-faq::before,\r\n        .fontib-about-faq::after {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    \/* Final CTA Section *\/\r\n    .fontib-about-final-cta {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-hero-bg);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-final-cta-card p {\r\n        font-size: 1.15rem;\r\n        color: var(--fontib-about-text-muted);\r\n        max-width: 600px;\r\n        margin: 0 auto 40px;\r\n    }\r\n\r\n    .fontib-about-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-about-hero {\r\n            padding: 80px 0 60px;\r\n            min-height: auto;\r\n        }\r\n\r\n        .fontib-about-hero h1 {\r\n            font-size: 2.2rem;\r\n        }\r\n\r\n        .fontib-about-hero p {\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .fontib-about-hero-buttons {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-about-hero-stats {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-about-final-cta-card {\r\n            padding: 50px 30px;\r\n        }\r\n\r\n        .fontib-about-final-cta-card h2 {\r\n            font-size: 2.2rem;\r\n        }\r\n\r\n        .fontib-about-section-title {\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .fontib-about-mission-text h2 {\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n\r\n        .fontib-about-wrapper,\r\n        .fontib-about-wrapper-wide,\r\n        .fontib-about-wrapper-narrow {\r\n            padding: 0 16px;\r\n        }\r\n\r\n        .fontib-about-hero h1 {\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .fontib-about-hero {\r\n            padding: 80px 0 60px;\r\n        }\r\n\r\n        .fontib-about-section-title {\r\n            font-size: 1.8rem;\r\n        }\r\n\r\n        .fontib-about-final-cta-card h2 {\r\n            font-size: 1.8rem;\r\n        }\r\n\r\n        .fontib-about-dashboard-window {\r\n            transform: none;\r\n        }\r\n\r\n        .fontib-about-dashboard-floating-badge {\r\n            display: none;\r\n        }\r\n\r\n        .fontib-about-dashboard-stats {\r\n            grid-template-columns: repeat(3, 1fr);\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- 1. Hero Section -->\r\n<section class=\"fontib-about-hero\">\r\n    <div class=\"fontib-about-wrapper fontib-about-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-about-hero-badge\">\r\n                    <i class='bx bx-info-circle'><\/i> About Fontib\r\n                <\/span>\r\n                <h1> Ultimate Your Font Design From Our Builder<\/h1>\r\n                <p>Design, customize, and create stunning fonts with our intuitive SaaS platform. Built for creators, brands, and digital projects.<\/p>\r\n                <div class=\"fontib-about-hero-buttons\">\r\n                    <a href=\"\/contact\" class=\"fontib-about-btn-primary\">\r\n                        Get Started <i class='bx bx-right-arrow-alt'><\/i>\r\n                    <\/a>\r\n                    <a href=\"\/features\" class=\"fontib-about-btn-outline\">\r\n                        <i class='bx bx-grid-alt'><\/i> Explore Features\r\n                    <\/a>\r\n                <\/div>\r\n                <div class=\"fontib-about-hero-stats\">\r\n                    <div class=\"fontib-about-hero-stat\">\r\n                        <div class=\"fontib-about-hero-stat-number\">500+<\/div>\r\n                        <div class=\"fontib-about-hero-stat-label\">Font Styles<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-hero-stat\">\r\n                        <div class=\"fontib-about-hero-stat-number\">50K+<\/div>\r\n                        <div class=\"fontib-about-hero-stat-label\">Active Users<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-hero-stat\">\r\n                        <div class=\"fontib-about-hero-stat-number\">10M+<\/div>\r\n                        <div class=\"fontib-about-hero-stat-label\">Fonts Generated<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6 fontib-about-builder-mockup mt-5 mt-lg-0\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-about-builder-window\">\r\n                    <div class=\"fontib-about-builder-titlebar\">\r\n                        <div class=\"fontib-about-builder-dots\">\r\n                            <span class=\"fontib-about-builder-dot fontib-about-builder-dot-red\"><\/span>\r\n                            <span class=\"fontib-about-builder-dot fontib-about-builder-dot-yellow\"><\/span>\r\n                            <span class=\"fontib-about-builder-dot fontib-about-builder-dot-green\"><\/span>\r\n                        <\/div>\r\n                        <span class=\"fontib-about-builder-titlebar-text\">Fontib Builder<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-toolbar\">\r\n                        <div class=\"fontib-about-builder-tool-btn active\" title=\"Bold\"><i class='bx bx-bold'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Italic\"><i class='bx bx-italic'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Underline\"><i class='bx bx-underline'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Align Left\"><i class='bx bx-align-left'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Align Center\"><i class='bx bx-align-middle'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Align Right\"><i class='bx bx-align-right'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Copy\"><i class='bx bx-copy'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Download\"><i class='bx bx-download'><\/i><\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-input-area\">\r\n                        <div class=\"fontib-about-builder-input-label\">Type your text<\/div>\r\n                        <input type=\"text\" class=\"fontib-about-builder-text-input\" id=\"fontibAboutBuilderInput\" placeholder=\"Hello World...\" value=\"Hello World!\">\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-preview-area\">\r\n                        <div class=\"fontib-about-builder-preview-label\">Preview<\/div>\r\n                        <div class=\"fontib-about-builder-preview-text\" id=\"fontibAboutBuilderPreview\">\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-about-builder-style-chips\">\r\n                            <span class=\"fontib-about-builder-chip active\" data-style=\"bold\">Bold<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"italic\">Italic<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"script\">Script<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"serif\">Serif<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"mono\">Mono<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-footer\">\r\n                        <span class=\"fontib-about-builder-char-count\">12 characters<\/span>\r\n                        <button class=\"fontib-about-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-about-builder-floating-badge badge-top\">\r\n                    <i class='bx bx-check-circle'><\/i> Copy Ready\r\n                <\/div>\r\n                <div class=\"fontib-about-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\r\n<!-- 2. Our Mission -->\r\n<section class=\"fontib-about-mission\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <div class=\"row align-items-center g-5\">\r\n            <div class=\"col-lg-6\" data-aos=\"fade-right\">\r\n                <div class=\"fontib-about-mission-text\">\r\n                    <h2>Our Mission at Fontib<\/h2>\r\n                    <p>Fontib's goal is to empower designers, marketers, and creators to bring their text to life. With\r\n                        our font builder, anyone can craft unique, professional fonts in minutes\u2014no technical expertise\r\n                        required.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6 fontib-about-dashboard-mockup\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-about-dashboard-window\">\r\n                    <div class=\"fontib-about-dashboard-header\">\r\n                        <div class=\"fontib-about-dashboard-logo\">\r\n                            <i class='bx bx-font'><\/i> Fontib\r\n                        <\/div>\r\n                        <div class=\"fontib-about-dashboard-user\">\r\n                            <span class=\"fontib-about-dashboard-username\">John Doe<\/span>\r\n                            <div class=\"fontib-about-dashboard-avatar\">J<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-dashboard-body\">\r\n                        <div class=\"fontib-about-dashboard-sidebar\">\r\n                            <div class=\"fontib-about-dashboard-nav-item active\" title=\"Dashboard\"><i class='bx bx-grid-alt'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Projects\"><i class='bx bx-folder'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Builder\"><i class='bx bx-edit'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Exports\"><i class='bx bx-download'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Settings\"><i class='bx bx-cog'><\/i><\/div>\r\n                        <\/div>\r\n                        <div class=\"fontib-about-dashboard-main\">\r\n                            <div class=\"fontib-about-dashboard-welcome\">Welcome back, John! \ud83d\udc4b<\/div>\r\n                            <div class=\"fontib-about-dashboard-subtitle\">Here's what's happening with your fonts today.<\/div>\r\n                            <div class=\"fontib-about-dashboard-stats\">\r\n                                <div class=\"fontib-about-dashboard-stat-card\">\r\n                                    <div class=\"fontib-about-dashboard-stat-value\">24<\/div>\r\n                                    <div class=\"fontib-about-dashboard-stat-label\">Projects<\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-stat-card\">\r\n                                    <div class=\"fontib-about-dashboard-stat-value\">156<\/div>\r\n                                    <div class=\"fontib-about-dashboard-stat-label\">Exports<\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-stat-card\">\r\n                                    <div class=\"fontib-about-dashboard-stat-value\">12<\/div>\r\n                                    <div class=\"fontib-about-dashboard-stat-label\">Fonts<\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-about-dashboard-recent\">Recent Projects<\/div>\r\n                            <div class=\"fontib-about-dashboard-project-list\">\r\n                                <div class=\"fontib-about-dashboard-project-item\">\r\n                                    <div class=\"fontib-about-dashboard-project-icon\"><i class='bx bx-font'><\/i><\/div>\r\n                                    <div class=\"fontib-about-dashboard-project-info\">\r\n                                        <div class=\"fontib-about-dashboard-project-name\">Modern Sans Serif<\/div>\r\n                                        <div class=\"fontib-about-dashboard-project-date\">Edited 2 hours ago<\/div>\r\n                                    <\/div>\r\n                                    <span class=\"fontib-about-dashboard-project-badge\">Active<\/span>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-project-item\">\r\n                                    <div class=\"fontib-about-dashboard-project-icon\"><i class='bx bx-paint'><\/i><\/div>\r\n                                    <div class=\"fontib-about-dashboard-project-info\">\r\n                                        <div class=\"fontib-about-dashboard-project-name\">Cursive Script Pro<\/div>\r\n                                        <div class=\"fontib-about-dashboard-project-date\">Edited yesterday<\/div>\r\n                                    <\/div>\r\n                                    <span class=\"fontib-about-dashboard-project-badge\">Active<\/span>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-project-item\">\r\n                                    <div class=\"fontib-about-dashboard-project-icon\"><i class='bx bx-bold'><\/i><\/div>\r\n                                    <div class=\"fontib-about-dashboard-project-info\">\r\n                                        <div class=\"fontib-about-dashboard-project-name\">Bold Display Font<\/div>\r\n                                        <div class=\"fontib-about-dashboard-project-date\">Edited 3 days ago<\/div>\r\n                                    <\/div>\r\n                                    <span class=\"fontib-about-dashboard-project-badge\">Active<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-dashboard-floating-badge badge-top\">\r\n                    <i class='bx bx-check-circle'><\/i> Cloud Synced\r\n                <\/div>\r\n                <div class=\"fontib-about-dashboard-floating-badge badge-bottom\">\r\n                    <i class='bx bx-folder'><\/i> 24 Projects\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. How Fontib Works -->\r\n<section class=\"fontib-about-how-it-works\">\r\n    <div class=\"fontib-about-wrapper\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">Steps of Fontib <\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Create professional fonts in three simple steps<\/p>\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-about-step-card\">\r\n                    <div class=\"fontib-about-step-icon\">\r\n                        <i class='bx bx-select-multiple'><\/i>\r\n                        <span class=\"fontib-about-step-badge\">1<\/span>\r\n                    <\/div>\r\n                    <h5>Choose Your Style<\/h5>\r\n                    <p>Pick from hundreds of templates and font types.<\/p>\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-about-step-card\">\r\n                    <div class=\"fontib-about-step-icon\">\r\n                        <i class='bx bx-slider'><\/i>\r\n                        <span class=\"fontib-about-step-badge\">2<\/span>\r\n                    <\/div>\r\n                    <h5>Customize Instantly<\/h5>\r\n                    <p>Adjust weights, curves, and special effects in real-time.<\/p>\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-about-step-card\">\r\n                    <div class=\"fontib-about-step-icon\">\r\n                        <i class='bx bx-export'><\/i>\r\n                        <span class=\"fontib-about-step-badge\">3<\/span>\r\n                    <\/div>\r\n                    <h5>Export & Share<\/h5>\r\n                    <p>Download your font or use it directly in your projects.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 4. Key Features -->\r\n<section class=\"fontib-about-features\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">Features<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Everything you need to create professional fonts<\/p>\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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-show'><\/i><\/div>\r\n                    <h5>Real-Time Preview<\/h5>\r\n                    <p>See your font changes instantly as you customize.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-globe'><\/i><\/div>\r\n                    <h5>Multi-Language Support<\/h5>\r\n                    <p>Create fonts in multiple languages and scripts.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-cloud'><\/i><\/div>\r\n                    <h5>Cloud Storage for Fonts<\/h5>\r\n                    <p>Save and access your fonts from anywhere.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-move'><\/i><\/div>\r\n                    <h5>Drag-and-Drop Editor<\/h5>\r\n                    <p>Easy to use interface for quick adjustments.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-text'><\/i><\/div>\r\n                    <h5>Advanced Typography Tools<\/h5>\r\n                    <p>Fine-tune every detail of your typography.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-share-alt'><\/i><\/div>\r\n                    <h5>Collaboration & Sharing<\/h5>\r\n                    <p>Work together and share fonts seamlessly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 5. Why Choose Fontib -->\r\n<section class=\"fontib-about-why-choose\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <div class=\"row align-items-center g-5\">\r\n            <div class=\"col-lg-6\" data-aos=\"fade-right\">\r\n                <h2 class=\"fontib-about-section-title\" style=\"text-align: left; margin-bottom: 40px;\">Why Fontib is the\r\n                    Preferred Font Builder<\/h2>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Intuitive SaaS Interface<\/h5>\r\n                        <p>Designed for designers and non-designers alike.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Professional Results<\/h5>\r\n                        <p>Get professional fonts without complex software.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Secure Cloud Platform<\/h5>\r\n                        <p>Store and manage your fonts safely in the cloud.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Optimized for Speed<\/h5>\r\n                        <p>Real-time adjustments with lightning-fast performance.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-about-comparison-visual\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Why-Fontib-is-the-Preferred-Font-Builder.webp\"\r\n                        alt=\"Why Fontib is the Preferred Font Builder\"\r\n                        style=\"width: 100%; height: auto; border-radius: 20px;\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 6. Testimonials -->\r\n<section class=\"fontib-about-testimonials\">\r\n    <div class=\"fontib-about-wrapper\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">What Our Users Say<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Trusted by thousands of creators worldwide<\/p>\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-about-testimonial-card\">\r\n                    <p class=\"fontib-about-testimonial-text\">\"Fontib has completely transformed how I create fonts for\r\n                        my clients. The interface is so intuitive!\"<\/p>\r\n                    <div class=\"fontib-about-testimonial-author\">\r\n                        <div class=\"fontib-about-author-avatar\">S<\/div>\r\n                        <div class=\"fontib-about-author-info\">\r\n                            <h6>Sarah J.<\/h6>\r\n                            <span>Graphic Designer<\/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-about-testimonial-card\">\r\n                    <p class=\"fontib-about-testimonial-text\">\"I love how quickly I can create custom fonts and export\r\n                        them. It's a game-changer for my workflow.\"<\/p>\r\n                    <div class=\"fontib-about-testimonial-author\">\r\n                        <div class=\"fontib-about-author-avatar\">M<\/div>\r\n                        <div class=\"fontib-about-author-info\">\r\n                            <h6>Mike R.<\/h6>\r\n                            <span>Marketing Director<\/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-about-testimonial-card\">\r\n                    <p class=\"fontib-about-testimonial-text\">\"The cloud storage feature is amazing. I can access my\r\n                        fonts from any device, anywhere.\"<\/p>\r\n                    <div class=\"fontib-about-testimonial-author\">\r\n                        <div class=\"fontib-about-author-avatar\">A<\/div>\r\n                        <div class=\"fontib-about-author-info\">\r\n                            <h6>Alex T.<\/h6>\r\n                            <span>Content Creator<\/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<!-- 7. Meet the Team -->\r\n<section class=\"fontib-about-team\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">The Minds Behind Fontib<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Meet the passionate team building the future of\r\n            typography<\/p>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>George D. Miller<\/h5>\r\n                    <span class=\"role\">CEO & Founder<\/span>\r\n                    <p>Visionary leader with 10+ years in typography and design technology.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>Fred M. Harrah<\/h5>\r\n                    <span class=\"role\">Lead Designer<\/span>\r\n                    <p>Expert in font design and user experience with a passion for creativity.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>John H. Richardson<\/h5>\r\n                    <span class=\"role\">CTO<\/span>\r\n                    <p>Full-stack engineer specializing in SaaS platforms and cloud architecture.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>Joseph N. Tucker<\/h5>\r\n                    <span class=\"role\">Product Manager<\/span>\r\n                    <p>Strategic thinker driving product innovation and user growth.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 8. FAQ Section -->\r\n<section class=\"fontib-about-faq\">\r\n    <div class=\"fontib-about-wrapper-narrow\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">Frequently Asked Questions<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Find answers to common questions about Fontib<\/p>\r\n        <div class=\"fontib-about-faq-card\" data-aos=\"fade-up\">\r\n            <div class=\"accordion\" id=\"fontibAboutFaqAccordion\">\r\n                <div class=\"fontib-about-accordion-item active\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqOne\">\r\n                            <div class=\"question-text\">\r\n                                How does the Fontib builder work?\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-about-accordion-body\">\r\n                            Fontib uses an intuitive drag-and-drop interface that lets you customize fonts in real-time.\r\n                            Simply choose a template, adjust the parameters, and export your creation.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-accordion-item\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqTwo\">\r\n                            <div class=\"question-text\">\r\n                                Can I export fonts for commercial use?\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-about-accordion-body\">\r\n                            Yes! All fonts created with Fontib can be exported and used for both personal and commercial\r\n                            projects, depending on your subscription plan.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-accordion-item\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqThree\">\r\n                            <div class=\"question-text\">\r\n                                Are my designs saved in the cloud?\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-about-accordion-body\">\r\n                            Absolutely. All your font designs are automatically saved to your secure cloud account, so\r\n                            you can access them from any device at any time.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-accordion-item\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqFour\">\r\n                            <div class=\"question-text\">\r\n                                What types of fonts can I create?\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-about-accordion-body\">\r\n                            You can create a wide variety of fonts including serif, sans-serif, script, display,\r\n                            monospace, and decorative fonts. We're constantly adding new styles and templates.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"fontib-about-faq-footer\">\r\n                <p>Still have questions? <a href=\"#\">Contact our support team<\/a><\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 9. Final CTA Section -->\r\n<section class=\"fontib-about-final-cta\">\r\n    <div class=\"fontib-about-floating-letters\" style=\"top: 10%; left: 5%; font-size: 15rem; transform: rotate(-15deg);\">\r\n        A<\/div>\r\n    <div class=\"fontib-about-floating-letters\"\r\n        style=\"bottom: 5%; right: 5%; font-size: 12rem; transform: rotate(10deg);\">B<\/div>\r\n    <div class=\"fontib-about-floating-letters\" style=\"top: 40%; right: 15%; font-size: 8rem; transform: rotate(20deg);\">\r\n        x<\/div>\r\n\r\n    <div class=\"fontib-about-wrapper\">\r\n        <div class=\"fontib-about-final-cta-card\" data-aos=\"zoom-in\">\r\n            <h2>Start Building Your Fonts Today<\/h2>\r\n            <p>Join thousands of creators using Fontib to bring text to life.<\/p>\r\n            <div class=\"d-flex flex-wrap justify-content-center gap-3\">\r\n                <a href=\"\/\" class=\"btn fontib-about-btn-primary btn-lg px-5\">Create Your First Font<\/a>\r\n                <a href=\"\/contact\" class=\"btn fontib-about-btn-outline btn-lg px-4\">Get Started<\/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        \/\/ FAQ Accordion Active State\r\n        const faqAccordion = document.getElementById('fontibAboutFaqAccordion');\r\n        if (faqAccordion) {\r\n            faqAccordion.addEventListener('shown.bs.collapse', function (e) {\r\n                const items = document.querySelectorAll('.fontib-about-accordion-item');\r\n                items.forEach(i => i.classList.remove('active'));\r\n                e.target.closest('.fontib-about-accordion-item').classList.add('active');\r\n            });\r\n\r\n            faqAccordion.addEventListener('hidden.bs.collapse', function (e) {\r\n                e.target.closest('.fontib-about-accordion-item').classList.remove('active');\r\n            });\r\n        }\r\n\r\n        \/\/ Builder Mockup - Live Preview\r\n        const builderInput = document.getElementById('fontibAboutBuilderInput');\r\n        const builderPreview = document.getElementById('fontibAboutBuilderPreview');\r\n        const builderChips = document.querySelectorAll('.fontib-about-builder-chip');\r\n        const builderCopyBtn = document.querySelector('.fontib-about-builder-copy-btn');\r\n        const charCount = document.querySelector('.fontib-about-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-about-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-about-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&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<!-- <link href=\"https:\/\/unpkg.com\/aos@2.3.4\/dist\/aos.css\" rel=\"stylesheet\"> -->\r\n\r\n <style>\r\n    :root {\r\n        --fontib-about-primary: #003EA4;\r\n        --fontib-about-secondary: #185cc9;\r\n        --fontib-about-btn-gradient: linear-gradient(90deg, rgb(0, 62, 164), rgb(24, 92, 201));\r\n        --fontib-about-hero-bg: linear-gradient(135deg, rgb(244, 247, 255) 0%, rgb(238, 253, 248) 100%);\r\n        --fontib-about-text-dark: #1a1a1a;\r\n        --fontib-about-text-muted: #5f6b7a;\r\n        --fontib-about-white: #ffffff;\r\n        --fontib-about-light-gray: #f8f9fc;\r\n        --fontib-about-border: #e2e8f0;\r\n        --fontib-about-glow: rgba(0, 62, 164, 0.15);\r\n        --fontib-about-font: 'Inter', sans-serif;\r\n    }\r\n\r\n    .fontib-about-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-about-wrapper-wide {\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 24px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .fontib-about-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    .fontib-about-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-about-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-about-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-about-hero-grid {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-hero-badge i {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .fontib-about-hero h1 {\r\n        font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n        font-weight: 800;\r\n        color: var(--fontib-about-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-about-hero h1 span {\r\n        background: var(--fontib-about-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-about-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-about-hero p {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-about-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-about-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-about-btn-primary {\r\n        background: var(--fontib-about-btn-gradient);\r\n        color: var(--fontib-about-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-about-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-about-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-about-white);\r\n    }\r\n\r\n    .fontib-about-btn-primary:hover::before {\r\n        transform: translateX(100%);\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-btn-outline:hover {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-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-about-hero-stats {\r\n        display: flex;\r\n        gap: 32px;\r\n    }\r\n\r\n    .fontib-about-hero-stat {\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-about-hero-stat-number {\r\n        font-size: 1.8rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-about-primary);\r\n        line-height: 1;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-about-hero-stat-label {\r\n        font-size: 12px;\r\n        color: var(--fontib-about-text-muted);\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    \/* \u2500\u2500 Builder Mockup \u2500\u2500 *\/\r\n    .fontib-about-builder-mockup {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-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-about-builder-window:hover {\r\n        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-dots {\r\n        display: flex;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-about-builder-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-about-builder-dot-red { background: #ff5f57; }\r\n    .fontib-about-builder-dot-yellow { background: #ffbd2e; }\r\n    .fontib-about-builder-dot-green { background: #28c840; }\r\n\r\n    .fontib-about-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-about-text-muted);\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-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-about-builder-tool-btn:hover,\r\n    .fontib-about-builder-tool-btn.active {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-input-area {\r\n        padding: 24px 20px;\r\n        background: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .fontib-about-builder-input-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-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-about-builder-text-input {\r\n        width: 100%;\r\n        padding: 14px 18px!important;\r\n        background: var(--fontib-about-white)!important;\r\n        border: 2px solid rgba(0, 62, 164, 0.08) !important;\r\n        border-radius: 12px!important;\r\n        font-size: 16px!important;\r\n        color: var(--fontib-about-text-dark)!important;\r\n        font-family: var(--fontib-about-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-about-builder-text-input:focus {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 0 0 4px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-preview-label {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-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-about-builder-preview-text {\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-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-about-builder-style-chips {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-about-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-about-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-about-builder-chip:hover,\r\n    .fontib-about-builder-chip.active {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-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-about-builder-copy-btn {\r\n        padding: 8px 20px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        color: var(--fontib-about-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-about-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-about-builder-char-count {\r\n        font-size: 12px;\r\n        color: var(--fontib-about-text-muted);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-float 3s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-builder-floating-badge i {\r\n        font-size: 18px;\r\n    }\r\n\r\n    @keyframes fontib-about-float {\r\n        0%, 100% { transform: translateY(0); }\r\n        50% { transform: translateY(-10px); }\r\n    }\r\n\r\n    \/* \u2500\u2500 Dashboard Mockup \u2500\u2500 *\/\r\n    .fontib-about-dashboard-mockup {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-dashboard-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-about-dashboard-window:hover {\r\n        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-about-dashboard-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\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    }\r\n\r\n    .fontib-about-dashboard-logo {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-dashboard-logo i {\r\n        font-size: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-user {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .fontib-about-dashboard-avatar {\r\n        width: 32px;\r\n        height: 32px;\r\n        border-radius: 50%;\r\n        background: var(--fontib-about-btn-gradient);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #fff;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n    }\r\n\r\n    .fontib-about-dashboard-username {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-dashboard-body {\r\n        display: flex;\r\n        min-height: 380px;\r\n    }\r\n\r\n    .fontib-about-dashboard-sidebar {\r\n        width: 60px;\r\n        background: rgba(248, 249, 252, 0.8);\r\n        border-right: 1px solid rgba(0, 62, 164, 0.06);\r\n        padding: 16px 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 4px;\r\n    }\r\n\r\n    .fontib-about-dashboard-nav-item {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 18px;\r\n        color: var(--fontib-about-text-muted);\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-about-dashboard-nav-item:hover,\r\n    .fontib-about-dashboard-nav-item.active {\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-dashboard-main {\r\n        flex: 1;\r\n        padding: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-welcome {\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-about-dashboard-subtitle {\r\n        font-size: 12px;\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-stats {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 12px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .fontib-about-dashboard-stat-card {\r\n        background: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid rgba(0, 62, 164, 0.06);\r\n        border-radius: 12px;\r\n        padding: 14px;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-about-dashboard-stat-value {\r\n        font-size: 20px;\r\n        font-weight: 800;\r\n        color: var(--fontib-about-primary);\r\n        line-height: 1;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .fontib-about-dashboard-stat-label {\r\n        font-size: 10px;\r\n        color: var(--fontib-about-text-muted);\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-about-dashboard-recent {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 12px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 8px;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        padding: 10px 12px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border-radius: 10px;\r\n        border: 1px solid rgba(0, 62, 164, 0.04);\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-item:hover {\r\n        background: rgba(255, 255, 255, 0.9);\r\n        border-color: rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-about-dashboard-project-icon {\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 8px;\r\n        background: rgba(0, 62, 164, 0.08);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 16px;\r\n        color: var(--fontib-about-primary);\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-info {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-name {\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--fontib-about-text-dark);\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n\r\n    .fontib-about-dashboard-project-date {\r\n        font-size: 10px;\r\n        color: var(--fontib-about-text-muted);\r\n    }\r\n\r\n    .fontib-about-dashboard-project-badge {\r\n        font-size: 9px;\r\n        font-weight: 700;\r\n        padding: 4px 8px;\r\n        border-radius: 50px;\r\n        background: rgba(25, 135, 84, 0.1);\r\n        color: #198754;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .fontib-about-dashboard-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-about-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-about-float 3s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-about-dashboard-floating-badge.badge-top {\r\n        top: -20px;\r\n        right: -30px;\r\n        animation-delay: 0s;\r\n    }\r\n\r\n    .fontib-about-dashboard-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-about-dashboard-floating-badge i {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .fontib-about-section-title {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 20px;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-about-section-subtitle {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 60px;\r\n        text-align: center;\r\n        max-width: 700px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    \/* Mission Section *\/\r\n    .fontib-about-mission {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-mission-text h2 {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-about-text-dark);\r\n        margin-bottom: 20px;\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-about-mission-text p {\r\n        font-size: 1.1rem;\r\n        color: var(--fontib-about-text-muted);\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .fontib-about-mission-visual {\r\n        background: var(--fontib-about-light-gray);\r\n        border-radius: 20px;\r\n        min-height: 350px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: 1px solid var(--fontib-about-border);\r\n    }\r\n\r\n    .fontib-about-mission-visual i {\r\n        font-size: 8rem;\r\n        color: var(--fontib-about-primary);\r\n        opacity: 0.15;\r\n    }\r\n\r\n    \/* How It Works Section *\/\r\n    .fontib-about-how-it-works {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-light-gray);\r\n    }\r\n\r\n    .fontib-about-step-card {\r\n        text-align: center;\r\n        position: relative;\r\n        padding: 40px 30px;\r\n        background: var(--fontib-about-white);\r\n        border-radius: 20px;\r\n        border: 1px solid var(--fontib-about-border);\r\n        transition: all 0.4s ease;\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-about-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-about-primary);\r\n    }\r\n\r\n    .fontib-about-step-icon {\r\n        width: 90px;\r\n        height: 90px;\r\n        margin: 0 auto 25px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-about-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-about-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-about-white);\r\n        border: 2px solid var(--fontib-about-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-about-primary);\r\n    }\r\n\r\n    .fontib-about-step-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.25rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-step-card p {\r\n        color: var(--fontib-about-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    \/* Features Section *\/\r\n    .fontib-about-features {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-feature-card {\r\n        background: var(--fontib-about-light-gray);\r\n        padding: 40px 30px;\r\n        border-radius: 20px;\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-about-feature-card:hover {\r\n        background: var(--fontib-about-white);\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 15px 40px rgba(0, 62, 164, 0.1);\r\n        transform: translateY(-5px);\r\n    }\r\n\r\n    .fontib-about-feature-icon {\r\n        width: 80px;\r\n        height: 80px;\r\n        margin: 0 auto 20px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-about-white);\r\n        font-size: 32px;\r\n        box-shadow: 0 8px 25px rgba(0, 62, 164, 0.2);\r\n    }\r\n\r\n    .fontib-about-feature-card h5 {\r\n        font-weight: 700;\r\n        font-size: 1.2rem;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-feature-card p {\r\n        color: var(--fontib-about-text-muted);\r\n        font-size: 0.95rem;\r\n        margin: 0;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* Why Choose Section *\/\r\n    .fontib-about-why-choose {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-hero-bg);\r\n    }\r\n\r\n    .fontib-about-why-item {\r\n        margin-bottom: 30px;\r\n        display: flex;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .fontib-about-why-icon {\r\n        min-width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-about-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-about-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-about-why-text h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-why-text p {\r\n        color: var(--fontib-about-text-muted);\r\n        margin: 0;\r\n        font-size: 0.95rem;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .fontib-about-comparison-visual {\r\n        background: var(--fontib-about-white);\r\n        border-radius: 20px;\r\n        min-height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 20px 40px rgba(0, 62, 164, 0.08);\r\n        border: 1px solid var(--fontib-about-border);\r\n    }\r\n\r\n    .fontib-about-comparison-visual i {\r\n        font-size: 6rem;\r\n        color: var(--fontib-about-primary);\r\n        opacity: 0.12;\r\n    }\r\n\r\n    \/* Testimonials Section *\/\r\n    .fontib-about-testimonials {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-white);\r\n    }\r\n\r\n    .fontib-about-testimonial-card {\r\n        background: var(--fontib-about-light-gray);\r\n        padding: 35px;\r\n        border-radius: 20px;\r\n        height: 100%;\r\n        border: 1px solid var(--fontib-about-border);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-about-testimonial-card:hover {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 15px 40px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-about-testimonial-text {\r\n        font-style: italic;\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 25px;\r\n        font-size: 1.05rem;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .fontib-about-testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .fontib-about-author-avatar {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--fontib-about-white);\r\n        font-weight: 700;\r\n        font-size: 20px;\r\n        margin-right: 15px;\r\n    }\r\n\r\n    .fontib-about-author-info h6 {\r\n        font-weight: 700;\r\n        margin-bottom: 2px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-author-info span {\r\n        color: var(--fontib-about-text-muted);\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    \/* Team Section *\/\r\n    .fontib-about-team {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-light-gray);\r\n    }\r\n\r\n    .fontib-about-team-card {\r\n        background: var(--fontib-about-white);\r\n        padding: 30px;\r\n        border-radius: 20px;\r\n        text-align: center;\r\n        transition: all 0.3s ease;\r\n        border: 1px solid var(--fontib-about-border);\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-about-team-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 40px rgba(0, 62, 164, 0.1);\r\n        border-color: var(--fontib-about-primary);\r\n    }\r\n\r\n    .fontib-about-team-photo {\r\n        width: 100px;\r\n        height: 100px;\r\n        background: var(--fontib-about-light-gray);\r\n        border-radius: 50%;\r\n        margin: 0 auto 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 40px;\r\n        color: var(--fontib-about-primary);\r\n        border: 3px solid var(--fontib-about-primary);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-about-team-card:hover .fontib-about-team-photo {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .fontib-about-team-card h5 {\r\n        font-weight: 700;\r\n        margin-bottom: 5px;\r\n        color: var(--fontib-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-team-card .role {\r\n        color: var(--fontib-about-primary);\r\n        font-weight: 600;\r\n        font-size: 0.9rem;\r\n        margin-bottom: 12px;\r\n        display: block;\r\n    }\r\n\r\n    .fontib-about-team-card p {\r\n        color: var(--fontib-about-text-muted);\r\n        font-size: 0.9rem;\r\n        margin: 0;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* FAQ Section *\/\r\n    .fontib-about-faq {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-light-gray);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-about-faq::before {\r\n        content: '?';\r\n        position: absolute;\r\n        top: -80px;\r\n        right: -60px;\r\n        font-size: 30rem;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.03);\r\n        line-height: 1;\r\n        z-index: 0;\r\n        user-select: none;\r\n    }\r\n\r\n    .fontib-about-faq::after {\r\n        content: '?';\r\n        position: absolute;\r\n        bottom: -100px;\r\n        left: -40px;\r\n        font-size: 20rem;\r\n        font-weight: 700;\r\n        color: rgba(0, 62, 164, 0.03);\r\n        line-height: 1;\r\n        z-index: 0;\r\n        user-select: none;\r\n        transform: rotate(15deg);\r\n    }\r\n\r\n    .fontib-about-faq-card {\r\n        background: rgba(255, 255, 255, 0.85);\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        border-radius: 24px;\r\n        padding: 50px;\r\n        box-shadow: 0 20px 60px rgba(0, 62, 164, 0.08);\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-about-accordion-item {\r\n        background: var(--fontib-about-white);\r\n        border: 1px solid var(--fontib-about-border);\r\n        border-radius: 16px !important;\r\n        margin-bottom: 16px;\r\n        overflow: hidden;\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-about-accordion-item:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .fontib-about-accordion-item::before {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n        width: 4px;\r\n        background: var(--fontib-about-btn-gradient);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        border-radius: 0 4px 4px 0;\r\n    }\r\n\r\n    .fontib-about-accordion-item:hover {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-about-accordion-item.active {\r\n        border-color: var(--fontib-about-primary);\r\n        box-shadow: 0 12px 45px rgba(0, 62, 164, 0.15);\r\n        background: linear-gradient(135deg, var(--fontib-about-white) 0%, rgba(0, 62, 164, 0.02) 100%);\r\n    }\r\n\r\n    .fontib-about-accordion-item.active::before {\r\n        opacity: 1;\r\n    }\r\n\r\n    .fontib-about-accordion-button {\r\n        font-weight: 600;\r\n        color: var(--fontib-about-text-dark) !important;\r\n        box-shadow: none !important;\r\n        background: transparent !important;\r\n        padding: 24px 30px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        width: 100%;\r\n        border: none !important;\r\n        text-align: left;\r\n        font-size: 1.1rem;\r\n        gap: 16px;\r\n        transition: all 0.3s ease;\r\n        text-decoration: none !important;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-accordion-button::after {\r\n        content: '+';\r\n        font-family: inherit;\r\n        font-size: 1.6rem;\r\n        font-weight: 300;\r\n        color: var(--fontib-about-primary);\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        flex-shrink: 0;\r\n        line-height: 1;\r\n        display: inline-block;\r\n        width: 36px;\r\n        height: 36px;\r\n        background: var(--fontib-about-light-gray);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-about-accordion-button:not(.collapsed)::after {\r\n        content: '\u2212';\r\n        background: var(--fontib-about-primary);\r\n        color: var(--fontib-about-white);\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    .fontib-about-accordion-button .question-text {\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n    }\r\n\r\n    .fontib-about-accordion-body {\r\n        padding: 0 30px 24px 30px;\r\n        color: var(--fontib-about-text-muted);\r\n        line-height: 1.8;\r\n        font-size: 0.95rem;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-faq-footer {\r\n        text-align: center;\r\n        margin-top: 40px;\r\n        padding: 30px 0 0;\r\n        border-top: 1px solid var(--fontib-about-border);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-about-faq-footer p {\r\n        color: var(--fontib-about-text-muted);\r\n        margin-bottom: 0;\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .fontib-about-faq-footer a {\r\n        color: var(--fontib-about-primary);\r\n        font-weight: 600;\r\n        text-decoration: none;\r\n        transition: all 0.3s ease;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .fontib-about-faq-footer a:hover {\r\n        color: var(--fontib-about-secondary);\r\n        gap: 10px;\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-about-faq-card {\r\n            padding: 24px;\r\n        }\r\n\r\n        .fontib-about-accordion-button {\r\n            padding: 20px;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .fontib-about-accordion-button::after {\r\n            width: 30px;\r\n            height: 30px;\r\n            font-size: 1.3rem;\r\n        }\r\n\r\n        .fontib-about-accordion-body {\r\n            padding: 0 20px 20px;\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .fontib-about-faq::before,\r\n        .fontib-about-faq::after {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    \/* Final CTA Section *\/\r\n    .fontib-about-final-cta {\r\n        padding: 100px 0;\r\n        background: var(--fontib-about-hero-bg);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-about-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-about-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-about-text-dark);\r\n    }\r\n\r\n    .fontib-about-final-cta-card p {\r\n        font-size: 1.15rem;\r\n        color: var(--fontib-about-text-muted);\r\n        max-width: 600px;\r\n        margin: 0 auto 40px;\r\n    }\r\n\r\n    .fontib-about-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-about-hero {\r\n            padding: 80px 0 60px;\r\n            min-height: auto;\r\n        }\r\n\r\n        .fontib-about-hero h1 {\r\n            font-size: 2.2rem;\r\n        }\r\n\r\n        .fontib-about-hero p {\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .fontib-about-hero-buttons {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-about-hero-stats {\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-about-final-cta-card {\r\n            padding: 50px 30px;\r\n        }\r\n\r\n        .fontib-about-final-cta-card h2 {\r\n            font-size: 2.2rem;\r\n        }\r\n\r\n        .fontib-about-section-title {\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .fontib-about-mission-text h2 {\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n\r\n        .fontib-about-wrapper,\r\n        .fontib-about-wrapper-wide,\r\n        .fontib-about-wrapper-narrow {\r\n            padding: 0 16px;\r\n        }\r\n\r\n        .fontib-about-hero h1 {\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .fontib-about-hero {\r\n            padding: 80px 0 60px;\r\n        }\r\n\r\n        .fontib-about-section-title {\r\n            font-size: 1.8rem;\r\n        }\r\n\r\n        .fontib-about-final-cta-card h2 {\r\n            font-size: 1.8rem;\r\n        }\r\n\r\n        .fontib-about-dashboard-window {\r\n            transform: none;\r\n        }\r\n\r\n        .fontib-about-dashboard-floating-badge {\r\n            display: none;\r\n        }\r\n\r\n        .fontib-about-dashboard-stats {\r\n            grid-template-columns: repeat(3, 1fr);\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- 1. Hero Section -->\r\n<section class=\"fontib-about-hero\">\r\n    <div class=\"fontib-about-wrapper fontib-about-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-about-hero-badge\">\r\n                    <i class='bx bx-info-circle'><\/i> About Fontib\r\n                <\/span>\r\n                <h1> Ultimate Your Font Design From Our Builder<\/h1>\r\n                <p>Design, customize, and create stunning fonts with our intuitive SaaS platform. Built for creators, brands, and digital projects.<\/p>\r\n                <div class=\"fontib-about-hero-buttons\">\r\n                    <a href=\"\/contact\" class=\"fontib-about-btn-primary\">\r\n                        Get Started <i class='bx bx-right-arrow-alt'><\/i>\r\n                    <\/a>\r\n                    <a href=\"\/features\" class=\"fontib-about-btn-outline\">\r\n                        <i class='bx bx-grid-alt'><\/i> Explore Features\r\n                    <\/a>\r\n                <\/div>\r\n                <div class=\"fontib-about-hero-stats\">\r\n                    <div class=\"fontib-about-hero-stat\">\r\n                        <div class=\"fontib-about-hero-stat-number\">500+<\/div>\r\n                        <div class=\"fontib-about-hero-stat-label\">Font Styles<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-hero-stat\">\r\n                        <div class=\"fontib-about-hero-stat-number\">50K+<\/div>\r\n                        <div class=\"fontib-about-hero-stat-label\">Active Users<\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-hero-stat\">\r\n                        <div class=\"fontib-about-hero-stat-number\">10M+<\/div>\r\n                        <div class=\"fontib-about-hero-stat-label\">Fonts Generated<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6 fontib-about-builder-mockup mt-5 mt-lg-0\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-about-builder-window\">\r\n                    <div class=\"fontib-about-builder-titlebar\">\r\n                        <div class=\"fontib-about-builder-dots\">\r\n                            <span class=\"fontib-about-builder-dot fontib-about-builder-dot-red\"><\/span>\r\n                            <span class=\"fontib-about-builder-dot fontib-about-builder-dot-yellow\"><\/span>\r\n                            <span class=\"fontib-about-builder-dot fontib-about-builder-dot-green\"><\/span>\r\n                        <\/div>\r\n                        <span class=\"fontib-about-builder-titlebar-text\">Fontib Builder<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-toolbar\">\r\n                        <div class=\"fontib-about-builder-tool-btn active\" title=\"Bold\"><i class='bx bx-bold'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Italic\"><i class='bx bx-italic'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Underline\"><i class='bx bx-underline'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Align Left\"><i class='bx bx-align-left'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Align Center\"><i class='bx bx-align-middle'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Align Right\"><i class='bx bx-align-right'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-separator\"><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Copy\"><i class='bx bx-copy'><\/i><\/div>\r\n                        <div class=\"fontib-about-builder-tool-btn\" title=\"Download\"><i class='bx bx-download'><\/i><\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-input-area\">\r\n                        <div class=\"fontib-about-builder-input-label\">Type your text<\/div>\r\n                        <input type=\"text\" class=\"fontib-about-builder-text-input\" id=\"fontibAboutBuilderInput\" placeholder=\"Hello World...\" value=\"Hello World!\">\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-preview-area\">\r\n                        <div class=\"fontib-about-builder-preview-label\">Preview<\/div>\r\n                        <div class=\"fontib-about-builder-preview-text\" id=\"fontibAboutBuilderPreview\">\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-about-builder-style-chips\">\r\n                            <span class=\"fontib-about-builder-chip active\" data-style=\"bold\">Bold<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"italic\">Italic<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"script\">Script<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"serif\">Serif<\/span>\r\n                            <span class=\"fontib-about-builder-chip\" data-style=\"mono\">Mono<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-builder-footer\">\r\n                        <span class=\"fontib-about-builder-char-count\">12 characters<\/span>\r\n                        <button class=\"fontib-about-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-about-builder-floating-badge badge-top\">\r\n                    <i class='bx bx-check-circle'><\/i> Copy Ready\r\n                <\/div>\r\n                <div class=\"fontib-about-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\r\n<!-- 2. Our Mission -->\r\n<section class=\"fontib-about-mission\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <div class=\"row align-items-center g-5\">\r\n            <div class=\"col-lg-6\" data-aos=\"fade-right\">\r\n                <div class=\"fontib-about-mission-text\">\r\n                    <h2>Our Mission at Fontib<\/h2>\r\n                    <p>Fontib's goal is to empower designers, marketers, and creators to bring their text to life. With\r\n                        our font builder, anyone can craft unique, professional fonts in minutes\u2014no technical expertise\r\n                        required.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6 fontib-about-dashboard-mockup\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-about-dashboard-window\">\r\n                    <div class=\"fontib-about-dashboard-header\">\r\n                        <div class=\"fontib-about-dashboard-logo\">\r\n                            <i class='bx bx-font'><\/i> Fontib\r\n                        <\/div>\r\n                        <div class=\"fontib-about-dashboard-user\">\r\n                            <span class=\"fontib-about-dashboard-username\">John Doe<\/span>\r\n                            <div class=\"fontib-about-dashboard-avatar\">J<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-about-dashboard-body\">\r\n                        <div class=\"fontib-about-dashboard-sidebar\">\r\n                            <div class=\"fontib-about-dashboard-nav-item active\" title=\"Dashboard\"><i class='bx bx-grid-alt'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Projects\"><i class='bx bx-folder'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Builder\"><i class='bx bx-edit'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Exports\"><i class='bx bx-download'><\/i><\/div>\r\n                            <div class=\"fontib-about-dashboard-nav-item\" title=\"Settings\"><i class='bx bx-cog'><\/i><\/div>\r\n                        <\/div>\r\n                        <div class=\"fontib-about-dashboard-main\">\r\n                            <div class=\"fontib-about-dashboard-welcome\">Welcome back, John! \ud83d\udc4b<\/div>\r\n                            <div class=\"fontib-about-dashboard-subtitle\">Here's what's happening with your fonts today.<\/div>\r\n                            <div class=\"fontib-about-dashboard-stats\">\r\n                                <div class=\"fontib-about-dashboard-stat-card\">\r\n                                    <div class=\"fontib-about-dashboard-stat-value\">24<\/div>\r\n                                    <div class=\"fontib-about-dashboard-stat-label\">Projects<\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-stat-card\">\r\n                                    <div class=\"fontib-about-dashboard-stat-value\">156<\/div>\r\n                                    <div class=\"fontib-about-dashboard-stat-label\">Exports<\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-stat-card\">\r\n                                    <div class=\"fontib-about-dashboard-stat-value\">12<\/div>\r\n                                    <div class=\"fontib-about-dashboard-stat-label\">Fonts<\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-about-dashboard-recent\">Recent Projects<\/div>\r\n                            <div class=\"fontib-about-dashboard-project-list\">\r\n                                <div class=\"fontib-about-dashboard-project-item\">\r\n                                    <div class=\"fontib-about-dashboard-project-icon\"><i class='bx bx-font'><\/i><\/div>\r\n                                    <div class=\"fontib-about-dashboard-project-info\">\r\n                                        <div class=\"fontib-about-dashboard-project-name\">Modern Sans Serif<\/div>\r\n                                        <div class=\"fontib-about-dashboard-project-date\">Edited 2 hours ago<\/div>\r\n                                    <\/div>\r\n                                    <span class=\"fontib-about-dashboard-project-badge\">Active<\/span>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-project-item\">\r\n                                    <div class=\"fontib-about-dashboard-project-icon\"><i class='bx bx-paint'><\/i><\/div>\r\n                                    <div class=\"fontib-about-dashboard-project-info\">\r\n                                        <div class=\"fontib-about-dashboard-project-name\">Cursive Script Pro<\/div>\r\n                                        <div class=\"fontib-about-dashboard-project-date\">Edited yesterday<\/div>\r\n                                    <\/div>\r\n                                    <span class=\"fontib-about-dashboard-project-badge\">Active<\/span>\r\n                                <\/div>\r\n                                <div class=\"fontib-about-dashboard-project-item\">\r\n                                    <div class=\"fontib-about-dashboard-project-icon\"><i class='bx bx-bold'><\/i><\/div>\r\n                                    <div class=\"fontib-about-dashboard-project-info\">\r\n                                        <div class=\"fontib-about-dashboard-project-name\">Bold Display Font<\/div>\r\n                                        <div class=\"fontib-about-dashboard-project-date\">Edited 3 days ago<\/div>\r\n                                    <\/div>\r\n                                    <span class=\"fontib-about-dashboard-project-badge\">Active<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-dashboard-floating-badge badge-top\">\r\n                    <i class='bx bx-check-circle'><\/i> Cloud Synced\r\n                <\/div>\r\n                <div class=\"fontib-about-dashboard-floating-badge badge-bottom\">\r\n                    <i class='bx bx-folder'><\/i> 24 Projects\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. How Fontib Works -->\r\n<section class=\"fontib-about-how-it-works\">\r\n    <div class=\"fontib-about-wrapper\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">Steps of Fontib <\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Create professional fonts in three simple steps<\/p>\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-about-step-card\">\r\n                    <div class=\"fontib-about-step-icon\">\r\n                        <i class='bx bx-select-multiple'><\/i>\r\n                        <span class=\"fontib-about-step-badge\">1<\/span>\r\n                    <\/div>\r\n                    <h5>Choose Your Style<\/h5>\r\n                    <p>Pick from hundreds of templates and font types.<\/p>\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-about-step-card\">\r\n                    <div class=\"fontib-about-step-icon\">\r\n                        <i class='bx bx-slider'><\/i>\r\n                        <span class=\"fontib-about-step-badge\">2<\/span>\r\n                    <\/div>\r\n                    <h5>Customize Instantly<\/h5>\r\n                    <p>Adjust weights, curves, and special effects in real-time.<\/p>\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-about-step-card\">\r\n                    <div class=\"fontib-about-step-icon\">\r\n                        <i class='bx bx-export'><\/i>\r\n                        <span class=\"fontib-about-step-badge\">3<\/span>\r\n                    <\/div>\r\n                    <h5>Export & Share<\/h5>\r\n                    <p>Download your font or use it directly in your projects.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 4. Key Features -->\r\n<section class=\"fontib-about-features\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">Features<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Everything you need to create professional fonts<\/p>\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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-show'><\/i><\/div>\r\n                    <h5>Real-Time Preview<\/h5>\r\n                    <p>See your font changes instantly as you customize.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-globe'><\/i><\/div>\r\n                    <h5>Multi-Language Support<\/h5>\r\n                    <p>Create fonts in multiple languages and scripts.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-cloud'><\/i><\/div>\r\n                    <h5>Cloud Storage for Fonts<\/h5>\r\n                    <p>Save and access your fonts from anywhere.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-move'><\/i><\/div>\r\n                    <h5>Drag-and-Drop Editor<\/h5>\r\n                    <p>Easy to use interface for quick adjustments.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-text'><\/i><\/div>\r\n                    <h5>Advanced Typography Tools<\/h5>\r\n                    <p>Fine-tune every detail of your typography.<\/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-about-feature-card\">\r\n                    <div class=\"fontib-about-feature-icon\"><i class='bx bx-share-alt'><\/i><\/div>\r\n                    <h5>Collaboration & Sharing<\/h5>\r\n                    <p>Work together and share fonts seamlessly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 5. Why Choose Fontib -->\r\n<section class=\"fontib-about-why-choose\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <div class=\"row align-items-center g-5\">\r\n            <div class=\"col-lg-6\" data-aos=\"fade-right\">\r\n                <h2 class=\"fontib-about-section-title\" style=\"text-align: left; margin-bottom: 40px;\">Why Fontib is the\r\n                    Preferred Font Builder<\/h2>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Intuitive SaaS Interface<\/h5>\r\n                        <p>Designed for designers and non-designers alike.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Professional Results<\/h5>\r\n                        <p>Get professional fonts without complex software.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Secure Cloud Platform<\/h5>\r\n                        <p>Store and manage your fonts safely in the cloud.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-why-item\">\r\n                    <div class=\"fontib-about-why-icon\"><i class='bx bx-check'><\/i><\/div>\r\n                    <div class=\"fontib-about-why-text\">\r\n                        <h5>Optimized for Speed<\/h5>\r\n                        <p>Real-time adjustments with lightning-fast performance.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-lg-6\" data-aos=\"fade-left\">\r\n                <div class=\"fontib-about-comparison-visual\">\r\n                    <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/Why-Fontib-is-the-Preferred-Font-Builder.webp\"\r\n                        alt=\"Why Fontib is the Preferred Font Builder\"\r\n                        style=\"width: 100%; height: auto; border-radius: 20px;\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 6. Testimonials -->\r\n<section class=\"fontib-about-testimonials\">\r\n    <div class=\"fontib-about-wrapper\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">What Our Users Say<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Trusted by thousands of creators worldwide<\/p>\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-about-testimonial-card\">\r\n                    <p class=\"fontib-about-testimonial-text\">\"Fontib has completely transformed how I create fonts for\r\n                        my clients. The interface is so intuitive!\"<\/p>\r\n                    <div class=\"fontib-about-testimonial-author\">\r\n                        <div class=\"fontib-about-author-avatar\">S<\/div>\r\n                        <div class=\"fontib-about-author-info\">\r\n                            <h6>Sarah J.<\/h6>\r\n                            <span>Graphic Designer<\/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-about-testimonial-card\">\r\n                    <p class=\"fontib-about-testimonial-text\">\"I love how quickly I can create custom fonts and export\r\n                        them. It's a game-changer for my workflow.\"<\/p>\r\n                    <div class=\"fontib-about-testimonial-author\">\r\n                        <div class=\"fontib-about-author-avatar\">M<\/div>\r\n                        <div class=\"fontib-about-author-info\">\r\n                            <h6>Mike R.<\/h6>\r\n                            <span>Marketing Director<\/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-about-testimonial-card\">\r\n                    <p class=\"fontib-about-testimonial-text\">\"The cloud storage feature is amazing. I can access my\r\n                        fonts from any device, anywhere.\"<\/p>\r\n                    <div class=\"fontib-about-testimonial-author\">\r\n                        <div class=\"fontib-about-author-avatar\">A<\/div>\r\n                        <div class=\"fontib-about-author-info\">\r\n                            <h6>Alex T.<\/h6>\r\n                            <span>Content Creator<\/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<!-- 7. Meet the Team -->\r\n<section class=\"fontib-about-team\">\r\n    <div class=\"fontib-about-wrapper-wide\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">The Minds Behind Fontib<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Meet the passionate team building the future of\r\n            typography<\/p>\r\n        <div class=\"row g-4\">\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>George D. Miller<\/h5>\r\n                    <span class=\"role\">CEO & Founder<\/span>\r\n                    <p>Visionary leader with 10+ years in typography and design technology.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>Fred M. Harrah<\/h5>\r\n                    <span class=\"role\">Lead Designer<\/span>\r\n                    <p>Expert in font design and user experience with a passion for creativity.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>John H. Richardson<\/h5>\r\n                    <span class=\"role\">CTO<\/span>\r\n                    <p>Full-stack engineer specializing in SaaS platforms and cloud architecture.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6 col-lg-3\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                <div class=\"fontib-about-team-card\">\r\n                    <div class=\"fontib-about-team-photo\"><i class='bx bx-user'><\/i><\/div>\r\n                    <h5>Joseph N. Tucker<\/h5>\r\n                    <span class=\"role\">Product Manager<\/span>\r\n                    <p>Strategic thinker driving product innovation and user growth.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 8. FAQ Section -->\r\n<section class=\"fontib-about-faq\">\r\n    <div class=\"fontib-about-wrapper-narrow\">\r\n        <h2 class=\"fontib-about-section-title\" data-aos=\"fade-up\">Frequently Asked Questions<\/h2>\r\n        <p class=\"fontib-about-section-subtitle\" data-aos=\"fade-up\">Find answers to common questions about Fontib<\/p>\r\n        <div class=\"fontib-about-faq-card\" data-aos=\"fade-up\">\r\n            <div class=\"accordion\" id=\"fontibAboutFaqAccordion\">\r\n                <div class=\"fontib-about-accordion-item active\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqOne\">\r\n                            <div class=\"question-text\">\r\n                                How does the Fontib builder work?\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-about-accordion-body\">\r\n                            Fontib uses an intuitive drag-and-drop interface that lets you customize fonts in real-time.\r\n                            Simply choose a template, adjust the parameters, and export your creation.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-accordion-item\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqTwo\">\r\n                            <div class=\"question-text\">\r\n                                Can I export fonts for commercial use?\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-about-accordion-body\">\r\n                            Yes! All fonts created with Fontib can be exported and used for both personal and commercial\r\n                            projects, depending on your subscription plan.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-accordion-item\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqThree\">\r\n                            <div class=\"question-text\">\r\n                                Are my designs saved in the cloud?\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-about-accordion-body\">\r\n                            Absolutely. All your font designs are automatically saved to your secure cloud account, so\r\n                            you can access them from any device at any time.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-about-accordion-item\">\r\n                    <h2 class=\"accordion-header\">\r\n                        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#faqFour\">\r\n                            <div class=\"question-text\">\r\n                                What types of fonts can I create?\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-about-accordion-body\">\r\n                            You can create a wide variety of fonts including serif, sans-serif, script, display,\r\n                            monospace, and decorative fonts. We're constantly adding new styles and templates.\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"fontib-about-faq-footer\">\r\n                <p>Still have questions? <a href=\"#\">Contact our support team<\/a><\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 9. Final CTA Section -->\r\n<section class=\"fontib-about-final-cta\">\r\n    <div class=\"fontib-about-floating-letters\" style=\"top: 10%; left: 5%; font-size: 15rem; transform: rotate(-15deg);\">\r\n        A<\/div>\r\n    <div class=\"fontib-about-floating-letters\"\r\n        style=\"bottom: 5%; right: 5%; font-size: 12rem; transform: rotate(10deg);\">B<\/div>\r\n    <div class=\"fontib-about-floating-letters\" style=\"top: 40%; right: 15%; font-size: 8rem; transform: rotate(20deg);\">\r\n        x<\/div>\r\n\r\n    <div class=\"fontib-about-wrapper\">\r\n        <div class=\"fontib-about-final-cta-card\" data-aos=\"zoom-in\">\r\n            <h2>Start Building Your Fonts Today<\/h2>\r\n            <p>Join thousands of creators using Fontib to bring text to life.<\/p>\r\n            <div class=\"d-flex flex-wrap justify-content-center gap-3\">\r\n                <a href=\"\/\" class=\"btn fontib-about-btn-primary btn-lg px-5\">Create Your First Font<\/a>\r\n                <a href=\"\/contact\" class=\"btn fontib-about-btn-outline btn-lg px-4\">Get Started<\/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        \/\/ FAQ Accordion Active State\r\n        const faqAccordion = document.getElementById('fontibAboutFaqAccordion');\r\n        if (faqAccordion) {\r\n            faqAccordion.addEventListener('shown.bs.collapse', function (e) {\r\n                const items = document.querySelectorAll('.fontib-about-accordion-item');\r\n                items.forEach(i => i.classList.remove('active'));\r\n                e.target.closest('.fontib-about-accordion-item').classList.add('active');\r\n            });\r\n\r\n            faqAccordion.addEventListener('hidden.bs.collapse', function (e) {\r\n                e.target.closest('.fontib-about-accordion-item').classList.remove('active');\r\n            });\r\n        }\r\n\r\n        \/\/ Builder Mockup - Live Preview\r\n        const builderInput = document.getElementById('fontibAboutBuilderInput');\r\n        const builderPreview = document.getElementById('fontibAboutBuilderPreview');\r\n        const builderChips = document.querySelectorAll('.fontib-about-builder-chip');\r\n        const builderCopyBtn = document.querySelector('.fontib-about-builder-copy-btn');\r\n        const charCount = document.querySelector('.fontib-about-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-about-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-about-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":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-3632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3632","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=3632"}],"version-history":[{"count":5,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3632\/revisions"}],"predecessor-version":[{"id":3707,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3632\/revisions\/3707"}],"wp:attachment":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/media?parent=3632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}