{"id":3661,"date":"2026-05-19T09:57:48","date_gmt":"2026-05-19T09:57:48","guid":{"rendered":"https:\/\/fontib.com\/?page_id=3661"},"modified":"2026-06-06T03:54:54","modified_gmt":"2026-06-06T03:54:54","slug":"features","status":"publish","type":"page","link":"https:\/\/fontib.com\/features\/","title":{"rendered":"Features"},"content":{"rendered":"\n[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<style>\r\n    :root {\r\n        --fontib-feature-primary: #003EA4;\r\n        --fontib-feature-secondary: #185cc9;\r\n        --fontib-feature-bg: #f0f4fa;\r\n        --fontib-feature-text: #1a1a2e;\r\n        --fontib-feature-text-muted: #5a6078;\r\n        --fontib-feature-glass-bg: rgba(255, 255, 255, 0.12);\r\n        --fontib-feature-glass-border: rgba(255, 255, 255, 0.25);\r\n        --fontib-feature-glass-shadow: rgba(0, 62, 164, 0.12);\r\n        --fontib-feature-card-bg: rgba(255, 255, 255, 0.18);\r\n        --fontib-feature-card-border: rgba(255, 255, 255, 0.35);\r\n        --fontib-feature-card-shadow: 0 20px 50px rgba(0, 62, 164, 0.15), 0 8px 20px rgba(0, 0, 0, 0.06);\r\n        --fontib-feature-badge-bg: rgba(255, 255, 255, 0.15);\r\n        --fontib-feature-badge-border: rgba(255, 255, 255, 0.3);\r\n        --fontib-feature-btn-gradient: linear-gradient(90deg, rgb(0, 62, 164), rgb(24, 92, 201));\r\n    }\r\n\r\n\r\n    .fontib-feature-wrapper {\r\n        font-family: 'Inter, sans-serif;\r\n        color: var(--fontib-feature-text);\r\n        overflow-x: hidden;\r\n    }\r\n\r\n    .fontib-feature-wrapper .mx-inner {\r\n        max-width: 1200px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        padding-left: 20px;\r\n        padding-right: 20px;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\r\n    .fontib-feature-hero {\r\n        position: relative;\r\n        min-height: 100vh;\r\n        display: flex;\r\n        align-items: center;\r\n        background: linear-gradient(135deg, #e8f0fe 0%, #d4e8ff 50%, #c5e0f8 100%);\r\n        overflow: hidden;\r\n        padding: 100px 0 80px;\r\n    }\r\n\r\n    .fontib-feature-hero::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50%;\r\n        right: -20%;\r\n        width: 800px;\r\n        height: 800px;\r\n        background: radial-gradient(circle, rgba(43, 122, 232, 0.15) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-feature-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -30%;\r\n        left: -15%;\r\n        width: 600px;\r\n        height: 600px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.1) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-feature-hero .hero-grid-bg {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image:\r\n            linear-gradient(rgba(0, 62, 164, 0.05) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(0, 62, 164, 0.05) 1px, transparent 1px);\r\n        background-size: 60px 60px;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-hero-content {\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .fontib-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(0, 62, 164, 0.08);\r\n        border: 1px solid rgba(0, 62, 164, 0.15);\r\n        border-radius: 50px;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        color: #003ea4;\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        margin-bottom: 28px;\r\n        box-shadow: 0 4px 15px rgba(0, 62, 164, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .fontib-hero-badge i {\r\n        font-size: 1rem;\r\n        color: #2b7ae8;\r\n    }\r\n\r\n    .fontib-hero-title {\r\n        font-size: clamp(2.5rem, 5.5vw, 4.2rem);\r\n        font-weight: 800;\r\n        color: #001a4d;\r\n        line-height: 1.1;\r\n        margin-bottom: 24px;\r\n        letter-spacing: -0.03em;\r\n    }\r\n\r\n    .fontib-hero-title span {\r\n        background: linear-gradient(135deg, #003ea4, #2b7ae8);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n    }\r\n\r\n    .fontib-hero-subtitle {\r\n        font-size: 1.15rem;\r\n        color: rgba(0, 26, 77, 0.7);\r\n        line-height: 1.7;\r\n        max-width: 520px;\r\n        margin-bottom: 40px;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .fontib-hero-actions {\r\n        display: flex;\r\n        gap: 16px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .fontib-btn-primary {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 16px 36px;\r\n        background: var(--fontib-feature-btn-gradient);\r\n        color: #fff;\r\n        border: none;\r\n        border-radius: 14px;\r\n        font-size: 1rem;\r\n        font-weight: 700;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-btn-primary::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: -100%;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);\r\n        transition: left 0.6s;\r\n    }\r\n\r\n    .fontib-btn-primary:hover::before {\r\n        left: 100%;\r\n    }\r\n\r\n    .fontib-btn-primary:hover {\r\n        transform: translateY(-3px) scale(1.03);\r\n        box-shadow: 0 14px 40px rgba(0, 62, 164, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2);\r\n        color: #fff;\r\n    }\r\n\r\n    .fontib-btn-outline {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 16px 36px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        color: #003ea4;\r\n        border: 1px solid rgba(0, 62, 164, 0.2);\r\n        border-radius: 14px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .fontib-btn-outline:hover {\r\n        background: rgba(255, 255, 255, 0.85);\r\n        transform: translateY(-3px);\r\n        color: #001a4d;\r\n    }\r\n\r\n    \/* Floating Letters *\/\r\n    .fontib-floating-letters {\r\n        position: absolute;\r\n        inset: 0;\r\n        pointer-events: none;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-floating-letter {\r\n        position: absolute;\r\n        font-weight: 800;\r\n        color: rgba(0, 62, 164, 0.06);\r\n        font-size: 8rem;\r\n        line-height: 1;\r\n        animation: fontibFloat 8s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(1) {\r\n        top: 8%;\r\n        right: 8%;\r\n        animation-delay: 0s;\r\n        font-size: 10rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(2) {\r\n        top: 30%;\r\n        right: 25%;\r\n        animation-delay: -2s;\r\n        font-size: 6rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(3) {\r\n        bottom: 15%;\r\n        right: 5%;\r\n        animation-delay: -4s;\r\n        font-size: 9rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(4) {\r\n        bottom: 35%;\r\n        right: 35%;\r\n        animation-delay: -1s;\r\n        font-size: 5rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(5) {\r\n        top: 60%;\r\n        right: 15%;\r\n        animation-delay: -3s;\r\n        font-size: 7rem;\r\n    }\r\n\r\n    @keyframes fontibFloat {\r\n\r\n        0%,\r\n        100% {\r\n            transform: translateY(0) rotate(0deg);\r\n        }\r\n\r\n        33% {\r\n            transform: translateY(-20px) rotate(3deg);\r\n        }\r\n\r\n        66% {\r\n            transform: translateY(10px) rotate(-2deg);\r\n        }\r\n    }\r\n\r\n    \/* Hero Mockup *\/\r\n    .fontib-hero-visual {\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .fontib-hero-mockup {\r\n        background: rgba(255, 255, 255, 0.5);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        border-radius: 24px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        padding: 30px;\r\n        box-shadow: 0 30px 80px rgba(0, 62, 164, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);\r\n        transform: perspective(1200px) rotateY(-5deg) rotateX(3deg);\r\n        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .fontib-hero-mockup:hover {\r\n        transform: perspective(1200px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-mockup-toolbar {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        margin-bottom: 24px;\r\n        padding-bottom: 16px;\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n    }\r\n\r\n    .fontib-mockup-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-mockup-dot.red {\r\n        background: #ff5f57;\r\n    }\r\n\r\n    .fontib-mockup-dot.yellow {\r\n        background: #febc2e;\r\n    }\r\n\r\n    .fontib-mockup-dot.green {\r\n        background: #28c840;\r\n    }\r\n\r\n    .fontib-mockup-toolbar-title {\r\n        margin-left: 12px;\r\n        color: rgba(255, 255, 255, 0.4);\r\n        font-size: 0.8rem;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .fontib-mockup-body {\r\n        display: flex;\r\n        gap: 20px;\r\n    }\r\n\r\n    .fontib-mockup-sidebar {\r\n        width: 60px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        padding: 10px 0;\r\n    }\r\n\r\n    .fontib-mockup-sidebar-item {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 10px;\r\n        background: rgba(255, 255, 255, 0.06);\r\n        border: 1px solid rgba(255, 255, 255, 0.08);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: rgba(255, 255, 255, 0.35);\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .fontib-mockup-sidebar-item.active {\r\n        background: rgba(0, 62, 164, 0.4);\r\n        border-color: rgba(96, 180, 255, 0.3);\r\n        color: #60b4ff;\r\n    }\r\n\r\n    .fontib-mockup-canvas {\r\n        flex: 1;\r\n        min-height: 260px;\r\n        border-radius: 16px;\r\n        background: rgba(0, 0, 0, 0.2);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-mockup-canvas-letter {\r\n        font-size: 8rem;\r\n        font-weight: 800;\r\n        color: rgba(255, 255, 255, 0.9);\r\n        line-height: 1;\r\n        text-shadow: 0 0 60px rgba(96, 180, 255, 0.3);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-mockup-canvas::before {\r\n        content: '';\r\n        position: absolute;\r\n        width: 200px;\r\n        height: 200px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.3), transparent 70%);\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-mockup-canvas-grid {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image:\r\n            linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\r\n        background-size: 30px 30px;\r\n    }\r\n\r\n    .fontib-mockup-controls {\r\n        width: 140px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 14px;\r\n    }\r\n\r\n    .fontib-mockup-control-group label {\r\n        display: block;\r\n        font-size: 0.65rem;\r\n        color: rgba(255, 255, 255, 0.3);\r\n        margin-bottom: 6px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.08em;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .fontib-mockup-slider {\r\n        width: 100%;\r\n        height: 4px;\r\n        border-radius: 4px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-mockup-slider-fill {\r\n        height: 100%;\r\n        border-radius: 4px;\r\n        background: linear-gradient(90deg, var(--fontib-feature-primary), var(--fontib-feature-secondary));\r\n        width: 65%;\r\n    }\r\n\r\n    .fontib-mockup-slider-fill.half {\r\n        width: 45%;\r\n    }\r\n\r\n    .fontib-mockup-slider-fill.long {\r\n        width: 80%;\r\n    }\r\n\r\n    .fontib-mockup-color-row {\r\n        display: flex;\r\n        gap: 6px;\r\n    }\r\n\r\n    .fontib-mockup-color-swatch {\r\n        width: 22px;\r\n        height: 22px;\r\n        border-radius: 6px;\r\n        border: 2px solid transparent;\r\n    }\r\n\r\n    .fontib-mockup-color-swatch.active {\r\n        border-color: #60b4ff;\r\n        box-shadow: 0 0 10px rgba(96, 180, 255, 0.4);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 SECTION COMMON \u2500\u2500\u2500 *\/\r\n    .fontib-feature-section {\r\n        padding: 100px 0;\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-section-label {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 7px 18px;\r\n        background: var(--fontib-feature-badge-bg);\r\n        border: 1px solid var(--fontib-feature-badge-border);\r\n        border-radius: 50px;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        font-size: 0.78rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-primary);\r\n        margin-bottom: 20px;\r\n        box-shadow: 0 4px 15px var(--fontib-feature-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.06em;\r\n    }\r\n\r\n    .fontib-section-label i {\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .fontib-section-title {\r\n        font-size: clamp(2rem, 4vw, 2.8rem);\r\n        font-weight: 800;\r\n        color: var(--fontib-feature-text);\r\n        line-height: 1.15;\r\n        margin-bottom: 16px;\r\n        letter-spacing: -0.02em;\r\n    }\r\n\r\n    .fontib-section-desc {\r\n        font-size: 1.05rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.7;\r\n        max-width: 560px;\r\n    }\r\n\r\n    .fontib-section-header-center {\r\n        text-align: center;\r\n        margin-bottom: 60px;\r\n    }\r\n\r\n    .fontib-section-header-center .fontib-section-desc {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 GLASS CARD \u2500\u2500\u2500 *\/\r\n    .fontib-glass-card {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 24px;\r\n        padding: 36px 30px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n        overflow: hidden;\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-glass-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-glass-card:hover {\r\n        transform: translateY(-8px) scale(1.02);\r\n        box-shadow: 0 30px 70px rgba(0, 62, 164, 0.2), 0 12px 30px rgba(0, 0, 0, 0.08);\r\n        border-color: rgba(0, 62, 164, 0.15);\r\n    }\r\n\r\n    .fontib-glass-card-icon {\r\n        width: 72px;\r\n        height: 72px;\r\n        border-radius: 20px;\r\n        background: linear-gradient(135deg, rgba(0, 62, 164, 0.1), rgba(24, 92, 201, 0.08));\r\n        border: 1px solid rgba(0, 62, 164, 0.12);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 24px;\r\n        font-size: 2rem;\r\n        color: var(--fontib-feature-primary);\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .fontib-glass-card:hover .fontib-glass-card-icon {\r\n        background: linear-gradient(135deg, var(--fontib-feature-primary), var(--fontib-feature-secondary));\r\n        color: #fff;\r\n        transform: scale(1.08) rotate(-3deg);\r\n        box-shadow: 0 12px 30px rgba(0, 62, 164, 0.3);\r\n    }\r\n\r\n    .fontib-glass-card h3 {\r\n        font-size: 1.25rem;\r\n        font-weight: 700;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-feature-text);\r\n    }\r\n\r\n    .fontib-glass-card p {\r\n        font-size: 0.92rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.65;\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 CORE FEATURES GRID \u2500\u2500\u2500 *\/\r\n    .fontib-core-features {\r\n        background: var(--fontib-feature-bg);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-core-features::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 400px;\r\n        background: linear-gradient(180deg, #fff 0%, var(--fontib-feature-bg) 100%);\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-core-features .row {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 ADVANCED FEATURES \u2500\u2500\u2500 *\/\r\n    .fontib-advanced-features {\r\n        background: #fff;\r\n    }\r\n\r\n    .fontib-advanced-block {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 60px;\r\n        margin-bottom: 100px;\r\n    }\r\n\r\n    .fontib-advanced-block:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .fontib-advanced-block.reverse {\r\n        flex-direction: row-reverse;\r\n    }\r\n\r\n    .fontib-advanced-visual {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .fontib-advanced-text {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .fontib-advanced-visual-inner {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 24px;\r\n        padding: 40px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-advanced-visual-inner::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-advanced-visual-inner .layer-demo {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 16px;\r\n    }\r\n\r\n    .fontib-layer-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 16px;\r\n        padding: 16px 20px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        border-radius: 14px;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-layer-item:hover {\r\n        transform: translateX(6px);\r\n        box-shadow: 0 8px 20px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-layer-item .layer-color {\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 10px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-layer-item .layer-info {\r\n        flex: 1;\r\n    }\r\n\r\n    .fontib-layer-item .layer-info strong {\r\n        display: block;\r\n        font-size: 0.9rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-text);\r\n    }\r\n\r\n    .fontib-layer-item .layer-info span {\r\n        font-size: 0.78rem;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle {\r\n        width: 44px;\r\n        height: 24px;\r\n        border-radius: 12px;\r\n        background: var(--fontib-feature-btn-gradient);\r\n        position: relative;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle::after {\r\n        content: '';\r\n        width: 18px;\r\n        height: 18px;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        position: absolute;\r\n        top: 3px;\r\n        right: 3px;\r\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle.off {\r\n        background: #d1d5db;\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle.off::after {\r\n        right: auto;\r\n        left: 3px;\r\n    }\r\n\r\n    \/* Smart Presets Visual *\/\r\n    .fontib-presets-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 12px;\r\n    }\r\n\r\n    .fontib-preset-item {\r\n        padding: 20px 14px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        border-radius: 14px;\r\n        text-align: center;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.3s ease;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .fontib-preset-item:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 8px 20px rgba(0, 62, 164, 0.1);\r\n        border-color: rgba(0, 62, 164, 0.15);\r\n    }\r\n\r\n    .fontib-preset-item.active-preset {\r\n        border-color: var(--fontib-feature-primary);\r\n        background: rgba(0, 62, 164, 0.05);\r\n    }\r\n\r\n    .fontib-preset-item .preset-letter {\r\n        font-size: 2rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-feature-text);\r\n        line-height: 1.2;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .fontib-preset-item .preset-name {\r\n        font-size: 0.7rem;\r\n        font-weight: 600;\r\n        color: var(--fontib-feature-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.05em;\r\n    }\r\n\r\n    \/* Integration Visual *\/\r\n    .fontib-integrations-visual-inner {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 14px;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-integration-icon-item {\r\n        width: 80px;\r\n        height: 80px;\r\n        border-radius: 20px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-integration-icon-item:hover {\r\n        transform: translateY(-4px) scale(1.05);\r\n        box-shadow: 0 8px 20px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-integration-icon-item i {\r\n        font-size: 1.5rem;\r\n        color: var(--fontib-feature-primary);\r\n    }\r\n\r\n    .fontib-integration-icon-item span {\r\n        font-size: 0.58rem;\r\n        font-weight: 600;\r\n        color: var(--fontib-feature-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.03em;\r\n    }\r\n\r\n    \/* API Visual *\/\r\n    .fontib-api-code-block {\r\n        background: rgba(0, 0, 0, 0.85);\r\n        border-radius: 14px;\r\n        padding: 24px;\r\n        font-family: 'Courier New', monospace;\r\n        font-size: 0.82rem;\r\n        line-height: 1.8;\r\n        color: #e0e0e0;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-api-code-block .code-keyword {\r\n        color: #c792ea;\r\n    }\r\n\r\n    .fontib-api-code-block .code-string {\r\n        color: #c3e88d;\r\n    }\r\n\r\n    .fontib-api-code-block .code-method {\r\n        color: #82aaff;\r\n    }\r\n\r\n    .fontib-api-code-block .code-comment {\r\n        color: #546e7a;\r\n    }\r\n\r\n    .fontib-api-code-block .code-var {\r\n        color: #f78c6c;\r\n    }\r\n\r\n    .fontib-advanced-text .feature-list {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin-top: 24px;\r\n    }\r\n\r\n    .fontib-advanced-text .feature-list li {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: 12px;\r\n        margin-bottom: 16px;\r\n        font-size: 0.95rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .fontib-advanced-text .feature-list li i {\r\n        color: var(--fontib-feature-secondary);\r\n        font-size: 1.2rem;\r\n        margin-top: 2px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 INTEGRATIONS SECTION \u2500\u2500\u2500 *\/\r\n    .fontib-integrations-section {\r\n        background: var(--fontib-feature-bg);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-integrations-carousel {\r\n        display: flex;\r\n        gap: 24px;\r\n        animation: fontibScroll 30s linear infinite;\r\n        width: max-content;\r\n    }\r\n\r\n    .fontib-integrations-carousel:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    @keyframes fontibScroll {\r\n        0% {\r\n            transform: translateX(0);\r\n        }\r\n\r\n        100% {\r\n            transform: translateX(-50%);\r\n        }\r\n    }\r\n\r\n    .fontib-integration-logo-card {\r\n        width: 200px;\r\n        height: 100px;\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 20px;\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.06);\r\n        flex-shrink: 0;\r\n        transition: all 0.35s ease;\r\n    }\r\n\r\n    .fontib-integration-logo-card:hover {\r\n        transform: translateY(-6px);\r\n        box-shadow: 0 16px 40px rgba(0, 62, 164, 0.12);\r\n    }\r\n\r\n    .fontib-integration-logo-card i {\r\n        font-size: 2rem;\r\n        color: var(--fontib-feature-primary);\r\n    }\r\n\r\n    .fontib-integration-logo-card span {\r\n        font-size: 0.8rem;\r\n        font-weight: 600;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\r\n    .fontib-testimonials {\r\n        background: linear-gradient(170deg, #fff 0%, var(--fontib-feature-bg) 50%, #e8effc 100%);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-testimonials::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 10%;\r\n        right: -10%;\r\n        width: 500px;\r\n        height: 500px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.04), transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-testimonial-card {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 24px;\r\n        padding: 36px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n        height: 100%;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-testimonial-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-testimonial-card:hover {\r\n        transform: translateY(-6px);\r\n        box-shadow: 0 30px 70px rgba(0, 62, 164, 0.18);\r\n    }\r\n\r\n    .fontib-testimonial-stars {\r\n        display: flex;\r\n        gap: 3px;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .fontib-testimonial-stars i {\r\n        color: #fbbf24;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .fontib-testimonial-card blockquote {\r\n        font-size: 0.95rem;\r\n        color: var(--fontib-feature-text);\r\n        line-height: 1.7;\r\n        margin-bottom: 24px;\r\n        font-style: italic;\r\n    }\r\n\r\n    .fontib-testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n    }\r\n\r\n    .fontib-testimonial-avatar {\r\n        width: 48px !important;\r\n        height: 48px !important;\r\n        border-radius: 14px !important;\r\n        object-fit: cover !important;\r\n        border: 2px solid rgba(255, 255, 255, 0.5) !important;\r\n        box-shadow: 0 4px 12px rgba(0, 62, 164, 0.1) !important;\r\n    }\r\n\r\n    .fontib-testimonial-author-info strong {\r\n        display: block;\r\n        font-size: 0.9rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-text);\r\n    }\r\n\r\n    .fontib-testimonial-author-info span {\r\n        font-size: 0.8rem;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 PRICING \u2500\u2500\u2500 *\/\r\n    .fontib-pricing {\r\n        background: #fff;\r\n    }\r\n\r\n    .fontib-pricing-card {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 28px;\r\n        padding: 44px 36px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n        height: 100%;\r\n        position: relative;\r\n        overflow: hidden;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-pricing-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-pricing-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 30px 70px rgba(0, 62, 164, 0.2);\r\n    }\r\n\r\n    .fontib-pricing-card.featured {\r\n        background: linear-gradient(160deg, rgba(0, 62, 164, 0.06), rgba(24, 92, 201, 0.04));\r\n        border-color: rgba(0, 62, 164, 0.18);\r\n        transform: scale(1.04);\r\n    }\r\n\r\n    .fontib-pricing-card.featured:hover {\r\n        transform: scale(1.04) translateY(-8px);\r\n    }\r\n\r\n    .fontib-pricing-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 6px 16px;\r\n        background: var(--fontib-feature-badge-bg);\r\n        border: 1px solid var(--fontib-feature-badge-border);\r\n        border-radius: 50px;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        font-size: 0.72rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-primary);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.06em;\r\n        margin-bottom: 20px;\r\n        box-shadow: 0 4px 12px var(--fontib-feature-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n    }\r\n\r\n    .fontib-pricing-card h3 {\r\n        font-size: 1.3rem;\r\n        font-weight: 700;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .fontib-pricing-card .price {\r\n        font-size: 3rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-feature-primary);\r\n        line-height: 1.1;\r\n        margin-bottom: 6px;\r\n    }\r\n\r\n    .fontib-pricing-card .price span {\r\n        font-size: 1rem;\r\n        font-weight: 500;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    .fontib-pricing-card .price-desc {\r\n        font-size: 0.85rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .fontib-pricing-features {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin-bottom: 32px;\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-pricing-features li {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        padding: 10px 0;\r\n        font-size: 0.9rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    .fontib-pricing-features li:last-child {\r\n        border-bottom: none;\r\n    }\r\n\r\n    .fontib-pricing-features li i {\r\n        color: var(--fontib-feature-secondary);\r\n        font-size: 1.1rem;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-pricing-features li.disabled {\r\n        opacity: 0.4;\r\n    }\r\n\r\n    .fontib-pricing-features li.disabled i {\r\n        color: #b0b8c9;\r\n    }\r\n\r\n    .fontib-btn-pricing {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        padding: 16px 32px;\r\n        width: 100%;\r\n        background: var(--fontib-feature-btn-gradient);\r\n        color: #fff;\r\n        border: none;\r\n        border-radius: 14px;\r\n        font-size: 0.95rem;\r\n        font-weight: 700;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.35);\r\n    }\r\n\r\n    .fontib-btn-pricing:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 14px 40px rgba(0, 62, 164, 0.45);\r\n        color: #fff;\r\n    }\r\n\r\n    .fontib-btn-pricing.outline {\r\n        background: transparent;\r\n        border: 2px solid rgba(0, 62, 164, 0.15);\r\n        color: var(--fontib-feature-primary);\r\n        box-shadow: none;\r\n    }\r\n\r\n    .fontib-btn-pricing.outline:hover {\r\n        background: var(--fontib-feature-btn-gradient);\r\n        border-color: transparent;\r\n        color: #fff;\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.35);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\r\n    .fontib-faq {\r\n        background: var(--fontib-feature-bg);\r\n    }\r\n\r\n    .fontib-faq-item {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 20px;\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.06);\r\n        margin-bottom: 16px;\r\n        overflow: hidden;\r\n        transition: all 0.35s ease;\r\n    }\r\n\r\n    .fontib-faq-item:hover {\r\n        box-shadow: 0 12px 32px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-faq-btn {\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 22px 28px;\r\n        background: none;\r\n        border: none;\r\n        cursor: pointer;\r\n        text-align: left;\r\n        gap: 16px;\r\n    }\r\n\r\n    .fontib-faq-btn span {\r\n        font-size: 1rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-text);\r\n        flex: 1;\r\n    }\r\n\r\n    .fontib-faq-btn i {\r\n        font-size: 1.4rem;\r\n        color: var(--fontib-feature-primary);\r\n        transition: transform 0.35s ease;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-faq-item.open .fontib-faq-btn i {\r\n        transform: rotate(45deg);\r\n    }\r\n\r\n    .fontib-faq-body {\r\n        max-height: 0;\r\n        overflow: hidden;\r\n        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;\r\n        padding: 0 28px;\r\n    }\r\n\r\n    .fontib-faq-item.open .fontib-faq-body {\r\n        max-height: 300px;\r\n        padding: 0 28px 22px;\r\n    }\r\n\r\n    .fontib-faq-body p {\r\n        font-size: 0.92rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.7;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 FINAL CTA \u2500\u2500\u2500 *\/\r\n    .fontib-final-cta {\r\n        position: relative;\r\n        background: linear-gradient(160deg, #001a4d 0%, var(--fontib-feature-primary) 35%, var(--fontib-feature-secondary) 70%, #2b7ae8 100%);\r\n        overflow: hidden;\r\n        padding: 120px 0;\r\n    }\r\n\r\n    .fontib-final-cta::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -40%;\r\n        right: -20%;\r\n        width: 700px;\r\n        height: 700px;\r\n        background: radial-gradient(circle, rgba(43, 122, 232, 0.25) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-final-cta .hero-grid-bg {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image:\r\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\r\n        background-size: 60px 60px;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-cta-floating-letters {\r\n        position: absolute;\r\n        inset: 0;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-cta-letter {\r\n        position: absolute;\r\n        font-weight: 800;\r\n        color: rgba(255, 255, 255, 0.04);\r\n        font-size: 10rem;\r\n        line-height: 1;\r\n        animation: fontibFloat 10s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(1) {\r\n        top: 5%;\r\n        left: 5%;\r\n        animation-delay: 0s;\r\n        font-size: 12rem;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(2) {\r\n        top: 20%;\r\n        right: 10%;\r\n        animation-delay: -3s;\r\n        font-size: 8rem;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(3) {\r\n        bottom: 10%;\r\n        left: 15%;\r\n        animation-delay: -5s;\r\n        font-size: 10rem;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(4) {\r\n        bottom: 25%;\r\n        right: 25%;\r\n        animation-delay: -2s;\r\n        font-size: 6rem;\r\n    }\r\n\r\n    .fontib-final-cta-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-final-cta-content h2 {\r\n        font-size: clamp(2rem, 4.5vw, 3.2rem);\r\n        font-weight: 800;\r\n        color: #fff;\r\n        margin-bottom: 18px;\r\n        letter-spacing: -0.02em;\r\n        line-height: 1.15;\r\n    }\r\n\r\n    .fontib-final-cta-content p {\r\n        font-size: 1.1rem;\r\n        color: rgba(255, 255, 255, 0.65);\r\n        max-width: 500px;\r\n        margin: 0 auto 40px;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .fontib-cta-stats {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 60px;\r\n        margin-top: 50px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .fontib-cta-stat {\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-cta-stat strong {\r\n        display: block;\r\n        font-size: 2.2rem;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        line-height: 1;\r\n        margin-bottom: 6px;\r\n    }\r\n\r\n    .fontib-cta-stat span {\r\n        font-size: 0.82rem;\r\n        color: rgba(255, 255, 255, 0.5);\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n    @media (max-width: 991px) {\r\n\r\n        .fontib-advanced-block,\r\n        .fontib-advanced-block.reverse {\r\n            flex-direction: column;\r\n            gap: 40px;\r\n        }\r\n\r\n        .fontib-hero-mockup {\r\n            transform: none;\r\n            margin-top: 50px;\r\n        }\r\n\r\n        .fontib-hero-mockup:hover {\r\n            transform: none;\r\n        }\r\n\r\n        .fontib-pricing-card.featured {\r\n            transform: none;\r\n        }\r\n\r\n        .fontib-pricing-card.featured:hover {\r\n            transform: translateY(-8px);\r\n        }\r\n\r\n        .fontib-mockup-controls {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-feature-section {\r\n            padding: 70px 0;\r\n        }\r\n\r\n        .fontib-hero-actions {\r\n            flex-direction: column;\r\n        }\r\n\r\n        .fontib-hero-actions a,\r\n        .fontib-hero-actions button {\r\n            text-align: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-cta-stats {\r\n            gap: 30px;\r\n        }\r\n\r\n        .fontib-mockup-sidebar {\r\n            display: none;\r\n        }\r\n\r\n        .fontib-presets-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"fontib-feature-wrapper\">\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 1. HERO SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-hero\">\r\n        <div class=\"hero-grid-bg\"><\/div>\r\n        <div class=\"fontib-floating-letters\">\r\n            <span class=\"fontib-floating-letter\">A<\/span>\r\n            <span class=\"fontib-floating-letter\">f<\/span>\r\n            <span class=\"fontib-floating-letter\">B<\/span>\r\n            <span class=\"fontib-floating-letter\">g<\/span>\r\n            <span class=\"fontib-floating-letter\">R<\/span>\r\n        <\/div>\r\n        <div class=\"mx-inner\">\r\n            <div class=\"row align-items-center\">\r\n                <div class=\"col-lg-6 fontib-hero-content\" data-aos=\"fade-right\" data-aos-duration=\"1000\">\r\n                    <div class=\"fontib-hero-badge\">\r\n                        <i class='bx bx-sparkles'><\/i>\r\n                        Features\r\n                    <\/div>\r\n                    <h1 class=\"fontib-hero-title\">\r\n                        Craft Professional Fonts<br>in <span>Minutes<\/span>\r\n                    <\/h1>\r\n                    <p class=\"fontib-hero-subtitle\">\r\n                        Design, customize, and export production-ready fonts entirely in your browser. No downloads,\r\n                        no installs \u2014 just powerful typography tools at your fingertips.\r\n                    <\/p>\r\n                    <div class=\"fontib-hero-actions\">\r\n                        <a href=\"\/\" class=\"fontib-btn-primary\">\r\n                            Get Started\r\n                            <i class='bx bx-arrow-right'><\/i>\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-6 fontib-hero-visual\" data-aos=\"fade-left\" data-aos-duration=\"1000\"\r\n                    data-aos-delay=\"200\">\r\n                    <div class=\"fontib-hero-mockup\">\r\n                        <div class=\"fontib-mockup-toolbar\">\r\n                            <div class=\"fontib-mockup-dot red\"><\/div>\r\n                            <div class=\"fontib-mockup-dot yellow\"><\/div>\r\n                            <div class=\"fontib-mockup-dot green\"><\/div>\r\n                            <span class=\"fontib-mockup-toolbar-title\">Fontib \u2014 Untitled Project<\/span>\r\n                        <\/div>\r\n                        <div class=\"fontib-mockup-body\">\r\n                            <div class=\"fontib-mockup-sidebar\">\r\n                                <div class=\"fontib-mockup-sidebar-item active\"><i class='bx bx-shape-triangle'><\/i>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-font'><\/i><\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-palette'><\/i><\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-layer'><\/i><\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-export'><\/i><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-mockup-canvas\">\r\n                                <div class=\"fontib-mockup-canvas-grid\"><\/div>\r\n                                <span class=\"fontib-mockup-canvas-letter\">Ag<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-mockup-controls\">\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Weight<\/label>\r\n                                    <div class=\"fontib-mockup-slider\">\r\n                                        <div class=\"fontib-mockup-slider-fill\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Width<\/label>\r\n                                    <div class=\"fontib-mockup-slider\">\r\n                                        <div class=\"fontib-mockup-slider-fill half\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Spacing<\/label>\r\n                                    <div class=\"fontib-mockup-slider\">\r\n                                        <div class=\"fontib-mockup-slider-fill long\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Fill Color<\/label>\r\n                                    <div class=\"fontib-mockup-color-row\">\r\n                                        <div class=\"fontib-mockup-color-swatch active\" style=\"background:#fff;\">\r\n                                        <\/div>\r\n                                        <div class=\"fontib-mockup-color-swatch\" style=\"background:#60b4ff;\"><\/div>\r\n                                        <div class=\"fontib-mockup-color-swatch\" style=\"background:#c792ea;\"><\/div>\r\n                                        <div class=\"fontib-mockup-color-swatch\" style=\"background:#f78c6c;\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 2. CORE FEATURES GRID \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-core-features\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-grid-alt'><\/i>\r\n                    Core Features\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Everything You Need to Build Fonts<\/h2>\r\n                <p class=\"fontib-section-desc\">Powerful yet intuitive tools designed to streamline every step of\r\n                    your font creation workflow.<\/p>\r\n            <\/div>\r\n            <div class=\"row g-4\">\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-grid-alt'><\/i>\r\n                        <\/div>\r\n                        <h3>Drag-and-Drop Editor<\/h3>\r\n                        <p>Intuitively position and adjust glyphs with simple drag-and-drop actions. No complex\r\n                            menus needed.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-show'><\/i>\r\n                        <\/div>\r\n                        <h3>Real-Time Preview<\/h3>\r\n                        <p>See every change instantly as you design. Preview across multiple sizes and contexts in\r\n                            real time.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-copy-alt'><\/i>\r\n                        <\/div>\r\n                        <h3>Reusable Templates<\/h3>\r\n                        <p>Save and reuse your styles, glyph sets, and configurations across multiple font projects\r\n                            effortlessly.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-export'><\/i>\r\n                        <\/div>\r\n                        <h3>Multi-Platform Export<\/h3>\r\n                        <p>Export optimized font files for web (WOFF2), mobile (TTF\/OTF), and print with one click.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 3. ADVANCED FEATURE HIGHLIGHTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-advanced-features\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-cog'><\/i>\r\n                    Advanced Capabilities\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Professional-Grade Font Engineering<\/h2>\r\n                <p class=\"fontib-section-desc\">Go beyond basics with precision tools built for serious type\r\n                    designers and teams.<\/p>\r\n            <\/div>\r\n\r\n            <!-- Block 1: Layer Control -->\r\n            <div class=\"fontib-advanced-block\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\">\r\n                        <div class=\"layer-demo\">\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #003EA4, #185cc9);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Stroke Outline<\/strong>\r\n                                    <span>2px \u00b7 Round Cap \u00b7 Outer<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #c792ea, #a855f7);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Fill Shape<\/strong>\r\n                                    <span>Solid \u00b7 #1a1a2e \u00b7 100%<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #f78c6c, #fbbf24);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Decoration Layer<\/strong>\r\n                                    <span>Serif \u00b7 Bracketed \u00b7 4pts<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle off\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #60b4ff, #2dd4bf);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Hinting Guides<\/strong>\r\n                                    <span>Auto-hint \u00b7 Grid Snap<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-layer'><\/i>\r\n                        Layer Control\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Multi-Step Editing & Layer Control<\/h2>\r\n                    <p class=\"fontib-section-desc\">Build complex glyphs with independent stroke, fill, and\r\n                        decoration layers. Toggle visibility, reorder, and edit each layer non-destructively.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>Unlimited layers per glyph with blend modes<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Non-destructive editing with full undo history<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Boolean operations: union, subtract, intersect<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Block 2: Smart Presets -->\r\n            <div class=\"fontib-advanced-block reverse\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\">\r\n                        <div class=\"fontib-presets-grid\">\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-family: serif;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Serif Classic<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item active-preset\">\r\n                                <div class=\"preset-letter\" style=\"font-family: sans-serif; font-weight: 300;\">Ag\r\n                                <\/div>\r\n                                <div class=\"preset-name\">Sans Light<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-family: monospace;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Mono Code<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-style: italic;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Italic Flow<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-weight: 900;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Display Bold<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"letter-spacing: 6px; font-size: 1.5rem;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Wide Spaced<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-magic-wand'><\/i>\r\n                        Smart Presets\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Conditional Styling & Smart Presets<\/h2>\r\n                    <p class=\"fontib-section-desc\">Apply intelligent presets that automatically adjust stroke,\r\n                        spacing, and weight based on context. Create conditional rules for different uses.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>Context-aware styling for headings, body, and captions\r\n                        <\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Custom preset builder with rule-based conditions<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>One-click application across entire glyph sets<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Block 3: Integrations -->\r\n            <div class=\"fontib-advanced-block\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\">\r\n                        <div class=\"fontib-integrations-visual-inner\">\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bxl-figma'><\/i>\r\n                                <span>Figma<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bxl-adobe'><\/i>\r\n                                <span>Illustrator<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-palette'><\/i>\r\n                                <span>Canva<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-code-block'><\/i>\r\n                                <span>VS Code<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-globe'><\/i>\r\n                                <span>Webflow<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-devices'><\/i>\r\n                                <span>Sketch<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-plug'><\/i>\r\n                        Design Tool Integration\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Seamless Integration with Your Tools<\/h2>\r\n                    <p class=\"fontib-section-desc\">Push fonts directly to Figma, Adobe Illustrator, Canva, and more.\r\n                        Keep your design workflow uninterrupted.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>One-click sync to Figma & Illustrator<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Canva font upload automation<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Auto-generate @font-face CSS snippets<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Block 4: API & Automation -->\r\n            <div class=\"fontib-advanced-block reverse\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\" style=\"padding: 24px;\">\r\n                        <div class=\"fontib-api-code-block\">\r\n                            <span class=\"code-comment\">\/\/ Generate font variant via API<\/span><br>\r\n                            <span class=\"code-keyword\">const<\/span> <span class=\"code-var\">response<\/span> = <span\r\n                                class=\"code-keyword\">await<\/span> <span class=\"code-method\">fetch<\/span>(<br>\r\n                            \u00a0\u00a0<span\r\n                                class=\"code-string\">'https:\/\/api.fontib.com\/v2\/generate'<\/span>,<br>\r\n                            \u00a0\u00a0{<br>\r\n                            \u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">method<\/span>: <span\r\n                                class=\"code-string\">'POST'<\/span>,<br>\r\n                            \u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">headers<\/span>: { <span\r\n                                class=\"code-string\">'Authorization'<\/span>: <span class=\"code-string\">`Bearer\r\n                                ${token}`<\/span> },<br>\r\n                            \u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">body<\/span>: <span\r\n                                class=\"code-method\">JSON.stringify<\/span>({<br>\r\n                            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">font_id<\/span>: <span\r\n                                class=\"code-string\">'fnt_8x2kP'<\/span>,<br>\r\n                            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">weight<\/span>: <span\r\n                                class=\"code-string\">'700'<\/span>,<br>\r\n                            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">format<\/span>: <span\r\n                                class=\"code-string\">'woff2'<\/span><br>\r\n                            \u00a0\u00a0\u00a0\u00a0})<br>\r\n                            \u00a0\u00a0}<br>\r\n                            );\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-code'><\/i>\r\n                        API & Automation\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">REST API & Webhook Support<\/h2>\r\n                    <p class=\"fontib-section-desc\">Automate font generation, variant creation, and export workflows\r\n                        with our developer-friendly REST API and webhook system.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>Full REST API with comprehensive documentation<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Webhooks for build complete & error events<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>CI\/CD pipeline integration for automated builds<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 4. INTEGRATIONS CAROUSEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-integrations-section\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-link'><\/i>\r\n                    Integrations\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Connects With Your Stack<\/h2>\r\n                <p class=\"fontib-section-desc\">Fontib plays nicely with the tools you already use every day.\r\n                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div style=\"overflow: hidden; padding: 10px 0;\">\r\n            <div class=\"fontib-integrations-carousel\">\r\n                <!-- First set -->\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-figma'><\/i><span>Figma<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-adobe'><\/i><span>Illustrator<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-palette'><\/i><span>Canva<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-slack'><\/i><span>Slack<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-envelope'><\/i><span>Mailchimp<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-bot'><\/i><span>Zapier<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-font'><\/i><span>Google Fonts<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-code-block'><\/i><span>VS Code<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-globe'><\/i><span>Webflow<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-devices'><\/i><span>Sketch<\/span><\/div>\r\n                <!-- Duplicate for seamless loop -->\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-figma'><\/i><span>Figma<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-adobe'><\/i><span>Illustrator<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-palette'><\/i><span>Canva<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-slack'><\/i><span>Slack<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-envelope'><\/i><span>Mailchimp<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-bot'><\/i><span>Zapier<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-font'><\/i><span>Google Fonts<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-code-block'><\/i><span>VS Code<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-globe'><\/i><span>Webflow<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-devices'><\/i><span>Sketch<\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 5. TESTIMONIALS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-testimonials\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-chat'><\/i>\r\n                    Testimonials\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Loved by Type Designers Worldwide<\/h2>\r\n                <p class=\"fontib-section-desc\">See what professionals and teams are saying about their experience\r\n                    with Fontib.<\/p>\r\n            <\/div>\r\n            <div class=\"row g-4\">\r\n                <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                    <div class=\"fontib-testimonial-card\">\r\n                        <div class=\"fontib-testimonial-stars\">\r\n                            <i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i\r\n                                class='bx bx-star'><\/i><i class='bx bx-star'><\/i>\r\n                        <\/div>\r\n                        <blockquote>\"Fontib completely changed how our studio approaches custom type. What\r\n                            used to take weeks now takes days \u2014 the layer system is genius.\"<\/blockquote>\r\n                        <div class=\"fontib-testimonial-author\">\r\n                            <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/profile1.jpg\"\r\n                                alt=\"Sarah Mitchell\" class=\"fontib-testimonial-avatar\">\r\n                            <div class=\"fontib-testimonial-author-info\">\r\n                                <strong>Sarah Mitchell<\/strong>\r\n                                <span>Creative Director, TypeCraft Studio<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"fontib-testimonial-card\">\r\n                        <div class=\"fontib-testimonial-stars\">\r\n                            <i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i\r\n                                class='bx bx-star'><\/i><i class='bx bx-star'><\/i>\r\n                        <\/div>\r\n                        <blockquote>\"The API integration alone is worth the subscription. We automated our entire\r\n                            font pipeline and it just works. Incredibly well-designed tool.\"<\/blockquote>\r\n                        <div class=\"fontib-testimonial-author\">\r\n                            <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/profile2.jpg\" alt=\"James Park\"\r\n                                class=\"fontib-testimonial-avatar\">\r\n                            <div class=\"fontib-testimonial-author-info\">\r\n                                <strong>James Park<\/strong>\r\n                                <span>Lead Engineer, DesignSystems Inc.<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"fontib-testimonial-card\">\r\n                        <div class=\"fontib-testimonial-stars\">\r\n                            <i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i\r\n                                class='bx bx-star'><\/i><i class='bx bx-star'><\/i>\r\n                        <\/div>\r\n                        <blockquote>\"As a solo designer, I needed something powerful but not overwhelming. Font\r\n                            Builder nails that balance. The smart presets save me hours on every project.\"\r\n                        <\/blockquote>\r\n                        <div class=\"fontib-testimonial-author\">\r\n                            <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/profile3.jpg\" alt=\"Elena Rossi\"\r\n                                class=\"fontib-testimonial-avatar\">\r\n                            <div class=\"fontib-testimonial-author-info\">\r\n                                <strong>Elena Rossi<\/strong>\r\n                                <span>Freelance Type Designer<\/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    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 7. FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-faq\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-5\" data-aos=\"fade-right\" data-aos-duration=\"800\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-help-circle'><\/i>\r\n                        FAQ\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Frequently Asked Questions<\/h2>\r\n                    <p class=\"fontib-section-desc\">Got questions? We've got answers. If you don't find what you're\r\n                        looking for, reach out to our support team.<\/p>\r\n                <\/div>\r\n                <div class=\"col-lg-7\" data-aos=\"fade-left\" data-aos-duration=\"800\" data-aos-delay=\"200\">\r\n                    <div class=\"fontib-faq-item open\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>What font formats can I export?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Fontib supports exporting to WOFF2, WOFF, TTF, OTF, EOT, and SVG font formats.\r\n                                You can export multiple formats simultaneously with a single click, and each format\r\n                                is optimized for its intended use case \u2014 web, mobile, or print.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Is my font data secure in the cloud?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Absolutely. All font projects are encrypted at rest (AES-256) and in transit (TLS\r\n                                1.3). We are SOC 2 Type II certified, and your data is stored in isolated\r\n                                environments. You can also enable two-factor authentication and IP whitelisting for\r\n                                extra security.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Which browsers and devices are supported?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Fontib works in all modern browsers \u2014 Chrome, Firefox, Safari, and Edge (latest\r\n                                two versions). It's fully responsive and works on desktop, tablet, and mobile\r\n                                devices. For the best experience, we recommend a screen size of 1280px or larger\r\n                                when designing complex glyphs.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Can I use Fontib offline?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>The Professional and Enterprise plans include offline mode via our progressive web\r\n                                app (PWA). Your projects sync automatically when you reconnect. Note that some\r\n                                features like API access and real-time collaboration require an internet connection.\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Do I own the fonts I create?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Yes, 100%. You retain full intellectual property rights to all fonts you create with\r\n                                Fontib. We do not claim any ownership or licensing rights over your work.\r\n                                Export and use your fonts commercially without any restrictions.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 8. FINAL CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-final-cta\">\r\n        <div class=\"hero-grid-bg\"><\/div>\r\n        <div class=\"fontib-cta-floating-letters\">\r\n            <span class=\"fontib-cta-letter\">A<\/span>\r\n            <span class=\"fontib-cta-letter\">b<\/span>\r\n            <span class=\"fontib-cta-letter\">K<\/span>\r\n            <span class=\"fontib-cta-letter\">f<\/span>\r\n        <\/div>\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-final-cta-content\" data-aos=\"zoom-in\" data-aos-duration=\"1000\">\r\n                <h2>Ready to Build Your Next Font?<\/h2>\r\n                <p>Join thousands of designers who are crafting beautiful typefaces faster than ever. Start your\r\n                    free trial today \u2014 no credit card required.<\/p>\r\n                <a href=\"#\" class=\"fontib-btn-primary\" style=\"font-size: 1.1rem; padding: 18px 48px;\">\r\n                    Start Free Trial\r\n                    <i class='bx bx-arrow-right'><\/i>\r\n                <\/a>\r\n                <div class=\"fontib-cta-stats\">\r\n                    <div class=\"fontib-cta-stat\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                        <strong>12K+<\/strong>\r\n                        <span>Active Designers<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-cta-stat\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <strong>48K+<\/strong>\r\n                        <span>Fonts Created<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-cta-stat\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <strong>4.9\/5<\/strong>\r\n                        <span>Average Rating<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n    \/\/ FAQ Toggle\r\n    function toggleFaq(btn) {\r\n        const item = btn.closest('.fontib-faq-item');\r\n        const wasOpen = item.classList.contains('open');\r\n\r\n        \/\/ Close all\r\n        document.querySelectorAll('.fontib-faq-item').forEach(function (el) {\r\n            el.classList.remove('open');\r\n        });\r\n\r\n        \/\/ Toggle clicked\r\n        if (!wasOpen) {\r\n            item.classList.add('open');\r\n        }\r\n    }\r\n<\/script>[\/et_pb_fullwidth_code][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<style>\r\n    :root {\r\n        --fontib-feature-primary: #003EA4;\r\n        --fontib-feature-secondary: #185cc9;\r\n        --fontib-feature-bg: #f0f4fa;\r\n        --fontib-feature-text: #1a1a2e;\r\n        --fontib-feature-text-muted: #5a6078;\r\n        --fontib-feature-glass-bg: rgba(255, 255, 255, 0.12);\r\n        --fontib-feature-glass-border: rgba(255, 255, 255, 0.25);\r\n        --fontib-feature-glass-shadow: rgba(0, 62, 164, 0.12);\r\n        --fontib-feature-card-bg: rgba(255, 255, 255, 0.18);\r\n        --fontib-feature-card-border: rgba(255, 255, 255, 0.35);\r\n        --fontib-feature-card-shadow: 0 20px 50px rgba(0, 62, 164, 0.15), 0 8px 20px rgba(0, 0, 0, 0.06);\r\n        --fontib-feature-badge-bg: rgba(255, 255, 255, 0.15);\r\n        --fontib-feature-badge-border: rgba(255, 255, 255, 0.3);\r\n        --fontib-feature-btn-gradient: linear-gradient(90deg, rgb(0, 62, 164), rgb(24, 92, 201));\r\n    }\r\n\r\n\r\n    .fontib-feature-wrapper {\r\n        font-family: 'Inter, sans-serif;\r\n        color: var(--fontib-feature-text);\r\n        overflow-x: hidden;\r\n    }\r\n\r\n    .fontib-feature-wrapper .mx-inner {\r\n        max-width: 1200px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        padding-left: 20px;\r\n        padding-right: 20px;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\r\n    .fontib-feature-hero {\r\n        position: relative;\r\n        min-height: 100vh;\r\n        display: flex;\r\n        align-items: center;\r\n        background: linear-gradient(135deg, #e8f0fe 0%, #d4e8ff 50%, #c5e0f8 100%);\r\n        overflow: hidden;\r\n        padding: 100px 0 80px;\r\n    }\r\n\r\n    .fontib-feature-hero::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50%;\r\n        right: -20%;\r\n        width: 800px;\r\n        height: 800px;\r\n        background: radial-gradient(circle, rgba(43, 122, 232, 0.15) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-feature-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -30%;\r\n        left: -15%;\r\n        width: 600px;\r\n        height: 600px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.1) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-feature-hero .hero-grid-bg {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image:\r\n            linear-gradient(rgba(0, 62, 164, 0.05) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(0, 62, 164, 0.05) 1px, transparent 1px);\r\n        background-size: 60px 60px;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-hero-content {\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .fontib-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(0, 62, 164, 0.08);\r\n        border: 1px solid rgba(0, 62, 164, 0.15);\r\n        border-radius: 50px;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        color: #003ea4;\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        margin-bottom: 28px;\r\n        box-shadow: 0 4px 15px rgba(0, 62, 164, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .fontib-hero-badge i {\r\n        font-size: 1rem;\r\n        color: #2b7ae8;\r\n    }\r\n\r\n    .fontib-hero-title {\r\n        font-size: clamp(2.5rem, 5.5vw, 4.2rem);\r\n        font-weight: 800;\r\n        color: #001a4d;\r\n        line-height: 1.1;\r\n        margin-bottom: 24px;\r\n        letter-spacing: -0.03em;\r\n    }\r\n\r\n    .fontib-hero-title span {\r\n        background: linear-gradient(135deg, #003ea4, #2b7ae8);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n    }\r\n\r\n    .fontib-hero-subtitle {\r\n        font-size: 1.15rem;\r\n        color: rgba(0, 26, 77, 0.7);\r\n        line-height: 1.7;\r\n        max-width: 520px;\r\n        margin-bottom: 40px;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .fontib-hero-actions {\r\n        display: flex;\r\n        gap: 16px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .fontib-btn-primary {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 16px 36px;\r\n        background: var(--fontib-feature-btn-gradient);\r\n        color: #fff;\r\n        border: none;\r\n        border-radius: 14px;\r\n        font-size: 1rem;\r\n        font-weight: 700;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-btn-primary::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: -100%;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);\r\n        transition: left 0.6s;\r\n    }\r\n\r\n    .fontib-btn-primary:hover::before {\r\n        left: 100%;\r\n    }\r\n\r\n    .fontib-btn-primary:hover {\r\n        transform: translateY(-3px) scale(1.03);\r\n        box-shadow: 0 14px 40px rgba(0, 62, 164, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2);\r\n        color: #fff;\r\n    }\r\n\r\n    .fontib-btn-outline {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 16px 36px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        color: #003ea4;\r\n        border: 1px solid rgba(0, 62, 164, 0.2);\r\n        border-radius: 14px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .fontib-btn-outline:hover {\r\n        background: rgba(255, 255, 255, 0.85);\r\n        transform: translateY(-3px);\r\n        color: #001a4d;\r\n    }\r\n\r\n    \/* Floating Letters *\/\r\n    .fontib-floating-letters {\r\n        position: absolute;\r\n        inset: 0;\r\n        pointer-events: none;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-floating-letter {\r\n        position: absolute;\r\n        font-weight: 800;\r\n        color: rgba(0, 62, 164, 0.06);\r\n        font-size: 8rem;\r\n        line-height: 1;\r\n        animation: fontibFloat 8s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(1) {\r\n        top: 8%;\r\n        right: 8%;\r\n        animation-delay: 0s;\r\n        font-size: 10rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(2) {\r\n        top: 30%;\r\n        right: 25%;\r\n        animation-delay: -2s;\r\n        font-size: 6rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(3) {\r\n        bottom: 15%;\r\n        right: 5%;\r\n        animation-delay: -4s;\r\n        font-size: 9rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(4) {\r\n        bottom: 35%;\r\n        right: 35%;\r\n        animation-delay: -1s;\r\n        font-size: 5rem;\r\n    }\r\n\r\n    .fontib-floating-letter:nth-child(5) {\r\n        top: 60%;\r\n        right: 15%;\r\n        animation-delay: -3s;\r\n        font-size: 7rem;\r\n    }\r\n\r\n    @keyframes fontibFloat {\r\n\r\n        0%,\r\n        100% {\r\n            transform: translateY(0) rotate(0deg);\r\n        }\r\n\r\n        33% {\r\n            transform: translateY(-20px) rotate(3deg);\r\n        }\r\n\r\n        66% {\r\n            transform: translateY(10px) rotate(-2deg);\r\n        }\r\n    }\r\n\r\n    \/* Hero Mockup *\/\r\n    .fontib-hero-visual {\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .fontib-hero-mockup {\r\n        background: rgba(255, 255, 255, 0.5);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        border-radius: 24px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        padding: 30px;\r\n        box-shadow: 0 30px 80px rgba(0, 62, 164, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);\r\n        transform: perspective(1200px) rotateY(-5deg) rotateX(3deg);\r\n        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .fontib-hero-mockup:hover {\r\n        transform: perspective(1200px) rotateY(0deg) rotateX(0deg);\r\n    }\r\n\r\n    .fontib-mockup-toolbar {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        margin-bottom: 24px;\r\n        padding-bottom: 16px;\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n    }\r\n\r\n    .fontib-mockup-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-mockup-dot.red {\r\n        background: #ff5f57;\r\n    }\r\n\r\n    .fontib-mockup-dot.yellow {\r\n        background: #febc2e;\r\n    }\r\n\r\n    .fontib-mockup-dot.green {\r\n        background: #28c840;\r\n    }\r\n\r\n    .fontib-mockup-toolbar-title {\r\n        margin-left: 12px;\r\n        color: rgba(255, 255, 255, 0.4);\r\n        font-size: 0.8rem;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .fontib-mockup-body {\r\n        display: flex;\r\n        gap: 20px;\r\n    }\r\n\r\n    .fontib-mockup-sidebar {\r\n        width: 60px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        padding: 10px 0;\r\n    }\r\n\r\n    .fontib-mockup-sidebar-item {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 10px;\r\n        background: rgba(255, 255, 255, 0.06);\r\n        border: 1px solid rgba(255, 255, 255, 0.08);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: rgba(255, 255, 255, 0.35);\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .fontib-mockup-sidebar-item.active {\r\n        background: rgba(0, 62, 164, 0.4);\r\n        border-color: rgba(96, 180, 255, 0.3);\r\n        color: #60b4ff;\r\n    }\r\n\r\n    .fontib-mockup-canvas {\r\n        flex: 1;\r\n        min-height: 260px;\r\n        border-radius: 16px;\r\n        background: rgba(0, 0, 0, 0.2);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-mockup-canvas-letter {\r\n        font-size: 8rem;\r\n        font-weight: 800;\r\n        color: rgba(255, 255, 255, 0.9);\r\n        line-height: 1;\r\n        text-shadow: 0 0 60px rgba(96, 180, 255, 0.3);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .fontib-mockup-canvas::before {\r\n        content: '';\r\n        position: absolute;\r\n        width: 200px;\r\n        height: 200px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.3), transparent 70%);\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .fontib-mockup-canvas-grid {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image:\r\n            linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\r\n        background-size: 30px 30px;\r\n    }\r\n\r\n    .fontib-mockup-controls {\r\n        width: 140px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 14px;\r\n    }\r\n\r\n    .fontib-mockup-control-group label {\r\n        display: block;\r\n        font-size: 0.65rem;\r\n        color: rgba(255, 255, 255, 0.3);\r\n        margin-bottom: 6px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.08em;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .fontib-mockup-slider {\r\n        width: 100%;\r\n        height: 4px;\r\n        border-radius: 4px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-mockup-slider-fill {\r\n        height: 100%;\r\n        border-radius: 4px;\r\n        background: linear-gradient(90deg, var(--fontib-feature-primary), var(--fontib-feature-secondary));\r\n        width: 65%;\r\n    }\r\n\r\n    .fontib-mockup-slider-fill.half {\r\n        width: 45%;\r\n    }\r\n\r\n    .fontib-mockup-slider-fill.long {\r\n        width: 80%;\r\n    }\r\n\r\n    .fontib-mockup-color-row {\r\n        display: flex;\r\n        gap: 6px;\r\n    }\r\n\r\n    .fontib-mockup-color-swatch {\r\n        width: 22px;\r\n        height: 22px;\r\n        border-radius: 6px;\r\n        border: 2px solid transparent;\r\n    }\r\n\r\n    .fontib-mockup-color-swatch.active {\r\n        border-color: #60b4ff;\r\n        box-shadow: 0 0 10px rgba(96, 180, 255, 0.4);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 SECTION COMMON \u2500\u2500\u2500 *\/\r\n    .fontib-feature-section {\r\n        padding: 100px 0;\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-section-label {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 7px 18px;\r\n        background: var(--fontib-feature-badge-bg);\r\n        border: 1px solid var(--fontib-feature-badge-border);\r\n        border-radius: 50px;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        font-size: 0.78rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-primary);\r\n        margin-bottom: 20px;\r\n        box-shadow: 0 4px 15px var(--fontib-feature-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.06em;\r\n    }\r\n\r\n    .fontib-section-label i {\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .fontib-section-title {\r\n        font-size: clamp(2rem, 4vw, 2.8rem);\r\n        font-weight: 800;\r\n        color: var(--fontib-feature-text);\r\n        line-height: 1.15;\r\n        margin-bottom: 16px;\r\n        letter-spacing: -0.02em;\r\n    }\r\n\r\n    .fontib-section-desc {\r\n        font-size: 1.05rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.7;\r\n        max-width: 560px;\r\n    }\r\n\r\n    .fontib-section-header-center {\r\n        text-align: center;\r\n        margin-bottom: 60px;\r\n    }\r\n\r\n    .fontib-section-header-center .fontib-section-desc {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 GLASS CARD \u2500\u2500\u2500 *\/\r\n    .fontib-glass-card {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 24px;\r\n        padding: 36px 30px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n        overflow: hidden;\r\n        height: 100%;\r\n    }\r\n\r\n    .fontib-glass-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-glass-card:hover {\r\n        transform: translateY(-8px) scale(1.02);\r\n        box-shadow: 0 30px 70px rgba(0, 62, 164, 0.2), 0 12px 30px rgba(0, 0, 0, 0.08);\r\n        border-color: rgba(0, 62, 164, 0.15);\r\n    }\r\n\r\n    .fontib-glass-card-icon {\r\n        width: 72px;\r\n        height: 72px;\r\n        border-radius: 20px;\r\n        background: linear-gradient(135deg, rgba(0, 62, 164, 0.1), rgba(24, 92, 201, 0.08));\r\n        border: 1px solid rgba(0, 62, 164, 0.12);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 24px;\r\n        font-size: 2rem;\r\n        color: var(--fontib-feature-primary);\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .fontib-glass-card:hover .fontib-glass-card-icon {\r\n        background: linear-gradient(135deg, var(--fontib-feature-primary), var(--fontib-feature-secondary));\r\n        color: #fff;\r\n        transform: scale(1.08) rotate(-3deg);\r\n        box-shadow: 0 12px 30px rgba(0, 62, 164, 0.3);\r\n    }\r\n\r\n    .fontib-glass-card h3 {\r\n        font-size: 1.25rem;\r\n        font-weight: 700;\r\n        margin-bottom: 12px;\r\n        color: var(--fontib-feature-text);\r\n    }\r\n\r\n    .fontib-glass-card p {\r\n        font-size: 0.92rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.65;\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 CORE FEATURES GRID \u2500\u2500\u2500 *\/\r\n    .fontib-core-features {\r\n        background: var(--fontib-feature-bg);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-core-features::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 400px;\r\n        background: linear-gradient(180deg, #fff 0%, var(--fontib-feature-bg) 100%);\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-core-features .row {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 ADVANCED FEATURES \u2500\u2500\u2500 *\/\r\n    .fontib-advanced-features {\r\n        background: #fff;\r\n    }\r\n\r\n    .fontib-advanced-block {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 60px;\r\n        margin-bottom: 100px;\r\n    }\r\n\r\n    .fontib-advanced-block:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .fontib-advanced-block.reverse {\r\n        flex-direction: row-reverse;\r\n    }\r\n\r\n    .fontib-advanced-visual {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .fontib-advanced-text {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .fontib-advanced-visual-inner {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 24px;\r\n        padding: 40px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-advanced-visual-inner::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-advanced-visual-inner .layer-demo {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 16px;\r\n    }\r\n\r\n    .fontib-layer-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 16px;\r\n        padding: 16px 20px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        border-radius: 14px;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-layer-item:hover {\r\n        transform: translateX(6px);\r\n        box-shadow: 0 8px 20px rgba(0, 62, 164, 0.08);\r\n    }\r\n\r\n    .fontib-layer-item .layer-color {\r\n        width: 36px;\r\n        height: 36px;\r\n        border-radius: 10px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-layer-item .layer-info {\r\n        flex: 1;\r\n    }\r\n\r\n    .fontib-layer-item .layer-info strong {\r\n        display: block;\r\n        font-size: 0.9rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-text);\r\n    }\r\n\r\n    .fontib-layer-item .layer-info span {\r\n        font-size: 0.78rem;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle {\r\n        width: 44px;\r\n        height: 24px;\r\n        border-radius: 12px;\r\n        background: var(--fontib-feature-btn-gradient);\r\n        position: relative;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle::after {\r\n        content: '';\r\n        width: 18px;\r\n        height: 18px;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        position: absolute;\r\n        top: 3px;\r\n        right: 3px;\r\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle.off {\r\n        background: #d1d5db;\r\n    }\r\n\r\n    .fontib-layer-item .layer-toggle.off::after {\r\n        right: auto;\r\n        left: 3px;\r\n    }\r\n\r\n    \/* Smart Presets Visual *\/\r\n    .fontib-presets-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 12px;\r\n    }\r\n\r\n    .fontib-preset-item {\r\n        padding: 20px 14px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        border-radius: 14px;\r\n        text-align: center;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.3s ease;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .fontib-preset-item:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 8px 20px rgba(0, 62, 164, 0.1);\r\n        border-color: rgba(0, 62, 164, 0.15);\r\n    }\r\n\r\n    .fontib-preset-item.active-preset {\r\n        border-color: var(--fontib-feature-primary);\r\n        background: rgba(0, 62, 164, 0.05);\r\n    }\r\n\r\n    .fontib-preset-item .preset-letter {\r\n        font-size: 2rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-feature-text);\r\n        line-height: 1.2;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .fontib-preset-item .preset-name {\r\n        font-size: 0.7rem;\r\n        font-weight: 600;\r\n        color: var(--fontib-feature-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.05em;\r\n    }\r\n\r\n    \/* Integration Visual *\/\r\n    .fontib-integrations-visual-inner {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 14px;\r\n        justify-content: center;\r\n    }\r\n\r\n    .fontib-integration-icon-item {\r\n        width: 80px;\r\n        height: 80px;\r\n        border-radius: 20px;\r\n        background: rgba(255, 255, 255, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .fontib-integration-icon-item:hover {\r\n        transform: translateY(-4px) scale(1.05);\r\n        box-shadow: 0 8px 20px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-integration-icon-item i {\r\n        font-size: 1.5rem;\r\n        color: var(--fontib-feature-primary);\r\n    }\r\n\r\n    .fontib-integration-icon-item span {\r\n        font-size: 0.58rem;\r\n        font-weight: 600;\r\n        color: var(--fontib-feature-text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.03em;\r\n    }\r\n\r\n    \/* API Visual *\/\r\n    .fontib-api-code-block {\r\n        background: rgba(0, 0, 0, 0.85);\r\n        border-radius: 14px;\r\n        padding: 24px;\r\n        font-family: 'Courier New', monospace;\r\n        font-size: 0.82rem;\r\n        line-height: 1.8;\r\n        color: #e0e0e0;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-api-code-block .code-keyword {\r\n        color: #c792ea;\r\n    }\r\n\r\n    .fontib-api-code-block .code-string {\r\n        color: #c3e88d;\r\n    }\r\n\r\n    .fontib-api-code-block .code-method {\r\n        color: #82aaff;\r\n    }\r\n\r\n    .fontib-api-code-block .code-comment {\r\n        color: #546e7a;\r\n    }\r\n\r\n    .fontib-api-code-block .code-var {\r\n        color: #f78c6c;\r\n    }\r\n\r\n    .fontib-advanced-text .feature-list {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin-top: 24px;\r\n    }\r\n\r\n    .fontib-advanced-text .feature-list li {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: 12px;\r\n        margin-bottom: 16px;\r\n        font-size: 0.95rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .fontib-advanced-text .feature-list li i {\r\n        color: var(--fontib-feature-secondary);\r\n        font-size: 1.2rem;\r\n        margin-top: 2px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 INTEGRATIONS SECTION \u2500\u2500\u2500 *\/\r\n    .fontib-integrations-section {\r\n        background: var(--fontib-feature-bg);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-integrations-carousel {\r\n        display: flex;\r\n        gap: 24px;\r\n        animation: fontibScroll 30s linear infinite;\r\n        width: max-content;\r\n    }\r\n\r\n    .fontib-integrations-carousel:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    @keyframes fontibScroll {\r\n        0% {\r\n            transform: translateX(0);\r\n        }\r\n\r\n        100% {\r\n            transform: translateX(-50%);\r\n        }\r\n    }\r\n\r\n    .fontib-integration-logo-card {\r\n        width: 200px;\r\n        height: 100px;\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 20px;\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.06);\r\n        flex-shrink: 0;\r\n        transition: all 0.35s ease;\r\n    }\r\n\r\n    .fontib-integration-logo-card:hover {\r\n        transform: translateY(-6px);\r\n        box-shadow: 0 16px 40px rgba(0, 62, 164, 0.12);\r\n    }\r\n\r\n    .fontib-integration-logo-card i {\r\n        font-size: 2rem;\r\n        color: var(--fontib-feature-primary);\r\n    }\r\n\r\n    .fontib-integration-logo-card span {\r\n        font-size: 0.8rem;\r\n        font-weight: 600;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\r\n    .fontib-testimonials {\r\n        background: linear-gradient(170deg, #fff 0%, var(--fontib-feature-bg) 50%, #e8effc 100%);\r\n        position: relative;\r\n    }\r\n\r\n    .fontib-testimonials::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 10%;\r\n        right: -10%;\r\n        width: 500px;\r\n        height: 500px;\r\n        background: radial-gradient(circle, rgba(0, 62, 164, 0.04), transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-testimonial-card {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 24px;\r\n        padding: 36px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n        height: 100%;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .fontib-testimonial-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-testimonial-card:hover {\r\n        transform: translateY(-6px);\r\n        box-shadow: 0 30px 70px rgba(0, 62, 164, 0.18);\r\n    }\r\n\r\n    .fontib-testimonial-stars {\r\n        display: flex;\r\n        gap: 3px;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .fontib-testimonial-stars i {\r\n        color: #fbbf24;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .fontib-testimonial-card blockquote {\r\n        font-size: 0.95rem;\r\n        color: var(--fontib-feature-text);\r\n        line-height: 1.7;\r\n        margin-bottom: 24px;\r\n        font-style: italic;\r\n    }\r\n\r\n    .fontib-testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n    }\r\n\r\n    .fontib-testimonial-avatar {\r\n        width: 48px !important;\r\n        height: 48px !important;\r\n        border-radius: 14px !important;\r\n        object-fit: cover !important;\r\n        border: 2px solid rgba(255, 255, 255, 0.5) !important;\r\n        box-shadow: 0 4px 12px rgba(0, 62, 164, 0.1) !important;\r\n    }\r\n\r\n    .fontib-testimonial-author-info strong {\r\n        display: block;\r\n        font-size: 0.9rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-text);\r\n    }\r\n\r\n    .fontib-testimonial-author-info span {\r\n        font-size: 0.8rem;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 PRICING \u2500\u2500\u2500 *\/\r\n    .fontib-pricing {\r\n        background: #fff;\r\n    }\r\n\r\n    .fontib-pricing-card {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 28px;\r\n        padding: 44px 36px;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        box-shadow: var(--fontib-feature-card-shadow);\r\n        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n        height: 100%;\r\n        position: relative;\r\n        overflow: hidden;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-pricing-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n    }\r\n\r\n    .fontib-pricing-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 30px 70px rgba(0, 62, 164, 0.2);\r\n    }\r\n\r\n    .fontib-pricing-card.featured {\r\n        background: linear-gradient(160deg, rgba(0, 62, 164, 0.06), rgba(24, 92, 201, 0.04));\r\n        border-color: rgba(0, 62, 164, 0.18);\r\n        transform: scale(1.04);\r\n    }\r\n\r\n    .fontib-pricing-card.featured:hover {\r\n        transform: scale(1.04) translateY(-8px);\r\n    }\r\n\r\n    .fontib-pricing-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 6px 16px;\r\n        background: var(--fontib-feature-badge-bg);\r\n        border: 1px solid var(--fontib-feature-badge-border);\r\n        border-radius: 50px;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        font-size: 0.72rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-primary);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.06em;\r\n        margin-bottom: 20px;\r\n        box-shadow: 0 4px 12px var(--fontib-feature-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n    }\r\n\r\n    .fontib-pricing-card h3 {\r\n        font-size: 1.3rem;\r\n        font-weight: 700;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .fontib-pricing-card .price {\r\n        font-size: 3rem;\r\n        font-weight: 800;\r\n        color: var(--fontib-feature-primary);\r\n        line-height: 1.1;\r\n        margin-bottom: 6px;\r\n    }\r\n\r\n    .fontib-pricing-card .price span {\r\n        font-size: 1rem;\r\n        font-weight: 500;\r\n        color: var(--fontib-feature-text-muted);\r\n    }\r\n\r\n    .fontib-pricing-card .price-desc {\r\n        font-size: 0.85rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .fontib-pricing-features {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin-bottom: 32px;\r\n        text-align: left;\r\n    }\r\n\r\n    .fontib-pricing-features li {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        padding: 10px 0;\r\n        font-size: 0.9rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    .fontib-pricing-features li:last-child {\r\n        border-bottom: none;\r\n    }\r\n\r\n    .fontib-pricing-features li i {\r\n        color: var(--fontib-feature-secondary);\r\n        font-size: 1.1rem;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-pricing-features li.disabled {\r\n        opacity: 0.4;\r\n    }\r\n\r\n    .fontib-pricing-features li.disabled i {\r\n        color: #b0b8c9;\r\n    }\r\n\r\n    .fontib-btn-pricing {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        padding: 16px 32px;\r\n        width: 100%;\r\n        background: var(--fontib-feature-btn-gradient);\r\n        color: #fff;\r\n        border: none;\r\n        border-radius: 14px;\r\n        font-size: 0.95rem;\r\n        font-weight: 700;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.35);\r\n    }\r\n\r\n    .fontib-btn-pricing:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 14px 40px rgba(0, 62, 164, 0.45);\r\n        color: #fff;\r\n    }\r\n\r\n    .fontib-btn-pricing.outline {\r\n        background: transparent;\r\n        border: 2px solid rgba(0, 62, 164, 0.15);\r\n        color: var(--fontib-feature-primary);\r\n        box-shadow: none;\r\n    }\r\n\r\n    .fontib-btn-pricing.outline:hover {\r\n        background: var(--fontib-feature-btn-gradient);\r\n        border-color: transparent;\r\n        color: #fff;\r\n        box-shadow: 0 8px 30px rgba(0, 62, 164, 0.35);\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\r\n    .fontib-faq {\r\n        background: var(--fontib-feature-bg);\r\n    }\r\n\r\n    .fontib-faq-item {\r\n        background: var(--fontib-feature-card-bg);\r\n        border: 1px solid var(--fontib-feature-card-border);\r\n        border-radius: 20px;\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        box-shadow: 0 8px 24px rgba(0, 62, 164, 0.06);\r\n        margin-bottom: 16px;\r\n        overflow: hidden;\r\n        transition: all 0.35s ease;\r\n    }\r\n\r\n    .fontib-faq-item:hover {\r\n        box-shadow: 0 12px 32px rgba(0, 62, 164, 0.1);\r\n    }\r\n\r\n    .fontib-faq-btn {\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 22px 28px;\r\n        background: none;\r\n        border: none;\r\n        cursor: pointer;\r\n        text-align: left;\r\n        gap: 16px;\r\n    }\r\n\r\n    .fontib-faq-btn span {\r\n        font-size: 1rem;\r\n        font-weight: 700;\r\n        color: var(--fontib-feature-text);\r\n        flex: 1;\r\n    }\r\n\r\n    .fontib-faq-btn i {\r\n        font-size: 1.4rem;\r\n        color: var(--fontib-feature-primary);\r\n        transition: transform 0.35s ease;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .fontib-faq-item.open .fontib-faq-btn i {\r\n        transform: rotate(45deg);\r\n    }\r\n\r\n    .fontib-faq-body {\r\n        max-height: 0;\r\n        overflow: hidden;\r\n        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;\r\n        padding: 0 28px;\r\n    }\r\n\r\n    .fontib-faq-item.open .fontib-faq-body {\r\n        max-height: 300px;\r\n        padding: 0 28px 22px;\r\n    }\r\n\r\n    .fontib-faq-body p {\r\n        font-size: 0.92rem;\r\n        color: var(--fontib-feature-text-muted);\r\n        line-height: 1.7;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 FINAL CTA \u2500\u2500\u2500 *\/\r\n    .fontib-final-cta {\r\n        position: relative;\r\n        background: linear-gradient(160deg, #001a4d 0%, var(--fontib-feature-primary) 35%, var(--fontib-feature-secondary) 70%, #2b7ae8 100%);\r\n        overflow: hidden;\r\n        padding: 120px 0;\r\n    }\r\n\r\n    .fontib-final-cta::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -40%;\r\n        right: -20%;\r\n        width: 700px;\r\n        height: 700px;\r\n        background: radial-gradient(circle, rgba(43, 122, 232, 0.25) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-final-cta .hero-grid-bg {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image:\r\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\r\n        background-size: 60px 60px;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-cta-floating-letters {\r\n        position: absolute;\r\n        inset: 0;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .fontib-cta-letter {\r\n        position: absolute;\r\n        font-weight: 800;\r\n        color: rgba(255, 255, 255, 0.04);\r\n        font-size: 10rem;\r\n        line-height: 1;\r\n        animation: fontibFloat 10s ease-in-out infinite;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(1) {\r\n        top: 5%;\r\n        left: 5%;\r\n        animation-delay: 0s;\r\n        font-size: 12rem;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(2) {\r\n        top: 20%;\r\n        right: 10%;\r\n        animation-delay: -3s;\r\n        font-size: 8rem;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(3) {\r\n        bottom: 10%;\r\n        left: 15%;\r\n        animation-delay: -5s;\r\n        font-size: 10rem;\r\n    }\r\n\r\n    .fontib-cta-letter:nth-child(4) {\r\n        bottom: 25%;\r\n        right: 25%;\r\n        animation-delay: -2s;\r\n        font-size: 6rem;\r\n    }\r\n\r\n    .fontib-final-cta-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-final-cta-content h2 {\r\n        font-size: clamp(2rem, 4.5vw, 3.2rem);\r\n        font-weight: 800;\r\n        color: #fff;\r\n        margin-bottom: 18px;\r\n        letter-spacing: -0.02em;\r\n        line-height: 1.15;\r\n    }\r\n\r\n    .fontib-final-cta-content p {\r\n        font-size: 1.1rem;\r\n        color: rgba(255, 255, 255, 0.65);\r\n        max-width: 500px;\r\n        margin: 0 auto 40px;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .fontib-cta-stats {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 60px;\r\n        margin-top: 50px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .fontib-cta-stat {\r\n        text-align: center;\r\n    }\r\n\r\n    .fontib-cta-stat strong {\r\n        display: block;\r\n        font-size: 2.2rem;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        line-height: 1;\r\n        margin-bottom: 6px;\r\n    }\r\n\r\n    .fontib-cta-stat span {\r\n        font-size: 0.82rem;\r\n        color: rgba(255, 255, 255, 0.5);\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n    @media (max-width: 991px) {\r\n\r\n        .fontib-advanced-block,\r\n        .fontib-advanced-block.reverse {\r\n            flex-direction: column;\r\n            gap: 40px;\r\n        }\r\n\r\n        .fontib-hero-mockup {\r\n            transform: none;\r\n            margin-top: 50px;\r\n        }\r\n\r\n        .fontib-hero-mockup:hover {\r\n            transform: none;\r\n        }\r\n\r\n        .fontib-pricing-card.featured {\r\n            transform: none;\r\n        }\r\n\r\n        .fontib-pricing-card.featured:hover {\r\n            transform: translateY(-8px);\r\n        }\r\n\r\n        .fontib-mockup-controls {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .fontib-feature-section {\r\n            padding: 70px 0;\r\n        }\r\n\r\n        .fontib-hero-actions {\r\n            flex-direction: column;\r\n        }\r\n\r\n        .fontib-hero-actions a,\r\n        .fontib-hero-actions button {\r\n            text-align: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .fontib-cta-stats {\r\n            gap: 30px;\r\n        }\r\n\r\n        .fontib-mockup-sidebar {\r\n            display: none;\r\n        }\r\n\r\n        .fontib-presets-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"fontib-feature-wrapper\">\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 1. HERO SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-hero\">\r\n        <div class=\"hero-grid-bg\"><\/div>\r\n        <div class=\"fontib-floating-letters\">\r\n            <span class=\"fontib-floating-letter\">A<\/span>\r\n            <span class=\"fontib-floating-letter\">f<\/span>\r\n            <span class=\"fontib-floating-letter\">B<\/span>\r\n            <span class=\"fontib-floating-letter\">g<\/span>\r\n            <span class=\"fontib-floating-letter\">R<\/span>\r\n        <\/div>\r\n        <div class=\"mx-inner\">\r\n            <div class=\"row align-items-center\">\r\n                <div class=\"col-lg-6 fontib-hero-content\" data-aos=\"fade-right\" data-aos-duration=\"1000\">\r\n                    <div class=\"fontib-hero-badge\">\r\n                        <i class='bx bx-sparkles'><\/i>\r\n                        Features\r\n                    <\/div>\r\n                    <h1 class=\"fontib-hero-title\">\r\n                        Craft Professional Fonts<br>in <span>Minutes<\/span>\r\n                    <\/h1>\r\n                    <p class=\"fontib-hero-subtitle\">\r\n                        Design, customize, and export production-ready fonts entirely in your browser. No downloads,\r\n                        no installs \u2014 just powerful typography tools at your fingertips.\r\n                    <\/p>\r\n                    <div class=\"fontib-hero-actions\">\r\n                        <a href=\"\/\" class=\"fontib-btn-primary\">\r\n                            Get Started\r\n                            <i class='bx bx-arrow-right'><\/i>\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-6 fontib-hero-visual\" data-aos=\"fade-left\" data-aos-duration=\"1000\"\r\n                    data-aos-delay=\"200\">\r\n                    <div class=\"fontib-hero-mockup\">\r\n                        <div class=\"fontib-mockup-toolbar\">\r\n                            <div class=\"fontib-mockup-dot red\"><\/div>\r\n                            <div class=\"fontib-mockup-dot yellow\"><\/div>\r\n                            <div class=\"fontib-mockup-dot green\"><\/div>\r\n                            <span class=\"fontib-mockup-toolbar-title\">Fontib \u2014 Untitled Project<\/span>\r\n                        <\/div>\r\n                        <div class=\"fontib-mockup-body\">\r\n                            <div class=\"fontib-mockup-sidebar\">\r\n                                <div class=\"fontib-mockup-sidebar-item active\"><i class='bx bx-shape-triangle'><\/i>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-font'><\/i><\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-palette'><\/i><\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-layer'><\/i><\/div>\r\n                                <div class=\"fontib-mockup-sidebar-item\"><i class='bx bx-export'><\/i><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-mockup-canvas\">\r\n                                <div class=\"fontib-mockup-canvas-grid\"><\/div>\r\n                                <span class=\"fontib-mockup-canvas-letter\">Ag<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-mockup-controls\">\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Weight<\/label>\r\n                                    <div class=\"fontib-mockup-slider\">\r\n                                        <div class=\"fontib-mockup-slider-fill\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Width<\/label>\r\n                                    <div class=\"fontib-mockup-slider\">\r\n                                        <div class=\"fontib-mockup-slider-fill half\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Spacing<\/label>\r\n                                    <div class=\"fontib-mockup-slider\">\r\n                                        <div class=\"fontib-mockup-slider-fill long\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"fontib-mockup-control-group\">\r\n                                    <label>Fill Color<\/label>\r\n                                    <div class=\"fontib-mockup-color-row\">\r\n                                        <div class=\"fontib-mockup-color-swatch active\" style=\"background:#fff;\">\r\n                                        <\/div>\r\n                                        <div class=\"fontib-mockup-color-swatch\" style=\"background:#60b4ff;\"><\/div>\r\n                                        <div class=\"fontib-mockup-color-swatch\" style=\"background:#c792ea;\"><\/div>\r\n                                        <div class=\"fontib-mockup-color-swatch\" style=\"background:#f78c6c;\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 2. CORE FEATURES GRID \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-core-features\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-grid-alt'><\/i>\r\n                    Core Features\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Everything You Need to Build Fonts<\/h2>\r\n                <p class=\"fontib-section-desc\">Powerful yet intuitive tools designed to streamline every step of\r\n                    your font creation workflow.<\/p>\r\n            <\/div>\r\n            <div class=\"row g-4\">\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-grid-alt'><\/i>\r\n                        <\/div>\r\n                        <h3>Drag-and-Drop Editor<\/h3>\r\n                        <p>Intuitively position and adjust glyphs with simple drag-and-drop actions. No complex\r\n                            menus needed.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-show'><\/i>\r\n                        <\/div>\r\n                        <h3>Real-Time Preview<\/h3>\r\n                        <p>See every change instantly as you design. Preview across multiple sizes and contexts in\r\n                            real time.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-copy-alt'><\/i>\r\n                        <\/div>\r\n                        <h3>Reusable Templates<\/h3>\r\n                        <p>Save and reuse your styles, glyph sets, and configurations across multiple font projects\r\n                            effortlessly.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-3 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                    <div class=\"fontib-glass-card\">\r\n                        <div class=\"fontib-glass-card-icon\">\r\n                            <i class='bx bx-export'><\/i>\r\n                        <\/div>\r\n                        <h3>Multi-Platform Export<\/h3>\r\n                        <p>Export optimized font files for web (WOFF2), mobile (TTF\/OTF), and print with one click.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 3. ADVANCED FEATURE HIGHLIGHTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-advanced-features\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-cog'><\/i>\r\n                    Advanced Capabilities\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Professional-Grade Font Engineering<\/h2>\r\n                <p class=\"fontib-section-desc\">Go beyond basics with precision tools built for serious type\r\n                    designers and teams.<\/p>\r\n            <\/div>\r\n\r\n            <!-- Block 1: Layer Control -->\r\n            <div class=\"fontib-advanced-block\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\">\r\n                        <div class=\"layer-demo\">\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #003EA4, #185cc9);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Stroke Outline<\/strong>\r\n                                    <span>2px \u00b7 Round Cap \u00b7 Outer<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #c792ea, #a855f7);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Fill Shape<\/strong>\r\n                                    <span>Solid \u00b7 #1a1a2e \u00b7 100%<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #f78c6c, #fbbf24);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Decoration Layer<\/strong>\r\n                                    <span>Serif \u00b7 Bracketed \u00b7 4pts<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle off\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-layer-item\">\r\n                                <div class=\"layer-color\"\r\n                                    style=\"background: linear-gradient(135deg, #60b4ff, #2dd4bf);\"><\/div>\r\n                                <div class=\"layer-info\">\r\n                                    <strong>Hinting Guides<\/strong>\r\n                                    <span>Auto-hint \u00b7 Grid Snap<\/span>\r\n                                <\/div>\r\n                                <div class=\"layer-toggle\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-layer'><\/i>\r\n                        Layer Control\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Multi-Step Editing & Layer Control<\/h2>\r\n                    <p class=\"fontib-section-desc\">Build complex glyphs with independent stroke, fill, and\r\n                        decoration layers. Toggle visibility, reorder, and edit each layer non-destructively.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>Unlimited layers per glyph with blend modes<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Non-destructive editing with full undo history<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Boolean operations: union, subtract, intersect<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Block 2: Smart Presets -->\r\n            <div class=\"fontib-advanced-block reverse\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\">\r\n                        <div class=\"fontib-presets-grid\">\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-family: serif;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Serif Classic<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item active-preset\">\r\n                                <div class=\"preset-letter\" style=\"font-family: sans-serif; font-weight: 300;\">Ag\r\n                                <\/div>\r\n                                <div class=\"preset-name\">Sans Light<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-family: monospace;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Mono Code<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-style: italic;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Italic Flow<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"font-weight: 900;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Display Bold<\/div>\r\n                            <\/div>\r\n                            <div class=\"fontib-preset-item\">\r\n                                <div class=\"preset-letter\" style=\"letter-spacing: 6px; font-size: 1.5rem;\">Ag<\/div>\r\n                                <div class=\"preset-name\">Wide Spaced<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-magic-wand'><\/i>\r\n                        Smart Presets\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Conditional Styling & Smart Presets<\/h2>\r\n                    <p class=\"fontib-section-desc\">Apply intelligent presets that automatically adjust stroke,\r\n                        spacing, and weight based on context. Create conditional rules for different uses.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>Context-aware styling for headings, body, and captions\r\n                        <\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Custom preset builder with rule-based conditions<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>One-click application across entire glyph sets<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Block 3: Integrations -->\r\n            <div class=\"fontib-advanced-block\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\">\r\n                        <div class=\"fontib-integrations-visual-inner\">\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bxl-figma'><\/i>\r\n                                <span>Figma<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bxl-adobe'><\/i>\r\n                                <span>Illustrator<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-palette'><\/i>\r\n                                <span>Canva<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-code-block'><\/i>\r\n                                <span>VS Code<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-globe'><\/i>\r\n                                <span>Webflow<\/span>\r\n                            <\/div>\r\n                            <div class=\"fontib-integration-icon-item\">\r\n                                <i class='bx bx-devices'><\/i>\r\n                                <span>Sketch<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-plug'><\/i>\r\n                        Design Tool Integration\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Seamless Integration with Your Tools<\/h2>\r\n                    <p class=\"fontib-section-desc\">Push fonts directly to Figma, Adobe Illustrator, Canva, and more.\r\n                        Keep your design workflow uninterrupted.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>One-click sync to Figma & Illustrator<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Canva font upload automation<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Auto-generate @font-face CSS snippets<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Block 4: API & Automation -->\r\n            <div class=\"fontib-advanced-block reverse\" data-aos=\"fade-up\" data-aos-duration=\"900\">\r\n                <div class=\"fontib-advanced-visual\">\r\n                    <div class=\"fontib-advanced-visual-inner\" style=\"padding: 24px;\">\r\n                        <div class=\"fontib-api-code-block\">\r\n                            <span class=\"code-comment\">\/\/ Generate font variant via API<\/span><br>\r\n                            <span class=\"code-keyword\">const<\/span> <span class=\"code-var\">response<\/span> = <span\r\n                                class=\"code-keyword\">await<\/span> <span class=\"code-method\">fetch<\/span>(<br>\r\n                            \u00a0\u00a0<span\r\n                                class=\"code-string\">'https:\/\/api.fontib.com\/v2\/generate'<\/span>,<br>\r\n                            \u00a0\u00a0{<br>\r\n                            \u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">method<\/span>: <span\r\n                                class=\"code-string\">'POST'<\/span>,<br>\r\n                            \u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">headers<\/span>: { <span\r\n                                class=\"code-string\">'Authorization'<\/span>: <span class=\"code-string\">`Bearer\r\n                                ${token}`<\/span> },<br>\r\n                            \u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">body<\/span>: <span\r\n                                class=\"code-method\">JSON.stringify<\/span>({<br>\r\n                            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">font_id<\/span>: <span\r\n                                class=\"code-string\">'fnt_8x2kP'<\/span>,<br>\r\n                            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">weight<\/span>: <span\r\n                                class=\"code-string\">'700'<\/span>,<br>\r\n                            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"code-var\">format<\/span>: <span\r\n                                class=\"code-string\">'woff2'<\/span><br>\r\n                            \u00a0\u00a0\u00a0\u00a0})<br>\r\n                            \u00a0\u00a0}<br>\r\n                            );\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fontib-advanced-text\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-code'><\/i>\r\n                        API & Automation\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">REST API & Webhook Support<\/h2>\r\n                    <p class=\"fontib-section-desc\">Automate font generation, variant creation, and export workflows\r\n                        with our developer-friendly REST API and webhook system.<\/p>\r\n                    <ul class=\"feature-list\">\r\n                        <li><i class='bx bx-check-circle'><\/i>Full REST API with comprehensive documentation<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>Webhooks for build complete & error events<\/li>\r\n                        <li><i class='bx bx-check-circle'><\/i>CI\/CD pipeline integration for automated builds<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 4. INTEGRATIONS CAROUSEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-integrations-section\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-link'><\/i>\r\n                    Integrations\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Connects With Your Stack<\/h2>\r\n                <p class=\"fontib-section-desc\">Fontib plays nicely with the tools you already use every day.\r\n                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div style=\"overflow: hidden; padding: 10px 0;\">\r\n            <div class=\"fontib-integrations-carousel\">\r\n                <!-- First set -->\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-figma'><\/i><span>Figma<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-adobe'><\/i><span>Illustrator<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-palette'><\/i><span>Canva<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-slack'><\/i><span>Slack<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-envelope'><\/i><span>Mailchimp<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-bot'><\/i><span>Zapier<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-font'><\/i><span>Google Fonts<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-code-block'><\/i><span>VS Code<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-globe'><\/i><span>Webflow<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-devices'><\/i><span>Sketch<\/span><\/div>\r\n                <!-- Duplicate for seamless loop -->\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-figma'><\/i><span>Figma<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-adobe'><\/i><span>Illustrator<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-palette'><\/i><span>Canva<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bxl-slack'><\/i><span>Slack<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-envelope'><\/i><span>Mailchimp<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-bot'><\/i><span>Zapier<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-font'><\/i><span>Google Fonts<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-code-block'><\/i><span>VS Code<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-globe'><\/i><span>Webflow<\/span><\/div>\r\n                <div class=\"fontib-integration-logo-card\"><i class='bx bx-devices'><\/i><span>Sketch<\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 5. TESTIMONIALS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-testimonials\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-section-header-center\" data-aos=\"fade-up\" data-aos-duration=\"800\">\r\n                <div class=\"fontib-section-label\">\r\n                    <i class='bx bx-chat'><\/i>\r\n                    Testimonials\r\n                <\/div>\r\n                <h2 class=\"fontib-section-title\">Loved by Type Designers Worldwide<\/h2>\r\n                <p class=\"fontib-section-desc\">See what professionals and teams are saying about their experience\r\n                    with Fontib.<\/p>\r\n            <\/div>\r\n            <div class=\"row g-4\">\r\n                <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\r\n                    <div class=\"fontib-testimonial-card\">\r\n                        <div class=\"fontib-testimonial-stars\">\r\n                            <i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i\r\n                                class='bx bx-star'><\/i><i class='bx bx-star'><\/i>\r\n                        <\/div>\r\n                        <blockquote>\"Fontib completely changed how our studio approaches custom type. What\r\n                            used to take weeks now takes days \u2014 the layer system is genius.\"<\/blockquote>\r\n                        <div class=\"fontib-testimonial-author\">\r\n                            <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/profile1.jpg\"\r\n                                alt=\"Sarah Mitchell\" class=\"fontib-testimonial-avatar\">\r\n                            <div class=\"fontib-testimonial-author-info\">\r\n                                <strong>Sarah Mitchell<\/strong>\r\n                                <span>Creative Director, TypeCraft Studio<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"fontib-testimonial-card\">\r\n                        <div class=\"fontib-testimonial-stars\">\r\n                            <i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i\r\n                                class='bx bx-star'><\/i><i class='bx bx-star'><\/i>\r\n                        <\/div>\r\n                        <blockquote>\"The API integration alone is worth the subscription. We automated our entire\r\n                            font pipeline and it just works. Incredibly well-designed tool.\"<\/blockquote>\r\n                        <div class=\"fontib-testimonial-author\">\r\n                            <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/profile2.jpg\" alt=\"James Park\"\r\n                                class=\"fontib-testimonial-avatar\">\r\n                            <div class=\"fontib-testimonial-author-info\">\r\n                                <strong>James Park<\/strong>\r\n                                <span>Lead Engineer, DesignSystems Inc.<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"fontib-testimonial-card\">\r\n                        <div class=\"fontib-testimonial-stars\">\r\n                            <i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i class='bx bx-star'><\/i><i\r\n                                class='bx bx-star'><\/i><i class='bx bx-star'><\/i>\r\n                        <\/div>\r\n                        <blockquote>\"As a solo designer, I needed something powerful but not overwhelming. Font\r\n                            Builder nails that balance. The smart presets save me hours on every project.\"\r\n                        <\/blockquote>\r\n                        <div class=\"fontib-testimonial-author\">\r\n                            <img decoding=\"async\" src=\"https:\/\/fontib.com\/wp-content\/uploads\/2026\/05\/profile3.jpg\" alt=\"Elena Rossi\"\r\n                                class=\"fontib-testimonial-avatar\">\r\n                            <div class=\"fontib-testimonial-author-info\">\r\n                                <strong>Elena Rossi<\/strong>\r\n                                <span>Freelance Type Designer<\/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    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 7. FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-feature-section fontib-faq\">\r\n        <div class=\"mx-inner\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-5\" data-aos=\"fade-right\" data-aos-duration=\"800\">\r\n                    <div class=\"fontib-section-label\">\r\n                        <i class='bx bx-help-circle'><\/i>\r\n                        FAQ\r\n                    <\/div>\r\n                    <h2 class=\"fontib-section-title\">Frequently Asked Questions<\/h2>\r\n                    <p class=\"fontib-section-desc\">Got questions? We've got answers. If you don't find what you're\r\n                        looking for, reach out to our support team.<\/p>\r\n                <\/div>\r\n                <div class=\"col-lg-7\" data-aos=\"fade-left\" data-aos-duration=\"800\" data-aos-delay=\"200\">\r\n                    <div class=\"fontib-faq-item open\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>What font formats can I export?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Fontib supports exporting to WOFF2, WOFF, TTF, OTF, EOT, and SVG font formats.\r\n                                You can export multiple formats simultaneously with a single click, and each format\r\n                                is optimized for its intended use case \u2014 web, mobile, or print.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Is my font data secure in the cloud?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Absolutely. All font projects are encrypted at rest (AES-256) and in transit (TLS\r\n                                1.3). We are SOC 2 Type II certified, and your data is stored in isolated\r\n                                environments. You can also enable two-factor authentication and IP whitelisting for\r\n                                extra security.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Which browsers and devices are supported?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Fontib works in all modern browsers \u2014 Chrome, Firefox, Safari, and Edge (latest\r\n                                two versions). It's fully responsive and works on desktop, tablet, and mobile\r\n                                devices. For the best experience, we recommend a screen size of 1280px or larger\r\n                                when designing complex glyphs.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Can I use Fontib offline?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>The Professional and Enterprise plans include offline mode via our progressive web\r\n                                app (PWA). Your projects sync automatically when you reconnect. Note that some\r\n                                features like API access and real-time collaboration require an internet connection.\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"fontib-faq-item\">\r\n                        <button class=\"fontib-faq-btn\" onclick=\"toggleFaq(this)\">\r\n                            <span>Do I own the fonts I create?<\/span>\r\n                            <i class='bx bx-plus'><\/i>\r\n                        <\/button>\r\n                        <div class=\"fontib-faq-body\">\r\n                            <p>Yes, 100%. You retain full intellectual property rights to all fonts you create with\r\n                                Fontib. We do not claim any ownership or licensing rights over your work.\r\n                                Export and use your fonts commercially without any restrictions.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 8. FINAL CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"fontib-final-cta\">\r\n        <div class=\"hero-grid-bg\"><\/div>\r\n        <div class=\"fontib-cta-floating-letters\">\r\n            <span class=\"fontib-cta-letter\">A<\/span>\r\n            <span class=\"fontib-cta-letter\">b<\/span>\r\n            <span class=\"fontib-cta-letter\">K<\/span>\r\n            <span class=\"fontib-cta-letter\">f<\/span>\r\n        <\/div>\r\n        <div class=\"mx-inner\">\r\n            <div class=\"fontib-final-cta-content\" data-aos=\"zoom-in\" data-aos-duration=\"1000\">\r\n                <h2>Ready to Build Your Next Font?<\/h2>\r\n                <p>Join thousands of designers who are crafting beautiful typefaces faster than ever. Start your\r\n                    free trial today \u2014 no credit card required.<\/p>\r\n                <a href=\"#\" class=\"fontib-btn-primary\" style=\"font-size: 1.1rem; padding: 18px 48px;\">\r\n                    Start Free Trial\r\n                    <i class='bx bx-arrow-right'><\/i>\r\n                <\/a>\r\n                <div class=\"fontib-cta-stats\">\r\n                    <div class=\"fontib-cta-stat\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                        <strong>12K+<\/strong>\r\n                        <span>Active Designers<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-cta-stat\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <strong>48K+<\/strong>\r\n                        <span>Fonts Created<\/span>\r\n                    <\/div>\r\n                    <div class=\"fontib-cta-stat\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <strong>4.9\/5<\/strong>\r\n                        <span>Average Rating<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n    \/\/ FAQ Toggle\r\n    function toggleFaq(btn) {\r\n        const item = btn.closest('.fontib-faq-item');\r\n        const wasOpen = item.classList.contains('open');\r\n\r\n        \/\/ Close all\r\n        document.querySelectorAll('.fontib-faq-item').forEach(function (el) {\r\n            el.classList.remove('open');\r\n        });\r\n\r\n        \/\/ Toggle clicked\r\n        if (!wasOpen) {\r\n            item.classList.add('open');\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-3661","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3661","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=3661"}],"version-history":[{"count":4,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3661\/revisions"}],"predecessor-version":[{"id":3708,"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/pages\/3661\/revisions\/3708"}],"wp:attachment":[{"href":"https:\/\/fontib.com\/wp-json\/wp\/v2\/media?parent=3661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}