{"id":5223,"date":"2026-05-16T06:57:39","date_gmt":"2026-05-16T06:57:39","guid":{"rendered":"https:\/\/fonttor.com\/?page_id=5223"},"modified":"2026-05-24T03:56:54","modified_gmt":"2026-05-24T03:56:54","slug":"fonttor-home","status":"publish","type":"page","link":"https:\/\/fonttor.com\/","title":{"rendered":"Fonttor Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5223\" class=\"elementor elementor-5223\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8c6d65 e-con-full e-flex e-con e-parent\" data-id=\"f8c6d65\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0842b2 elementor-widget elementor-widget-shortcode\" data-id=\"f0842b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"ftor-homepage\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n<style>\r\n*,.fd-wrap-root *{box-sizing:border-box;margin:0;padding:0}\r\n.fd-wrap-root{font-family:'DM Sans',sans-serif;min-height:100vh;background:#f0f4f8;background-image: radial-gradient(circle at 82% 40%, rgb(16 255 179 \/ 28%), transparent 30%), linear-gradient(\r\n \r\n180deg, rgb(216 249 236 \/ 58%), rgb(95 152 136 \/ 0%));position:relative;overflow-x:hidden}\r\n\r\n\/* HEADER *\/\r\n.fd-wrap-header{text-align:center;padding:48px 20px 32px;position:relative}\r\n.fd-wrap-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}\r\n.fd-wrap-logo-badge{background:linear-gradient(135deg,#126A67,#1a9b96);color:#fff;font-size:10px;font-weight:700;letter-spacing:2px;padding:4px 10px;border-radius:20px;text-transform:uppercase;font-family:'DM Sans',sans-serif}\r\n.fd-wrap-h1{font-family:'Syne',sans-serif;font-size:clamp(32px,5vw,56px);font-weight:800;color:#0d1f2d;line-height:1.1;margin-bottom:10px}\r\n.fd-wrap-h1 .fd-wrap-accent{color:#126A67}\r\n.fd-wrap-subtitle{font-size:15px;color:#5a7184;font-weight:400;max-width:520px;margin:0 auto 24px;line-height:1.6}\r\n.fd-wrap-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}\r\n.fd-btn-cta-primary{background:linear-gradient(135deg,#126A67,#1db8b2);color:#fff;border:none;padding:12px 28px;border-radius:40px;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .25s;box-shadow:0 4px 20px rgba(18,106,103,0.3);display:flex;align-items:center;gap:8px}\r\n.fd-btn-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(18,106,103,0.4)}\r\n.fd-btn-cta-secondary{background:#fff;color:#126A67;border:1.5px solid rgba(18,106,103,0.25);padding:12px 24px;border-radius:40px;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .25s}\r\n.fd-btn-cta-secondary:hover{background:#f0faf9;border-color:#126A67; color:#126A67; transform:translateY(-2px)}\r\n\r\n\/* MAIN PANEL *\/\r\n.fd-panel-main{max-width:1320px;margin:0 auto;padding:0 20px 60px}\r\n\r\n\/* INPUT SECTION *\/\r\n.fd-box-input-section{background:#ffffff;border-radius:24px;padding:32px;margin-bottom:28px;box-shadow:0 10px 40px rgba(18,106,103,0.08),0 4px 16px rgba(0,0,0,0.04);position:relative;overflow:hidden;border:1.5px solid rgba(18,106,103,0.1)}\r\n.fd-box-input-section::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:rgba(8,100,96,0.03);border-radius:50%}\r\n.fd-box-input-section::after{content:'';position:absolute;bottom:-40px;left:-40px;width:150px;height:150px;background:rgba(8,100,96,0.03);border-radius:50%}\r\n.fd-wrap-input-label{color:#086460;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}\r\n.fd-wrap-input-label-dot{width:6px;height:6px;background:#086460;border-radius:50%;display:inline-block}\r\n.fd-input-textarea{width:100%;background:#f8faf9;border:1.5px solid rgba(8,100,96,0.2);border-radius:14px;padding:18px 20px;font-size:17px;font-family:'DM Sans',sans-serif;color:#086460;resize:none;min-height:90px;transition:all .25s;outline:none}\r\n.fd-input-textarea::placeholder{color:rgba(8,100,96,0.4)}\r\n.fd-input-textarea:focus{border-color:#086460;background:#fff;box-shadow:0 0 0 3px rgba(8,100,96,0.1)}\r\n.fd-wrap-controls{display:flex;align-items:center;justify-content:space-between;margin-top:18px;flex-wrap:wrap;gap:12px;position:relative;z-index:1}\r\n.fd-wrap-filter-tabs{display:flex;gap:8px;flex-wrap:wrap}\r\n.fd-btn-tab{background:#fff;color:#086460;border:1.5px solid rgba(8,100,96,0.2);padding:7px 16px;border-radius:20px;font-size:12px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;letter-spacing:.3px}\r\n.fd-btn-tab:hover{background:#f0fdfa;border-color:#086460;color:#086460}\r\n.fd-btn-tab.fd-btn-tab--active{background:#086460;color:#fff;border-color:#086460;box-shadow:0 4px 14px rgba(8,100,96,0.25)}\r\n.fd-wrap-meta-row{display:flex;align-items:center;gap:10px}\r\n.fd-wrap-char-count{color:#086460;font-size:12px;font-weight:600;background:#f0fdfa;padding:5px 12px;border-radius:20px;min-width:90px;text-align:center;border:1px solid rgba(8,100,96,0.1)}\r\n.fd-btn-clear{background:#f0fdfa;color:#086460;border:1.5px solid rgba(8,100,96,0.2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:13px;transition:all .2s;display:flex;align-items:center;justify-content:center}\r\n.fd-btn-clear:hover{background:rgba(255,59,48,0.1);border-color:rgba(255,59,48,0.4);color:#ef4444}\r\n.fd-btn-random{background:#f0fdfa;color:#086460;border:1.5px solid rgba(8,100,96,0.2);padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}\r\n.fd-btn-random:hover{background:#e6fffa;border-color:#086460}\r\n\r\n\/* FONTS SECTION *\/\r\n.fd-box-fonts-section{background:#fff;border-radius:24px;padding:28px;box-shadow:0 8px 40px rgba(18,106,103,0.05),0 2px 8px rgba(0,0,0,0.02);border:1.5px solid rgba(18,106,103,0.08);position:relative;overflow:hidden}\r\n.fd-box-fonts-section::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#086460,#1db8b2,#7de8e4,#086460);background-size:200% 100%;animation:fd-shimmer-line 3s linear infinite}\r\n@keyframes fd-shimmer-line{0%{background-position:0% 0%}100%{background-position:200% 0%}}\r\n.fd-wrap-section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}\r\n.fd-wrap-section-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:#086460}\r\n.fd-wrap-section-title span{color:#126A67}\r\n.fd-wrap-section-badge{background:linear-gradient(135deg,#086460,#1db8b2);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.5px}\r\n\r\n\/* GRID *\/\r\n.fd-grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\r\n\r\n\/* RESPONSIVE MEDIA QUERIES *\/\r\n@media(max-width:992px){\r\n    .fd-grid-container{grid-template-columns:repeat(2,1fr)}\r\n}\r\n@media(max-width:600px){\r\n    .fd-grid-container{grid-template-columns:1fr}\r\n    .fd-box-input-section{padding:20px 16px}\r\n    .fd-box-fonts-section{padding:20px 14px}\r\n    .fd-panel-main{padding:0 14px 40px}\r\n    .fd-wrap-stats{gap:10px;flex-wrap:wrap}\r\n    .fd-box-stat{padding:10px 12px;min-width:45%}\r\n}\r\n@media(max-width:375px){\r\n    .fd-wrap-cta-row{flex-direction:column;align-items:center}\r\n    .fd-wrap-stats{gap:8px}\r\n    .fd-box-stat{min-width:100%}\r\n}\r\n\r\n\/* CARDS - NEW DESIGN *\/\r\n.fd-card-font{\r\n    border-radius:12px;\r\n    padding:16px;\r\n    cursor:pointer;\r\n    transition:all .3s cubic-bezier(.25,.8,.25,1);\r\n    position:relative;\r\n    overflow:hidden;\r\n    background:#ffffff;\r\n    border:1px solid #e2e8f0;\r\n    border-top:4px solid #086460; \/* Distinctive top border *\/\r\n    box-shadow:0 2px 6px rgba(0,0,0,0.02);\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:space-between;\r\n}\r\n.fd-card-font:hover{\r\n    transform:translateY(-5px);\r\n    box-shadow:0 12px 24px rgba(8,100,96,0.12);\r\n    border-color:#086460;\r\n}\r\n\r\n\/* Top Row: Label & Actions *\/\r\n.fd-card-top{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    margin-bottom:12px;\r\n}\r\n.fd-card-label{\r\n    background:#f0fdfa;\r\n    color:#086460;\r\n    font-size:9px;\r\n    font-weight:800;\r\n    letter-spacing:0.8px;\r\n    padding:4px 8px;\r\n    border-radius:6px;\r\n    text-transform:uppercase;\r\n    border:1px solid rgba(8,100,96,0.1);\r\n}\r\n.fd-card-actions{display:flex;gap:8px}\r\n\r\n\/* Preview Area *\/\r\n.fd-card-preview{\r\n    min-height:50px;\r\n    display:flex;\r\n    align-items:center;\r\n    margin-bottom:16px;\r\n    padding:4px 0;\r\n}\r\n.fd-card-preview-text{\r\n    font-size:17px;\r\n    line-height:1.3;\r\n    word-break:break-word;\r\n    overflow-wrap:anywhere;\r\n    width:100%;\r\n    color:#1a202c; \/* Darker preview text for contrast *\/\r\n    font-weight:500;\r\n    text-align: center;\r\n}\r\n\r\n\/* Bottom Row: Name & Badge *\/\r\n.fd-card-bottom{\r\n    margin-top:auto;\r\n    padding-top:12px;\r\n    border-top:1px dashed #e2e8f0; \/* Dashed separator line *\/\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n}\r\n.fd-card-fname{\r\n    font-family:'Syne',sans-serif; \/* Distinct font for name *\/\r\n    font-size:12px;\r\n    font-weight:800;\r\n    color:#086460;\r\n    text-transform:capitalize;\r\n    letter-spacing:0.5px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* New HOT Badge Style *\/\r\n.fd-hot-badge{\r\n    background:linear-gradient(135deg,#ff6b6b,#ee5253);\r\n    color:#fff;\r\n    font-size:9px;\r\n    font-weight:800;\r\n    letter-spacing:0.5px;\r\n    padding:3px 10px;\r\n    border-radius:20px;\r\n    text-transform:uppercase;\r\n    box-shadow:0 2px 6px rgba(238,82,83,0.3);\r\n    display:flex;\r\n    align-items:center;\r\n    gap:4px;\r\n}\r\n\r\n\/* Action Icons *\/\r\n.fd-action-icon{\r\n    width:30px;\r\n    height:30px;\r\n    border-radius:8px; \/* Slightly squarer for modern look *\/\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    font-size:13px;\r\n    cursor:pointer;\r\n    transition:all .2s;\r\n    background:#f8fafc;\r\n    color:#64748b;\r\n    border:1px solid #e2e8f0;\r\n}\r\n.fd-action-icon:hover{transform:scale(1.1)}\r\n.fd-action-icon.fd-action--copy:hover{background:#086460;color:#fff;border-color:#086460}\r\n.fd-action-icon.fd-action--love:hover{background:#e05575;color:#fff;border-color:#e05575}\r\n.fd-action-icon.fd-action--love.fd-loved{background:#e05575;color:#fff;border-color:#e05575;box-shadow:0 4px 10px rgba(224,85,117,0.3)}\r\n\r\n\/* Hidden State *\/\r\n.fd-card-font.fd-card--hidden{display:none}\r\n\r\n\/* LOAD MORE *\/\r\n.fd-wrap-load-more{text-align:center;margin-top:26px}\r\n.fd-btn-load-more{background:linear-gradient(135deg,#086460,#1db8b2);color:#fff;border:none;padding:13px 36px;border-radius:40px;font-size:14px;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .25s;box-shadow:0 6px 24px rgba(8,100,96,0.25);display:inline-flex;align-items:center;gap:10px;letter-spacing:.3px}\r\n.fd-btn-load-more:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(8,100,96,0.35)}\r\n.fd-btn-load-more i{transition:transform .3s}\r\n.fd-btn-load-more:hover i{transform:translateY(2px)}\r\n\r\n\/* TOAST *\/\r\n.fd-overlay-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(100px);background:linear-gradient(135deg,#086460,#0d4e4c);color:#fff;padding:12px 24px;border-radius:40px;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;box-shadow:0 8px 32px rgba(8,100,96,0.35);z-index:9999;opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:none}\r\n.fd-overlay-toast.fd-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}\r\n\r\n\/* SUGGESTIONS *\/\r\n.fd-wrap-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:1}\r\n.fd-wrap-suggest-label{font-size:11px;color:#086460;font-weight:600;opacity:0.7;align-self:center}\r\n.fd-btn-suggest{background:#f0fdfa;color:#086460;border:1px solid rgba(8,100,96,0.2);padding:5px 13px;border-radius:20px;font-size:11px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s}\r\n.fd-btn-suggest:hover{background:#e6fffa;border-color:#086460;color:#086460}\r\n\r\n\/* SHIMMER *\/\r\n@keyframes fd-shimmer{0%{opacity:.4}50%{opacity:.8}100%{opacity:.4}}\r\n.fd-card-shimmer{animation:fd-shimmer 1.5s ease infinite}\r\n\r\n\/* FADE IN *\/\r\n@keyframes fd-fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}\r\n.fd-card-font{animation:fd-fadeUp .35s ease both}\r\n\r\n\/* STATS ROW *\/\r\n.fd-wrap-stats{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}\r\n.fd-box-stat{background:#fff;border-radius:12px;padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 12px rgba(18,106,103,0.08);border:1px solid rgba(18,106,103,0.08);flex:1;min-width:120px}\r\n.fd-box-stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:linear-gradient(135deg,#086460,#1db8b2);color:#fff;flex-shrink:0}\r\n.fd-box-stat-info{}\r\n.fd-box-stat-num{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:#086460;line-height:1}\r\n.fd-box-stat-lbl{font-size:11px;color:#7a98a8;font-weight:500;margin-top:2px}\r\n<\/style>\r\n\r\n<div class=\"fd-wrap-root\">\r\n\r\n  <!-- HEADER -->\r\n  <div class=\"fd-wrap-header\">\r\n    <div class=\"fd-wrap-logo\">\r\n      <div class=\"fd-wrap-logo-badge\">\u2726 Fonttor<\/div>\r\n    <\/div>\r\n    <h1 class=\"fd-wrap-h1\">Font <span class=\"fd-wrap-accent\">Generator<\/span><\/h1>\r\n    <div class=\"fd-wrap-subtitle\">Create stunning, unique typography styles for any project. 50+ font styles, instant copy, real-time preview.<\/div>\r\n    <div class=\"fd-wrap-cta-row\">\r\n      <button class=\"fd-btn-cta-primary\" onclick=\"document.getElementById('fdTextInput').focus()\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Start Creating<\/button>\r\n      <button class=\"fd-btn-cta-secondary\" onclick=\"setRandomStyle()\"><i class=\"fa-solid fa-shuffle\"><\/i> Random Style<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- MAIN -->\r\n  <div class=\"fd-panel-main\" id=\"font-generator-tool\">\r\n\r\n    <!-- INPUT SECTION -->\r\n    <div class=\"fd-box-input-section\">\r\n      <div class=\"fd-wrap-input-label\"><span class=\"fd-wrap-input-label-dot\"><\/span> Type Your Text<\/div>\r\n      <textarea class=\"fd-input-textarea\" id=\"fdTextInput\" placeholder=\"\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d\" rows=\"3\" maxlength=\"120\" oninput=\"onTextChange(this)\"><\/textarea>\r\n\r\n      <!-- Filter tabs + meta -->\r\n      <div class=\"fd-wrap-controls\">\r\n        <div class=\"fd-wrap-filter-tabs\" id=\"fdFilterTabs\">\r\n          <button class=\"fd-btn-tab fd-btn-tab--active\" onclick=\"filterFonts('all',this)\">All<\/button>\r\n          <button class=\"fd-btn-tab\" onclick=\"filterFonts('bold',this)\">Bold<\/button>\r\n          <button class=\"fd-btn-tab\" onclick=\"filterFonts('cursive',this)\">Cursive<\/button>\r\n          <button class=\"fd-btn-tab\" onclick=\"filterFonts('gothic',this)\">Gothic<\/button>\r\n          <button class=\"fd-btn-tab\" onclick=\"filterFonts('fancy',this)\">Fancy<\/button>\r\n          <button class=\"fd-btn-tab\" onclick=\"filterFonts('bubble',this)\">Bubble<\/button>\r\n          <button class=\"fd-btn-tab\" onclick=\"filterFonts('mono',this)\">Mono<\/button>\r\n        <\/div>\r\n        <div class=\"fd-wrap-meta-row\">\r\n          <div class=\"fd-wrap-char-count\" id=\"fdCharCount\">0 \/ 120<\/div>\r\n          <button class=\"fd-btn-random\" onclick=\"setRandomStyle()\"><i class=\"fa-solid fa-dice\"><\/i> Random<\/button>\r\n          <button class=\"fd-btn-clear\" onclick=\"clearText()\" title=\"Clear\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- AI Suggestions -->\r\n      <div class=\"fd-wrap-suggestions\">\r\n        <span class=\"fd-wrap-suggest-label\">Try:<\/span>\r\n        <button class=\"fd-btn-suggest\" onclick=\"setSuggest(this)\">Hello World<\/button>\r\n        <button class=\"fd-btn-suggest\" onclick=\"setSuggest(this)\">Love<\/button>\r\n        <button class=\"fd-btn-suggest\" onclick=\"setSuggest(this)\">Galaxy<\/button>\r\n        <button class=\"fd-btn-suggest\" onclick=\"setSuggest(this)\">Neon Dreams<\/button>\r\n        <button class=\"fd-btn-suggest\" onclick=\"setSuggest(this)\">\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d<\/button>\r\n        <button class=\"fd-btn-suggest\" onclick=\"setSuggest(this)\">Fire Storm<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- STATS ROW -->\r\n    <div class=\"fd-wrap-stats\">\r\n      <div class=\"fd-box-stat\">\r\n        <div class=\"fd-box-stat-icon\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n        <div class=\"fd-box-stat-info\"><div class=\"fd-box-stat-num\" id=\"fdStatFonts\">50<\/div><div class=\"fd-box-stat-lbl\">Font Styles<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"fd-box-stat\">\r\n        <div class=\"fd-box-stat-icon\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n        <div class=\"fd-box-stat-info\"><div class=\"fd-box-stat-num\" id=\"fdStatFavs\">0<\/div><div class=\"fd-box-stat-lbl\">Favorites<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"fd-box-stat\">\r\n        <div class=\"fd-box-stat-icon\"><i class=\"fa-solid fa-copy\"><\/i><\/div>\r\n        <div class=\"fd-box-stat-info\"><div class=\"fd-box-stat-num\" id=\"fdStatCopied\">0<\/div><div class=\"fd-box-stat-lbl\">Copied<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"fd-box-stat\">\r\n        <div class=\"fd-box-stat-icon\"><i class=\"fa-solid fa-fire\"><\/i><\/div>\r\n        <div class=\"fd-box-stat-info\"><div class=\"fd-box-stat-num\" id=\"fdStatFiltered\">50<\/div><div class=\"fd-box-stat-lbl\">Showing<\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- FONTS SECTION -->\r\n    <div class=\"fd-box-fonts-section\">\r\n      <div class=\"fd-wrap-section-top\">\r\n        <div class=\"fd-wrap-section-title\">Font <span>Styles<\/span> Preview<\/div>\r\n        <div class=\"fd-wrap-section-badge\" id=\"fdBadge\">50 Styles<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fd-grid-container\" id=\"fdGrid\"><\/div>\r\n\r\n      <div class=\"fd-wrap-load-more\" id=\"fdLoadMoreWrap\">\r\n        <button class=\"fd-btn-load-more\" id=\"fdLoadMoreBtn\" onclick=\"loadMore()\">\r\n          <i class=\"fa-solid fa-layer-group\"><\/i> Load More Fonts <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- TOAST -->\r\n  <div class=\"fd-overlay-toast\" id=\"fdToast\"><i class=\"fa-solid fa-check-circle\"><\/i> <span id=\"fdToastMsg\">Copied!<\/span><\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u2500\u2500\u2500 FONT CONVERTER ENGINE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst FD = {\r\n  maps: {\r\n    bold: ['\ud835\udc00','\ud835\udc01','\ud835\udc02','\ud835\udc03','\ud835\udc04','\ud835\udc05','\ud835\udc06','\ud835\udc07','\ud835\udc08','\ud835\udc09','\ud835\udc0a','\ud835\udc0b','\ud835\udc0c','\ud835\udc0d','\ud835\udc0e','\ud835\udc0f','\ud835\udc10','\ud835\udc11','\ud835\udc12','\ud835\udc13','\ud835\udc14','\ud835\udc15','\ud835\udc16','\ud835\udc17','\ud835\udc18','\ud835\udc19','\ud835\udc1a','\ud835\udc1b','\ud835\udc1c','\ud835\udc1d','\ud835\udc1e','\ud835\udc1f','\ud835\udc20','\ud835\udc21','\ud835\udc22','\ud835\udc23','\ud835\udc24','\ud835\udc25','\ud835\udc26','\ud835\udc27','\ud835\udc28','\ud835\udc29','\ud835\udc2a','\ud835\udc2b','\ud835\udc2c','\ud835\udc2d','\ud835\udc2e','\ud835\udc2f','\ud835\udc30','\ud835\udc31','\ud835\udc32','\ud835\udc33'],\r\n    italic: ['\ud835\ude08','\ud835\ude09','\ud835\ude0a','\ud835\ude0b','\ud835\ude0c','\ud835\ude0d','\ud835\ude0e','\ud835\ude0f','\ud835\ude10','\ud835\ude11','\ud835\ude12','\ud835\ude13','\ud835\ude14','\ud835\ude15','\ud835\ude16','\ud835\ude17','\ud835\ude18','\ud835\ude19','\ud835\ude1a','\ud835\ude1b','\ud835\ude1c','\ud835\ude1d','\ud835\ude1e','\ud835\ude1f','\ud835\ude20','\ud835\ude21','\ud835\ude22','\ud835\ude23','\ud835\ude24','\ud835\ude25','\ud835\ude26','\ud835\ude27','\ud835\ude28','\ud835\ude29','\ud835\ude2a','\ud835\ude2b','\ud835\ude2c','\ud835\ude2d','\ud835\ude2e','\ud835\ude2f','\ud835\ude30','\ud835\ude31','\ud835\ude32','\ud835\ude33','\ud835\ude34','\ud835\ude35','\ud835\ude36','\ud835\ude37','\ud835\ude38','\ud835\ude39','\ud835\ude3a','\ud835\ude3b'],\r\n    boldItalic: ['\ud835\ude3c','\ud835\ude3d','\ud835\ude3e','\ud835\ude3f','\ud835\ude40','\ud835\ude41','\ud835\ude42','\ud835\ude43','\ud835\ude44','\ud835\ude45','\ud835\ude46','\ud835\ude47','\ud835\ude48','\ud835\ude49','\ud835\ude4a','\ud835\ude4b','\ud835\ude4c','\ud835\ude4d','\ud835\ude4e','\ud835\ude4f','\ud835\ude50','\ud835\ude51','\ud835\ude52','\ud835\ude53','\ud835\ude54','\ud835\ude55','\ud835\ude56','\ud835\ude57','\ud835\ude58','\ud835\ude59','\ud835\ude5a','\ud835\ude5b','\ud835\ude5c','\ud835\ude5d','\ud835\ude5e','\ud835\ude5f','\ud835\ude60','\ud835\ude61','\ud835\ude62','\ud835\ude63','\ud835\ude64','\ud835\ude65','\ud835\ude66','\ud835\ude67','\ud835\ude68','\ud835\ude69','\ud835\ude6a','\ud835\ude6b','\ud835\ude6c','\ud835\ude6d','\ud835\ude6e','\ud835\ude6f'],\r\n    script: ['\ud835\udc9c','\ud835\udc35','\ud835\udc9e','\ud835\udc9f','\ud835\udc38','\ud835\udc39','\ud835\udca2','\ud835\udc3b','\ud835\udc3c','\ud835\udca5','\ud835\udca6','\ud835\udc3f','\ud835\udc40','\ud835\udca9','\ud835\udcaa','\ud835\udcab','\ud835\udcac','\ud835\udc45','\ud835\udcae','\ud835\udcaf','\ud835\udcb0','\ud835\udcb1','\ud835\udcb2','\ud835\udcb3','\ud835\udcb4','\ud835\udcb5','\ud835\udcb6','\ud835\udcb7','\ud835\udcb8','\ud835\udcb9','\ud835\udc52','\ud835\udcbb','\ud835\udc54','\ud835\udcbd','\ud835\udcbe','\ud835\udcbf','\ud835\udcc0','\ud835\udcc1','\ud835\udcc2','\ud835\udcc3','\ud835\udc5c','\ud835\udcc5','\ud835\udcc6','\ud835\udcc7','\ud835\udcc8','\ud835\udcc9','\ud835\udcca','\ud835\udccb','\ud835\udccc','\ud835\udccd','\ud835\udcce','\ud835\udccf'],\r\n    boldScript: ['\ud835\udcd0','\ud835\udcd1','\ud835\udcd2','\ud835\udcd3','\ud835\udcd4','\ud835\udcd5','\ud835\udcd6','\ud835\udcd7','\ud835\udcd8','\ud835\udcd9','\ud835\udcda','\ud835\udcdb','\ud835\udcdc','\ud835\udcdd','\ud835\udcde','\ud835\udcdf','\ud835\udce0','\ud835\udce1','\ud835\udce2','\ud835\udce3','\ud835\udce4','\ud835\udce5','\ud835\udce6','\ud835\udce7','\ud835\udce8','\ud835\udce9','\ud835\udcea','\ud835\udceb','\ud835\udcec','\ud835\udced','\ud835\udcee','\ud835\udcef','\ud835\udcf0','\ud835\udcf1','\ud835\udcf2','\ud835\udcf3','\ud835\udcf4','\ud835\udcf5','\ud835\udcf6','\ud835\udcf7','\ud835\udcf8','\ud835\udcf9','\ud835\udcfa','\ud835\udcfb','\ud835\udcfc','\ud835\udcfd','\ud835\udcfe','\ud835\udcff','\ud835\udd00','\ud835\udd01','\ud835\udd02','\ud835\udd03'],\r\n    fraktur: ['\ud835\udd04','\ud835\udd05','\u212d','\ud835\udd07','\ud835\udd08','\ud835\udd09','\ud835\udd0a','\u210c','\u2111','\ud835\udd0d','\ud835\udd0e','\ud835\udd0f','\ud835\udd10','\ud835\udd11','\ud835\udd12','\ud835\udd13','\ud835\udd14','\u211c','\ud835\udd16','\ud835\udd17','\ud835\udd18','\ud835\udd19','\ud835\udd1a','\ud835\udd1b','\ud835\udd1c','\u2128','\ud835\udd1e','\ud835\udd1f','\ud835\udd20','\ud835\udd21','\ud835\udd22','\ud835\udd23','\ud835\udd24','\ud835\udd25','\ud835\udd26','\ud835\udd27','\ud835\udd28','\ud835\udd29','\ud835\udd2a','\ud835\udd2b','\ud835\udd2c','\ud835\udd2d','\ud835\udd2e','\ud835\udd2f','\ud835\udd30','\ud835\udd31','\ud835\udd32','\ud835\udd33','\ud835\udd34','\ud835\udd35','\ud835\udd36','\ud835\udd37'],\r\n    boldFraktur: ['\ud835\udd6c','\ud835\udd6d','\ud835\udd6e','\ud835\udd6f','\ud835\udd70','\ud835\udd71','\ud835\udd72','\ud835\udd73','\ud835\udd74','\ud835\udd75','\ud835\udd76','\ud835\udd77','\ud835\udd78','\ud835\udd79','\ud835\udd7a','\ud835\udd7b','\ud835\udd7c','\ud835\udd7d','\ud835\udd7e','\ud835\udd7f','\ud835\udd80','\ud835\udd81','\ud835\udd82','\ud835\udd83','\ud835\udd84','\ud835\udd85','\ud835\udd86','\ud835\udd87','\ud835\udd88','\ud835\udd89','\ud835\udd8a','\ud835\udd8b','\ud835\udd8c','\ud835\udd8d','\ud835\udd8e','\ud835\udd8f','\ud835\udd90','\ud835\udd91','\ud835\udd92','\ud835\udd93','\ud835\udd94','\ud835\udd95','\ud835\udd96','\ud835\udd97','\ud835\udd98','\ud835\udd99','\ud835\udd9a','\ud835\udd9b','\ud835\udd9c','\ud835\udd9d','\ud835\udd9e','\ud835\udd9f'],\r\n    doubleStruck: ['\ud835\udd38','\ud835\udd39','\u2102','\ud835\udd3b','\ud835\udd3c','\ud835\udd3d','\ud835\udd3e','\u210d','\ud835\udd40','\ud835\udd41','\ud835\udd42','\ud835\udd43','\ud835\udd44','\u2115','\ud835\udd46','\u2119','\u211a','\u211d','\ud835\udd4a','\ud835\udd4b','\ud835\udd4c','\ud835\udd4d','\ud835\udd4e','\ud835\udd4f','\ud835\udd50','\u2124','\ud835\udd52','\ud835\udd53','\ud835\udd54','\ud835\udd55','\ud835\udd56','\ud835\udd57','\ud835\udd58','\ud835\udd59','\ud835\udd5a','\ud835\udd5b','\ud835\udd5c','\ud835\udd5d','\ud835\udd5e','\ud835\udd5f','\ud835\udd60','\ud835\udd61','\ud835\udd62','\ud835\udd63','\ud835\udd64','\ud835\udd65','\ud835\udd66','\ud835\udd67','\ud835\udd68','\ud835\udd69','\ud835\udd6a','\ud835\udd6b'],\r\n    mono: ['\ud835\ude70','\ud835\ude71','\ud835\ude72','\ud835\ude73','\ud835\ude74','\ud835\ude75','\ud835\ude76','\ud835\ude77','\ud835\ude78','\ud835\ude79','\ud835\ude7a','\ud835\ude7b','\ud835\ude7c','\ud835\ude7d','\ud835\ude7e','\ud835\ude7f','\ud835\ude80','\ud835\ude81','\ud835\ude82','\ud835\ude83','\ud835\ude84','\ud835\ude85','\ud835\ude86','\ud835\ude87','\ud835\ude88','\ud835\ude89','\ud835\ude8a','\ud835\ude8b','\ud835\ude8c','\ud835\ude8d','\ud835\ude8e','\ud835\ude8f','\ud835\ude90','\ud835\ude91','\ud835\ude92','\ud835\ude93','\ud835\ude94','\ud835\ude95','\ud835\ude96','\ud835\ude97','\ud835\ude98','\ud835\ude99','\ud835\ude9a','\ud835\ude9b','\ud835\ude9c','\ud835\ude9d','\ud835\ude9e','\ud835\ude9f','\ud835\udea0','\ud835\udea1','\ud835\udea2','\ud835\udea3'],\r\n    sansSerif: ['\ud835\udda0','\ud835\udda1','\ud835\udda2','\ud835\udda3','\ud835\udda4','\ud835\udda5','\ud835\udda6','\ud835\udda7','\ud835\udda8','\ud835\udda9','\ud835\uddaa','\ud835\uddab','\ud835\uddac','\ud835\uddad','\ud835\uddae','\ud835\uddaf','\ud835\uddb0','\ud835\uddb1','\ud835\uddb2','\ud835\uddb3','\ud835\uddb4','\ud835\uddb5','\ud835\uddb6','\ud835\uddb7','\ud835\uddb8','\ud835\uddb9','\ud835\uddba','\ud835\uddbb','\ud835\uddbc','\ud835\uddbd','\ud835\uddbe','\ud835\uddbf','\ud835\uddc0','\ud835\uddc1','\ud835\uddc2','\ud835\uddc3','\ud835\uddc4','\ud835\uddc5','\ud835\uddc6','\ud835\uddc7','\ud835\uddc8','\ud835\uddc9','\ud835\uddca','\ud835\uddcb','\ud835\uddcc','\ud835\uddcd','\ud835\uddce','\ud835\uddcf','\ud835\uddd0','\ud835\uddd1','\ud835\uddd2','\ud835\uddd3'],\r\n    sansBold: ['\ud835\uddd4','\ud835\uddd5','\ud835\uddd6','\ud835\uddd7','\ud835\uddd8','\ud835\uddd9','\ud835\uddda','\ud835\udddb','\ud835\udddc','\ud835\udddd','\ud835\uddde','\ud835\udddf','\ud835\udde0','\ud835\udde1','\ud835\udde2','\ud835\udde3','\ud835\udde4','\ud835\udde5','\ud835\udde6','\ud835\udde7','\ud835\udde8','\ud835\udde9','\ud835\uddea','\ud835\uddeb','\ud835\uddec','\ud835\udded','\ud835\uddee','\ud835\uddef','\ud835\uddf0','\ud835\uddf1','\ud835\uddf2','\ud835\uddf3','\ud835\uddf4','\ud835\uddf5','\ud835\uddf6','\ud835\uddf7','\ud835\uddf8','\ud835\uddf9','\ud835\uddfa','\ud835\uddfb','\ud835\uddfc','\ud835\uddfd','\ud835\uddfe','\ud835\uddff','\ud835\ude00','\ud835\ude01','\ud835\ude02','\ud835\ude03','\ud835\ude04','\ud835\ude05','\ud835\ude06','\ud835\ude07'],\r\n    sansItalic: ['\ud835\ude08','\ud835\ude09','\ud835\ude0a','\ud835\ude0b','\ud835\ude0c','\ud835\ude0d','\ud835\ude0e','\ud835\ude0f','\ud835\ude10','\ud835\ude11','\ud835\ude12','\ud835\ude13','\ud835\ude14','\ud835\ude15','\ud835\ude16','\ud835\ude17','\ud835\ude18','\ud835\ude19','\ud835\ude1a','\ud835\ude1b','\ud835\ude1c','\ud835\ude1d','\ud835\ude1e','\ud835\ude1f','\ud835\ude20','\ud835\ude21','\ud835\ude22','\ud835\ude23','\ud835\ude24','\ud835\ude25','\ud835\ude26','\ud835\ude27','\ud835\ude28','\ud835\ude29','\ud835\ude2a','\ud835\ude2b','\ud835\ude2c','\ud835\ude2d','\ud835\ude2e','\ud835\ude2f','\ud835\ude30','\ud835\ude31','\ud835\ude32','\ud835\ude33','\ud835\ude34','\ud835\ude35','\ud835\ude36','\ud835\ude37','\ud835\ude38','\ud835\ude39','\ud835\ude3a','\ud835\ude3b'],\r\n    fullWidth: ['\uff21','\uff22','\uff23','\uff24','\uff25','\uff26','\uff27','\uff28','\uff29','\uff2a','\uff2b','\uff2c','\uff2d','\uff2e','\uff2f','\uff30','\uff31','\uff32','\uff33','\uff34','\uff35','\uff36','\uff37','\uff38','\uff39','\uff3a','\uff41','\uff42','\uff43','\uff44','\uff45','\uff46','\uff47','\uff48','\uff49','\uff4a','\uff4b','\uff4c','\uff4d','\uff4e','\uff4f','\uff50','\uff51','\uff52','\uff53','\uff54','\uff55','\uff56','\uff57','\uff58','\uff59','\uff5a'],\r\n  },\r\n\r\n  alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',\r\n\r\n  convert(text, mapKey) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const map = this.maps[mapKey];\r\n    if (!map) return text;\r\n    return [...text].map(c => {\r\n      const i = this.alpha.indexOf(c);\r\n      return i >= 0 ? map[i] : c;\r\n    }).join('');\r\n  },\r\n\r\n  circled(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const cUp='\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf';\r\n    const cLo='\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9';\r\n    return [...text].map(c=>{const u='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.indexOf(c);if(u>=0)return cUp[u];const l='abcdefghijklmnopqrstuvwxyz'.indexOf(c);if(l>=0)return cLo[l];return c}).join('');\r\n  },\r\n\r\n  squared(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const sq='\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd48\ud83c\udd49';\r\n    return [...text].map(c=>{const i='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.indexOf(c.toUpperCase());return i>=0?sq[i]:c}).join('');\r\n  },\r\n\r\n  spaced(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...text].join(' ');\r\n  },\r\n\r\n  dotSpaced(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...text].join('\u00b7');\r\n  },\r\n\r\n  starWrapped(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u2605 ' + text + ' \u2605';\r\n  },\r\n\r\n  underline(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...text].map(c => c + '\\u0332').join('');\r\n  },\r\n\r\n  strikethrough(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...text].map(c => c + '\\u0336').join('');\r\n  },\r\n\r\n  overline(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...text].map(c => c + '\\u0305').join('');\r\n  },\r\n\r\n  wave(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...text].map(c => c + '\\u0330').join('');\r\n  },\r\n\r\n  superscript(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={'a':'\u1d43','b':'\u1d47','c':'\u1d9c','d':'\u1d48','e':'\u1d49','f':'\u1da0','g':'\u1d4d','h':'\u02b0','i':'\u2071','j':'\u02b2','k':'\u1d4f','l':'\u02e1','m':'\u1d50','n':'\u207f','o':'\u1d52','p':'\u1d56','r':'\u02b3','s':'\u02e2','t':'\u1d57','u':'\u1d58','v':'\u1d5b','w':'\u02b7','x':'\u02e3','y':'\u02b8','z':'\u1dbb','A':'\u1d2c','B':'\u1d2e','D':'\u1d30','E':'\u1d31','G':'\u1d33','H':'\u1d34','I':'\u1d35','J':'\u1d36','K':'\u1d37','L':'\u1d38','M':'\u1d39','N':'\u1d34','O':'\u1d3c','P':'\u1d3e','R':'\u1d3f','T':'\u1d40','U':'\u1d41','W':'\u1d42'};\r\n    return [...text].map(c=>m[c]||c).join('');\r\n  },\r\n\r\n  smallCaps(text) {\r\n    if (!text) return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={'a':'\u1d00','b':'\u0299','c':'\u1d04','d':'\u1d05','e':'\u1d07','f':'\ua730','g':'\u0262','h':'\u029c','i':'\u026a','j':'\u1d0a','k':'\u1d0b','l':'\u029f','m':'\u1d0d','n':'\u0274','o':'\u1d0f','p':'\u1d18','q':'\u01eb','r':'\u0280','s':'s','t':'\u1d1b','u':'\u1d1c','v':'\u1d20','w':'\u1d21','x':'x','y':'\u028f','z':'\u1d22'};\r\n    return [...text].map(c=>m[c.toLowerCase()]||c).join('');\r\n  },\r\n\r\n  upsideDown(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={a:'\u0250',b:'q',c:'\u0254',d:'p',e:'\u01dd',f:'\u025f',g:'\u0183',h:'\u0265',i:'\u1d09',j:'\u027e',k:'\u029e',l:'l',m:'\u026f',n:'u',o:'o',p:'d',q:'b',r:'\u0279',s:'s',t:'\u0287',u:'n',v:'\u028c',w:'\u028d',x:'x',y:'\u028e',z:'z',A:'\u2200',B:'\u15fa',C:'\u0186',D:'\u15e1',E:'\u018e',F:'\u2132',G:'\u05e4',H:'H',I:'I',J:'\u027e',K:'\u029e',L:'\u02e5',M:'W',N:'N',O:'O',P:'\u0500',Q:'Q',R:'\u1d1a',S:'S',T:'\u2534',U:'\u2229',V:'\u039b',W:'M',X:'X',Y:'\u2144',Z:'Z'};\r\n    return [...text].reverse().map(c=>m[c]||c).join('');\r\n  },\r\n\r\n  mirror(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={a:'\u0252',b:'d',c:'\u0254',d:'b',e:'\u0258',f:'\u0287',g:'\u03f1',h:'\u029c',i:'i',j:'\u0135',k:'\u029e',l:'l',m:'m',n:'n',o:'o',p:'q',q:'p',r:'\u027f',s:'\u01a8',t:'\u019a',u:'u',v:'v',w:'w',x:'x',y:'\u03b3',z:'z'};\r\n    return [...text].reverse().map(c=>m[c.toLowerCase()]||c).join('');\r\n  },\r\n\r\n  morse(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={a:'\u00b7-',b:'-\u00b7\u00b7\u00b7',c:'-\u00b7-\u00b7',d:'-\u00b7\u00b7',e:'\u00b7',f:'\u00b7\u00b7-\u00b7',g:'--\u00b7',h:'\u00b7\u00b7\u00b7\u00b7',i:'\u00b7\u00b7',j:'\u00b7---',k:'-\u00b7-',l:'\u00b7-\u00b7\u00b7',m:'--',n:'-\u00b7',o:'---',p:'\u00b7--\u00b7',q:'--\u00b7-',r:'\u00b7-\u00b7',s:'\u00b7\u00b7\u00b7',t:'-',u:'\u00b7\u00b7-',v:'\u00b7\u00b7\u00b7-',w:'\u00b7--',x:'-\u00b7\u00b7-',y:'-\u00b7--',z:'--\u00b7\u00b7'};\r\n    return text.toLowerCase().split('').map(c=>m[c]||c).join(' ');\r\n  },\r\n\r\n  braille(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={'a':'\u2801','b':'\u2803','c':'\u2809','d':'\u2819','e':'\u2811','f':'\u280b','g':'\u281b','h':'\u2813','i':'\u280a','j':'\u281a','k':'\u2805','l':'\u2807','m':'\u280d','n':'\u281d','o':'\u2815','p':'\u280f','q':'\u281f','r':'\u2817','s':'\u280e','t':'\u281e','u':'\u2825','v':'\u2827','w':'\u283a','x':'\u282d','y':'\u283d','z':'\u2835',' ':'\u2800'};\r\n    return [...text.toLowerCase()].map(c=>m[c]||c).join('');\r\n  },\r\n\r\n  runic(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={a:'\u16ab',b:'\u16d2',c:'\u16b3',d:'\u16de',e:'\u16d6',f:'\u16a0',g:'\u16b7',h:'\u16ba',i:'\u16c1',j:'\u16c3',k:'\u16d5',l:'\u16da',m:'\u16d7',n:'\u16be',o:'\u16a9',p:'\u16c8',q:'\u16e9',r:'\u16b1',s:'\u16ca',t:'\u16cf',u:'\u16a2',v:'\u16a1',w:'\u16b9',x:'\u16ea',y:'\u16a4',z:'\u16c9'};\r\n    return [...text.toLowerCase()].map(c=>m[c]||c).join('');\r\n  },\r\n\r\n  bubbleOutline(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const u='\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf';\r\n    const l='\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9';\r\n    return [...text].map(c=>{const i='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.indexOf(c);if(i>=0)return u[i];const j='abcdefghijklmnopqrstuvwxyz'.indexOf(c);if(j>=0)return l[j];return c}).join('');\r\n  },\r\n\r\n  vaporwave(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return this.convert(text,'fullWidth');\r\n  },\r\n\r\n  zalgo(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const z=['\\u0300','\\u0301','\\u0302','\\u0303','\\u0308','\\u030A','\\u0307','\\u030B'];\r\n    return [...text].map(c=>c+z[Math.floor(Math.random()*z.length)]+z[Math.floor(Math.random()*z.length)]).join('');\r\n  },\r\n\r\n  wingdings(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u2726 ' + [...text].join(' \u2727 ') + ' \u2726';\r\n  },\r\n\r\n  neonBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u3010 ' + text + ' \u3011';\r\n  },\r\n\r\n  starBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u2728 ' + text + ' \u2728';\r\n  },\r\n\r\n  flowerBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u273f ' + text + ' \u273f';\r\n  },\r\n\r\n  arrowBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u00bb ' + text + ' \u00ab';\r\n  },\r\n\r\n  heartBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u2661 ' + text + ' \u2661';\r\n  },\r\n\r\n  diamondBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u25c8 ' + text + ' \u25c8';\r\n  },\r\n\r\n  moonBox(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u263d ' + text + ' \u263e';\r\n  },\r\n\r\n  bulletBold(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return '\u2022 ' + this.convert(text,'bold').split('').join('\u2022') + ' \u2022';\r\n  },\r\n\r\n  dotMatrix(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return [...this.convert(text,'sansSerif')].join('.');\r\n  },\r\n\r\n  comboA(text){\r\n    return this.convert(text,'bold') + ' \u2726';\r\n  },\r\n\r\n  comboB(text){\r\n    return '\u26a1' + this.convert(text,'boldFraktur') + '\u26a1';\r\n  },\r\n\r\n  comboC(text){\r\n    return this.underline(this.convert(text,'bold'));\r\n  },\r\n\r\n  tinyText(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const m={a:'\u1d43',b:'\u1d47',c:'\u1d9c',d:'\u1d48',e:'\u1d49',f:'\u1da0',g:'\u1d4d',h:'\u02b0',i:'\u2071',j:'\u02b2',k:'\u1d4f',l:'\u02e1',m:'\u1d50',n:'\u207f',o:'\u1d52',p:'\u1d56',q:'q',r:'\u02b3',s:'\u02e2',t:'\u1d57',u:'\u1d58',v:'\u1d5b',w:'\u02b7',x:'\u02e3',y:'\u02b8',z:'\u1dbb'};\r\n    return [...text.toLowerCase()].map(c=>m[c]||c).join('');\r\n  },\r\n\r\n  medieval(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    return this.convert(text,'fraktur');\r\n  },\r\n\r\n  glitch(text){\r\n    if(!text)return '\ud835\udc04\ud835\udc27\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc13\ud835\udc1e\ud835\udc31\ud835\udc2d';\r\n    const g=['\\u0300','\\u0301','\\u0302','\\u0308'];\r\n    return [...text].map((c,i)=>i%2===0?c+g[i%g.length]:c+'\\u0320').join('');\r\n  }\r\n};\r\n\r\n\/\/ \u2500\u2500\u2500 FONT DEFINITIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst FONTS = [\r\n  \/\/ BOLD\r\n  {id:1,name:'Bold Serif',tag:'bold',fn:t=>FD.convert(t,'bold'),label:'BOLD \u00b7 CLASSIC'},\r\n  {id:2,name:'Bold Italic',tag:'bold',fn:t=>FD.convert(t,'boldItalic'),label:'BOLD \u00b7 ITALIC'},\r\n  {id:3,name:'Sans Bold',tag:'bold',fn:t=>FD.convert(t,'sansBold'),label:'SANS \u00b7 BOLD'},\r\n  {id:4,name:'Double Struck',tag:'bold',fn:t=>FD.convert(t,'doubleStruck'),label:'DOUBLE \u00b7 STRUCK'},\r\n  {id:5,name:'Bold Script',tag:'bold',fn:t=>FD.convert(t,'boldScript'),label:'BOLD \u00b7 SCRIPT'},\r\n  \/\/ CURSIVE\r\n  {id:6,name:'Script',tag:'cursive',fn:t=>FD.convert(t,'script'),label:'SCRIPT \u00b7 ELEGANT'},\r\n  {id:7,name:'Bold Fraktur',tag:'cursive',fn:t=>FD.convert(t,'boldFraktur'),label:'BOLD \u00b7 FRAKTUR'},\r\n  {id:8,name:'Italic Serif',tag:'cursive',fn:t=>FD.convert(t,'italic'),label:'ITALIC \u00b7 SERIF'},\r\n  {id:9,name:'Sans Italic',tag:'cursive',fn:t=>FD.convert(t,'sansItalic'),label:'SANS \u00b7 ITALIC'},\r\n  {id:10,name:'Small Caps',tag:'cursive',fn:t=>FD.smallCaps(t),label:'SMALL \u00b7 CAPS'},\r\n  \/\/ GOTHIC\r\n  {id:11,name:'Fraktur',tag:'gothic',fn:t=>FD.convert(t,'fraktur'),label:'GOTHIC \u00b7 FRAKTUR'},\r\n  {id:12,name:'Medieval',tag:'gothic',fn:t=>FD.medieval(t),label:'MEDIEVAL \u00b7 DARK'},\r\n  {id:13,name:'Black Letter',tag:'gothic',fn:t=>FD.convert(t,'boldFraktur'),label:'BLACK \u00b7 LETTER'},\r\n  {id:14,name:'Runic',tag:'gothic',fn:t=>FD.runic(t),label:'RUNIC \u00b7 ANCIENT'},\r\n  {id:15,name:'Zalgo',tag:'gothic',fn:t=>FD.zalgo(t),label:'ZALGO \u00b7 CHAOS'},\r\n  \/\/ FANCY\r\n  {id:16,name:'Vaporwave',tag:'fancy',fn:t=>FD.vaporwave(t),label:'VAPORWAVE'},\r\n  {id:17,name:'Neon Box',tag:'fancy',fn:t=>FD.neonBox(t),label:'NEON \u00b7 BOX'},\r\n  {id:18,name:'Star Wrap',tag:'fancy',fn:t=>FD.starWrapped(t),label:'STAR \u00b7 WRAP'},\r\n  {id:19,name:'Heart Box',tag:'fancy',fn:t=>FD.heartBox(t),label:'HEART \u00b7 BOX'},\r\n  {id:20,name:'Diamond',tag:'fancy',fn:t=>FD.diamondBox(t),label:'DIAMOND \u00b7 BOX'},\r\n  {id:21,name:'Moon Frame',tag:'fancy',fn:t=>FD.moonBox(t),label:'MOON \u00b7 FRAME'},\r\n  {id:22,name:'Arrow Frame',tag:'fancy',fn:t=>FD.arrowBox(t),label:'ARROW \u00b7 FRAME'},\r\n  {id:23,name:'Flower Frame',tag:'fancy',fn:t=>FD.flowerBox(t),label:'FLOWER \u00b7 BOX'},\r\n  {id:24,name:'Star Box',tag:'fancy',fn:t=>FD.starBox(t),label:'STAR \u00b7 BOX'},\r\n  {id:25,name:'Emoji Spark',tag:'fancy',fn:t=>FD.wingdings(t),label:'EMOJI \u00b7 SPARK'},\r\n  \/\/ BUBBLE\r\n  {id:26,name:'Bubble',tag:'bubble',fn:t=>FD.circled(t),label:'BUBBLE \u00b7 CIRCLE'},\r\n  {id:27,name:'Bubble Outline',tag:'bubble',fn:t=>FD.bubbleOutline(t),label:'BUBBLE \u00b7 OUTLINE'},\r\n  {id:28,name:'Squared',tag:'bubble',fn:t=>FD.squared(t),label:'SQUARE \u00b7 CAPS'},\r\n  {id:29,name:'Spaced Out',tag:'bubble',fn:t=>FD.spaced(t),label:'WIDE \u00b7 SPACED'},\r\n  {id:30,name:'Dot Spaced',tag:'bubble',fn:t=>FD.dotSpaced(t),label:'DOT \u00b7 SPACED'},\r\n  \/\/ MONO\r\n  {id:31,name:'Monospace',tag:'mono',fn:t=>FD.convert(t,'mono'),label:'MONO \u00b7 CODE'},\r\n  {id:32,name:'Sans Serif',tag:'mono',fn:t=>FD.convert(t,'sansSerif'),label:'SANS \u00b7 SERIF'},\r\n  {id:33,name:'Dot Matrix',tag:'mono',fn:t=>FD.dotMatrix(t),label:'DOT \u00b7 MATRIX'},\r\n  {id:34,name:'Morse Code',tag:'mono',fn:t=>FD.morse(t),label:'MORSE \u00b7 CODE'},\r\n  {id:35,name:'Braille',tag:'mono',fn:t=>FD.braille(t),label:'BRAILLE \u00b7 ART'},\r\n  \/\/ MISC\r\n  {id:36,name:'Upside Down',tag:'fancy',fn:t=>FD.upsideDown(t),label:'UPSIDE \u00b7 DOWN'},\r\n  {id:37,name:'Mirror',tag:'fancy',fn:t=>FD.mirror(t),label:'MIRROR \u00b7 FLIP'},\r\n  {id:38,name:'Strikethrough',tag:'bold',fn:t=>FD.strikethrough(t),label:'STRIKE \u00b7 THROUGH'},\r\n  {id:39,name:'Underline',tag:'bold',fn:t=>FD.underline(t),label:'UNDER \u00b7 LINE'},\r\n  {id:40,name:'Overline',tag:'bold',fn:t=>FD.overline(t),label:'OVER \u00b7 LINE'},\r\n  {id:41,name:'Wave Line',tag:'cursive',fn:t=>FD.wave(t),label:'WAVE \u00b7 LINE'},\r\n  {id:42,name:'Superscript',tag:'mono',fn:t=>FD.superscript(t),label:'SUPER \u00b7 SCRIPT'},\r\n  {id:43,name:'Tiny Text',tag:'mono',fn:t=>FD.tinyText(t),label:'TINY \u00b7 TEXT'},\r\n  {id:44,name:'Glitch',tag:'gothic',fn:t=>FD.glitch(t),label:'GLITCH \u00b7 FX'},\r\n  {id:45,name:'Bullet Bold',tag:'bold',fn:t=>FD.bulletBold(t),label:'BULLET \u00b7 BOLD'},\r\n  {id:46,name:'Full Width',tag:'fancy',fn:t=>FD.vaporwave(t),label:'FULL \u00b7 WIDTH'},\r\n  {id:47,name:'Combo Bold+',tag:'bold',fn:t=>FD.comboA(t),label:'COMBO \u00b7 BOLD'},\r\n  {id:48,name:'Fraktur Fire',tag:'gothic',fn:t=>FD.comboB(t),label:'FRAKTUR \u00b7 FIRE'},\r\n  {id:49,name:'Bold Underline',tag:'bold',fn:t=>FD.comboC(t),label:'BOLD \u00b7 UNDER'},\r\n  {id:50,name:'Script \u2726',tag:'cursive',fn:t=>FD.convert(t,'boldScript')+' \u2726',label:'SCRIPT \u00b7 STAR'},\r\n];\r\n\r\n\/\/ \u2500\u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet state = {\r\n  text: '',\r\n  filter: 'all',\r\n  shown: 12,\r\n  favorites: new Set(),\r\n  copied: 0,\r\n  cards: []\r\n};\r\n\r\n\/\/ \u2500\u2500\u2500 DOM REFS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst grid = document.getElementById('fdGrid');\r\nconst loadMoreBtn = document.getElementById('fdLoadMoreBtn');\r\nconst loadMoreWrap = document.getElementById('fdLoadMoreWrap');\r\nconst toast = document.getElementById('fdToast');\r\nconst toastMsg = document.getElementById('fdToastMsg');\r\nconst charCount = document.getElementById('fdCharCount');\r\nconst statFiltered = document.getElementById('fdStatFiltered');\r\nconst statFavs = document.getElementById('fdStatFavs');\r\nconst statCopied = document.getElementById('fdStatCopied');\r\nconst badge = document.getElementById('fdBadge');\r\n\r\n\/\/ \u2500\u2500\u2500 BUILD CARDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction buildCards() {\r\n  grid.innerHTML = '';\r\n  state.cards = [];\r\n\r\n  const visible = FONTS.filter(f => state.filter === 'all' || f.tag === state.filter);\r\n  statFiltered.textContent = visible.length;\r\n  badge.textContent = visible.length + ' Styles';\r\n\r\n  visible.forEach((font, idx) => {\r\n    const isHidden = idx >= state.shown;\r\n    const textColor = '#1a202c'; \r\n\r\n    const card = document.createElement('div');\r\n    card.className = 'fd-card-font' + (isHidden ? ' fd-card--hidden' : '');\r\n    card.dataset.fontId = font.id;\r\n    card.style.animationDelay = (idx % 25 * 30) + 'ms';\r\n\r\n    const generatedText = font.fn(state.text);\r\n\r\n    card.innerHTML = `\r\n      <div class=\"fd-card-top\">\r\n        <div class=\"fd-card-label\">${font.label}<\/div>\r\n        <div class=\"fd-card-actions\">\r\n          <div class=\"fd-action-icon fd-action--love ${state.favorites.has(font.id)?'fd-loved':''}\" data-font-id=\"${font.id}\" onclick=\"toggleLove(${font.id},this)\" title=\"Favorite\">\r\n            <i class=\"fa-${state.favorites.has(font.id)?'solid':'regular'} fa-heart\"><\/i>\r\n          <\/div>\r\n          <div class=\"fd-action-icon fd-action--copy\" onclick=\"copyFont(${font.id},this)\" title=\"Copy\">\r\n            <i class=\"fa-regular fa-copy\"><\/i>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"fd-card-preview\">\r\n        <div class=\"fd-card-preview-text\" id=\"fd-preview-${font.id}\" style=\"color:${textColor}\">${escHtml(generatedText)}<\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"fd-card-bottom\">\r\n        <div class=\"fd-card-fname\">${font.name}<\/div>\r\n        ${idx<10 ? `<div class=\"fd-hot-badge\"><i class=\"fa-solid fa-fire\"><\/i> HOT<\/div>` : ''}\r\n      <\/div>`;\r\n\r\n    grid.appendChild(card);\r\n    state.cards.push({font, card, generatedText});\r\n  });\r\n\r\n  updateLoadMore(visible.length);\r\n}\r\n\r\nfunction escHtml(s) {\r\n  return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 UPDATE PREVIEWS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction updatePreviews() {\r\n  state.cards.forEach(({font, card}) => {\r\n    const el = card.querySelector('.fd-card-preview-text');\r\n    if (el) {\r\n      const generated = font.fn(state.text);\r\n      el.textContent = generated;\r\n      card.dataset.generated = generated;\r\n    }\r\n  });\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 EVENTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction onTextChange(ta) {\r\n  state.text = ta.value;\r\n  charCount.textContent = state.text.length + ' \/ 120';\r\n  updatePreviews();\r\n}\r\n\r\nfunction filterFonts(tag, btn) {\r\n  state.filter = tag;\r\n  state.shown = 12; \r\n  document.querySelectorAll('.fd-btn-tab').forEach(b => b.classList.remove('fd-btn-tab--active'));\r\n  btn.classList.add('fd-btn-tab--active');\r\n  buildCards();\r\n}\r\n\r\nfunction loadMore() {\r\n  state.shown += 12; \r\n  const cards = grid.querySelectorAll('.fd-card--hidden');\r\n  let shown = 0;\r\n  cards.forEach(c => {\r\n    if (shown < 12) { c.classList.remove('fd-card--hidden'); shown++; }\r\n  });\r\n  const visible = FONTS.filter(f => state.filter === 'all' || f.tag === state.filter);\r\n  updateLoadMore(visible.length);\r\n}\r\n\r\nfunction updateLoadMore(total) {\r\n  const hiddenCount = grid.querySelectorAll('.fd-card--hidden').length;\r\n  if (hiddenCount === 0) {\r\n    loadMoreWrap.style.display = 'none';\r\n  } else {\r\n    loadMoreWrap.style.display = 'block';\r\n    loadMoreBtn.innerHTML = `<i class=\"fa-solid fa-layer-group\"><\/i> Load ${Math.min(hiddenCount,12)} More Fonts <i class=\"fa-solid fa-chevron-down\"><\/i>`;\r\n  }\r\n}\r\n\r\nfunction copyFont(fontId, iconEl) {\r\n  const card = grid.querySelector(`[data-font-id=\"${fontId}\"]`);\r\n  const previewEl = card ? card.querySelector('.fd-card-preview-text') : null;\r\n  const text = previewEl ? previewEl.textContent : '';\r\n  if (!text) return;\r\n  navigator.clipboard.writeText(text).then(() => {\r\n    state.copied++;\r\n    statCopied.textContent = state.copied;\r\n    iconEl.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n    iconEl.style.background = '#086460';\r\n    iconEl.style.color = '#fff';\r\n    showToast('Stylish Text Copied! \u2726');\r\n    setTimeout(() => {\r\n      iconEl.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n      iconEl.style.background = '';\r\n      iconEl.style.color = '';\r\n    }, 1800);\r\n  }).catch(() => {\r\n    const ta = document.createElement('textarea');\r\n    ta.value = text;\r\n    ta.style.position = 'fixed';\r\n    ta.style.opacity = '0';\r\n    document.body.appendChild(ta);\r\n    ta.select();\r\n    document.execCommand('copy');\r\n    document.body.removeChild(ta);\r\n    state.copied++;\r\n    statCopied.textContent = state.copied;\r\n    showToast('Font Copied!');\r\n  });\r\n}\r\n\r\nfunction toggleLove(fontId, el) {\r\n  if (state.favorites.has(fontId)) {\r\n    state.favorites.delete(fontId);\r\n    el.classList.remove('fd-loved');\r\n    el.innerHTML = '<i class=\"fa-regular fa-heart\"><\/i>';\r\n    el.style.background = '';\r\n    el.style.color = '';\r\n  } else {\r\n    state.favorites.add(fontId);\r\n    el.classList.add('fd-loved');\r\n    el.innerHTML = '<i class=\"fa-solid fa-heart\"><\/i>';\r\n    el.style.background = '#e05575';\r\n    el.style.color = '#fff';\r\n    showToast('Added to Favorites! \u2661');\r\n  }\r\n  statFavs.textContent = state.favorites.size;\r\n}\r\n\r\nfunction clearText() {\r\n  const ta = document.getElementById('fdTextInput');\r\n  ta.value = '';\r\n  state.text = '';\r\n  charCount.textContent = '0 \/ 120';\r\n  updatePreviews();\r\n}\r\n\r\nfunction setSuggest(btn) {\r\n  const ta = document.getElementById('fdTextInput');\r\n  ta.value = btn.textContent;\r\n  state.text = btn.textContent;\r\n  charCount.textContent = state.text.length + ' \/ 120';\r\n  updatePreviews();\r\n}\r\n\r\nfunction setRandomStyle() {\r\n  const tags = ['all','bold','cursive','gothic','fancy','bubble','mono'];\r\n  const randomTag = tags[Math.floor(Math.random() * tags.length)];\r\n  const tabs = document.querySelectorAll('.fd-btn-tab');\r\n  tabs.forEach(b => {\r\n    if (b.textContent.toLowerCase() === randomTag || (randomTag==='all' && b.textContent==='All')) {\r\n      filterFonts(randomTag, b);\r\n    }\r\n  });\r\n  showToast('Random Style Applied! \ud83c\udfb2');\r\n}\r\n\r\nlet toastTimer;\r\nfunction showToast(msg) {\r\n  toastMsg.textContent = msg;\r\n  toast.classList.add('fd-toast--show');\r\n  clearTimeout(toastTimer);\r\n  toastTimer = setTimeout(() => toast.classList.remove('fd-toast--show'), 2400);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nbuildCards();\r\n<\/script>\r\n\r\n<!--   <section class=\"ftor-hero\" aria-labelledby=\"ftor-hero-title\"> -->\r\n<!--   <div class=\"ftor-hero-bg\" aria-hidden=\"true\"><\/div> -->\r\n\r\n<!--   <div class=\"ftor-floating-icons\" aria-hidden=\"true\">\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-1\">\r\n      <i class=\"bi bi-type\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-2\">\r\n      <i class=\"bi bi-fonts\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-3\">\r\n      <i class=\"bi bi-magic\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-4\">\r\n      <i class=\"bi bi-copy\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-5\">\r\n      <i class=\"bi bi-input-cursor-text\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-6\">\r\n      <i class=\"bi bi-sliders\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-7\">\r\n      <i class=\"bi bi-palette\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-8\">\r\n      <i class=\"bi bi-star\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-9\">\r\n      <i class=\"bi bi-arrow-clockwise\"><\/i>\r\n    <\/span>\r\n    <span class=\"ftor-floating-icon ftor-floating-icon-10\">\r\n      <i class=\"bi bi-download\"><\/i>\r\n    <\/span>\r\n  <\/div> -->\r\n\r\n<!--   <div class=\"ftor-container\">\r\n    <div class=\"ftor-hero-content\">\r\n      <span class=\"ftor-hero-badge\">Free Font Generator<\/span>\r\n\r\n      <h1 class=\"ftor-hero-title\" id=\"ftor-hero-title\">\r\n        Font Generator for Stylish Text and Creative Fonts\r\n      <\/h1>\r\n\r\n      <p class=\"ftor-hero-text\">\r\n        Create fancy, aesthetic, cursive, bold, gothic, and copy-ready fonts for bios, captions, usernames, and creative projects.\r\n      <\/p>\r\n    <\/div>\r\n    \r\n    <div class=\"ftor-tool-shortcode-wrap\" id=\"ftor-tool-shortcode\">\r\n      <div class=\"ftor-tool-shortcode-inner\">\r\n\r\n        [wp_code id=\"60\"]\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    \r\n    <div class=\"ftor-hero-content\">\r\n      <div class=\"ftor-hero-actions\">\r\n        <a class=\"ftor-hero-btn ftor-hero-btn-primary\" href=\"#ftor-tool-shortcode\">Start Creating Fonts<\/a>\r\n        <a class=\"ftor-hero-btn ftor-hero-btn-secondary\" href=\"#ftor-tools\">Browse Font Tools<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"ftor-hero-trust\" aria-label=\"Fonttor benefits\">\r\n        <span class=\"ftor-hero-trust-item\">No Signup<\/span>\r\n        <span class=\"ftor-hero-trust-item\">Copy-Paste Ready<\/span>\r\n        <span class=\"ftor-hero-trust-item\">100+ Font Styles<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n  <\/div> -->\r\n<!-- <\/section> -->\r\n\r\n<section class=\"ftor-client-cloud-section\" aria-labelledby=\"ftor-client-cloud-title\">\r\n  <div class=\"ftor-container\">\r\n    <div class=\"ftor-client-cloud-inner\">\r\n      <h2 class=\"ftor-client-cloud-title\" id=\"ftor-client-cloud-title\">\r\n        <strong>Trusted by creative teams.<\/strong>\r\n      <\/h2>\r\n\r\n      <div class=\"ftor-client-cloud-mask\" aria-label=\"Client logos\">\r\n        <div class=\"ftor-client-cloud-track\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/techifio.png\" alt=\"Techifio logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Wordle-Logo_1@2x-scaled.png\" alt=\"Wordle logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Blue-Final.png\" alt=\"Blue Final logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Raibleanalytics-logo-final.png\" alt=\"Raible Analytics logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Ary-LOGO.png\" alt=\"Ary logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/SAAS-LOGO-@2x.png\" alt=\"SaaS logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Fonts-Generator-icon.png\" alt=\"Fonts Generator logo\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Tikiewer-dark-LOGO.png\" alt=\"Tikiewer logo\">\r\n\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/techifio.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Wordle-Logo_1@2x-scaled.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Blue-Final.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Raibleanalytics-logo-final.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Ary-LOGO.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/SAAS-LOGO-@2x.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Fonts-Generator-icon.png\" alt=\"\" aria-hidden=\"true\">\r\n          <img decoding=\"async\" class=\"ftor-client-logo-img\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/Tikiewer-dark-LOGO.png\" alt=\"\" aria-hidden=\"true\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n  <section class=\"ftor-section ftor-orbit-section\" aria-labelledby=\"ftor-orbit-title\">\r\n  <div class=\"ftor-container ftor-orbit-layout\">\r\n    <div class=\"ftor-orbit-copy\">\r\n      <span class=\"ftor-kicker\">Typography Ecosystem<\/span>\r\n      <h2 id=\"ftor-orbit-title\">One Font Generator for Every Creative Text Moment<\/h2>\r\n      <p>Create stylish text for bios, captions, usernames, social posts, web typography, and creative branding from one clean workspace.<\/p>\r\n\r\n      <ul class=\"ftor-orbit-list\">\r\n        <li>Social-ready font styles<\/li>\r\n        <li>Copy-paste Unicode text<\/li>\r\n        <li>Typography tools for creators<\/li>\r\n      <\/ul>\r\n\r\n      <a class=\"ftor-btn ftor-btn-primary\" href=\"#ftor-tools\">Explore Font Tools<\/a>\r\n    <\/div>\r\n\r\n    <div class=\"ftor-orbit-stage\" aria-label=\"Fonttor typography ecosystem\">\r\n      <div class=\"ftor-orbit-glow\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"ftor-orbit-ring ftor-orbit-ring-outer\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"ftor-orbit-ring ftor-orbit-ring-inner\" aria-hidden=\"true\"><\/div>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-1\" aria-label=\"Bio\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"3\"><\/rect><circle cx=\"9\" cy=\"11\" r=\"2\"><\/circle><path d=\"M13 10h4M13 14h3M7 17c.5-1.7 3.5-1.7 4 0\"><\/path><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-2\" aria-label=\"Caption\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M5 6.5h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-7l-4.5 3v-3H5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z\"><\/path><path d=\"M7 10h8M7 13h5\"><\/path><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-3\" aria-label=\"Username\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">@<\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-4\" aria-label=\"Instagram\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"4\"><\/rect><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><path d=\"M16.5 7.8h.01\"><\/path><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-5\" aria-label=\"TikTok\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M14 5v10.2a3.8 3.8 0 1 1-3.8-3.8\"><\/path><path d=\"M14 5c1.1 2.9 2.8 4.3 5 4.6\"><\/path><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-6\" aria-label=\"Discord\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6.5 8.5c3.4-1.6 7.6-1.6 11 0l1.5 7.7c-1.8 1.4-3.5 2.1-5.2 2.4l-.8-1.5c-.7.1-1.3.1-2 0l-.8 1.5c-1.7-.3-3.4-1-5.2-2.4l1.5-7.7Z\"><\/path><circle cx=\"9.5\" cy=\"13\" r=\".8\"><\/circle><circle cx=\"14.5\" cy=\"13\" r=\".8\"><\/circle><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-7\" aria-label=\"CSS\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">{ }<\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-8\" aria-label=\"WOFF\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M7 3h7l4 4v14H7V3Z\"><\/path><path d=\"M14 3v5h4\"><\/path><path d=\"M9 14h6M9 17h4\"><\/path><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-9\" aria-label=\"Preview\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M3.5 12s3-5.5 8.5-5.5 8.5 5.5 8.5 5.5-3 5.5-8.5 5.5S3.5 12 3.5 12Z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"2.5\"><\/circle><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-10\" aria-label=\"Gothic\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\ud835\udd0a<\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-11\" aria-label=\"Fancy\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 3l1.6 5.1L19 10l-5.4 1.9L12 17l-1.6-5.1L5 10l5.4-1.9L12 3Z\"><\/path><path d=\"M18 15l.7 2.2L21 18l-2.3.8L18 21l-.7-2.2L15 18l2.3-.8L18 15Z\"><\/path><\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"ftor-orbit-icon-node ftor-orbit-node-12\" aria-label=\"Symbols\">\r\n        <span class=\"ftor-orbit-icon\" aria-hidden=\"true\">\u2726<\/span>\r\n      <\/a>\r\n\r\n      <div class=\"ftor-orbit-center-card\">\r\n        <h3>Fonttor<\/h3>\r\n        <p>Font Generator + Typography Toolkit<\/p>\r\n        <div>\r\n          <span>Stylish Text<\/span>\r\n          <span>Social Fonts<\/span>\r\n          <span>Web Typography<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n  \r\n  <section class=\"ftor-section\">\r\n    <div class=\"ftor-container\">\r\n      <div class=\"ftor-section-head\">\r\n        <span class=\"ftor-kicker\">Styles & Benefits<\/span>\r\n        <h2>A Cleaner Way to Generate Stylish Fonts<\/h2>\r\n        <p>Type once, preview multiple font styles, and copy your favorite text instantly without installing any app or software.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ftor-bento\">\r\n        <article class=\"ftor-bento-card ftor-bento-large\">\r\n          <div>\r\n            <h3>Popular Font Styles<\/h3>\r\n            <p>Explore the most-used styles for bios, captions, usernames, and creative text.<\/p>\r\n          <\/div>\r\n          <div class=\"ftor-style-preview\">\r\n            <div><b>Fancy<\/b><span>\ud835\udcd5\ud835\udcf8\ud835\udcf7\ud835\udcfd\ud835\udcfd\ud835\udcf8\ud835\udcfb<\/span><\/div>\r\n            <div><b>Bold<\/b><span>\ud835\udc05\ud835\udc28\ud835\udc27\ud835\udc2d\ud835\udc2d\ud835\udc28\ud835\udc2b<\/span><\/div>\r\n            <div><b>Gothic<\/b><span>\ud835\udd09\ud835\udd2c\ud835\udd2b\ud835\udd31\ud835\udd31\ud835\udd2c\ud835\udd2f<\/span><\/div>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <article class=\"ftor-bento-card\">\r\n          <span class=\"ftor-card-mark\">\u2318<\/span>\r\n          <h3>One-Click Copy<\/h3>\r\n          <p>Copy any style and paste it wherever your text lives.<\/p>\r\n        <\/article>\r\n\r\n        <article class=\"ftor-bento-card\">\r\n          <span class=\"ftor-card-mark\">Aa<\/span>\r\n          <h3>Organized Styles<\/h3>\r\n          <div class=\"ftor-mini-chips\">\r\n            <span>Fancy<\/span><span>Cursive<\/span><span>Gothic<\/span><span>Bold<\/span>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <article class=\"ftor-bento-card ftor-bento-wide\">\r\n          <div>\r\n            <span class=\"ftor-card-mark\">\u25ce<\/span>\r\n            <h3>Platform Ready<\/h3>\r\n            <p>Use generated fonts for bios, captions, usernames, messages, and profiles.<\/p>\r\n          <\/div>\r\n          <div class=\"ftor-platform-line\">\r\n            <span>Instagram<\/span>\r\n            <span>Discord<\/span>\r\n            <span>TikTok<\/span>\r\n            <span>Web<\/span>\r\n          <\/div>\r\n        <\/article>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"ftor-section ftor-soft-section\" id=\"ftor-tools\">\r\n    <div class=\"ftor-container\">\r\n      <div class=\"ftor-section-head\">\r\n        <span class=\"ftor-kicker\">Featured Tools<\/span>\r\n        <h2>Useful Font Tools Without the Clutter<\/h2>\r\n        <p>Start with the main font generator, then explore focused tools for social text, typography previews, and web fonts.<\/p>\r\n      <\/div>\r\n\r\n<div class=\"ftor-tools-grid\">\r\n  <a href=\"\/#font-generator-tool\" class=\"ftor-tool-card\">\r\n    <b>\ud835\udcd5<\/b>\r\n    <span>Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/tiktok\/\" class=\"ftor-tool-card\">\r\n    <b>\u266a<\/b>\r\n    <span>TikTok Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/old-english\/\" class=\"ftor-tool-card\">\r\n    <b>\ud835\udd12<\/b>\r\n    <span>Old English Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/signature\/\" class=\"ftor-tool-card\">\r\n    <b>\ud835\udcae<\/b>\r\n    <span>Signature Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/calligraphy\/\" class=\"ftor-tool-card\">\r\n    <b>\ud835\udcd2<\/b>\r\n    <span>Calligraphy Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/blackletter\/\" class=\"ftor-tool-card\">\r\n    <b>\ud835\udd05<\/b>\r\n    <span>Gothic \/ Blackletter Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/y2k\/\" class=\"ftor-tool-card\">\r\n    <b>Y2K<\/b>\r\n    <span>Y2K Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/bubble\/\" class=\"ftor-tool-card\">\r\n    <b>\u25cb<\/b>\r\n    <span>Bubble Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/horror\/\" class=\"ftor-tool-card\">\r\n    <b>\ud83d\udc7b<\/b>\r\n    <span>Horror Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/graffiti\/\" class=\"ftor-tool-card\">\r\n    <b>\ud83d\udd8c<\/b>\r\n    <span>Graffiti Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/roblox\/\" class=\"ftor-tool-card\">\r\n    <b>\ud83c\udfae<\/b>\r\n    <span>Roblox Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n\r\n  <a href=\"\/arabic\/\" class=\"ftor-tool-card\">\r\n    <b>\u0639<\/b>\r\n    <span>Arabic Font Generator<\/span>\r\n    <i>\u2192<\/i>\r\n  <\/a>\r\n<\/div>\r\n\r\n      <div class=\"ftor-center-action\">\r\n        <a class=\"ftor-btn ftor-btn-primary\" href=\"\/#font-generator-tool\">Browse All Font Tools<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n    <section class=\"ftor-section ftor-soft-section\">\r\n    <div class=\"ftor-container ftor-platform-grid\">\r\n      <div class=\"ftor-platform-copy\">\r\n        <span class=\"ftor-kicker\">Use Cases<\/span>\r\n        <h2>Built for the Platforms Where Your Text Lives<\/h2>\r\n        <p>Create fonts that feel natural across social profiles, captions, chat apps, gaming communities, and web projects.<\/p>\r\n        <div class=\"ftor-platform-chips\">\r\n          <span>Instagram Bios<\/span>\r\n          <span>TikTok Captions<\/span>\r\n          <span>Discord Names<\/span>\r\n          <span>X Profiles<\/span>\r\n          <span>Gaming Usernames<\/span>\r\n          <span>Website Headings<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ftor-platform-mockups\">\r\n        <div class=\"ftor-profile-mockup\">\r\n          <h3>\ud835\udcd5\ud835\udcf8\ud835\udcf7\ud835\udcfd\ud835\udcfd\ud835\udcf8\ud835\udcfb<\/h3>\r\n          <p>Creative fonts for every profile \u2726<\/p>\r\n          <span>Bio Preview<\/span>\r\n        <\/div>\r\n        <div class=\"ftor-type-mockup\">\r\n          <span>Typography Preview<\/span>\r\n          <b>Fonttor Heading<\/b>\r\n          <p>CSS font tools, web font helpers, and clean preview utilities.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n  \r\n  <section class=\"ftor-section\">\r\n    <div class=\"ftor-container\">\r\n      <div class=\"ftor-section-head\">\r\n        <span class=\"ftor-kicker\">Preview Lab<\/span>\r\n        <h2>Preview Your Font Before You Copy<\/h2>\r\n        <p>See how your styled text may look in a bio, username, caption, message, or heading.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ftor-preview-lab\">\r\n        <div class=\"ftor-tab-list\" role=\"tablist\" aria-label=\"Font preview examples\">\r\n          <button class=\"ftor-tab ftor-tab-active\" type=\"button\" role=\"tab\" id=\"ftor-tab-bio\" aria-selected=\"true\" aria-controls=\"ftor-preview-panel\" data-ftor-preview=\"bio\">Bio Preview<\/button>\r\n          <button class=\"ftor-tab\" type=\"button\" role=\"tab\" id=\"ftor-tab-username\" aria-selected=\"false\" aria-controls=\"ftor-preview-panel\" data-ftor-preview=\"username\">Username<\/button>\r\n          <button class=\"ftor-tab\" type=\"button\" role=\"tab\" id=\"ftor-tab-caption\" aria-selected=\"false\" aria-controls=\"ftor-preview-panel\" data-ftor-preview=\"caption\">Caption<\/button>\r\n          <button class=\"ftor-tab\" type=\"button\" role=\"tab\" id=\"ftor-tab-message\" aria-selected=\"false\" aria-controls=\"ftor-preview-panel\" data-ftor-preview=\"message\">Message<\/button>\r\n          <button class=\"ftor-tab\" type=\"button\" role=\"tab\" id=\"ftor-tab-heading\" aria-selected=\"false\" aria-controls=\"ftor-preview-panel\" data-ftor-preview=\"heading\">Heading<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"ftor-preview-panel\" id=\"ftor-preview-panel\" role=\"tabpanel\" aria-labelledby=\"ftor-tab-bio\" aria-live=\"polite\">\r\n          <span class=\"ftor-preview-label\">Live Preview<\/span>\r\n          <strong class=\"ftor-preview-main\">\ud835\udcd5\ud835\udcf8\ud835\udcf7\ud835\udcfd\ud835\udcfd\ud835\udcf8\ud835\udcfb \u2726 Creative text maker<\/strong>\r\n          <span class=\"ftor-preview-sub\">Stylish fonts for bios & captions<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<section class=\"ftor-section ftor-guides-section\" aria-labelledby=\"ftor-guides-title\">\r\n  <div class=\"ftor-container\">\r\n    <div class=\"ftor-guides-head\">\r\n      <span class=\"ftor-guides-label\">GUIDES<\/span>\r\n      <div>\r\n        <h2 id=\"ftor-guides-title\">Latest Font & Typography Guides<\/h2>\r\n        <p>Read simple guides about font generators, stylish text, Unicode fonts, social bios, and web typography.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ftor-guides-grid\">\r\n      <article class=\"ftor-guide-card ftor-guide-featured\">\r\n        <a href=\"https:\/\/fonttor.com\/blog\/how-to-change-font-size-in-outlook\/\" class=\"ftor-guide-link\" aria-label=\"Read guide: How to Change Font Size in Outlook\">\r\n          <div class=\"ftor-guide-visual ftor-guide-visual-image\">\r\n            <img decoding=\"async\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/how-to-change-font-size-in-outlook-600x400.jpg\" alt=\"How to Change Font Size in Outlook\">\r\n          <\/div>\r\n\r\n          <div class=\"ftor-guide-content\">\r\n            <span class=\"ftor-guide-category\">Email Typography<\/span>\r\n            <h3>How to Change Font Size in Outlook<\/h3>\r\n            <p>Learn how to adjust Outlook font size for emails, messages, and a cleaner reading experience.<\/p>\r\n            <div class=\"ftor-guide-meta\">\r\n              <span>5 min read<\/span>\r\n              <i aria-hidden=\"true\">\u2192<\/i>\r\n            <\/div>\r\n          <\/div>\r\n        <\/a>\r\n      <\/article>\r\n\r\n      <div class=\"ftor-guide-side\">\r\n        <article class=\"ftor-guide-card ftor-guide-small\">\r\n          <a href=\"https:\/\/fonttor.com\/blog\/what-font-does-youtube-use\/\" class=\"ftor-guide-link\" aria-label=\"Read guide: What Font Does YouTube Use?\">\r\n            <div class=\"ftor-guide-visual ftor-guide-visual-image\">\r\n              <img decoding=\"async\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/what-font-does-youtube-use-600x400.jpg\" alt=\"What Font Does YouTube Use?\">\r\n            <\/div>\r\n\r\n            <div class=\"ftor-guide-content\">\r\n              <span class=\"ftor-guide-category\">Brand Fonts<\/span>\r\n              <h3>What Font Does YouTube Use?<\/h3>\r\n              <p>Explore YouTube\u2019s font style and how typography shapes one of the world\u2019s biggest video platforms.<\/p>\r\n              <div class=\"ftor-guide-meta\">\r\n                <span>4 min read<\/span>\r\n                <i aria-hidden=\"true\">\u2192<\/i>\r\n              <\/div>\r\n            <\/div>\r\n          <\/a>\r\n        <\/article>\r\n\r\n        <article class=\"ftor-guide-card ftor-guide-small\">\r\n          <a href=\"https:\/\/fonttor.com\/blog\/what-font-does-facebook-use\/\" class=\"ftor-guide-link\" aria-label=\"Read guide: What Font Does Facebook Use?\">\r\n            <div class=\"ftor-guide-visual ftor-guide-visual-image\">\r\n              <img decoding=\"async\" src=\"https:\/\/fonttor.com\/wp-content\/uploads\/2026\/05\/what-font-does-facebook-use-600x400.jpg\" alt=\"What Font Does Facebook Use?\">\r\n            <\/div>\r\n\r\n            <div class=\"ftor-guide-content\">\r\n              <span class=\"ftor-guide-category\">Social Media Fonts<\/span>\r\n              <h3>What Font Does Facebook Use?<\/h3>\r\n              <p>Learn about Facebook\u2019s typography choices and how font design supports a familiar social experience.<\/p>\r\n              <div class=\"ftor-guide-meta\">\r\n                <span>4 min read<\/span>\r\n                <i aria-hidden=\"true\">\u2192<\/i>\r\n              <\/div>\r\n            <\/div>\r\n          <\/a>\r\n        <\/article>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ftor-center-action\">\r\n      <a class=\"ftor-btn ftor-btn-primary\" href=\"https:\/\/fonttor.com\/blog\/\">Read More Articles<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>  \r\n  \r\n  <section class=\"ftor-section ftor-faq-section\">\r\n    <div class=\"ftor-container ftor-faq-grid\">\r\n      <div class=\"ftor-faq-copy\">\r\n        <span class=\"ftor-kicker\">FAQ<\/span>\r\n        <h2>Font Generator FAQs<\/h2>\r\n        <p>Simple answers about Fonttor, copy-paste fonts, Unicode text styles, and mobile usage.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ftor-faq-list\">\r\n        <div class=\"ftor-faq-item\">\r\n          <button type=\"button\" aria-expanded=\"false\" aria-controls=\"ftor-faq-1\">What is Fonttor?<\/button>\r\n          <div id=\"ftor-faq-1\"><p>Fonttor is a modern font generator and typography toolkit for creating stylish copy-paste text and exploring useful font tools.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ftor-faq-item\">\r\n          <button type=\"button\" aria-expanded=\"false\" aria-controls=\"ftor-faq-2\">Is Fonttor free?<\/button>\r\n          <div id=\"ftor-faq-2\"><p>Yes, users can generate stylish fonts directly in the browser without installing software.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ftor-faq-item\">\r\n          <button type=\"button\" aria-expanded=\"false\" aria-controls=\"ftor-faq-3\">Are these actual font files?<\/button>\r\n          <div id=\"ftor-faq-3\"><p>Most generated styles use Unicode characters, which makes them easy to copy and paste across many platforms.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ftor-faq-item\">\r\n          <button type=\"button\" aria-expanded=\"false\" aria-controls=\"ftor-faq-4\">Where can I use generated fonts?<\/button>\r\n          <div id=\"ftor-faq-4\"><p>You can use them in social media bios, captions, usernames, messages, gaming profiles, and supported websites.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ftor-faq-item\">\r\n          <button type=\"button\" aria-expanded=\"false\" aria-controls=\"ftor-faq-5\">Do I need to create an account?<\/button>\r\n          <div id=\"ftor-faq-5\"><p>No, the main font generator can work without signup.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ftor-faq-item\">\r\n          <button type=\"button\" aria-expanded=\"false\" aria-controls=\"ftor-faq-6\">Can I use Fonttor on mobile?<\/button>\r\n          <div id=\"ftor-faq-6\"><p>Yes, Fonttor should be fully responsive and easy to use on mobile, tablet, and desktop devices.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"ftor-final-section\">\r\n    <div class=\"ftor-container\">\r\n      <div class=\"ftor-final-cta\">\r\n        <span class=\"ftor-cta-pill\">Free Font Generator \u2022 No Signup \u2022 Copy-Paste Ready<\/span>\r\n        <h2>Turn Plain Text Into Stylish Fonts Instantly<\/h2>\r\n        <p>Create fancy, aesthetic, cursive, bold, gothic, and social-ready fonts for bios, captions, usernames, and creative projects.<\/p>\r\n        <div class=\"ftor-actions ftor-cta-actions\">\r\n          <a class=\"ftor-btn ftor-btn-light\" href=\"#font-generator-tool\">Start Using Fonttor<\/a>\r\n          <a class=\"ftor-btn ftor-btn-ghost\" href=\"#font-generator-tool\">Browse All Font Tools<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n<style>\r\n.ftor-homepage {\r\n  --ftor-primary: #016B61;\r\n  --ftor-primary-dark: #024F48;\r\n  --ftor-secondary: #70B2B2;\r\n  --ftor-aqua: #9ECFD4;\r\n  --ftor-cream: #E5E9C5;\r\n  --ftor-bg: #F7FBFA;\r\n  --ftor-card: #FFFFFF;\r\n  --ftor-text: #123936;\r\n  --ftor-muted: #5D7775;\r\n  --ftor-border: rgba(1, 107, 97, 0.14);\r\n  --ftor-surface: #EEF8F7;\r\n  --ftor-surface-2: #F4F8E7;\r\n  --ftor-deep: #092F2B;\r\n  --ftor-shadow: rgba(1, 107, 97, 0.12);\r\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n  color: var(--ftor-text);\r\n  background: var(--ftor-bg);\r\n  overflow-x: hidden;\r\n}\r\n\r\n.ftor-homepage .ftor-container {\r\n  width: min(1160px, calc(100% - 32px));\r\n  margin: 0 auto;\r\n}\r\n\r\n.ftor-homepage .ftor-section {\r\n  padding: 92px 0;\r\n}\r\n\r\n.ftor-homepage .ftor-soft-section {\r\n  background: linear-gradient(180deg, rgba(238, 248, 247, 0.58), rgba(247, 251, 250, 0));\r\n}\r\n\r\n.ftor-homepage .ftor-section-head {\r\n  max-width: 760px;\r\n  margin: 0 auto 42px;\r\n  text-align: center;\r\n}\r\n\r\n.ftor-homepage .ftor-kicker,\r\n.ftor-homepage .ftor-eyebrow,\r\n.ftor-homepage .ftor-cta-pill {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  border: 1px solid var(--ftor-border);\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.72);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 8px 12px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-section-head h2,\r\n.ftor-homepage .ftor-platform-copy h2,\r\n.ftor-homepage .ftor-faq-copy h2 {\r\n  margin: 14px 0 0;\r\n  color: var(--ftor-text);\r\n  font-size: clamp(32px, 4.5vw, 52px);\r\n  line-height: 1.06;\r\n  letter-spacing: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-section-head p,\r\n.ftor-homepage .ftor-platform-copy p,\r\n.ftor-homepage .ftor-faq-copy p,\r\n.ftor-homepage .ftor-hero-text {\r\n  margin: 16px 0 0;\r\n  color: var(--ftor-muted);\r\n  font-size: 17px;\r\n  line-height: 1.75;\r\n}\r\n\r\n.ftor-homepage .ftor-actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 14px;\r\n  margin-top: 30px;\r\n}\r\n\r\n.ftor-homepage .ftor-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 50px;\r\n  border-radius: 999px;\r\n  padding: 14px 22px;\r\n  font-weight: 800;\r\n  text-decoration: none;\r\n  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-btn-primary {\r\n  background: var(--ftor-primary);\r\n  color: #fff;\r\n  box-shadow: 0 14px 30px rgba(1, 107, 97, 0.18);\r\n}\r\n\r\n.ftor-homepage .ftor-btn-primary:hover {\r\n  background: var(--ftor-primary-dark);\r\n  color: #fff;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.ftor-homepage .ftor-btn-secondary {\r\n  border: 1px solid rgba(1, 107, 97, 0.22);\r\n  background: rgba(255, 255, 255, 0.72);\r\n  color: var(--ftor-primary-dark);\r\n}\r\n\r\n.ftor-homepage .ftor-btn-secondary:hover {\r\n  background: rgba(158, 207, 212, 0.22);\r\n  color: var(--ftor-primary-dark);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.ftor-homepage .ftor-trust-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n  margin-top: 28px;\r\n}\r\n\r\n.ftor-homepage .ftor-trust-row span,\r\n.ftor-homepage .ftor-platform-chips span {\r\n  border: 1px solid var(--ftor-border);\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.62);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 8px 12px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-frame {\r\n  position: relative;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(1, 107, 97, 0.12);\r\n  border-radius: 28px;\r\n  background: rgba(255, 255, 255, 0.86);\r\n  box-shadow: 0 28px 70px rgba(1, 107, 97, 0.16);\r\n  transform: rotate(0.7deg);\r\n  transition: transform 220ms ease, box-shadow 220ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-frame:hover {\r\n  transform: rotate(0deg) translateY(-4px);\r\n  box-shadow: 0 32px 76px rgba(1, 107, 97, 0.18);\r\n}\r\n\r\n.ftor-homepage .ftor-tool-toolbar {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  border-bottom: 1px solid var(--ftor-border);\r\n  background: rgba(247, 251, 250, 0.78);\r\n  padding: 14px 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-toolbar span {\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 999px;\r\n  background: var(--ftor-aqua);\r\n}\r\n\r\n.ftor-homepage .ftor-tool-toolbar span:first-child {\r\n  background: var(--ftor-primary);\r\n}\r\n\r\n.ftor-homepage .ftor-tool-toolbar b {\r\n  margin-left: 8px;\r\n  color: var(--ftor-primary-dark);\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-body {\r\n  padding: clamp(20px, 4vw, 34px);\r\n}\r\n\r\n.ftor-homepage .ftor-field-group span {\r\n  display: block;\r\n  margin-bottom: 9px;\r\n  color: var(--ftor-muted);\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n}\r\n\r\n.ftor-homepage .ftor-demo-input {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  border: 1px solid var(--ftor-border);\r\n  border-radius: 18px;\r\n  background: #fff;\r\n  color: var(--ftor-text);\r\n  padding: 16px;\r\n  font: inherit;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-list {\r\n  display: grid;\r\n  gap: 12px;\r\n  margin-top: 16px;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  border: 1px solid rgba(1, 107, 97, 0.10);\r\n  border-radius: 18px;\r\n  background: rgba(238, 248, 247, 0.68);\r\n  padding: 14px;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-row span {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  color: var(--ftor-primary-dark);\r\n  font-weight: 800;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-row button {\r\n  flex: 0 0 auto;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: var(--ftor-primary);\r\n  color: #fff;\r\n  padding: 8px 12px;\r\n  font: inherit;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n}\r\n\r\n.ftor-homepage .ftor-float {\r\n  --ftor-rx: 0px;\r\n  --ftor-ry: 0px;\r\n  position: absolute;\r\n  z-index: 1;\r\n  border: 1px solid rgba(1, 107, 97, 0.14);\r\n  border-radius: 16px;\r\n  background: rgba(255, 255, 255, 0.58);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 10px 13px;\r\n  font-weight: 800;\r\n  box-shadow: 0 14px 34px rgba(1, 107, 97, 0.10);\r\n  animation: ftorFloat 8s ease-in-out infinite;\r\n  transform: translate3d(var(--ftor-rx), var(--ftor-ry), 0);\r\n}\r\n\r\n.ftor-homepage .ftor-float-one {\r\n  left: 6%;\r\n  top: 18%;\r\n}\r\n\r\n.ftor-homepage .ftor-float-two {\r\n  right: 10%;\r\n  top: 20%;\r\n  animation-delay: -2s;\r\n}\r\n\r\n.ftor-homepage .ftor-float-three {\r\n  right: 7%;\r\n  bottom: 18%;\r\n  animation-delay: -4s;\r\n}\r\n\r\n@keyframes ftorFloat {\r\n  0%, 100% { translate: 0 0; opacity: 0.78; }\r\n  50% { translate: 0 -14px; opacity: 1; }\r\n}\r\n\r\n.ftor-homepage .ftor-bento {\r\n  display: grid;\r\n  grid-template-columns: 1.1fr 0.9fr 0.9fr;\r\n  gap: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-bento-card,\r\n.ftor-homepage .ftor-tool-card,\r\n.ftor-homepage .ftor-preview-lab,\r\n.ftor-homepage .ftor-editorial,\r\n.ftor-homepage .ftor-faq-item {\r\n  border: 1px solid var(--ftor-border);\r\n  background: rgba(255, 255, 255, 0.82);\r\n  box-shadow: 0 16px 42px rgba(1, 107, 97, 0.08);\r\n}\r\n\r\n.ftor-homepage .ftor-bento-card {\r\n  border-radius: 24px;\r\n  padding: 24px;\r\n  transition: transform 200ms ease, box-shadow 200ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-bento-card:hover,\r\n.ftor-homepage .ftor-tool-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 22px 52px rgba(1, 107, 97, 0.12);\r\n}\r\n\r\n.ftor-homepage .ftor-bento-large {\r\n  grid-row: span 2;\r\n  min-height: 430px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  background:\r\n    radial-gradient(circle at 78% 16%, rgba(158, 207, 212, 0.36), transparent 34%),\r\n    rgba(255, 255, 255, 0.84);\r\n}\r\n\r\n.ftor-homepage .ftor-bento-wide {\r\n  grid-column: span 2;\r\n  display: grid;\r\n  grid-template-columns: 0.8fr 1fr;\r\n  gap: 24px;\r\n  align-items: center;\r\n}\r\n\r\n.ftor-homepage .ftor-bento-card h3,\r\n.ftor-homepage .ftor-tool-card span,\r\n.ftor-homepage .ftor-seo-content h2 {\r\n  margin: 0;\r\n  color: var(--ftor-text);\r\n}\r\n\r\n.ftor-homepage .ftor-bento-card h3 {\r\n  font-size: 22px;\r\n  line-height: 1.25;\r\n}\r\n\r\n.ftor-homepage .ftor-bento-card p {\r\n  margin: 10px 0 0;\r\n  color: var(--ftor-muted);\r\n  line-height: 1.65;\r\n}\r\n\r\n.ftor-homepage .ftor-card-mark {\r\n  display: inline-flex;\r\n  margin-bottom: 18px;\r\n  color: var(--ftor-primary);\r\n  font-size: 28px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-style-preview {\r\n  display: grid;\r\n  gap: 12px;\r\n  margin-top: 30px;\r\n}\r\n\r\n.ftor-homepage .ftor-style-preview div {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 14px;\r\n  border: 1px solid rgba(1, 107, 97, 0.10);\r\n  border-radius: 18px;\r\n  background: rgba(247, 251, 250, 0.76);\r\n  padding: 14px 16px;\r\n}\r\n\r\n.ftor-homepage .ftor-style-preview b {\r\n  color: var(--ftor-muted);\r\n  font-size: 13px;\r\n}\r\n\r\n.ftor-homepage .ftor-style-preview span {\r\n  color: var(--ftor-primary-dark);\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-mini-chips,\r\n.ftor-homepage .ftor-platform-line,\r\n.ftor-homepage .ftor-platform-chips {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n}\r\n\r\n.ftor-homepage .ftor-mini-chips {\r\n  margin-top: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-mini-chips span,\r\n.ftor-homepage .ftor-platform-line span {\r\n  border-radius: 999px;\r\n  background: rgba(238, 248, 247, 0.92);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 8px 11px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-tools-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 14px;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-card {\r\n  position: relative;\r\n  min-height: 128px;\r\n  display: grid;\r\n  align-content: space-between;\r\n  border-radius: 22px;\r\n  color: var(--ftor-text);\r\n  padding: 20px;\r\n  text-decoration: none;\r\n  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-card b {\r\n  color: var(--ftor-primary);\r\n  font-size: 22px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-card span {\r\n  max-width: 170px;\r\n  font-weight: 800;\r\n  line-height: 1.35;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-card i {\r\n  position: absolute;\r\n  right: 18px;\r\n  bottom: 16px;\r\n  color: var(--ftor-primary);\r\n  font-style: normal;\r\n  opacity: 0;\r\n  transform: translateX(-5px);\r\n  transition: opacity 180ms ease, transform 180ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-card:hover i {\r\n  opacity: 1;\r\n  transform: translateX(0);\r\n}\r\n\r\n.ftor-homepage .ftor-center-action {\r\n  margin-top: 28px;\r\n  text-align: center;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-lab {\r\n  display: grid;\r\n  grid-template-columns: 230px 1fr;\r\n  gap: 18px;\r\n  border-radius: 28px;\r\n  padding: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-tab-list {\r\n  display: grid;\r\n  gap: 8px;\r\n  align-content: start;\r\n  border-radius: 20px;\r\n  background: rgba(238, 248, 247, 0.62);\r\n  padding: 12px;\r\n}\r\n\r\n.ftor-homepage .ftor-tab {\r\n  border: 0;\r\n  border-radius: 14px;\r\n  background: transparent;\r\n  color: var(--ftor-muted);\r\n  padding: 12px;\r\n  text-align: left;\r\n  font: inherit;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n}\r\n\r\n.ftor-homepage .ftor-tab-active,\r\n.ftor-homepage .ftor-tab:hover {\r\n  background: #fff;\r\n  color: var(--ftor-primary-dark);\r\n  box-shadow: 0 8px 20px rgba(1, 107, 97, 0.08);\r\n}\r\n\r\n.ftor-homepage .ftor-preview-panel {\r\n  min-height: 310px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  border-radius: 24px;\r\n  background:\r\n    radial-gradient(circle at 82% 18%, rgba(229, 233, 197, 0.52), transparent 28%),\r\n    linear-gradient(135deg, rgba(1, 107, 97, 0.08), rgba(158, 207, 212, 0.22));\r\n  padding: clamp(26px, 5vw, 52px);\r\n  transition: opacity 180ms ease, transform 180ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-panel.ftor-changing {\r\n  opacity: 0;\r\n  transform: translateY(8px);\r\n}\r\n\r\n.ftor-homepage .ftor-preview-label {\r\n  margin-bottom: 18px;\r\n  color: var(--ftor-muted);\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-main {\r\n  color: var(--ftor-primary-dark);\r\n  font-size: clamp(30px, 5vw, 56px);\r\n  line-height: 1.12;\r\n}\r\n\r\n.ftor-homepage .ftor-preview-sub {\r\n  margin-top: 14px;\r\n  color: var(--ftor-muted);\r\n  font-size: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-platform-grid {\r\n  display: grid;\r\n  grid-template-columns: 0.88fr 1.12fr;\r\n  gap: 58px;\r\n  align-items: center;\r\n}\r\n\r\n.ftor-homepage .ftor-platform-copy .ftor-kicker {\r\n  margin-bottom: 14px;\r\n}\r\n\r\n.ftor-homepage .ftor-platform-copy h2 {\r\n  margin-top: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-platform-chips {\r\n  margin-top: 26px;\r\n}\r\n\r\n.ftor-homepage .ftor-platform-mockups {\r\n  display: grid;\r\n  grid-template-columns: 0.82fr 1fr;\r\n  gap: 18px;\r\n  align-items: center;\r\n}\r\n\r\n.ftor-homepage .ftor-profile-mockup,\r\n.ftor-homepage .ftor-type-mockup {\r\n  border: 1px solid var(--ftor-border);\r\n  border-radius: 24px;\r\n  background: rgba(255, 255, 255, 0.82);\r\n  box-shadow: 0 18px 44px rgba(1, 107, 97, 0.09);\r\n  padding: 24px;\r\n}\r\n\r\n.ftor-homepage .ftor-profile-mockup h3 {\r\n  margin: 0;\r\n  color: var(--ftor-primary-dark);\r\n  font-size: 34px;\r\n}\r\n\r\n.ftor-homepage .ftor-profile-mockup p,\r\n.ftor-homepage .ftor-type-mockup p {\r\n  color: var(--ftor-muted);\r\n  line-height: 1.6;\r\n}\r\n\r\n.ftor-homepage .ftor-profile-mockup span,\r\n.ftor-homepage .ftor-type-mockup span {\r\n  display: inline-flex;\r\n  border-radius: 999px;\r\n  background: rgba(229, 233, 197, 0.72);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 7px 10px;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-type-mockup {\r\n  min-height: 230px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.ftor-homepage .ftor-type-mockup b {\r\n  margin-top: 18px;\r\n  color: var(--ftor-text);\r\n  font-size: 32px;\r\n  line-height: 1.1;\r\n}\r\n\r\n.ftor-homepage .ftor-editorial {\r\n  display: grid;\r\n  grid-template-columns: 300px 1fr;\r\n  gap: 34px;\r\n  border-radius: 28px;\r\n  padding: clamp(24px, 5vw, 42px);\r\n}\r\n\r\n.ftor-homepage .ftor-quick-answer {\r\n  align-self: start;\r\n  border-radius: 22px;\r\n  background: rgba(238, 248, 247, 0.78);\r\n  padding: 22px;\r\n}\r\n\r\n.ftor-homepage .ftor-quick-answer span {\r\n  color: var(--ftor-primary);\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n}\r\n\r\n.ftor-homepage .ftor-quick-answer p {\r\n  margin: 12px 0 0;\r\n  color: var(--ftor-muted);\r\n  line-height: 1.7;\r\n}\r\n\r\n.ftor-homepage .ftor-seo-content h2 {\r\n  font-size: 28px;\r\n  line-height: 1.2;\r\n}\r\n\r\n.ftor-homepage .ftor-seo-content p {\r\n  margin: 10px 0 28px;\r\n  color: var(--ftor-muted);\r\n  line-height: 1.85;\r\n}\r\n\r\n.ftor-homepage .ftor-seo-content p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-grid {\r\n  display: grid;\r\n  grid-template-columns: 0.82fr 1.18fr;\r\n  gap: 44px;\r\n  align-items: start;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-copy .ftor-kicker {\r\n  margin-bottom: 14px;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-copy h2 {\r\n  margin-top: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-list {\r\n  display: grid;\r\n  gap: 12px;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item {\r\n  overflow: hidden;\r\n  border-radius: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item button {\r\n  position: relative;\r\n  width: 100%;\r\n  border: 0;\r\n  background: transparent;\r\n  color: var(--ftor-text);\r\n  padding: 18px 50px 18px 18px;\r\n  text-align: left;\r\n  font: inherit;\r\n  font-size: 16px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item button::before,\r\n.ftor-homepage .ftor-faq-item button::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: 20px;\r\n  top: 50%;\r\n  width: 13px;\r\n  height: 2px;\r\n  background: var(--ftor-primary);\r\n  transition: transform 180ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item button::after {\r\n  transform: rotate(90deg);\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item button[aria-expanded=\"true\"] {\r\n  color: var(--ftor-primary-dark);\r\n  background: rgba(238, 248, 247, 0.68);\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item button[aria-expanded=\"true\"]::after {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item div {\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  transition: max-height 220ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-faq-item p {\r\n  margin: 0;\r\n  padding: 0 18px 18px;\r\n  color: var(--ftor-muted);\r\n  line-height: 1.7;\r\n}\r\n\r\n.ftor-homepage .ftor-final-section {\r\n  padding: 40px 0 96px;\r\n}\r\n\r\n.ftor-homepage .ftor-final-cta {\r\n  position: relative;\r\n  overflow: hidden;\r\n  border-radius: 32px;\r\n  background:\r\n    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.30), transparent 24%),\r\n    linear-gradient(135deg, #016B61 0%, #70B2B2 52%, #9ECFD4 100%);\r\n  color: #fff;\r\n  padding: clamp(42px, 7vw, 78px) 24px;\r\n  text-align: center;\r\n  box-shadow: 0 24px 64px rgba(1, 107, 97, 0.20);\r\n}\r\n\r\n.ftor-homepage .ftor-final-cta::before {\r\n  content: \"Aa\";\r\n  position: absolute;\r\n  right: 8%;\r\n  bottom: -18%;\r\n  color: rgba(255, 255, 255, 0.13);\r\n  font-size: clamp(110px, 18vw, 220px);\r\n  font-weight: 800;\r\n  line-height: 1;\r\n}\r\n\r\n.ftor-homepage .ftor-cta-pill {\r\n  position: relative;\r\n  z-index: 2;\r\n  border-color: rgba(255, 255, 255, 0.34);\r\n  background: rgba(255, 255, 255, 0.16);\r\n  color: #fff;\r\n}\r\n\r\n.ftor-homepage .ftor-final-cta h2 {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 780px;\r\n  margin: 20px auto 0;\r\n  font-size: clamp(36px, 5.4vw, 64px);\r\n  line-height: 1.04;\r\n  letter-spacing: 0;\r\n\tcolor: #fff;\r\n}\r\n\r\n.ftor-homepage .ftor-final-cta p {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 660px;\r\n  margin: 18px auto 0;\r\n  color: rgba(255, 255, 255, 0.9);\r\n  font-size: 18px;\r\n  line-height: 1.7;\r\n}\r\n\r\n.ftor-homepage .ftor-cta-actions {\r\n  position: relative;\r\n  z-index: 2;\r\n  justify-content: center;\r\n}\r\n\r\n.ftor-homepage .ftor-btn-light {\r\n  background: #fff;\r\n  color: var(--ftor-primary-dark);\r\n}\r\n\r\n.ftor-homepage .ftor-btn-ghost {\r\n  border: 1px solid rgba(255, 255, 255, 0.56);\r\n  background: rgba(255, 255, 255, 0.12);\r\n  color: #fff;\r\n}\r\n\r\n.ftor-homepage .ftor-btn-light:hover,\r\n.ftor-homepage .ftor-btn-ghost:hover {\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.ftor-homepage a:focus-visible,\r\n.ftor-homepage button:focus-visible,\r\n.ftor-homepage input:focus-visible {\r\n  outline: 3px solid rgba(112, 178, 178, 0.58);\r\n  outline-offset: 3px;\r\n}\r\n\r\n@media (max-width: 1050px) {\r\n  .ftor-homepage .ftor-platform-grid,\r\n  .ftor-homepage .ftor-editorial,\r\n  .ftor-homepage .ftor-faq-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tool-frame {\r\n    transform: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tools-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n\r\n  .ftor-homepage .ftor-platform-mockups {\r\n    max-width: 760px;\r\n  }\r\n}\r\n\r\n@media (max-width: 820px) {\r\n  .ftor-homepage .ftor-section {\r\n    padding: 72px 0;\r\n  }\r\n\r\n  .ftor-homepage .ftor-bento,\r\n  .ftor-homepage .ftor-bento-wide,\r\n  .ftor-homepage .ftor-preview-lab,\r\n  .ftor-homepage .ftor-platform-mockups {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-bento-large,\r\n  .ftor-homepage .ftor-bento-wide {\r\n    grid-column: auto;\r\n    grid-row: auto;\r\n    min-height: auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tab-list {\r\n    display: flex;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tab {\r\n    flex: 0 0 auto;\r\n    white-space: nowrap;\r\n  }\r\n}\r\n\r\n@media (max-width: 620px) {\r\n  .ftor-homepage .ftor-container {\r\n    width: min(100% - 26px, 1160px);\r\n  }\r\n\r\n  .ftor-homepage .ftor-actions,\r\n  .ftor-homepage .ftor-cta-actions {\r\n    flex-direction: column;\r\n  }\r\n\r\n  .ftor-homepage .ftor-btn {\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .ftor-homepage .ftor-trust-row {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tools-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-float {\r\n    display: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-preview-row {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .ftor-homepage .ftor-preview-row span {\r\n    max-width: 100%;\r\n  }\r\n\r\n  .ftor-homepage .ftor-preview-row button {\r\n    align-self: flex-start;\r\n  }\r\n\r\n  .ftor-homepage .ftor-style-preview div {\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-final-section {\r\n    padding-bottom: 72px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ftor-homepage .ftor-float {\r\n    animation: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-btn,\r\n  .ftor-homepage .ftor-tool-frame,\r\n  .ftor-homepage .ftor-bento-card,\r\n  .ftor-homepage .ftor-tool-card,\r\n  .ftor-homepage .ftor-preview-panel,\r\n  .ftor-homepage .ftor-faq-item div {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n.ftor-homepage .ftor-guides-section {\r\n  position: relative;\r\n  padding-top: 86px;\r\n  padding-bottom: 86px;\r\n}\r\n\r\n.ftor-homepage .ftor-guides-head {\r\n  display: grid;\r\n  grid-template-columns: 130px minmax(0, 720px);\r\n  gap: 28px;\r\n  align-items: start;\r\n  margin-bottom: 34px;\r\n}\r\n\r\n.ftor-homepage .ftor-guides-label {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  border: 1px solid var(--ftor-border);\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.72);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 8px 12px;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  letter-spacing: 0.08em;\r\n}\r\n\r\n.ftor-homepage .ftor-guides-head h2 {\r\n  margin: 0;\r\n  color: var(--ftor-text);\r\n  font-size: clamp(32px, 4.5vw, 52px);\r\n  line-height: 1.06;\r\n  letter-spacing: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-guides-head p {\r\n  max-width: 650px;\r\n  margin: 14px 0 0;\r\n  color: var(--ftor-muted);\r\n  font-size: 17px;\r\n  line-height: 1.75;\r\n}\r\n\r\n.ftor-homepage .ftor-guides-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);\r\n  gap: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-side {\r\n  display: grid;\r\n  gap: 18px;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-card {\r\n  overflow: hidden;\r\n  border: 1px solid var(--ftor-border);\r\n  border-radius: 24px;\r\n  background: rgba(255, 255, 255, 0.84);\r\n  box-shadow: 0 16px 42px rgba(1, 107, 97, 0.08);\r\n  transition: transform 200ms ease, box-shadow 200ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 22px 52px rgba(1, 107, 97, 0.12);\r\n}\r\n\r\n.ftor-homepage .ftor-guide-link {\r\n  display: grid;\r\n  height: 100%;\r\n  color: inherit;\r\n  text-decoration: none;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-featured .ftor-guide-link {\r\n  grid-template-rows: minmax(270px, 0.96fr) auto;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-small .ftor-guide-link {\r\n  grid-template-columns: 180px 1fr;\r\n  min-height: 230px;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual {\r\n  position: relative;\r\n  overflow: hidden;\r\n  min-height: 180px;\r\n  background: linear-gradient(135deg, rgba(1, 107, 97, 0.12), rgba(158, 207, 212, 0.32));\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-poster {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  place-items: center;\r\n  background:\r\n    radial-gradient(circle at 78% 24%, rgba(229, 233, 197, 0.68), transparent 32%),\r\n    linear-gradient(135deg, rgba(1, 107, 97, 0.16), rgba(158, 207, 212, 0.42));\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-poster span {\r\n  color: var(--ftor-primary-dark);\r\n  font-size: clamp(44px, 7vw, 82px);\r\n  font-weight: 800;\r\n  line-height: 1;\r\n  opacity: 0.9;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-phone {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background:\r\n    radial-gradient(circle at 20% 20%, rgba(229, 233, 197, 0.74), transparent 34%),\r\n    linear-gradient(135deg, rgba(112, 178, 178, 0.22), rgba(247, 251, 250, 0.92));\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-phone div {\r\n  width: 118px;\r\n  min-height: 150px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  border: 1px solid rgba(1, 107, 97, 0.12);\r\n  border-radius: 24px;\r\n  background: rgba(255, 255, 255, 0.84);\r\n  padding: 16px 12px;\r\n  box-shadow: 0 14px 34px rgba(1, 107, 97, 0.10);\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-phone b {\r\n  color: var(--ftor-primary-dark);\r\n  font-size: 18px;\r\n  line-height: 1.2;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-phone span {\r\n  margin-top: 10px;\r\n  color: var(--ftor-muted);\r\n  font-size: 12px;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-code {\r\n  display: grid;\r\n  align-content: center;\r\n  gap: 9px;\r\n  padding: 22px;\r\n  background:\r\n    linear-gradient(135deg, rgba(9, 47, 43, 0.08), rgba(158, 207, 212, 0.28)),\r\n    rgba(247, 251, 250, 0.92);\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-code code {\r\n  display: block;\r\n  border: 1px solid rgba(1, 107, 97, 0.10);\r\n  border-radius: 12px;\r\n  background: rgba(255, 255, 255, 0.78);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 9px 10px;\r\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\r\n  font-size: 12px;\r\n  line-height: 1.4;\r\n  white-space: nowrap;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-content {\r\n  padding: 24px;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-small .ftor-guide-content {\r\n  padding: 22px;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-category {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  border-radius: 999px;\r\n  background: rgba(229, 233, 197, 0.74);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 7px 10px;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-content h3 {\r\n  margin: 14px 0 0;\r\n  color: var(--ftor-text);\r\n  font-size: clamp(22px, 2.8vw, 34px);\r\n  line-height: 1.14;\r\n  letter-spacing: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-small .ftor-guide-content h3 {\r\n  font-size: 21px;\r\n  line-height: 1.22;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-content p {\r\n  margin: 12px 0 0;\r\n  color: var(--ftor-muted);\r\n  line-height: 1.65;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-meta {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n  margin-top: 20px;\r\n  color: var(--ftor-primary-dark);\r\n  font-size: 14px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-meta i {\r\n  display: inline-flex;\r\n  width: 34px;\r\n  height: 34px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  background: rgba(1, 107, 97, 0.09);\r\n  color: var(--ftor-primary);\r\n  font-style: normal;\r\n  transition: transform 180ms ease, background 180ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-card:hover .ftor-guide-meta i {\r\n  background: var(--ftor-primary);\r\n  color: #fff;\r\n  transform: translateX(3px);\r\n}\r\n\r\n.ftor-homepage .ftor-guide-link:focus-visible {\r\n  outline: 3px solid rgba(112, 178, 178, 0.58);\r\n  outline-offset: 4px;\r\n  border-radius: 22px;\r\n}\r\n\r\n@media (max-width: 980px) {\r\n  .ftor-homepage .ftor-guides-head,\r\n  .ftor-homepage .ftor-guides-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-guide-side {\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-guide-small .ftor-guide-link {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n  .ftor-homepage .ftor-guides-section {\r\n    padding-top: 72px;\r\n    padding-bottom: 72px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-guide-side {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-guide-featured .ftor-guide-link,\r\n  .ftor-homepage .ftor-guide-small .ftor-guide-link {\r\n    grid-template-columns: 1fr;\r\n    grid-template-rows: auto auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-guide-visual {\r\n    min-height: 210px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-guide-content,\r\n  .ftor-homepage .ftor-guide-small .ftor-guide-content {\r\n    padding: 22px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ftor-homepage .ftor-guide-card,\r\n  .ftor-homepage .ftor-guide-meta i {\r\n    transition: none;\r\n  }\r\n}\r\n  \r\n  .ftor-homepage .ftor-orbit-section {\r\n  padding-top: 90px;\r\n  padding-bottom: 90px;\r\n  background:\r\n    radial-gradient(circle at 82% 40%, rgba(158, 207, 212, 0.28), transparent 30%),\r\n    linear-gradient(180deg, rgba(238, 248, 247, 0.58), rgba(247, 251, 250, 0));\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-layout {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);\r\n  gap: 64px;\r\n  align-items: center;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-copy {\r\n  max-width: 560px;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-copy h2 {\r\n  margin: 16px 0 0;\r\n  color: var(--ftor-text);\r\n  font-size: clamp(32px, 4.6vw, 54px);\r\n  line-height: 1.06;\r\n  letter-spacing: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-copy p {\r\n  margin: 18px 0 0;\r\n  color: var(--ftor-muted);\r\n  font-size: 17px;\r\n  line-height: 1.75;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-list {\r\n  display: grid;\r\n  gap: 12px;\r\n  margin: 26px 0 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-list li {\r\n  position: relative;\r\n  padding-left: 28px;\r\n  color: var(--ftor-primary-dark);\r\n  font-weight: 700;\r\n  line-height: 1.5;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-list li::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0.62em;\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 999px;\r\n  background: linear-gradient(135deg, var(--ftor-primary), var(--ftor-aqua));\r\n  box-shadow: 0 0 0 5px rgba(1, 107, 97, 0.08);\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-copy .ftor-btn {\r\n  margin-top: 30px;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-stage {\r\n  position: relative;\r\n  width: min(100%, 560px);\r\n  height: 390px;\r\n  margin-left: auto;\r\n  isolation: isolate;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-glow {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 10px;\r\n  width: 72%;\r\n  height: 58%;\r\n  border-radius: 999px;\r\n  background:\r\n    radial-gradient(circle, rgba(158, 207, 212, 0.36), transparent 62%),\r\n    radial-gradient(circle, rgba(229, 233, 197, 0.42), transparent 70%);\r\n  transform: translateX(-50%);\r\n  filter: blur(2px);\r\n  z-index: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-ring {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 58px;\r\n  transform: translateX(-50%);\r\n  border: 1px solid rgba(1, 107, 97, 0.16);\r\n  border-bottom: 0;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-ring::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 14px;\r\n  border-top: 1px dashed rgba(112, 178, 178, 0.20);\r\n  border-radius: inherit;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-ring-outer {\r\n  width: 540px;\r\n  height: 270px;\r\n  border-radius: 540px 540px 0 0;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-ring-inner {\r\n  bottom: 92px;\r\n  width: 390px;\r\n  height: 195px;\r\n  border-radius: 390px 390px 0 0;\r\n  opacity: 0.9;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-icon-node {\r\n  position: absolute;\r\n  z-index: 3;\r\n  display: inline-flex;\r\n  width: 54px;\r\n  height: 54px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid rgba(1, 107, 97, 0.15);\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.84);\r\n  color: var(--ftor-primary);\r\n  box-shadow: 0 14px 34px rgba(1, 107, 97, 0.10);\r\n  text-decoration: none;\r\n  backdrop-filter: blur(12px);\r\n  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;\r\n  animation: ftorOrbitSoftFloat 7s ease-in-out infinite;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-icon-node:hover {\r\n  transform: translateY(-4px);\r\n  border-color: rgba(1, 107, 97, 0.28);\r\n  background: rgba(255, 255, 255, 0.95);\r\n  box-shadow: 0 18px 42px rgba(1, 107, 97, 0.16);\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--ftor-primary);\r\n  font-size: 20px;\r\n  font-weight: 800;\r\n  line-height: 1;\r\n  transition: transform 200ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-icon-node:hover .ftor-orbit-icon {\r\n  transform: scale(1.06);\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-icon svg {\r\n  width: 24px;\r\n  height: 24px;\r\n  display: block;\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-node-1 { left: 0%; bottom: 42px; animation-delay: -0.4s; }\r\n.ftor-homepage .ftor-orbit-node-2 { left: 7%; top: 150px; animation-delay: -1.2s; }\r\n.ftor-homepage .ftor-orbit-node-3 { left: 22%; top: 58px; animation-delay: -2s; }\r\n.ftor-homepage .ftor-orbit-node-4 { left: 47%; top: 8px; animation-delay: -2.8s; }\r\n.ftor-homepage .ftor-orbit-node-5 { right: 22%; top: 58px; animation-delay: -3.6s; }\r\n.ftor-homepage .ftor-orbit-node-6 { right: 7%; top: 150px; animation-delay: -4.4s; }\r\n.ftor-homepage .ftor-orbit-node-7 { right: 0%; bottom: 42px; animation-delay: -5.2s; }\r\n\r\n.ftor-homepage .ftor-orbit-node-8 { left: 18%; bottom: 118px; animation-delay: -1.6s; }\r\n.ftor-homepage .ftor-orbit-node-9 { left: 33%; top: 126px; animation-delay: -2.4s; }\r\n.ftor-homepage .ftor-orbit-node-10 { left: 50%; top: 96px; transform: translateX(-50%); animation-delay: -3.2s; }\r\n.ftor-homepage .ftor-orbit-node-10:hover { transform: translateX(-50%) translateY(-4px); }\r\n.ftor-homepage .ftor-orbit-node-11 { right: 33%; top: 126px; animation-delay: -4s; }\r\n.ftor-homepage .ftor-orbit-node-12 { right: 18%; bottom: 118px; animation-delay: -4.8s; }\r\n\r\n.ftor-homepage .ftor-orbit-center-card {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 18px;\r\n  z-index: 4;\r\n  width: min(320px, 78%);\r\n  border: 1px solid rgba(1, 107, 97, 0.14);\r\n  border-radius: 24px;\r\n  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 248, 247, 0.84));\r\n  box-shadow: 0 20px 54px rgba(1, 107, 97, 0.13);\r\n  padding: 22px;\r\n  text-align: center;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-center-card h3 {\r\n  margin: 0;\r\n  color: var(--ftor-primary-dark);\r\n  font-size: 30px;\r\n  line-height: 1.1;\r\n  letter-spacing: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-center-card p {\r\n  margin: 8px 0 0;\r\n  color: var(--ftor-muted);\r\n  font-size: 14px;\r\n  line-height: 1.55;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-center-card div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  margin-top: 16px;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-center-card span {\r\n  display: inline-flex;\r\n  border-radius: 999px;\r\n  background: rgba(229, 233, 197, 0.72);\r\n  color: var(--ftor-primary-dark);\r\n  padding: 7px 9px;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-orbit-icon-node:focus-visible {\r\n  outline: 3px solid rgba(112, 178, 178, 0.58);\r\n  outline-offset: 4px;\r\n}\r\n\r\n@keyframes ftorOrbitSoftFloat {\r\n  0%, 100% { margin-top: 0; }\r\n  50% { margin-top: -6px; }\r\n}\r\n\r\n@media (max-width: 1050px) {\r\n  .ftor-homepage .ftor-orbit-layout {\r\n    grid-template-columns: 1fr;\r\n    gap: 48px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-copy {\r\n    max-width: 760px;\r\n    text-align: center;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-copy .ftor-kicker,\r\n  .ftor-homepage .ftor-orbit-copy .ftor-btn {\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-list {\r\n    max-width: 390px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n    text-align: left;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-stage {\r\n    margin: 0 auto;\r\n  }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n  .ftor-homepage .ftor-orbit-section {\r\n    padding-top: 72px;\r\n    padding-bottom: 72px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-stage {\r\n    height: auto;\r\n    display: grid;\r\n    gap: 18px;\r\n    width: 100%;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-glow,\r\n  .ftor-homepage .ftor-orbit-ring {\r\n    display: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-center-card {\r\n    position: relative;\r\n    left: auto;\r\n    bottom: auto;\r\n    width: auto;\r\n    order: 1;\r\n    transform: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-icon-node {\r\n    position: relative;\r\n    left: auto;\r\n    right: auto;\r\n    top: auto;\r\n    bottom: auto;\r\n    width: 42px;\r\n    height: 42px;\r\n    transform: none;\r\n    animation: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-icon-node:hover,\r\n  .ftor-homepage .ftor-orbit-node-10:hover {\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-stage {\r\n    grid-template-columns: repeat(4, 42px);\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-center-card {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-icon {\r\n    font-size: 17px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-icon svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n  .ftor-homepage .ftor-orbit-stage {\r\n    grid-template-columns: repeat(3, 42px);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ftor-homepage .ftor-orbit-icon-node {\r\n    animation: none;\r\n    transition: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-orbit-icon {\r\n    transition: none;\r\n  }\r\n}\r\n  \r\n  .ftor-homepage .ftor-client-cloud-section {\r\n  padding: 56px 0;\r\n  background:\r\n    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.30), transparent 24%),\r\n    linear-gradient(135deg, #016B61 0%, #70B2B2 52%, #9ECFD4 100%);\r\n  overflow: hidden;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-inner {\r\n  text-align: center;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-title {\r\n  margin: 0 auto 34px;\r\n  max-width: 760px;\r\n  color: #fff;\r\n  font-size: clamp(28px, 4vw, 42px);\r\n  line-height: 1.14;\r\n  letter-spacing: 0;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-title span,\r\n.ftor-homepage .ftor-client-cloud-title strong {\r\n  display: block;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-title span {\r\n  color: rgba(255, 255, 255, 0.72);\r\n  font-weight: 600;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-title strong {\r\n  color: #fff;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-mask {\r\n  overflow: hidden;\r\n  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\r\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-track {\r\n  display: flex;\r\n  width: max-content;\r\n  align-items: center;\r\n  gap: clamp(34px, 5vw, 64px);\r\n  animation: ftorClientLogoCloud 34s linear infinite;\r\n}\r\n\r\n.ftor-homepage .ftor-client-cloud-mask:hover .ftor-client-cloud-track {\r\n  animation-play-state: paused;\r\n}\r\n\r\n.ftor-homepage .ftor-client-logo-img {\r\n  flex: 0 0 auto;\r\n  display: block;\r\n  max-width: 150px;\r\n  height: clamp(24px, 3vw, 34px);\r\n  object-fit: contain;\r\n  opacity: 0.82;\r\n  filter: grayscale(12%) saturate(0.92);\r\n  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-client-logo-img:hover {\r\n  opacity: 1;\r\n  filter: none;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n@keyframes ftorClientLogoCloud {\r\n  from {\r\n    transform: translateX(0);\r\n  }\r\n\r\n  to {\r\n    transform: translateX(-50%);\r\n  }\r\n}\r\n\r\n@media (max-width: 680px) {\r\n  .ftor-homepage .ftor-client-cloud-section {\r\n    padding: 44px 0;\r\n  }\r\n\r\n  .ftor-homepage .ftor-client-cloud-title {\r\n    margin-bottom: 28px;\r\n    font-size: clamp(25px, 8vw, 34px);\r\n  }\r\n\r\n  .ftor-homepage .ftor-client-cloud-track {\r\n    gap: 34px;\r\n    animation-duration: 28s;\r\n  }\r\n\r\n  .ftor-homepage .ftor-client-logo-img {\r\n    max-width: 122px;\r\n    height: clamp(20px, 6vw, 28px);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ftor-homepage .ftor-client-cloud-mask {\r\n    mask-image: none;\r\n    -webkit-mask-image: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-client-cloud-track {\r\n    width: auto;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    animation: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-client-logo-img[aria-hidden=\"true\"] {\r\n    display: none;\r\n  }\r\n}\r\n  \r\n  .ftor-homepage .ftor-hero {\r\n  position: relative;\r\n  overflow: hidden;\r\n  padding: clamp(82px, 9vw, 100px) 0 clamp(70px, 8vw, 100px);\r\n  background:\r\n    radial-gradient(circle at 18% 18%, rgba(158, 207, 212, 0.34), transparent 28%),\r\n    radial-gradient(circle at 82% 18%, rgba(229, 233, 197, 0.58), transparent 30%),\r\n    radial-gradient(circle at 50% 92%, rgba(112, 178, 178, 0.20), transparent 34%),\r\n    linear-gradient(135deg, #F7FBFA 0%, #EFF6EA 48%, #DFF3F4 100%);\r\n}\r\n\r\n.ftor-homepage .ftor-hero-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  opacity: 0.28;\r\n  background-image:\r\n    linear-gradient(rgba(1, 107, 97, 0.08) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(1, 107, 97, 0.08) 1px, transparent 1px);\r\n  background-size: 52px 52px;\r\n  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.76) 56%, transparent 100%);\r\n  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.76) 56%, transparent 100%);\r\n}\r\n\r\n.ftor-homepage .ftor-hero::after {\r\n  content: \"Aa\";\r\n  position: absolute;\r\n  right: 7%;\r\n  bottom: 7%;\r\n  color: rgba(1, 107, 97, 0.055);\r\n  font-size: clamp(120px, 20vw, 270px);\r\n  font-weight: 800;\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-content {\r\n  position: relative;\r\n  z-index: 2;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: fit-content;\r\n  border: 1px solid rgba(1, 107, 97, 0.14);\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.74);\r\n  color: #024F48;\r\n  padding: 9px 14px;\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  box-shadow: 0 12px 28px rgba(1, 107, 97, 0.08);\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\n.ftor-homepage .ftor-hero-title {\r\n\r\n  margin: 22px auto 0;\r\n  color: #092F2B;\r\n  font-size: clamp(42px, 7vw, 82px);\r\n  line-height: 0.98;\r\n  letter-spacing: 0;\r\n  font-weight: 800;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-text {\r\n  max-width: 720px;\r\n  margin: 22px auto 0;\r\n  color: #5D7775;\r\n  font-size: clamp(17px, 2vw, 20px);\r\n  line-height: 1.72;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  margin-top: 32px;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-btn {\r\n  display: inline-flex;\r\n  min-height: 52px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  padding: 14px 24px;\r\n  font-size: 15px;\r\n  font-weight: 800;\r\n  text-decoration: none;\r\n  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-btn-primary {\r\n  background: #016B61;\r\n  color: #fff;\r\n  box-shadow: 0 16px 34px rgba(1, 107, 97, 0.22);\r\n}\r\n\r\n.ftor-homepage .ftor-hero-btn-primary:hover {\r\n  background: #024F48;\r\n  color: #fff;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.ftor-homepage .ftor-hero-btn-secondary {\r\n  border: 1px solid rgba(1, 107, 97, 0.20);\r\n  background: rgba(255, 255, 255, 0.72);\r\n  color: #024F48;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-btn-secondary:hover {\r\n  background: rgba(158, 207, 212, 0.24);\r\n  color: #024F48;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.ftor-homepage .ftor-hero-trust {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  margin-top: 26px;\r\n}\r\n\r\n.ftor-homepage .ftor-hero-trust-item {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid rgba(1, 107, 97, 0.12);\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.56);\r\n  color: #024F48;\r\n  padding: 8px 12px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-tool-shortcode-wrap {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 1140px;\r\n  margin: clamp(42px, 6vw, 68px) auto 0;\r\n  border: 1px solid rgba(1, 107, 97, 0.14);\r\n  border-radius: 30px;\r\n  background:\r\n    linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(238, 248, 247, 0.82));\r\n  box-shadow:\r\n    0 26px 72px rgba(1, 107, 97, 0.16),\r\n    inset 0 1px 0 rgba(255, 255, 255, 0.88);\r\n  backdrop-filter: blur(16px);\r\n}\r\n\r\n.ftor-homepage .ftor-tool-shortcode-inner {\r\n  min-height: clamp(260px, 32vw, 420px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\/*   padding: clamp(22px, 4vw, 42px); *\/\r\n  border-radius: inherit;\r\n  color: rgba(2, 79, 72, 0.74);\r\n  text-align: center;\r\n  font-size: 15px;\r\n  line-height: 1.7;\r\n  font-weight: 700;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icons {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  width: clamp(40px, 5vw, 50px);\r\n  height: clamp(40px, 5vw, 50px);\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid rgba(1, 107, 97, 0.14);\r\n  border-radius: 20px;\r\n  background: #016B61;\r\n  color: #fff;\r\n  box-shadow: 0 16px 36px rgba(1, 107, 97, 0.10);\r\n  backdrop-filter: blur(14px);\r\n  opacity: 0.78;\r\n  animation: ftorHeroFloat 8s ease-in-out infinite;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon i {\r\n  display: inline-flex;\r\n  font-size: clamp(22px, 2.2vw, 30px);\r\n  line-height: 1;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-1 {\r\n  left: 8%;\r\n  top: 16%;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-2 {\r\n  right: 9%;\r\n  top: 15%;\r\n  animation-delay: -1.8s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-3 {\r\n  left: 15%;\r\n  top: 38%;\r\n  animation-delay: -3.2s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-4 {\r\n  right: 15%;\r\n  top: 39%;\r\n  animation-delay: -2.6s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-5 {\r\n  left: 6%;\r\n  bottom: 31%;\r\n  animation-delay: -4.1s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-6 {\r\n  right: 6%;\r\n  bottom: 32%;\r\n  animation-delay: -5.4s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-7 {\r\n  left: 17%;\r\n  bottom: 11%;\r\n  animation-delay: -2.1s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-8 {\r\n  right: 18%;\r\n  bottom: 10%;\r\n  animation-delay: -3.8s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-9 {\r\n  left: 34%;\r\n  top: 9%;\r\n  animation-delay: -4.8s;\r\n}\r\n\r\n.ftor-homepage .ftor-floating-icon-10 {\r\n  right: 34%;\r\n  top: 9%;\r\n  animation-delay: -6s;\r\n}\r\n\r\n@keyframes ftorHeroFloat {\r\n  0%, 100% {\r\n    transform: translate3d(0, 0, 0);\r\n    opacity: 0.66;\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(0, -14px, 0);\r\n    opacity: 0.9;\r\n  }\r\n}\r\n\r\n.ftor-homepage .ftor-hero-btn:focus-visible {\r\n  outline: 3px solid rgba(112, 178, 178, 0.58);\r\n  outline-offset: 4px;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ftor-homepage .ftor-floating-icon {\r\n    width: 54px;\r\n    height: 54px;\r\n    border-radius: 18px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon i {\r\n    font-size: 23px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon-9,\r\n  .ftor-homepage .ftor-floating-icon-10 {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 760px) {\r\n  .ftor-homepage .ftor-hero {\r\n    padding: 72px 0 68px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-title {\r\n    font-size: clamp(38px, 11vw, 54px);\r\n    line-height: 1.04;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-text {\r\n    font-size: 16px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-actions {\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    max-width: 340px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-btn {\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-trust {\r\n    max-width: 340px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-trust-item {\r\n    flex: 1 1 auto;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tool-shortcode-wrap {\r\n    border-radius: 24px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon {\r\n    width: 46px;\r\n    height: 46px;\r\n    border-radius: 16px;\r\n    opacity: 0.54;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon i {\r\n    font-size: 20px;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon-1 {\r\n    left: 5%;\r\n    top: 9%;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon-2 {\r\n    right: 5%;\r\n    top: 10%;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon-3,\r\n  .ftor-homepage .ftor-floating-icon-6,\r\n  .ftor-homepage .ftor-floating-icon-7,\r\n  .ftor-homepage .ftor-floating-icon-8,\r\n  .ftor-homepage .ftor-floating-icon-9,\r\n  .ftor-homepage .ftor-floating-icon-10 {\r\n    display: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon-4 {\r\n    right: 4%;\r\n    top: 42%;\r\n  }\r\n\r\n  .ftor-homepage .ftor-floating-icon-5 {\r\n    left: 4%;\r\n    bottom: 28%;\r\n  }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n  .ftor-homepage .ftor-hero-trust {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ftor-homepage .ftor-tool-shortcode-inner {\r\n    min-height: 240px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ftor-homepage .ftor-floating-icon {\r\n    animation: none;\r\n  }\r\n\r\n  .ftor-homepage .ftor-hero-btn,\r\n  .ftor-homepage .ftor-tool-shortcode-wrap {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n  .ftor-homepage .ftor-guide-visual-image {\r\n  position: relative;\r\n  overflow: hidden;\r\n  background: rgba(238, 248, 247, 0.78);\r\n}\r\n\r\n.ftor-homepage .ftor-guide-visual-image img {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: inherit;\r\n  object-fit: cover;\r\n  transition: transform 260ms ease, opacity 260ms ease;\r\n}\r\n\r\n.ftor-homepage .ftor-guide-card:hover .ftor-guide-visual-image img {\r\n  transform: scale(1.035);\r\n  opacity: 0.96;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ftor-homepage .ftor-guide-visual-image img {\r\n    transition: none;\r\n  }\r\n}\r\n  \r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  var root = document.querySelector('.ftor-homepage');\r\n  if (!root) return;\r\n\r\n  var motionQuery = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;\r\n  var reducedMotion = motionQuery ? motionQuery.matches : false;\r\n\r\n  \/*\r\n   * Hero floating icons\r\n   * Supports both the older .ftor-float elements and the newer\r\n   * centered hero .ftor-floating-icon elements.\r\n   *\/\r\n  var floatItems = root.querySelectorAll('.ftor-float, .ftor-floating-icon');\r\n\r\n  function resetFloatItems() {\r\n    floatItems.forEach(function(item) {\r\n      item.style.setProperty('--ftor-rx', '0px');\r\n      item.style.setProperty('--ftor-ry', '0px');\r\n    });\r\n  }\r\n\r\n  if (!reducedMotion && floatItems.length && window.innerWidth >= 768) {\r\n    root.addEventListener('mousemove', function(event) {\r\n      floatItems.forEach(function(item) {\r\n        var rect = item.getBoundingClientRect();\r\n        var cx = rect.left + rect.width \/ 2;\r\n        var cy = rect.top + rect.height \/ 2;\r\n        var dx = event.clientX - cx;\r\n        var dy = event.clientY - cy;\r\n        var distance = Math.sqrt(dx * dx + dy * dy);\r\n        var range = 145;\r\n\r\n        if (distance < range) {\r\n          var force = (range - distance) \/ range;\r\n          var x = ((dx \/ distance) || 0) * force * -12;\r\n          var y = ((dy \/ distance) || 0) * force * -12;\r\n          item.style.setProperty('--ftor-rx', x.toFixed(2) + 'px');\r\n          item.style.setProperty('--ftor-ry', y.toFixed(2) + 'px');\r\n        } else {\r\n          item.style.setProperty('--ftor-rx', '0px');\r\n          item.style.setProperty('--ftor-ry', '0px');\r\n        }\r\n      });\r\n    });\r\n\r\n    root.addEventListener('mouseleave', resetFloatItems);\r\n  }\r\n\r\n  var previewData = {\r\n    bio: {\r\n      main: '\ud835\udcd5\ud835\udcf8\ud835\udcf7\ud835\udcfd\ud835\udcfd\ud835\udcf8\ud835\udcfb \u2726 Creative text maker',\r\n      sub: 'Stylish fonts for bios & captions',\r\n      label: 'Bio Preview'\r\n    },\r\n    username: {\r\n      main: '\ud835\udd09\ud835\udd2c\ud835\udd2b\ud835\udd31\ud835\udd31\ud835\udd2c\ud835\udd2f_Style',\r\n      sub: 'A username preview with a gothic copy-paste style',\r\n      label: 'Username Preview'\r\n    },\r\n    caption: {\r\n      main: '\ud835\udc02\ud835\udc2b\ud835\udc1e\ud835\udc1a\ud835\udc2d\ud835\udc1e \ud835\udc1b\ud835\udc1e\ud835\udc2d\ud835\udc2d\ud835\udc1e\ud835\udc2b \ud835\udc1c\ud835\udc1a\ud835\udc29\ud835\udc2d\ud835\udc22\ud835\udc28\ud835\udc27\ud835\udc2c \u2726',\r\n      sub: 'A social caption with bold styled text',\r\n      label: 'Caption Preview'\r\n    },\r\n    message: {\r\n      main: '\uff26\uff4f\uff4e\uff54\uff54\uff4f\uff52 makes simple text feel different.',\r\n      sub: 'A message preview with wide Unicode characters',\r\n      label: 'Message Preview'\r\n    },\r\n    heading: {\r\n      main: 'Fonttor Typography Preview',\r\n      sub: 'A clean heading preview for web and brand ideas',\r\n      label: 'Heading Preview'\r\n    }\r\n  };\r\n\r\n  var tabs = Array.prototype.slice.call(root.querySelectorAll('.ftor-tab'));\r\n  var panel = root.querySelector('.ftor-preview-panel');\r\n  var previewLabel = root.querySelector('.ftor-preview-label');\r\n  var previewMain = root.querySelector('.ftor-preview-main');\r\n  var previewSub = root.querySelector('.ftor-preview-sub');\r\n\r\n  function activateTab(tab) {\r\n    if (!tab || !panel || !previewMain || !previewSub || !previewLabel) return;\r\n\r\n    var key = tab.getAttribute('data-ftor-preview');\r\n    var data = previewData[key];\r\n    if (!data) return;\r\n\r\n    tabs.forEach(function(item) {\r\n      item.classList.remove('ftor-tab-active');\r\n      item.setAttribute('aria-selected', 'false');\r\n      item.setAttribute('tabindex', '-1');\r\n    });\r\n\r\n    tab.classList.add('ftor-tab-active');\r\n    tab.setAttribute('aria-selected', 'true');\r\n    tab.setAttribute('tabindex', '0');\r\n\r\n    panel.classList.add('ftor-changing');\r\n\r\n    window.setTimeout(function() {\r\n      previewLabel.textContent = data.label;\r\n      previewMain.textContent = data.main;\r\n      previewSub.textContent = data.sub;\r\n      panel.setAttribute('aria-labelledby', tab.id);\r\n      panel.classList.remove('ftor-changing');\r\n    }, reducedMotion ? 0 : 150);\r\n  }\r\n\r\n  if (tabs.length) {\r\n    tabs.forEach(function(tab, index) {\r\n      tab.setAttribute('tabindex', tab.classList.contains('ftor-tab-active') ? '0' : '-1');\r\n\r\n      tab.addEventListener('click', function() {\r\n        activateTab(tab);\r\n      });\r\n\r\n      tab.addEventListener('keydown', function(event) {\r\n        var nextIndex;\r\n\r\n        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\r\n          nextIndex = (index + 1) % tabs.length;\r\n        } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\r\n          nextIndex = (index - 1 + tabs.length) % tabs.length;\r\n        } else if (event.key === 'Home') {\r\n          nextIndex = 0;\r\n        } else if (event.key === 'End') {\r\n          nextIndex = tabs.length - 1;\r\n        } else {\r\n          return;\r\n        }\r\n\r\n        event.preventDefault();\r\n        tabs[nextIndex].focus();\r\n        activateTab(tabs[nextIndex]);\r\n      });\r\n    });\r\n  }\r\n\r\n  var faqButtons = root.querySelectorAll('.ftor-faq-item button');\r\n\r\n  if (faqButtons.length) {\r\n    faqButtons.forEach(function(button) {\r\n      button.addEventListener('click', function() {\r\n        var expanded = button.getAttribute('aria-expanded') === 'true';\r\n        var panelId = button.getAttribute('aria-controls');\r\n        var faqPanel = panelId ? root.querySelector('#' + panelId) : null;\r\n\r\n        faqButtons.forEach(function(otherButton) {\r\n          var otherId = otherButton.getAttribute('aria-controls');\r\n          var otherPanel = otherId ? root.querySelector('#' + otherId) : null;\r\n          otherButton.setAttribute('aria-expanded', 'false');\r\n          if (otherPanel) otherPanel.style.maxHeight = '0px';\r\n        });\r\n\r\n        if (!expanded && faqPanel) {\r\n          button.setAttribute('aria-expanded', 'true');\r\n          faqPanel.style.maxHeight = faqPanel.scrollHeight + 'px';\r\n        }\r\n      });\r\n    });\r\n  }\r\n})();\r\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-homepage.php","meta":{"footnotes":""},"class_list":["post-5223","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages\/5223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/comments?post=5223"}],"version-history":[{"count":5,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages\/5223\/revisions"}],"predecessor-version":[{"id":5228,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages\/5223\/revisions\/5228"}],"wp:attachment":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/media?parent=5223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}