{"id":46,"date":"2026-03-22T12:05:04","date_gmt":"2026-03-22T12:05:04","guid":{"rendered":"https:\/\/flipfloop.com\/?page_id=46"},"modified":"2026-03-23T12:01:41","modified_gmt":"2026-03-23T12:01:41","slug":"flipfloop","status":"publish","type":"page","link":"https:\/\/flipfloop.com\/","title":{"rendered":"FlipFloop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"46\" class=\"elementor elementor-46\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-42b77bb elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"42b77bb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ce681c\" data-id=\"2ce681c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e1e3aa2 elementor-widget elementor-widget-html\" data-id=\"e1e3aa2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* \u2500\u2500 \u05d1\u05d9\u05d8\u05d5\u05dc \u05e2\u05d8\u05d9\u05e4\u05d5\u05ea \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 \u2500\u2500 *\/\n\n\/* \u05de\u05d1\u05d8\u05dc \u05e8\u05d5\u05d7\u05d1 \u05de\u05d5\u05d2\u05d1\u05dc \u05d5-padding \u05e9\u05dc \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 *\/\n.elementor-widget-html,\n.elementor-widget-container,\n.elementor-widget,\n.elementor-element,\n.elementor-column,\n.elementor-column-wrap,\n.elementor-column-gap-default > .elementor-column > .elementor-column-wrap,\n.elementor-section,\n.elementor-section-boxed > .elementor-container,\n.elementor-container {\n  max-width: 100% !important;\n  width: 100% !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n\/* \u05de\u05d1\u05d8\u05dc \u05de\u05e8\u05d5\u05d5\u05d7 \u05e2\u05dc\u05d9\u05d5\u05df \u2014 \u05db\u05d5\u05ea\u05e8\u05ea \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 Pro \u05db\u05d1\u05e8 \u05ea\u05d5\u05e4\u05e1\u05ea \u05de\u05e7\u05d5\u05dd *\/\n.elementor-section:first-child,\n.elementor-top-section:first-child {\n  margin-top: 0 !important;\n  padding-top: 0 !important;\n}\n\n\/* \u05de\u05d1\u05d8\u05dc padding \u05e9\u05dc \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 \u05e2\u05dc \u05d2\u05d5\u05e3 \u05d4\u05d3\u05e3 *\/\n.elementor-page .elementor {\n  padding-top: 0 !important;\n}\n\n\/* \u05de\u05d1\u05d8\u05dc \u05de\u05e8\u05d5\u05d5\u05d7 \u05e2\u05dc\u05d9\u05d5\u05df \u05de\u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05d4\u05e7\u05d1\u05d5\u05e2\u05d4 \u2014 \u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05db\u05d1\u05e8 \u05de\u05d5\u05d2\u05d3\u05e8\u05ea \u05d1-Pro *\/\n.hero {\n  padding-top: 72px !important;\n  margin-top: 0 !important;\n}\n\n\/* \u05d5\u05d9\u05d3\u05d5\u05d0 \u05e8\u05d5\u05d7\u05d1 \u05de\u05dc\u05d0 \u05dc\u05db\u05dc \u05d4-sections *\/\nsection, .hero, .proof-section, .how-section,\n.integration-section, .founders-section, .cta-band {\n  width: 100% !important;\n  max-width: 100% !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n<\/style>\n<!--\n  \u05ea\u05d5\u05db\u05df \u05d3\u05e3 FlipFloop \u2014 \u05dc\u05dc\u05d0 \u05db\u05d5\u05ea\u05e8\u05ea \u05d5\u05dc\u05dc\u05d0 \u05e4\u05d5\u05d8\u05e8\n  \u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05d5\u05d4\u05e4\u05d5\u05d8\u05e8 \u05de\u05d5\u05d2\u05d3\u05e8\u05d9\u05dd \u05e0\u05e4\u05e8\u05d3 \u05d1\u05d1\u05d5\u05e0\u05d4 \u05e2\u05e8\u05db\u05ea \u05d4\u05e0\u05d5\u05e9\u05d0 \u05e9\u05dc \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8\n\n  \u05d0\u05d5\u05e4\u05df \u05d4\u05d4\u05d3\u05d1\u05e7\u05d4:\n  1. \u05e4\u05ea\u05d7 \u05d0\u05ea \u05d4\u05d3\u05e3 \u05dc\u05e2\u05e8\u05d9\u05db\u05d4 \u05d1\u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8\n  2. \u05d2\u05e8\u05d5\u05e8 \u05e8\u05db\u05d9\u05d1 \"\u05e7\u05d5\u05d3 HTML\" \u05dc\u05ea\u05d5\u05da \u05d4\u05d3\u05e3\n  3. \u05d4\u05d3\u05d1\u05e7 \u05d0\u05ea \u05db\u05dc \u05d4\u05e7\u05d5\u05d3 \u05d4\u05d6\u05d4\n-->\n\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --black: #0a0a0a;\n    --white: #fafafa;\n    --cream: #f5f2ec;\n    --teal: #0D9B8A;\n    --purple: #6C3FC5;\n    --gold: #F5C518;\n    --orange: #FFB347;\n    --red: #E63323;\n    --blue: #1A56C4;\n    --green: #1E9E4F;\n    --bg: #f4f4f4;\n    --card-bg: #ffffff;\n    --text: #111111;\n    --text-muted: #666666;\n    --glass-bg: rgba(255,255,255,0.85);\n    --glass-border: rgba(0,0,0,0.08);\n    --serif: 'DM Serif Display', serif;\n    --sans: 'Plus Jakarta Sans', sans-serif;\n  }\n\n  html { scroll-behavior: smooth; }\n\n  body {\n    font-family: var(--sans);\n    background: var(--bg);\n    color: var(--text);\n    overflow-x: hidden;\n  }\n\n  \n\n  \/* \u2500\u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500 *\/\n  .hero {\n    min-height: 100vh;\n    display: flex; align-items: center; flex-wrap: wrap;\n    justify-content: center;\n    padding: 120px 48px 80px;\n    gap: 64px;\n    background: radial-gradient(ellipse 70% 60% at 20% 60%, rgba(13,155,138,0.07) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 50% at 80% 30%, rgba(108,63,197,0.06) 0%, transparent 70%),\n                var(--bg);\n    position: relative; overflow: hidden;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .hero::before {\n    content:''; position:absolute; inset:0;\n    background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n    pointer-events: none;\n  }\n\n  \/* \u2500\u2500 iPhone Mockup Left \u2500\u2500 *\/\n  .hero-phone-col {\n    flex: 0 0 340px;\n    display: flex; justify-content: center; align-items: center;\n    position: relative;\n  }\n  .iphone-wrap {\n    position: relative; width: 260px;\n    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.7));\n  }\n  .iphone-shell {\n    width: 260px; height: 530px; border-radius: 40px;\n    background: linear-gradient(145deg, #2a2a2a 0%, #111 60%, #222 100%);\n    border: 2px solid rgba(255,255,255,0.1);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 1px rgba(0,0,0,0.5);\n    position: relative; overflow: hidden;\n  }\n  .iphone-notch {\n    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);\n    width: 90px; height: 22px; background: #000; border-radius: 12px; z-index: 10;\n  }\n  .iphone-screen {\n    position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n    border-radius: 39px; overflow: hidden;\n    background: #f8f8f8;\n    \/* overflow:hidden \u05d7\u05d5\u05e1\u05dd \u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea \u05e9\u05d9\u05d5\u05e6\u05d0\u05d5\u05ea \u05de\u05d4\u05e9\u05de\u05d0\u05dc *\/\n  }\n  \/* App-like content inside phone *\/\n  .phone-app {\n    width: 100%; height: 100%;\n    display: flex; flex-direction: column;\n    font-family: var(--sans);\n    background: #f0f0f0;\n  }\n  .phone-topbar {\n    background: #fff; padding: 36px 12px 8px;\n    display: flex; align-items: center; gap: 6px;\n    border-bottom: 1px solid #eee;\n    flex-shrink: 0;\n  }\n  .phone-topbar-dot { width: 8px; height: 8px; border-radius: 50%; }\n  .phone-topbar-title {\n    font-size: 9px; font-weight: 700; color: #111;\n    margin-left: auto; margin-right: auto; letter-spacing: 0.05em;\n  }\n  \/* Scrollable article area *\/\n  .phone-scroll-area {\n    flex: 1; overflow: hidden; position: relative;\n  }\n  .phone-article {\n    padding: 10px 12px; will-change: transform;\n    transition: transform 0s; \/* driven by JS *\/\n  }\n  .phone-article-hero-img {\n    width: 100%; height: 70px; border-radius: 8px;\n    background: linear-gradient(135deg, var(--teal), var(--purple));\n    margin-bottom: 8px;\n    display: flex; align-items: center; justify-content: center;\n  }\n  .phone-article-hero-img span { color:#fff; font-size:8px; font-weight:600; opacity:0.8; }\n  .phone-article h3 { font-size: 10px; font-weight: 700; color: #111; line-height: 1.4; margin-bottom: 5px; }\n  .phone-article p { font-size: 7.5px; color: #555; line-height: 1.5; margin-bottom: 6px; }\n  .phone-article .divider { height: 1px; background: #e0e0e0; margin: 8px 0; }\n\n  \/* \u2500\u2500 TABS (FlipFloop banners) \u2500\u2500 *\/\n  \/* \u2500\u2500 Flipper diagonal-up-left tabs \u2500\u2500 *\/\n  \/*\n   * \u05d4\u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea \u05d4\u05df position:fixed \u05d1\u05ea\u05d5\u05da iphone-screen (overflow:hidden).\n   * \u05db\u05da iphone-screen \u05d7\u05d5\u05e1\u05dd \u05d0\u05d5\u05ea\u05df \u05de\u05d1\u05d7\u05d5\u05e5 \u2014 \u05d9\u05d5\u05e6\u05d0\u05d5\u05ea \u05de\u05d4\u05e7\u05d9\u05e8 \u05d4\u05e9\u05de\u05d0\u05dc\u05d9.\n   * top:44px = \u05de\u05ea\u05d7\u05ea \u05dc-notch+topbar = \u05d4\u05e8\u05e7\u05e2 \u05d4\u05d0\u05e4\u05d5\u05e8 \u05e9\u05dc \u05d4\u05d8\u05dc\u05e4\u05d5\u05df.\n   * \u05d4\u05ea\u05d7\u05dc\u05d4: translateX(-260px) = \u05de\u05d7\u05d5\u05e5 \u05dc\u05e9\u05de\u05d0\u05dc \u05dc\u05d2\u05de\u05e8\u05d9 (\u05e8\u05d5\u05d7\u05d1 \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df=260px)\n   *         translateY(+40px)  = \u05de\u05ea\u05d7\u05ea \u05dc\u05d2\u05d1\u05d5\u05dc\n   * \u05e1\u05d9\u05d5\u05dd:   translate(0,0)     = \u05e6\u05de\u05d5\u05d3 \u05dc\u05d2\u05d1\u05d5\u05dc \u05d4\u05e9\u05de\u05d0\u05dc\u05d9 + \u05d2\u05d1\u05d5\u05dc \u05d4\u05e2\u05dc\u05d9\u05d5\u05df \u05d4\u05d0\u05e4\u05d5\u05e8\n   *\/\n  .flipper-tabs {\n    position: absolute;\n    top: 44px; \/* \u05de\u05ea\u05d7\u05ea \u05dc\u05e0\u05d5\u05d8\u05e9+topbar \u2014 \u05d4\u05e8\u05e7\u05e2 \u05d4\u05d0\u05e4\u05d5\u05e8 *\/\n    left: 0; right: 0;\n    height: 40px;\n    z-index: 25;\n    pointer-events: none;\n  }\n  .ftab {\n    position: absolute;\n    top: 0; left: 0;\n    width: 260px; \/* \u05e8\u05d5\u05d7\u05d1 \u05de\u05dc\u05d0 \u05e9\u05dc \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df *\/\n    height: 40px;\n    border-radius: 0 0 10px 10px;\n    display: flex; align-items: center;\n    padding: 0 10px;\n    gap: 6px;\n    box-shadow: 0 3px 14px rgba(0,0,0,0.18);\n    \/* \u05e0\u05e7\u05d5\u05d3\u05ea \u05d4\u05ea\u05d7\u05dc\u05d4: \u05de\u05d7\u05d5\u05e5 \u05dc\u05e9\u05de\u05d0\u05dc + \u05de\u05ea\u05d7\u05ea *\/\n    transform: translate(-260px, 40px);  \/* \u05de\u05ea\u05d7\u05d9\u05dc \u05de\u05d7\u05d5\u05e5 \u05dc\u05e6\u05d3 \u05d4\u05e9\u05de\u05d0\u05dc\u05d9 *\/\n    transition: transform 0s;\n    will-change: transform;\n    white-space: nowrap;\n    backdrop-filter: blur(6px);\n    -webkit-backdrop-filter: blur(6px);\n    border: 1px solid rgba(0,0,0,0.08);\n    border-top: none;\n  }\n  .ftab-icon  { font-size: 12px; flex-shrink: 0; }\n  .ftab-texts { display: flex; flex-direction: column; gap: 1.5px; flex: 1; min-width: 0; overflow: hidden; }\n  .ftab-title { font-size: 7.5px; font-weight: 800; color: rgba(0,0,0,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  .ftab-desc  { font-size: 6px;   font-weight: 500; color: rgba(0,0,0,0.52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  .ftab-arrow { font-size: 10px; color: rgba(0,0,0,0.28); flex-shrink: 0; margin-left: auto; }\n  .ftab-1 { background: rgba(255,236,210,0.95); } \/* \u05d0\u05e4\u05e8\u05e1\u05e7 *\/\n  .ftab-2 { background: rgba(210,232,255,0.95); } \/* \u05ea\u05db\u05dc\u05ea *\/\n  .ftab-3 { background: rgba(220,255,220,0.95); } \/* \u05d9\u05e8\u05d5\u05e7 \u05de\u05e0\u05d8\u05d4 *\/\n  .ftab-4 { background: rgba(245,220,255,0.95); } \/* \u05dc\u05d1\u05e0\u05d3\u05e8 *\/\n  .ftab-5 { background: rgba(255,255,210,0.95); } \/* \u05e6\u05d4\u05d5\u05d1 \u05d7\u05de\u05d0\u05d4 *\/\n\n  \/* side buttons of phone *\/\n  .phone-side-btn {\n    position: absolute; right: -3px; border-radius: 0 2px 2px 0;\n    background: #333; width: 3px;\n  }\n  .phone-side-btn-1 { top: 100px; height: 30px; }\n  .phone-side-btn-2 { top: 140px; height: 30px; }\n  .phone-btn-left {\n    position: absolute; left: -3px; top: 120px; height: 50px;\n    background: #333; width: 3px; border-radius: 2px 0 0 2px;\n  }\n\n  \/* \u2500\u2500 HERO TEXT \u2500\u2500 *\/\n  .hero-text-col {\n    flex: 1; display: flex; flex-direction: column;\n    align-items: flex-start; justify-content: center;\n    max-width: 580px;\n  }\n  .hero-logo-above {\n    height: 44px; margin-bottom: 28px;\n    filter: brightness(1.1);\n  }\n  .hero-eyebrow {\n    font-size: 11px; font-weight: 700; letter-spacing: 0.15em;\n    color: var(--teal); text-transform: uppercase;\n    margin-bottom: 14px;\n    display: flex; align-items: center; gap: 8px;\n  }\n  .hero-eyebrow::before {\n    content: ''; display: block; width: 28px; height: 2px; background: var(--teal);\n  }\n  .hero-h1 {\n    font-family: var(--serif); font-style: italic;\n    font-size: clamp(34px, 4vw, 54px); line-height: 1.12;\n    color: var(--text); margin-bottom: 22px;\n    letter-spacing: -0.01em;\n  }\n  .hero-h1 em { font-style: normal; color: var(--orange); }\n  .hero-sub {\n    font-size: 16px; line-height: 1.65; color: var(--text-muted);\n    font-weight: 400; margin-bottom: 36px; max-width: 460px;\n  }\n  .hero-sub strong { color: var(--text); font-weight: 600; }\n  .cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\n  .btn-primary {\n    background: var(--orange); color: var(--black);\n    font-family: var(--sans); font-weight: 800; font-size: 14px;\n    letter-spacing: 0.04em; padding: 14px 36px; border-radius: 100px;\n    border: none; cursor: pointer; text-decoration: none;\n    display: inline-flex; align-items: center; gap: 8px;\n    transition: transform 0.2s, box-shadow 0.2s;\n    box-shadow: 0 4px 30px rgba(255,179,71,0.35);\n  }\n  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(255,179,71,0.5); }\n  .btn-ghost {\n    font-family: var(--sans); font-weight: 600; font-size: 14px;\n    color: rgba(0,0,0,0.45); text-decoration: none;\n    display: flex; align-items: center; gap: 6px;\n    transition: color 0.2s;\n  }\n  .btn-ghost:hover { color: var(--text); }\n  .hero-metrics {\n    margin-top: 44px; display: flex; gap: 32px;\n  }\n  .hm-item { display: flex; flex-direction: column; gap: 4px; }\n  .hm-num { font-family: var(--serif); font-size: 32px; font-style: italic; color: var(--teal); }\n  .hm-label { font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; }\n\n  \/* \u2500\u2500\u2500\u2500 SECTION COMMONS \u2500\u2500\u2500\u2500 *\/\n  section { padding: 100px 48px; }\n  .section-label {\n    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;\n    color: var(--teal); text-transform: uppercase;\n    margin-bottom: 14px;\n    display: flex; align-items: center; gap: 10px;\n  }\n  .section-label::before { content:''; display:block; width:24px; height:2px; background:var(--teal); }\n  .section-h2 {\n    font-family: var(--serif); font-style: italic;\n    font-size: clamp(28px, 3.5vw, 48px); line-height: 1.15;\n    color: var(--text);\n    margin-bottom: 16px;\n  }\n  .section-sub { font-size: 16px; color: var(--text-muted); line-height: 1.7; max-width: 540px; }\n\n  \/* \u2500\u2500\u2500\u2500 PROOF SECTION \u2500\u2500\u2500\u2500 *\/\n  .proof-section {\n    background: #ececec;\n  }\n  .proof-inner { max-width: 1100px; margin: 0 auto; }\n  .proof-grid {\n    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;\n    margin-top: 56px;\n  }\n  .proof-card {\n    background: var(--card-bg);\n    border: 1px solid rgba(0,0,0,0.07);\n    border-radius: 20px; padding: 36px 32px;\n    box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n    position: relative; overflow: hidden;\n    transition: transform 0.3s, box-shadow 0.3s;\n  }\n  .proof-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }\n  .proof-card::before {\n    content:''; position:absolute; top:0; left:0; right:0; height:3px;\n    background: linear-gradient(90deg, transparent, var(--teal), transparent);\n    opacity: 0.7;\n  }\n  .proof-card.highlight::before { background: linear-gradient(90deg, transparent, var(--orange), transparent); }\n  .proof-card-label {\n    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;\n    text-transform: uppercase; color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n  .proof-ctr {\n    font-family: var(--serif); font-size: 64px; font-style: italic;\n    line-height: 1; margin-bottom: 8px;\n  }\n  .proof-ctr.dim { color: rgba(0,0,0,0.2); }\n  .proof-ctr.bright { color: var(--orange); }\n  .proof-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; }\n\n  .proof-bar-wrap { margin-top: 40px; }\n  .proof-bar-label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; display:flex; justify-content:space-between; }\n  .proof-bar-track { height: 10px; background: rgba(0,0,0,0.07); border-radius: 100px; overflow: hidden; margin-bottom: 18px; }\n  .proof-bar-fill {\n    height: 100%; border-radius: 100px;\n    transform: scaleX(0); transform-origin: left;\n    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .proof-bar-fill.standard { background: rgba(0,0,0,0.15); width: 9.4%; }\n  .proof-bar-fill.flipfloop { background: linear-gradient(90deg, var(--teal), var(--orange)); width: 100%; }\n  .proof-bar-fill.animated { transform: scaleX(1); }\n\n  .portals { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(0,0,0,0.07); }\n  .portals-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; }\n  .portal-tags { display: flex; gap: 12px; flex-wrap: wrap; }\n  .portal-tag {\n    background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.1);\n    border-radius: 100px; padding: 7px 18px;\n    font-size: 13px; font-weight: 600; color: var(--text-muted);\n    letter-spacing: 0.02em;\n    transition: all 0.2s;\n  }\n  .portal-tag:hover { background: rgba(0,0,0,0.08); color: var(--text); }\n\n  \/* \u2500\u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500\u2500 *\/\n  .how-section {\n    background: var(--bg);\n  }\n  .how-inner { max-width: 1100px; margin: 0 auto; }\n  .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }\n  .step-card {\n    background: var(--card-bg); border: 1px solid rgba(0,0,0,0.07);\n    border-radius: 20px; padding: 36px 28px;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.05);\n    position: relative; overflow: hidden;\n    transition: transform 0.3s;\n  }\n  .step-card:hover { transform: translateY(-4px); }\n  .step-num {\n    font-family: var(--serif); font-size: 72px; font-style: italic;\n    color: rgba(0,0,0,0.04); line-height: 1;\n    position: absolute; top: 12px; right: 20px;\n  }\n  .step-icon {\n    width: 48px; height: 48px; border-radius: 14px;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 22px; margin-bottom: 20px;\n  }\n  .step-icon.teal { background: rgba(13,155,138,0.12); }\n  .step-icon.purple { background: rgba(108,63,197,0.12); }\n  .step-icon.gold { background: rgba(245,197,24,0.12); }\n  .step-h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.3; }\n  .step-p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }\n\n  \/* \u2500\u2500\u2500\u2500 INTEGRATION SECTION \u2500\u2500\u2500\u2500 *\/\n  .integration-section { background: #ececec; }\n  .integration-inner { max-width: 1100px; margin: 0 auto; }\n  .platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }\n  .platform-card {\n    background: var(--card-bg); border: 1px solid rgba(0,0,0,0.07);\n    border-radius: 16px; padding: 28px 24px;\n    text-align: center; cursor: default;\n    box-shadow: 0 4px 16px rgba(0,0,0,0.05);\n    transition: transform 0.3s, border-color 0.3s;\n  }\n  .platform-card:hover { transform: translateY(-3px); border-color: rgba(13,155,138,0.3); }\n  .platform-icon { font-size: 32px; margin-bottom: 12px; }\n  .platform-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }\n  .platform-desc { font-size: 12px; color: var(--text-muted); }\n\n  \/* \u2500\u2500\u2500\u2500 FOUNDERS \u2500\u2500\u2500\u2500 *\/\n  .founders-section {\n    background: var(--bg);\n  }\n  .founders-inner { max-width: 1100px; margin: 0 auto; text-align: center; }\n  .founders-grid { display: flex; justify-content: center; gap: 40px; margin-top: 56px; flex-wrap: wrap; }\n  .founder-card {\n    background: var(--card-bg); border: 1px solid rgba(0,0,0,0.07);\n    border-radius: 24px; padding: 40px 36px;\n    width: 280px; text-align: center;\n    box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n    transition: transform 0.3s;\n  }\n  .founder-card:hover { transform: translateY(-6px); }\n  .founder-avatar {\n    width: 80px; height: 80px; border-radius: 50%;\n    margin: 0 auto 18px;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 32px; font-weight: 800;\n    color: var(--white); font-family: var(--serif);\n    position: relative;\n  }\n  .founder-avatar::after {\n    content: ''; position: absolute; inset: -3px;\n    border-radius: 50%; z-index: -1;\n  }\n  .avatar-teal { background: linear-gradient(135deg, var(--teal), #0bb8a3); }\n  .avatar-teal::after { background: linear-gradient(135deg, var(--teal), var(--purple)); }\n  .avatar-purple { background: linear-gradient(135deg, var(--purple), #a855f7); }\n  .avatar-purple::after { background: linear-gradient(135deg, var(--purple), var(--gold)); }\n  .founder-name { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--text); margin-bottom: 6px; }\n  .founder-role { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }\n\n  \/* \u2500\u2500\u2500\u2500 CTA BAND \u2500\u2500\u2500\u2500 *\/\n  .cta-band {\n    padding: 80px 48px;\n    background: linear-gradient(135deg, rgba(13,155,138,0.08) 0%, rgba(108,63,197,0.06) 100%);\n    border-top: 1px solid rgba(0,0,0,0.07);\n    border-bottom: 1px solid rgba(0,0,0,0.07);\n    text-align: center;\n  }\n  .cta-band-h2 {\n    font-family: var(--serif); font-style: italic;\n    font-size: clamp(28px, 4vw, 52px); color: var(--text);\n    margin-bottom: 18px;\n  }\n  .cta-band-sub { font-size: 16px; color: var(--text-muted); margin-bottom: 36px; }\n\n  \n\n  \/* \u2500\u2500\u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500\u2500 *\/\n  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }\n  .reveal.visible { opacity: 1; transform: none; }\n  .reveal-delay-1 { transition-delay: 0.1s; }\n  .reveal-delay-2 { transition-delay: 0.2s; }\n  .reveal-delay-3 { transition-delay: 0.3s; }\n\n  @media (max-width: 900px) {\n    \/* \u05de\u05d5\u05d1\u05d9\u05d9\u05dc: hero \u05d4\u05d5\u05e4\u05da \u05dc-flex column wrap *\/\n    .hero {\n      flex-direction: column;\n      flex-wrap: nowrap;\n      padding: 80px 20px 60px;\n      gap: 0;\n      align-items: center;\n    }\n    \/* 1. hero-text-col \u05e2\u05dc\u05d9\u05d5\u05df: \u05de\u05e6\u05d9\u05d2 \u05e8\u05e7 eyebrow + h1 *\/\n    .hero-text-col {\n      order: 1;\n      align-items: center;\n      text-align: center;\n      width: 100%;\n    }\n    \/* \u05d4\u05e1\u05ea\u05e8 sub, cta, metrics \u05de\u05d4-text-col *\/\n    .hero-sub { display: none; }\n    .cta-row { display: none; }\n    .hero-metrics { display: none; }\n    \/* 2. \u05d8\u05dc\u05e4\u05d5\u05df *\/\n    .hero-phone-col { order: 2; width: 100%; margin: 28px 0 0; }\n    \/* 3. \u05d8\u05e7\u05e1\u05d8 \u05d0\u05d7\u05e8\u05d9 \u05d4\u05d8\u05dc\u05e4\u05d5\u05df *\/\n    .hero-sub-mobile {\n      order: 3;\n      display: block !important;\n      width: 100%;\n      text-align: center;\n      font-size: 15px;\n      line-height: 1.65;\n      color: #666;\n      font-family: 'Plus Jakarta Sans', sans-serif;\n      padding: 20px 16px 0;\n      margin: 0;\n    }\n    .hero-sub-mobile strong { color: #111; font-weight: 600; }\n    \/* 4. \u05db\u05e4\u05ea\u05d5\u05e8\u05d9\u05dd *\/\n    .hero-cta-mobile {\n      order: 4;\n      display: flex !important;\n      justify-content: center;\n      gap: 20px;\n      flex-wrap: wrap;\n      padding: 24px 16px 0;\n      width: 100%;\n    }\n    \/* 5. \u05de\u05d8\u05e8\u05d9\u05e7\u05d5\u05ea *\/\n    .hero-metrics-mobile {\n      order: 5;\n      display: flex !important;\n      justify-content: center;\n      gap: 20px;\n      padding: 24px 16px 0;\n      width: 100%;\n    }\n    .hero-eyebrow::before { display: none; }\n    .section-label::before { display: none; }\n    .proof-grid, .steps-grid, .platform-grid { grid-template-columns: 1fr; }\n    section { padding: 64px 20px; }\n  }\n<\/style>\n<style>\n\/* \u05de\u05e8\u05d5\u05d5\u05d7 \u05e2\u05dc\u05d9\u05d5\u05df \u05de\u05d8\u05d5\u05e4\u05dc \u05d1\u05e7\u05d5\u05d3 \u05d4\u05e8\u05d0\u05e9\u05d9 \u05dc\u05de\u05e2\u05dc\u05d4 *\/\n\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\n\n<style>\n\/* \u2500\u2500 \u05ea\u05d9\u05e7\u05d5\u05e0\u05d9 \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 \u2500\u2500 *\/\n\n\/* \u05de\u05e8\u05db\u05d5\u05d6 \u05d4-hero *\/\nsection.hero {\n  justify-content: center !important;\n}\n.hero > * {\n  flex-shrink: 0;\n}\n\/* \u05de\u05d2\u05d1\u05d9\u05dc \u05d0\u05ea \u05e8\u05d5\u05d7\u05d1 \u05ea\u05d5\u05db\u05df \u05d4-hero *\/\n.hero-phone-col,\n.hero-text-col {\n  max-width: 500px;\n}\n\/* \u05d4\u05e1\u05ea\u05e8\u05ea \u05d4\u05dc\u05d5\u05d2\u05d5 \u05d4\u05db\u05e4\u05d5\u05dc *\/\n.hero-logo-above {\n  display: none !important;\n}\n\n\/* \u05d1\u05d9\u05d8\u05d5\u05dc padding \u05e9\u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 \u05de\u05d5\u05e1\u05d9\u05e3 \u05dc\u05e2\u05de\u05d5\u05d3 *\/\n.elementor-page, \n.elementor-section-wrap,\n.elementor-widget-container,\n.elementor-widget-html,\n.elementor-element {\n  padding: 0 !important;\n  margin: 0 !important;\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* \u05e4\u05e8\u05d9\u05e6\u05d4 \u05de\u05d7\u05d5\u05e5 \u05dc\u05e7\u05d5\u05e0\u05d8\u05d9\u05d9\u05e0\u05e8 \u05e9\u05dc \u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 *\/\n.ff-fullwidth-escape {\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n}\n\n\/* \u05d1\u05d9\u05d8\u05d5\u05dc padding \u05e2\u05dc\u05d9\u05d5\u05df \u05e9\u05dc WordPress\/\u05d0\u05dc\u05de\u05e0\u05d8\u05d5\u05e8 *\/\nbody.elementor-page {\n  padding-top: 0 !important;\n  margin-top: 0 !important;\n}\n\n\/* \u05de\u05e8\u05d5\u05d5\u05d7 \u05e2\u05dc\u05d9\u05d5\u05df \u05dc-hero \u2014 \u05d2\u05d5\u05d1\u05d4 \u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05d1\u05dc\u05d1\u05d3 *\/\n.hero {\n  padding-top: 80px !important;\n  margin-top: 0 !important;\n}\n<\/style>\n\n<div class=\"ff-fullwidth-escape\">\n<!-- HERO -->\n<section class=\"hero\" id=\"hero\">\n  <!-- Left: iPhone Mockup -->\n  <div class=\"hero-phone-col\">\n    <div class=\"iphone-wrap\">\n      <!-- Tabs anchored to left-middle of phone -->\n      <div class=\"iphone-shell\">\n        <div class=\"phone-side-btn phone-side-btn-1\"><\/div>\n        <div class=\"phone-side-btn phone-side-btn-2\"><\/div>\n        <div class=\"phone-btn-left\"><\/div>\n        <div class=\"iphone-notch\"><\/div>\n        <div class=\"iphone-screen\">\n          <!-- \u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea \u05d1\u05ea\u05d5\u05da \u05d4\u05de\u05e1\u05da \u2014 \u05e0\u05d7\u05ea\u05db\u05d5\u05ea \u05e2\u05dc \u05d9\u05d3\u05d9 overflow:hidden \u05e9\u05dc iphone-screen -->\n          <div class=\"flipper-tabs\" id=\"flipperTabs\">\n            <div class=\"ftab ftab-1\" id=\"tab1\">\n              <span class=\"ftab-icon\">\ud83c\udfaf<\/span>\n              <span class=\"ftab-texts\">\n                <span class=\"ftab-title\">Boost Performance<\/span>\n                <span class=\"ftab-desc\">AI-powered ad campaigns<\/span>\n              <\/span>\n              <span class=\"ftab-arrow\">\u2190<\/span>\n            <\/div>\n            <div class=\"ftab ftab-2\" id=\"tab2\">\n              <span class=\"ftab-icon\">\ud83d\udecd<\/span>\n              <span class=\"ftab-texts\">\n                <span class=\"ftab-title\">Shop the Sale<\/span>\n                <span class=\"ftab-desc\">Up to 60% off today only<\/span>\n              <\/span>\n              <span class=\"ftab-arrow\">\u2190<\/span>\n            <\/div>\n            <div class=\"ftab ftab-3\" id=\"tab3\">\n              <span class=\"ftab-icon\">\ud83d\udca1<\/span>\n              <span class=\"ftab-texts\">\n                <span class=\"ftab-title\">Limited Offer<\/span>\n                <span class=\"ftab-desc\">Get 3 months free<\/span>\n              <\/span>\n              <span class=\"ftab-arrow\">\u2190<\/span>\n            <\/div>\n            <div class=\"ftab ftab-4\" id=\"tab4\">\n              <span class=\"ftab-icon\">\ud83d\ude80<\/span>\n              <span class=\"ftab-texts\">\n                <span class=\"ftab-title\">Launch Ready<\/span>\n                <span class=\"ftab-desc\">Deploy in seconds<\/span>\n              <\/span>\n              <span class=\"ftab-arrow\">\u2190<\/span>\n            <\/div>\n            <div class=\"ftab ftab-5\" id=\"tab5\">\n              <span class=\"ftab-icon\">\ud83c\udfb5<\/span>\n              <span class=\"ftab-texts\">\n                <span class=\"ftab-title\">Stream Now<\/span>\n                <span class=\"ftab-desc\">Millions of tracks free<\/span>\n              <\/span>\n              <span class=\"ftab-arrow\">\u2190<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"phone-app\">\n            <div class=\"phone-topbar\">\n              <div class=\"phone-topbar-dot\" style=\"background:#ff5f57\"><\/div>\n              <div class=\"phone-topbar-dot\" style=\"background:#ffbd2e; margin-left:3px\"><\/div>\n              <div class=\"phone-topbar-dot\" style=\"background:#28ca41; margin-left:3px\"><\/div>\n              <div class=\"phone-topbar-title\">NEWS PORTAL<\/div>\n            <\/div>\n            <div class=\"phone-scroll-area\">\n              <div class=\"phone-article\" id=\"phoneArticle\">\n                <div class=\"phone-article-hero-img\"><span>BREAKING NEWS<\/span><\/div>\n                <h3>Tech Giants Report Record Revenue in Q4 2025<\/h3>\n                <p>Major technology companies have reported unprecedented earnings this quarter, with total combined revenue exceeding $800 billion across the sector.<\/p>\n                <div class=\"divider\"><\/div>\n                <p>Analysts attributed the surge to increased AI product adoption, with enterprise subscriptions growing 340% year-over-year across all major platforms.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Markets Respond Positively to Fed Rate Decision<\/h3>\n                <p>Wall Street saw significant gains following the Federal Reserve's announcement to hold rates steady for the third consecutive quarter.<\/p>\n                <p>The S&P 500 climbed 2.3% while technology stocks led broader market gains with the NASDAQ up 3.1% at close of trading.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>New Policy Framework for AI Development<\/h3>\n                <p>International coalitions have agreed to a new set of guidelines that will govern AI model training and deployment over the next decade.<\/p>\n                <p>The framework emphasizes transparency, safety audits, and public accountability mechanisms for all foundation model providers.<\/p>\n                <div class=\"divider\"><\/div>\n                <p>Consumer confidence indexes hit a 5-year high as inflation data showed continued moderation, signaling economic stability entering 2026.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Global Supply Chains Show Signs of Recovery<\/h3>\n                <p>After years of disruption, major logistics networks report near-normal delivery times across most product categories globally.<\/p>\n                <p>Shipping costs have dropped 60% from their 2022 peak, providing relief for manufacturers and retailers worldwide.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Renewable Energy Surpasses Coal Globally<\/h3>\n                <p>For the first time in history, solar and wind combined have exceeded coal in global electricity generation, marking a milestone in the energy transition.<\/p>\n                <p>Investment in clean energy reached $1.8 trillion in 2025, with emerging markets accounting for 40% of new capacity additions.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Healthcare Innovation Accelerates<\/h3>\n                <p>AI-assisted diagnostics now operate in over 3,000 hospitals worldwide, reducing misdiagnosis rates by an average of 34% across participating institutions.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Real Estate Markets Stabilize<\/h3>\n                <p>After two years of correction, housing prices in major metropolitan areas have found a floor, with transaction volumes recovering toward pre-2023 levels.<\/p>\n                <p>Remote work policies continue to reshape demand, with suburban markets outperforming urban cores in 14 of the top 20 US metro areas.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Education Technology Reshapes Learning<\/h3>\n                <p>Adaptive learning platforms now serve over 400 million students globally, with measurable improvements in outcomes across all age groups and regions.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Space Economy Reaches $600 Billion<\/h3>\n                <p>Commercial space ventures logged over 240 launches in 2025, with satellite-based internet services now covering 94% of Earth's surface including polar regions.<\/p>\n                <p>In-orbit servicing contracts have become a standard line item for major telecom operators, extending satellite lifespans by an average of seven years.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Cybersecurity Spending Hits Record<\/h3>\n                <p>Global enterprise cybersecurity budgets exceeded $280 billion, driven by the proliferation of AI-powered attack tools that require equally sophisticated defenses.<\/p>\n                <p>Zero-trust architectures are now deployed by 68% of Fortune 500 companies, up from just 19% three years ago.<\/p>\n                <div class=\"divider\"><\/div>\n                <h3>Electric Vehicles Cross 30% Market Share<\/h3>\n                <p>New EV registrations surpassed combustion vehicles in twelve countries during Q3 2025, with battery costs falling below the $80\/kWh threshold ahead of most forecasts.<\/p>\n                <p>Charging infrastructure investments by governments and private operators combined reached $140 billion, with fast-charging corridors now spanning all major highways in Europe and North America.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u05de\u05d5\u05d1\u05d9\u05d9\u05dc \u05d1\u05dc\u05d1\u05d3: \u05d8\u05e7\u05e1\u05d8, \u05db\u05e4\u05ea\u05d5\u05e8\u05d9\u05dd, \u05de\u05d8\u05e8\u05d9\u05e7\u05d5\u05ea \u05d0\u05d7\u05e8\u05d9 \u05d4\u05d8\u05dc\u05e4\u05d5\u05df -->\n  <p class=\"hero-sub-mobile\" style=\"display:none;\"><strong>10x Higher CTR. Zero Intrusion.<\/strong><br\/>Modern monetization for modern creators.<\/p>\n  <div class=\"hero-cta-mobile\" style=\"display:none;\">\n    <a href=\"#get-started\" class=\"btn-primary\">Get Started \u2192<\/a>\n    <a href=\"#proof\" class=\"btn-ghost\">See the data \u2193<\/a>\n  <\/div>\n  <div class=\"hero-metrics-mobile\" style=\"display:none;\">\n    <div class=\"hm-item\"><span class=\"hm-num\">10\u00d7<\/span><span class=\"hm-label\">Higher CTR<\/span><\/div>\n    <div class=\"hm-item\"><span class=\"hm-num\">5.2%<\/span><span class=\"hm-label\">Avg. CTR<\/span><\/div>\n    <div class=\"hm-item\"><span class=\"hm-num\">5 min<\/span><span class=\"hm-label\">Integration<\/span><\/div>\n  <\/div>\n\n  <!-- Right: Hero Text -->\n  <div class=\"hero-text-col\">\n\n    <div class=\"hero-eyebrow\">Mobile Ad Innovation<\/div>\n    <h1 class=\"hero-h1\">\n      The Ad Experience<br\/>That <em>Flows<\/em> With<br\/>Your Readers\n    <\/h1>\n    <p class=\"hero-sub\">\n      <strong>10x Higher CTR. Zero Intrusion.<\/strong><br\/>\n      Modern monetization for modern creators.\n    <\/p>\n    <div class=\"cta-row\">\n      <a href=\"#get-started\" class=\"btn-primary\" id=\"get-started\">\n        Get Started \u2192\n      <\/a>\n      <a href=\"#proof\" class=\"btn-ghost\">\n        See the data \u2193\n      <\/a>\n    <\/div>\n    <div class=\"hero-metrics\">\n      <div class=\"hm-item\">\n        <span class=\"hm-num\">10\u00d7<\/span>\n        <span class=\"hm-label\">Higher CTR<\/span>\n      <\/div>\n      <div class=\"hm-item\">\n        <span class=\"hm-num\">5.2%<\/span>\n        <span class=\"hm-label\">Avg. CTR<\/span>\n      <\/div>\n      <div class=\"hm-item\">\n        <span class=\"hm-num\">5 min<\/span>\n        <span class=\"hm-label\">Integration<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- PROOF SECTION -->\n<section class=\"proof-section\" id=\"proof\">\n  <div class=\"proof-inner\">\n    <div class=\"section-label reveal\">Proven Results<\/div>\n    <h2 class=\"section-h2 reveal reveal-delay-1\">10\u00d7 More Clicks Than<br\/>Standard Banners<\/h2>\n    <p class=\"section-sub reveal reveal-delay-2\">Real performance data from major Israeli news portals \u2014 the numbers speak for themselves.<\/p>\n\n    <div class=\"proof-grid\">\n      <div class=\"proof-card reveal reveal-delay-1\">\n        <div class=\"proof-card-label\">Standard Banner<\/div>\n        <div class=\"proof-ctr dim\">0.49%<\/div>\n        <div class=\"proof-desc\">Industry average click-through rate for traditional display banners. Readers scroll past without noticing.<\/div>\n        <div class=\"proof-bar-wrap\">\n          <div class=\"proof-bar-label\"><span>CTR<\/span><span>0.49%<\/span><\/div>\n          <div class=\"proof-bar-track\">\n            <div class=\"proof-bar-fill standard\" data-bar><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"proof-card highlight reveal reveal-delay-2\">\n        <div class=\"proof-card-label\">FlipFloop Banner<\/div>\n        <div class=\"proof-ctr bright\">5.2%<\/div>\n        <div class=\"proof-desc\">FlipFloop's layered motion banners achieve 5.2% CTR by flowing naturally with the reading experience.<\/div>\n        <div class=\"proof-bar-wrap\">\n          <div class=\"proof-bar-label\"><span>CTR<\/span><span>5.2%<\/span><\/div>\n          <div class=\"proof-bar-track\">\n            <div class=\"proof-bar-fill flipfloop\" data-bar><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n\n  <\/div>\n<\/section>\n\n<!-- HOW IT WORKS -->\n<section class=\"how-section\" id=\"how\">\n  <div class=\"how-inner\">\n    <div class=\"section-label reveal\">The Flipper Engine<\/div>\n    <h2 class=\"section-h2 reveal reveal-delay-1\">Banners That Move<br\/>With the Story<\/h2>\n    <p class=\"section-sub reveal reveal-delay-2\">Three layered ad tabs that sync perfectly with article scroll \u2014 appearing when attention is highest.<\/p>\n\n    <div class=\"steps-grid\">\n      <div class=\"step-card reveal reveal-delay-1\">\n        <span class=\"step-num\">1<\/span>\n        <div class=\"step-icon teal\">\ud83d\udcd6<\/div>\n        <h3 class=\"step-h3\">Reader Enters Article<\/h3>\n        <p class=\"step-p\">As the reader begins scrolling through the article content, the FlipFloop engine activates and monitors scroll depth in real time.<\/p>\n      <\/div>\n      <div class=\"step-card reveal reveal-delay-2\">\n        <span class=\"step-num\">2<\/span>\n        <div class=\"step-icon purple\">\ud83c\udfaf<\/div>\n        <h3 class=\"step-h3\">Tabs Slide Into View<\/h3>\n        <p class=\"step-p\">At precise scroll thresholds, each tab slides in from the left \u2014 anchored to the screen edge, never blocking content. Tab 1 enters first, then Tab 2 climbs as Tab 1 slides up.<\/p>\n      <\/div>\n      <div class=\"step-card reveal reveal-delay-3\">\n        <span class=\"step-num\">3<\/span>\n        <div class=\"step-icon gold\">\ud83d\udcc8<\/div>\n        <h3 class=\"step-h3\">Attention Peak = Click<\/h3>\n        <p class=\"step-p\">Tabs appear only when readers are most engaged \u2014 mid-article, deep in content. That's why FlipFloop achieves 10\u00d7 higher CTR than static banners.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- INTEGRATION SECTION -->\n<section class=\"integration-section\" id=\"integration\">\n  <div class=\"integration-inner\">\n    <div class=\"section-label reveal\">Dead-Simple Setup<\/div>\n    <h2 class=\"section-h2 reveal reveal-delay-1\">Integrate in 5 Minutes<br\/>on Any Platform<\/h2>\n    <p class=\"section-sub reveal reveal-delay-2\">No developer required. Paste one script tag and you're live.<\/p>\n\n    <div class=\"platform-grid reveal\">\n      <div class=\"platform-card\">\n        <div class=\"platform-icon\">\u26a1<\/div>\n        <div class=\"platform-name\">WordPress<\/div>\n        <div class=\"platform-desc\">Plugin or snippet \u2014 live in 2 minutes<\/div>\n      <\/div>\n      <div class=\"platform-card\">\n        <div class=\"platform-icon\">\ud83c\udfa8<\/div>\n        <div class=\"platform-name\">Wix<\/div>\n        <div class=\"platform-desc\">Custom code embed, no coding required<\/div>\n      <\/div>\n      <div class=\"platform-card\">\n        <div class=\"platform-icon\">\ud83c\udfd7<\/div>\n        <div class=\"platform-name\">Base44<\/div>\n        <div class=\"platform-desc\">Native integration, auto-configured<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<!-- CTA BAND -->\n<div class=\"cta-band\">\n  <h2 class=\"cta-band-h2 reveal\">Ready to 10\u00d7 Your Ad Revenue?<\/h2>\n  <p class=\"cta-band-sub reveal reveal-delay-1\">Join the publishers already earning more with FlipFloop.<\/p>\n  <a href=\"#\" class=\"btn-primary reveal reveal-delay-2\">Get Started Free \u2192<\/a>\n<\/div>\n\n<!-- FOOTER -->\n\n<\/div><!-- \/ff-fullwidth-escape -->\n<script>\n\/\/ \u2500\u2500\u2500\u2500 FLIPPER ENGINE \u2500\u2500\u2500\u2500\n\/\/ The article inside the phone auto-scrolls on a timer,\n\/\/ and the tabs respond in perfect 1:1 ratio with the article scroll offset.\n\nconst phoneArticle = document.getElementById('phoneArticle');\nconst tab1 = document.getElementById('tab1');\nconst tab2 = document.getElementById('tab2');\nconst tab3 = document.getElementById('tab3');\nconst tab4 = document.getElementById('tab4');\nconst tab5 = document.getElementById('tab5');\n\n\/\/ Article total scrollable height\nfunction getArticleScrollHeight() {\n  const scrollArea = phoneArticle.parentElement;\n  return phoneArticle.scrollHeight - scrollArea.clientHeight;\n}\n\nlet articleOffset = 0; \/\/ current px offset of article (0 = top)\nlet animationId = null;\nlet lastTime = null;\nconst SCROLL_SPEED = 28; \/\/ px per second\nlet direction = 1; \/\/ 1 = down, -1 = up\nlet pauseTimer = 0;\n\nconst TAB_W = 260; \/\/ \u05e8\u05d5\u05d7\u05d1 \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df px \u2014 \u05d4\u05dc\u05e9\u05d5\u05e0\u05d9\u05ea \u05de\u05db\u05e1\u05d4 \u05d0\u05ea \u05db\u05dc \u05d4\u05e8\u05d5\u05d7\u05d1\nconst TAB_H = 40;  \/\/ \u05d2\u05d5\u05d1\u05d4 \u05dc\u05e9\u05d5\u05e0\u05d9\u05ea px\n\n\/*\n * \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 diagonal_up_right (\u05de\u05d9\u05de\u05d9\u05df \u05dc\u05e9\u05de\u05d0\u05dc + \u05db\u05dc\u05e4\u05d9 \u05de\u05e2\u05dc\u05d4):\n *\n * \u05d4\u05dc\u05e9\u05d5\u05e0\u05d9\u05ea \u05de\u05ea\u05d7\u05d9\u05dc\u05d4 \u05de\u05d7\u05d5\u05e5 \u05dc\u05e6\u05d3 \u05d4\u05d9\u05de\u05e0\u05d9 \u05e9\u05dc \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df + \u05de\u05ea\u05d7\u05ea:\n *   translate(+260px, +40px)  \u2192  translate(0, 0)\n *\n * \u05db\u05da \u05d4\u05d9\u05d0 \u05e0\u05db\u05e0\u05e1\u05ea \u05de\u05d4\u05e6\u05d3 \u05d4\u05d9\u05de\u05e0\u05d9 \u05d5\u05e2\u05d5\u05dc\u05d4 \u05d0\u05dc\u05db\u05e1\u05d5\u05e0\u05d9\u05ea \u05e2\u05d3 \u05e9\u05de\u05db\u05e1\u05d4 \u05d0\u05ea \u05db\u05dc \u05e8\u05d5\u05d7\u05d1 \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df.\n *\n * 1:1 \u05e2\u05dd \u05d2\u05dc\u05d9\u05dc\u05d4: \u05db\u05dc px \u05d2\u05dc\u05d9\u05dc\u05d4 = \u05e6\u05e2\u05d3 \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4.\n * TRAVEL = 260px = \u05e8\u05d5\u05d7\u05d1 \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df = \u05de\u05e8\u05d7\u05e7 \u05d4\u05db\u05e0\u05d9\u05e1\u05d4 \u05d4\u05de\u05dc\u05d0\u05d4.\n *\n * \u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea: tab1@0px  tab2@130px  tab3@260px\n * \u05d7\u05e4\u05d9\u05e4\u05d4 \u05d2\u05d3\u05d5\u05dc\u05d4 = \u05e9\u05ea\u05d9 \u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea \u05ea\u05de\u05d9\u05d3 \u05d6\u05d6\u05d5\u05ea \u05d1\u05d9\u05d7\u05d3.\n * \u05d2\u05dc\u05d9\u05dc\u05d4 \u05db\u05d5\u05dc\u05dc\u05ea = 520px \u05dc\u05e4\u05e0\u05d9 \u05d7\u05d6\u05e8\u05d4.\n *\/\nfunction updateTabs(offset) {\n  const TRAVEL = TAB_W; \/\/ 260px \u2014 \u05d1\u05d3\u05d9\u05d5\u05e7 \u05e8\u05d5\u05d7\u05d1 \u05d4\u05d0\u05d9\u05d9\u05e4\u05d5\u05df\n\n  function diagTab(startPx, el, zIdx, startY) {\n    el.style.zIndex = 20 + zIdx;\n    const raw = offset - startPx;\n\n    if (raw <= 0) {\n      el.style.transform = `translate(${-TAB_W}px, ${startY}px)`;\n      return;\n    }\n    if (raw >= TRAVEL) {\n      el.style.transform = `translate(0px, 0px)`;\n      return;\n    }\n    const p  = raw \/ TRAVEL;\n    const ip = 1 - p;\n    const tx = (-TAB_W * ip).toFixed(1);\n    const ty = ( startY * ip).toFixed(1);\n    el.style.transform = `translate(${tx}px, ${ty}px)`;\n  }\n\n  \/\/ startY \u05d2\u05d3\u05d5\u05dc \u05d9\u05d5\u05ea\u05e8 = \u05d9\u05d5\u05e6\u05d0\u05ea \u05e0\u05de\u05d5\u05da \u05d9\u05d5\u05ea\u05e8 = \u05de\u05db\u05e1\u05d4 \u05d0\u05ea \u05d4\u05e7\u05d5\u05d3\u05de\u05ea \u05e8\u05e7 \u05d1\u05e1\u05d5\u05e3\n  diagTab(0,   tab1, 0, 40);\n  diagTab(130, tab2, 1, 90);\n  diagTab(260, tab3, 2, 140);\n  diagTab(390, tab4, 3, 190);\n  diagTab(520, tab5, 4, 240);\n\n  phoneArticle.style.transform = `translateY(${-offset}px)`;\n}\n\nfunction animatePhone(ts) {\n  if (!lastTime) lastTime = ts;\n  const dt = (ts - lastTime) \/ 1000;\n  lastTime = ts;\n\n  const maxScroll = getArticleScrollHeight();\n\n  if (pauseTimer > 0) {\n    pauseTimer -= dt;\n  } else {\n    articleOffset += SCROLL_SPEED * direction * dt;\n\n    if (articleOffset >= maxScroll) {\n      articleOffset = maxScroll;\n      direction = -1;\n      pauseTimer = 3.0;\n    } else if (articleOffset <= 0) {\n      articleOffset = 0;\n      direction = 1;\n      pauseTimer = 1.5;\n    }\n  }\n\n  updateTabs(articleOffset);\n  animationId = requestAnimationFrame(animatePhone);\n}\n\nanimationId = requestAnimationFrame(animatePhone);\n\n\/\/ \u2500\u2500\u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500\u2500\nconst reveals = document.querySelectorAll('.reveal');\nconst revealObserver = new IntersectionObserver((entries) => {\n  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\n}, { threshold: 0.15 });\nreveals.forEach(el => revealObserver.observe(el));\n\n\/\/ \u2500\u2500\u2500\u2500 BAR ANIMATIONS \u2500\u2500\u2500\u2500\nconst bars = document.querySelectorAll('[data-bar]');\nconst barObserver = new IntersectionObserver((entries) => {\n  entries.forEach(e => {\n    if (e.isIntersecting) e.target.classList.add('animated');\n  });\n}, { threshold: 0.3 });\nbars.forEach(el => barObserver.observe(el));\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfaf Boost Performance AI-powered ad campaigns \u2190 \ud83d\udecd Shop the Sale Up to 60% off today only \u2190 \ud83d\udca1 Limited Offer Get 3 months free \u2190 \ud83d\ude80 Launch Ready Deploy in seconds \u2190 \ud83c\udfb5 Stream Now Millions of tracks free \u2190 NEWS PORTAL BREAKING NEWS Tech Giants Report Record Revenue in Q4 2025 Major technology [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":25,"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":122,"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/pages\/46\/revisions\/122"}],"wp:attachment":[{"href":"https:\/\/flipfloop.com\/index.php\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}