File: /var/www/bebroker/src/index.html
<!DOCTYPE html>
<html lang="{{lang}}">
<head>
<!-- base href removed to fix anchor navigation -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta content="true" name="HandheldFriendly" />
<meta content="width" name="MobileOptimized" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<title>{{head_title}}</title>
<meta name="description" content="{{head_meta_description}}" />
<meta name="theme-color" content="#0c111a" />
<link rel="shortcut icon" type="image/x-icon" href="./assets/static/favicon.ico" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="%VITE_BASE_URL%" />
<meta property="og:title" content="{{seo_og_title}}" />
<meta property="og:description" content="{{seo_og_description}}" />
<meta property="og:image" content="%VITE_BASE_URL%/assets/static/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="{{seo_og_site_name}}" />
<meta property="og:locale" content="{{seo_og_locale}}" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="%VITE_BASE_URL%" />
<meta name="twitter:title" content="{{seo_twitter_title}}" />
<meta name="twitter:description" content="{{seo_twitter_description}}" />
<meta name="twitter:image" content="%VITE_BASE_URL%/assets/static/og-image.png" />
<!-- Roistat Counter Start -->
<script defer>
(function(w, d, s, h, id) {
w.roistatProjectId = id; w.roistatHost = h;
var p = d.location.protocol == "https:" ? "https://" : "http://";
var u = /^.*roistat_visit=[^;]+(.*)?$/.test(d.cookie) ? "/dist/module.js" : "/api/site/1.0/"+id+"/init?referrer="+encodeURIComponent(d.location.href);
var js = d.createElement(s); js.charset="UTF-8"; js.async = 1; js.src = p+h+u; var js2 = d.getElementsByTagName(s)[0]; js2.parentNode.insertBefore(js, js2);
})(window, document, 'script', 'cloud.roistat.com', '1ec74ef9b67f65e8aaec7eb4ac4d541a');
</script>
<!-- Roistat Counter End -->
</head>
<body>
<header class="topbar">
<div class="container topbar__inner">
<img class="logo" src="./assets/resource/lp/light-brokerage/bebroker-logo.svg" alt="BeBroker" />
<nav class="nav" aria-label="Sections">
<a href="#benefits">{{nav_benefits}}</a>
<a href="#features">{{nav_features}}</a>
<a href="#pricing">{{nav_pricing}}</a>
<a href="#faq">{{nav_faq}}</a>
</nav>
<a class="btn btn--primary btn--sm" href="#contact" data-open-modal>{{nav_request_demo}}</a>
</div>
</header>
<main>
<section class="hero reveal" id="top">
<div class="hero__floating" aria-hidden="true">
<!-- Bitcoin (BTC) -->
<div class="hero__tile tile-1" data-depth="12" data-fall="0.8">
<img src="./assets/resource/lp/light-brokerage/hero-icons/btc-color.svg" alt="BTC" width="36" height="36" />
</div>
<!-- Ethereum (ETH) -->
<div class="hero__tile tile-2" data-depth="14" data-fall="1.2">
<img src="./assets/resource/lp/light-brokerage/hero-icons/eth-color.svg" alt="ETH" width="36" height="36" />
</div>
<!-- Gold (XAU) -->
<div class="hero__tile tile-3" data-depth="10" data-fall="0.6">
<img src="./assets/resource/lp/light-brokerage/hero-icons/xau-color.svg" alt="XAU" width="36" height="36" />
</div>
<!-- Tesla (TSLA) -->
<div class="hero__tile tile-4" data-depth="13" data-fall="1.0">
<img src="./assets/resource/lp/light-brokerage/hero-icons/tsla-color.svg" alt="TSLA" width="36" height="36" />
</div>
<!-- Nvidia (NVDA) -->
<div class="hero__tile tile-5" data-depth="11" data-fall="0.9">
<img src="./assets/resource/lp/light-brokerage/hero-icons/nvda-color.svg" alt="NVDA" width="36" height="36" />
</div>
<!-- Solana (SOL) -->
<div class="hero__tile tile-6" data-depth="12" data-fall="0.7">
<img src="./assets/resource/lp/light-brokerage/hero-icons/sol-color.svg" alt="SOL" width="36" height="36" />
</div>
<!-- Apple (AAPL) -->
<div class="hero__tile tile-7" data-depth="9" data-fall="1.1">
<img src="./assets/resource/lp/light-brokerage/hero-icons/aapl-color.svg" alt="AAPL" width="36" height="36" />
</div>
<!-- Candlestick Chart -->
<div class="hero__tile tile-8" data-depth="10" data-fall="0.5">
<img src="./assets/resource/lp/light-brokerage/hero-icons/chart-color.svg" alt="Chart" width="36"
height="36" />
</div>
</div>
<div class="container hero__layout">
<div class="hero__content">
<span class="eyebrow">{{hero_eyebrow}}</span>
<h1>{{hero_heading}}</h1>
<p>
{{hero_subtitle}}
</p>
<div class="hero__actions">
<a class="btn btn--primary" href="#contact" data-open-modal>{{hero_cta_primary}}</a>
<a class="btn btn--ghost" href="#features">{{hero_cta_secondary}}</a>
</div>
</div>
</div>
</section>
<section id="benefits" class="section reveal">
<div class="container">
<div class="benefits-head">
<h2 class="section-title">{{benefits_title}}</h2>
<p class="section-text">
{{benefits_text}}
</p>
</div>
<div class="bento stagger">
<!-- Left: 30+ Popular Markets -->
<article class="bento-card bento-card--dark">
<span class="bento-card__arrow" aria-hidden="true">
<svg width="14" height="14" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">
<path d="M1 13L13 1M13 1H4M13 1v9" />
</svg>
</span>
<div class="bento-card__stat">{{benefits_markets_stat}}</div>
<h3>{{benefits_markets_title}}</h3>
<p>{{benefits_markets_text}}</p>
<div class="bento-card__icons">
<img src="./assets/resource/lp/light-brokerage/hero-icons/btc.svg" alt="" width="28" height="28" />
<img src="./assets/resource/lp/light-brokerage/hero-icons/eth.svg" alt="" width="28" height="28" />
<img src="./assets/resource/lp/light-brokerage/hero-icons/xau.svg" alt="" width="28" height="28" />
<img src="./assets/resource/lp/light-brokerage/hero-icons/eurusd.svg" alt="" width="28" height="28" />
</div>
</article>
<!-- Center: Interface mosaic (span 2 rows) -->
<article class="bento-card bento-card--image bento-card--span-row2">
<div class="bento-mosaic" aria-hidden="true">
<div class="bento-mosaic__col">
<img src="./assets/resource/lp/light-brokerage/mosaic-2.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-4.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-3.png" alt="" loading="lazy" />
</div>
<div class="bento-mosaic__col">
<img src="./assets/resource/lp/light-brokerage/mosaic-1.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-3.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-4.png" alt="" loading="lazy" />
</div>
</div>
</article>
<!-- Right: 100% Customizable -->
<article class="bento-card bento-card--light">
<span class="bento-card__arrow" aria-hidden="true">
<svg width="14" height="14" fill="none" stroke="#3a4557" stroke-width="2" stroke-linecap="round">
<path d="M1 13L13 1M13 1H4M13 1v9" />
</svg>
</span>
<div class="bento-card__stat">{{benefits_customizable_stat}}</div>
<h3>{{benefits_customizable_title}}</h3>
<p>{{benefits_customizable_text}}</p>
</article>
<!-- Pre-integrated PSPs — light card -->
<article class="bento-card bento-card--light">
<span class="bento-card__arrow" aria-hidden="true">
<svg width="14" height="14" fill="none" stroke="#3a4557" stroke-width="2" stroke-linecap="round">
<path d="M1 13L13 1M13 1H4M13 1v9" />
</svg>
</span>
<div class="bento-card__icon" aria-hidden="true">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--red)" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="1" y="4" width="22" height="16" rx="2" />
<line x1="1" y1="10" x2="23" y2="10" />
<line x1="6" y1="15" x2="10" y2="15" />
<line x1="14" y1="15" x2="16" y2="15" />
</svg>
</div>
<h3>{{benefits_psp_title}}</h3>
<p>{{benefits_psp_text}}</p>
</article>
<!-- 0 License — light card -->
<article class="bento-card bento-card--light">
<span class="bento-card__arrow" aria-hidden="true">
<svg width="14" height="14" fill="none" stroke="#3a4557" stroke-width="2" stroke-linecap="round">
<path d="M1 13L13 1M13 1H4M13 1v9" />
</svg>
</span>
<div class="bento-card__stat">{{benefits_license_stat}}</div>
<h3>{{benefits_license_title}}</h3>
<p>{{benefits_license_text}}</p>
</article>
</div>
</div>
</section>
<section id="features" class="section platform reveal">
<div class="container">
<div class="platform__header">
<h2 class="section-title">{{features_title}}</h2>
<p class="section-text">
{{features_text}}
</p>
</div>
<div class="features-bento stagger">
<!-- Clean Design — tall card with phone mockup -->
<article class="feat-bento feat-bento--solid feat-bento--design">
<h3 class="feat-bento__title">{{features_clean_design_title}}</h3>
<p class="feat-bento__text">{{features_clean_design_text}}</p>
<div class="feat-bento__phone">
<img src="./assets/resource/lp/light-brokerage/iphone-17-pro-max.svg" alt="Trading platform on mobile"
loading="lazy" decoding="async" />
</div>
</article>
<!-- One Mechanic -->
<article class="feat-bento feat-bento--light feat-bento--mechanic">
<h3 class="feat-bento__title">{{features_one_mechanic_title}}</h3>
<p class="feat-bento__text">{{features_one_mechanic_text}}</p>
</article>
<!-- High Conversion -->
<article class="feat-bento feat-bento--accent feat-bento--conversion">
<h3 class="feat-bento__title">{{features_high_conversion_title}}</h3>
<p class="feat-bento__text">{{features_high_conversion_text}}</p>
</article>
<!-- Payments Ready -->
<article class="feat-bento feat-bento--light feat-bento--payments">
<h3 class="feat-bento__title">{{features_payments_ready_title}}</h3>
<p class="feat-bento__text">{{features_payments_ready_text}}</p>
<div class="feat-bento__logos">
<img src="./assets/resource/lp/light-brokerage/payments/visa-new.svg" alt="Visa" />
<img src="./assets/resource/lp/light-brokerage/payments/mastercard-new.svg" alt="Mastercard" />
<img src="./assets/resource/lp/light-brokerage/payments/pay-new.svg" alt="Pay" />
<img src="./assets/resource/lp/light-brokerage/payments/pix-new.svg" alt="Pix" />
<img src="./assets/resource/lp/light-brokerage/payments/boleto-new.svg" alt="Boleto" />
</div>
</article>
<!-- Profit Retention -->
<article class="feat-bento feat-bento--accent feat-bento--profit">
<div class="radial-ring">
<svg viewBox="0 0 80 80">
<defs>
<linearGradient id="radial-grad" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="#4B7BF5" />
<stop offset="1" stop-color="#1652F0" />
</linearGradient>
</defs>
<circle class="radial-ring__track" cx="40" cy="40" r="34" />
<circle class="radial-ring__fill" cx="40" cy="40" r="34" />
</svg>
<span class="radial-ring__label">{{features_profit_retention_stat}}</span>
</div>
<div class="feat-bento__info">
<h3 class="feat-bento__title">{{features_profit_retention_title}}</h3>
<p class="feat-bento__text">{{features_profit_retention_text}}</p>
</div>
</article>
<!-- Web & Instant App -->
<article class="feat-bento feat-bento--light feat-bento--webapp">
<div class="feat-bento__body">
<h3 class="feat-bento__title">{{features_web_instant_title}}</h3>
<p class="feat-bento__text">{{features_web_instant_text}}</p>
<div class="feat-bento__devices">
<span class="feat-bento__device-tag">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="1" width="12" height="14" rx="1.5" />
<line x1="6" y1="12.5" x2="10" y2="12.5" />
</svg>
{{features_devices_mobile}}
</span>
<span class="feat-bento__device-tag">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="1" y="2" width="14" height="10" rx="1.5" />
<line x1="5" y1="14" x2="11" y2="14" />
<line x1="8" y1="12" x2="8" y2="14" />
</svg>
{{features_devices_desktop}}
</span>
<span class="feat-bento__device-tag">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="1.5" y="2.5" width="13" height="9" rx="1.5" />
<line x1="5" y1="14" x2="11" y2="14" />
</svg>
{{features_devices_tablet}}
</span>
</div>
</div>
<div class="feat-bento__screen">
<img src="./assets/resource/lp/light-brokerage/group-59596.svg"
alt="Trading platform on desktop and tablet" loading="lazy" decoding="async" />
</div>
</article>
</div>
</div>
</section>
<section id="pricing" class="section pricing-section reveal">
<div class="container">
<div class="pricing-layout">
<div class="pricing-left">
<h2 class="section-title">
{{pricing_title}}
</h2>
<p class="section-text">
{{pricing_text}}
</p>
<div class="pricing-highlights stagger">
<div class="pricing-highlight">
<div class="pricing-highlight__icon">
<svg viewBox="0 0 18 18" fill="none" stroke="#1652F0" stroke-width="1.8" stroke-linecap="round"
stroke-linejoin="round">
<path d="M9 1v16M1 9h16" />
</svg>
</div>
<div>
<h4>{{pricing_highlight_no_fees_title}}</h4>
<p>{{pricing_highlight_no_fees_text}}</p>
</div>
</div>
<div class="pricing-highlight">
<div class="pricing-highlight__icon">
<svg viewBox="0 0 18 18" fill="none" stroke="#1652F0" stroke-width="1.8" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="9" cy="9" r="7.5" />
<polyline points="9 5 9 9 12 11" />
</svg>
</div>
<div>
<h4>{{pricing_highlight_launch_time_title}}</h4>
<p>{{pricing_highlight_launch_time_text}}</p>
</div>
</div>
<div class="pricing-highlight">
<div class="pricing-highlight__icon">
<svg viewBox="0 0 18 18" fill="none" stroke="#1652F0" stroke-width="1.8" stroke-linecap="round"
stroke-linejoin="round">
<path d="M9 2l7 3.5v5c0 4-3 6.5-7 7.5-4-1-7-3.5-7-7.5v-5L9 2z" />
</svg>
</div>
<div>
<h4>{{pricing_highlight_legal_title}}</h4>
<p>{{pricing_highlight_legal_text}}</p>
</div>
</div>
<div class="pricing-highlight">
<div class="pricing-highlight__icon">
<svg viewBox="0 0 18 18" fill="none" stroke="#1652F0" stroke-width="1.8" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="4" width="14" height="10" rx="2" />
<polyline points="2 7 9 11 16 7" />
</svg>
</div>
<div>
<h4>{{pricing_highlight_manager_title}}</h4>
<p>{{pricing_highlight_manager_text}}</p>
</div>
</div>
</div>
</div>
<article class="pricing-card">
<div class="pricing-label">{{pricing_card_label}}</div>
<div class="pricing-head">
<strong>{{pricing_card_plan_name}}</strong>
<span class="price">{{pricing_card_price}}</span>
</div>
<ul class="pricing-features">
<li>{{pricing_card_feature_web_traderoom}}</li>
<li>{{pricing_card_feature_crm_backoffice}}</li>
<li>{{pricing_card_feature_dealing_desk}}</li>
<li>{{pricing_card_feature_billing}}</li>
<li>{{pricing_card_feature_liquidity}}</li>
<li>{{pricing_card_feature_servers}}</li>
<li>{{pricing_card_feature_kyc}}</li>
<li>{{pricing_card_feature_options}}</li>
<li>{{pricing_card_feature_antifraud}}</li>
<li>{{pricing_card_feature_sms}}</li>
<li>{{pricing_card_feature_affiliate}}</li>
</ul>
<a class="btn btn--primary" href="#contact" data-open-modal>{{pricing_card_cta}}</a>
<div class="pricing-guarantee">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M10 1l2.5 1.5L15 1.5l1 2.5 2.5 1-1 2.5L19 10l-1.5 2.5 1 2.5-2.5 1-1 2.5-2.5-1L10 19l-2.5-1.5L5 18.5l-1-2.5-2.5-1 1-2.5L1 10l1.5-2.5-1-2.5 2.5-1L5 1.5l2.5 1L10 1z"
fill="#f0fdf4" stroke="#22c55e" stroke-width="1.2" />
<polyline points="7 10 9 12 13 8" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
{{pricing_card_guarantee}}
</div>
</article>
</div>
</div>
</section>
<section class="section promo reveal">
<div class="container">
<div class="promo__box">
<!-- Mosaic wall -->
<div class="promo__mosaic" aria-hidden="true">
<div class="mosaic-track mosaic-track--1">
<img src="./assets/resource/lp/light-brokerage/mosaic-2.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-4.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-1.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-3.png" alt="" loading="lazy" />
</div>
<div class="mosaic-track mosaic-track--2">
<img src="./assets/resource/lp/light-brokerage/mosaic-3.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-1.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-4.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-2.png" alt="" loading="lazy" />
</div>
<div class="mosaic-track mosaic-track--3">
<img src="./assets/resource/lp/light-brokerage/mosaic-4.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-2.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-3.png" alt="" loading="lazy" />
<img src="./assets/resource/lp/light-brokerage/mosaic-1.png" alt="" loading="lazy" />
</div>
</div>
<!-- Content overlay -->
<div class="promo__content">
<h2>{{promo_title}}</h2>
<p>
{{promo_text}}
</p>
<a class="btn btn--primary" href="#contact" data-open-modal>{{promo_cta}}</a>
</div>
</div>
</div>
</section>
<section class="section reveal">
<div class="container">
<h2 class="section-title">{{steps_title}}</h2>
<p class="section-text">{{steps_text}}</p>
<div class="steps stagger" aria-label="Launch process timeline">
<article class="step">
<div class="num">1</div>
<p>{{steps_step1_title}}</p>
<p class="step-desc">{{steps_step1_text}}</p>
</article>
<article class="step">
<div class="num">2</div>
<p>{{steps_step2_title}}</p>
<p class="step-desc">{{steps_step2_text}}</p>
</article>
<article class="step">
<div class="num">3</div>
<p>{{steps_step3_title}}</p>
<p class="step-desc">{{steps_step3_text}}</p>
</article>
<article class="step">
<div class="num">4</div>
<p>{{steps_step4_title}}</p>
<p class="step-desc">{{steps_step4_text}}</p>
</article>
<article class="step">
<div class="num">5</div>
<p>{{steps_step5_title}}</p>
<p class="step-desc">{{steps_step5_text}}</p>
</article>
</div>
</div>
</section>
<section id="faq" class="section reveal">
<div class="container">
<div class="faq-section">
<div class="faq-left">
<h2 class="section-title">{{faq_title}}</h2>
<p>{{faq_intro}}</p>
<a class="btn btn--primary" href="#contact" data-open-modal>{{faq_cta}}</a>
</div>
<div class="faq">
<details>
<summary>{{faq_q1}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a1}}
</p>
</div>
</div>
</details>
<details>
<summary>{{faq_q2}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a2}}
</p>
</div>
</div>
</details>
<details>
<summary>{{faq_q3}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a3}}
</p>
</div>
</div>
</details>
<details>
<summary>{{faq_q4}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a4}}
</p>
</div>
</div>
</details>
<details>
<summary>{{faq_q5}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a5}}
</p>
</div>
</div>
</details>
<details>
<summary>{{faq_q6}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a6}}
</p>
</div>
</div>
</details>
<details>
<summary>{{faq_q7}}</summary>
<div class="faq-answer">
<div>
<p>
{{faq_a7}}
</p>
</div>
</div>
</details>
</div>
</div>
</div>
</section>
<section id="contact" class="section contact reveal">
<div class="container">
<div class="form-block">
<div>
<h2 class="section-title">{{contact_title}}</h2>
<p>
{{contact_text}}
</p>
</div>
<form class="form-grid" data-form="conversion-form">
<div class="form-row">
<div class="field">
<label for="name">{{contact_label_name}}</label>
<input id="name" name="first_name" type="text" autocomplete="name" placeholder="{{contact_placeholder_name}}"
required />
<span data-error-message></span>
</div>
<div class="field">
<label for="email">{{contact_label_email}}</label>
<input id="email" name="email" type="email" autocomplete="email" placeholder="{{contact_placeholder_email}}"
required />
<span data-error-message></span>
</div>
</div>
<div class="form-row">
<div class="field">
<label for="phone">{{contact_label_phone}}</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" placeholder="{{contact_placeholder_phone}}" required />
<span data-error-message></span>
</div>
<div class="field">
<label for="messenger">{{contact_label_messenger}}</label>
<input id="messenger" name="tg" type="text" placeholder="{{contact_placeholder_messenger}}" />
<span data-error-message></span>
</div>
</div>
<div class="field">
<label for="current-business">{{contact_label_current_business}}</label>
<input id="current-business" name="company_name" type="text"
placeholder="{{contact_placeholder_current_business}}" />
<span data-error-message></span>
</div>
<div class="field">
<label for="why-launch">{{contact_label_why_launch}}</label>
<input id="why-launch" name="short_bio" type="text"
placeholder="{{contact_placeholder_why_launch}}" />
<span data-error-message></span>
</div>
<label class="modal-check" for="grid-terms">
<input id="grid-terms" name="terms_agree" type="checkbox" required />
<span>
{{contact_terms_text}}
</span>
</label>
<button class="btn btn--primary" type="submit">{{contact_submit}}</button>
<div class="form-grid__form-loading form-loading">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24">
<rect width="7.33" height="7.33" x="1" y="1" fill="currentColor">
<animate id="SVGzjrPLenI" attributeName="x" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s"
values="1;4;1" />
<animate attributeName="y" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="width" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="8.33" y="1" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="1;4;1" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="1" y="8.33" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="1;4;1" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="15.66" y="1" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="8.33" y="8.33" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="1" y="15.66" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="15.66" y="8.33" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="8.33" y="15.66" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="15.66" y="15.66" fill="currentColor">
<animate id="SVGXAURnSRI" attributeName="x" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s"
values="15.66;18.66;15.66" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
</svg>
</div>
<div class="form-grid__form-message form-message">
<div class="form-message__container _error">
<button class="form-message__close" type="button" data-message-btn aria-label="Close">
×
</button>
<svg class="form-message__icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60"
viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m5.793-4.207a1 1 0 0 1 1.414 0L12 10.586l2.793-2.793a1 1 0 1 1 1.414 1.414L13.414 12l2.793 2.793a1 1 0 0 1-1.414 1.414L12 13.414l-2.793 2.793a1 1 0 0 1-1.414-1.414L10.586 12L7.793 9.207a1 1 0 0 1 0-1.414" />
</svg>
<span class="form-message__text">{{form_error_title}}</span>
<button class="btn btn--primary form-message__btn" data-message-btn type="button">
{{form_error_cta}}
</button>
</div>
<div class="form-message__container _success">
<button class="form-message__close" type="button" data-message-btn aria-label="Close">
×
</button>
<svg class="form-message__icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60"
viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m14.664-3.247a1 1 0 0 1 .083 1.411l-5.333 6a1 1 0 0 1-1.495 0l-2.666-3a1 1 0 0 1 1.494-1.328l1.92 2.159l4.586-5.16a1 1 0 0 1 1.411-.082" />
</svg>
<span class="form-message__text">
{{form_success_title}}<br />
{{form_success_text}}
</span>
</div>
</div>
</form>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__inner">
<img class="footer__logo" src="./assets/resource/lp/light-brokerage/bebroker-logo-white.svg" alt="BeBroker"
width="148" height="32" />
<nav class="footer__links">
<a href="/privacy-policy/" target="_blank" rel="noopener noreferrer">{{footer_privacy}}</a>
<a href="/terms-and-conditions/" target="_blank" rel="noopener noreferrer">{{footer_terms}}</a>
</nav>
<p class="footer__copy">{{footer_copy}}</p>
</div>
</div>
</footer>
<div class="modal" id="request-modal" aria-hidden="true">
<div class="modal__backdrop" data-close-modal></div>
<div class="modal__dialog" role="dialog" aria-modal="true" aria-labelledby="request-modal-title">
<button class="modal__close" type="button" data-close-modal aria-label="Close form">
×
</button>
<div class="modal-form-wrap" data-modal-form-wrap>
<div class="modal__title-wrap">
<h2 class="modal__title" id="request-modal-title">{{modal_title}}</h2>
<p class="modal__subtitle">{{modal_subtitle}}</p>
</div>
<form class="modal-form" data-form="modal-form">
<div class="field">
<label for="modal-name">{{modal_label_name}}</label>
<input id="modal-name" name="first_name" type="text" autocomplete="name" placeholder="{{modal_placeholder_name}}"
required />
<span data-error-message></span>
</div>
<div class="field">
<label for="modal-email">{{modal_label_email}}</label>
<input id="modal-email" name="email" type="email" autocomplete="email" placeholder="{{modal_placeholder_email}}"
required />
<span data-error-message></span>
</div>
<div class="field">
<label for="modal-phone">{{modal_label_phone}}</label>
<input id="modal-phone" name="phone" type="tel" autocomplete="tel" placeholder="{{modal_placeholder_phone}}" required />
<span data-error-message></span>
</div>
<div class="field">
<label for="modal-messenger">{{modal_label_messenger}}</label>
<input id="modal-messenger" name="tg" type="text" placeholder="{{modal_placeholder_messenger}}" />
<span data-error-message></span>
</div>
<div class="field">
<label for="modal-current-business">{{modal_label_current_business}}</label>
<input id="modal-current-business" name="company_name" type="text"
placeholder="{{modal_placeholder_current_business}}" />
<span data-error-message></span>
</div>
<div class="field">
<label for="modal-why-launch">{{modal_label_why_launch}}</label>
<input id="modal-why-launch" name="short_bio" type="text"
placeholder="{{modal_placeholder_why_launch}}" />
<span data-error-message></span>
</div>
<label class="modal-check" for="modal-terms">
<input id="modal-terms" name="terms_agree" type="checkbox" required />
<span>
{{modal_terms_text}}
</span>
</label>
<button class="btn btn--primary" type="submit">{{modal_submit}}</button>
<div class="modal-form__form-loading form-loading">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24">
<rect width="7.33" height="7.33" x="1" y="1" fill="currentColor">
<animate id="SVGzjrPLenI" attributeName="x" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="y" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="width" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="8.33" y="1" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="1;4;1" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="1" y="8.33" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="1;4;1" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="15.66" y="1" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="8.33" y="8.33" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="1" y="15.66" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="1;4;1" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="15.66" y="8.33" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="8.33" y="15.66" fill="currentColor">
<animate attributeName="x" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="8.33;11.33;8.33" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
<rect width="7.33" height="7.33" x="15.66" y="15.66" fill="currentColor">
<animate id="SVGXAURnSRI" attributeName="x" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s"
values="15.66;18.66;15.66" />
<animate attributeName="y" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="15.66;18.66;15.66" />
<animate attributeName="width" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="7.33;1.33;7.33" />
<animate attributeName="height" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="7.33;1.33;7.33" />
</rect>
</svg>
</div>
</form>
<div class="modal-form-message _error">
<svg class="modal-form-message__icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60"
viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m5.793-4.207a1 1 0 0 1 1.414 0L12 10.586l2.793-2.793a1 1 0 1 1 1.414 1.414L13.414 12l2.793 2.793a1 1 0 0 1-1.414 1.414L12 13.414l-2.793 2.793a1 1 0 0 1-1.414-1.414L10.586 12L7.793 9.207a1 1 0 0 1 0-1.414" />
</svg>
<p class="modal__subtitle modal-form-message__text">{{modal_error_title}}</p>
<button class="btn btn--primary modal-form-message__btn" data-message-btn type="button">
{{modal_error_cta}}
</button>
</div>
<div class="modal-form-message _success">
<!-- <svg class="modal-form-message__icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60"
viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m14.664-3.247a1 1 0 0 1 .083 1.411l-5.333 6a1 1 0 0 1-1.495 0l-2.666-3a1 1 0 0 1 1.494-1.328l1.92 2.159l4.586-5.16a1 1 0 0 1 1.411-.082" />
</svg>
<span class="modal__subtitle modal-form-message__text">
Thanks!<br />
We'll send the business plan to you by email shortly!
</span> -->
<h3 class="modal__title modal-form-message__title">{{modal_success_title}}</h3>
<p class="modal__subtitle modal-form-message__text">{{modal_success_text}}</p>
<button class="btn btn--primary modal-form-message__btn" data-message-btn type="button">
{{modal_success_cta}}
</button>
</div>
</div>
</div>
</div>
<script type="module" src="/main.ts"></script>
</body>
</html>