forked from Goutam/lynkeduppro-crm
tanweer919
a459fefb7f
Copies the goutam-pages landing (React marketing home + /page/1..19 + assets) into /public and adds beforeFiles rewrites so '/' serves the marketing home and '/1'..'/19' + '/thanks' serve the static pages — reproducing the landing's vercel.json clean URLs. /portal/* (login/register) is untouched.
2027 lines
182 KiB
HTML
2027 lines
182 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>LynkedUp Pro - The #1 Roofing CRM/ERP | Storm to Signed Contract in One Platform</title>
|
||
<meta name="description" content="Replace EagleView, JobNimbus, and SalesRabbit with one flat-rate platform. AI measurements, real-time hail alerts, LiDAR digital twins, smart scheduling & adjuster-ready reports. $349/mo. Built for Texas roofers."/>
|
||
<meta name="keywords" content="roofing CRM software, hail damage software, roofing inspection software, storm restoration CRM, roofing drone software, roofing AI software, roofing scheduling software, roofing ERP, insurance roofing software, LynkedUp Pro, JobNimbus alternative, AccuLynx alternative, EagleView alternative, roofing management software Texas"/>
|
||
<meta name="robots" content="index, follow"/>
|
||
<link rel="canonical" href="https://lynkeduppro.com"/>
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="LynkedUp Pro - Replace 5 Roofing Tools With One $349/mo Platform"/>
|
||
<meta property="og:description" content="AI measurements, real-time hail alerts, LiDAR scans, smart calendar & adjuster reports. 500+ roofs scanned. 11 Texas pilot crews. One flat rate."/>
|
||
<meta property="og:type" content="website"/>
|
||
<meta property="og:url" content="https://lynkeduppro.com"/>
|
||
<meta property="og:image" content="https://lynkeduppro.com/og-image.jpg"/>
|
||
<meta property="og:site_name" content="LynkedUp Pro"/>
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image"/>
|
||
<meta name="twitter:title" content="LynkedUp Pro - The Roofing Platform That Replaces 5 Tools"/>
|
||
<meta name="twitter:description" content="Storm to signed contract in one afternoon. AI measurements, hail alerts, LiDAR scans & adjuster reports. Flat $349/mo. No per-report fees."/>
|
||
<meta name="twitter:image" content="https://lynkeduppro.com/twitter-card.jpg"/>
|
||
<!-- Schema.org -->
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"SoftwareApplication","name":"LynkedUp Pro","applicationCategory":"BusinessApplication","operatingSystem":"iOS, Android, Web","offers":{"@type":"Offer","price":"349","priceCurrency":"USD","priceValidUntil":"2026-12-31"},"description":"All-in-one CRM/ERP for roofing contractors. AI measurements, hail alerts, LiDAR digital twins, smart scheduling, and adjuster-ready reports.","aggregateRating":{"@type":"AggregateRating","ratingValue":"4.9","reviewCount":"248"}}
|
||
</script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--bg4:#141f2e;
|
||
--accent:#00c8ff;--accent2:#0ea5e9;--accent3:#f59e0b;
|
||
--orange:#f59e0b;--green:#00e5a0;
|
||
--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
||
--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e;
|
||
}
|
||
html{scroll-behavior:smooth}
|
||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||
|
||
/* NAV */
|
||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:padding .3s}
|
||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff;flex-shrink:0}
|
||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;color:#fff;letter-spacing:-.3px}
|
||
.logo-text span{color:var(--orange)}
|
||
nav ul{display:flex;gap:28px;list-style:none}
|
||
nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
|
||
nav a:hover{color:#fff}
|
||
.nav-right{display:flex;align-items:center;gap:16px}
|
||
.nav-ghost{color:var(--muted)!important;font-size:14px;font-weight:500;padding:8px 18px;border-radius:6px;border:1px solid var(--border);transition:border-color .2s,color .2s!important}
|
||
.nav-ghost:hover{border-color:var(--border2);color:#fff!important}
|
||
.nav-cta{background:var(--orange);color:#080c14!important;padding:9px 22px;border-radius:6px;font-weight:600!important;font-size:14px;transition:opacity .2s!important;text-decoration:none!important}
|
||
.nav-cta:hover{opacity:.88!important}
|
||
|
||
/* HERO */
|
||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px 24px 80px;position:relative;overflow:hidden}
|
||
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black 0%,transparent 100%)}
|
||
.hero-glow-1{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:1000px;height:700px;background:radial-gradient(ellipse,rgba(0,200,255,.09) 0%,transparent 65%)}
|
||
.hero-glow-2{position:absolute;bottom:-50px;left:10%;width:500px;height:400px;background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 65%)}
|
||
.hero-glow-3{position:absolute;top:20%;right:-100px;width:400px;height:500px;background:radial-gradient(ellipse,rgba(0,229,160,.05) 0%,transparent 65%)}
|
||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:32px;animation:fadeUp .6s ease both;letter-spacing:.3px}
|
||
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease infinite}
|
||
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
|
||
.hero h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(50px,8vw,96px);font-weight:900;line-height:.95;letter-spacing:-1px;color:#fff;max-width:920px;animation:fadeUp .7s .08s ease both;text-transform:uppercase}
|
||
.hero h1 .line-blue{color:var(--accent)}.hero h1 .line-orange{color:var(--orange)}
|
||
.hero-sub{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:560px;margin:28px auto 0;line-height:1.65;font-weight:400;animation:fadeUp .7s .18s ease both}
|
||
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:44px;animation:fadeUp .7s .28s ease both}
|
||
.btn-primary{background:var(--orange);color:#080c14;padding:15px 34px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;transition:transform .15s,box-shadow .15s;border:none;cursor:pointer;font-family:'Outfit',sans-serif}
|
||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||
.btn-secondary{background:transparent;color:#fff;padding:15px 34px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);transition:border-color .2s,background .2s}
|
||
.btn-secondary:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
|
||
.hero-stats{display:flex;gap:48px;justify-content:center;margin-top:80px;flex-wrap:wrap;animation:fadeUp .7s .38s ease both}
|
||
.stat{text-align:center;position:relative}
|
||
.stat+.stat::before{content:'';position:absolute;left:-24px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||
.stat-num .highlight{color:var(--orange)}.stat-label{font-size:13px;color:var(--muted);margin-top:5px}
|
||
.hero-tagline{display:inline-flex;align-items:center;gap:8px;margin-top:56px;font-size:13px;color:var(--muted);animation:fadeUp .7s .48s ease both}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
|
||
|
||
/* URGENCY BAR */
|
||
.urgency-bar{background:linear-gradient(90deg,rgba(239,68,68,.1),rgba(245,158,11,.12));border-bottom:1px solid rgba(245,158,11,.2);padding:10px 24px;text-align:center}
|
||
.urgency-bar p{font-size:13px;color:var(--text);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
|
||
.urgency-bar strong{color:var(--orange)}
|
||
.ub-countdown{display:inline-flex;gap:6px;align-items:center}
|
||
.cd-block{background:rgba(0,0,0,.4);border:1px solid rgba(245,158,11,.25);border-radius:5px;padding:3px 8px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--orange);min-width:34px;text-align:center}
|
||
.cd-sep{color:var(--orange);font-weight:700}
|
||
|
||
/* TRUST BAR */
|
||
.trust-bar{padding:36px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}
|
||
.trust-bar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
|
||
.trust-label{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);font-weight:500;white-space:nowrap}
|
||
.trust-divider{width:1px;height:24px;background:var(--border);flex-shrink:0}
|
||
.trust-items{display:flex;gap:36px;flex-wrap:wrap;align-items:center;justify-content:center}
|
||
.trust-item{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:rgba(255,255,255,.4);letter-spacing:.5px;text-transform:uppercase}
|
||
|
||
/* PROOF NUMBERS BAR */
|
||
.proof-bar{background:var(--bg);padding:28px 24px;border-bottom:1px solid var(--border)}
|
||
.proof-bar-inner{max-width:1100px;margin:0 auto;display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
|
||
.proof-num-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 24px;display:flex;flex-direction:column;align-items:center;min-width:150px;gap:4px}
|
||
.proof-num-card .pnum{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;line-height:1}
|
||
.proof-num-card .plabel{font-size:12px;color:var(--muted);text-align:center}
|
||
|
||
/* SECTION COMMON */
|
||
section{padding:100px 24px}
|
||
.container{max-width:1140px;margin:0 auto}
|
||
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;color:var(--accent);font-weight:600;margin-bottom:14px}
|
||
.section-label.orange{color:var(--orange)}.section-label.green{color:var(--green)}
|
||
.section-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,60px);font-weight:800;line-height:1.0;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||
.section-sub{font-size:18px;color:var(--muted);margin-top:16px;max-width:560px;font-weight:400;line-height:1.65}
|
||
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s ease,transform .65s ease}
|
||
.reveal.visible{opacity:1;transform:none}
|
||
|
||
/* PROBLEM BAND */
|
||
.problem-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:52px}
|
||
.problem-item{background:var(--card);padding:30px 26px;transition:background .2s}.problem-item:hover{background:var(--card2)}
|
||
.problem-icon{font-size:26px;margin-bottom:14px}.problem-item h3{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:#fff;margin-bottom:8px;text-transform:uppercase}
|
||
.problem-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||
|
||
/* 6 CORE SYSTEMS */
|
||
.systems-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch;margin-bottom:72px}
|
||
.shot{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:18px;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||
.systems-hero > div:last-child,
|
||
.cal-split > div:last-child,
|
||
.hail-split > div:first-child{display:flex;align-items:center;justify-content:center;height:100%}
|
||
.systems-badge{display:inline-block;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:var(--orange);font-size:11px;font-weight:600;padding:4px 14px;border-radius:100px;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}
|
||
.systems-bullets{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:12px}
|
||
.systems-bullets li{font-size:15px;color:var(--muted);display:flex;align-items:flex-start;gap:12px}
|
||
.check-icon{width:18px;height:18px;min-width:18px;background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}
|
||
.check-icon svg{width:9px;height:9px;stroke:var(--green);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
|
||
.systems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||
.system-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
|
||
.system-card:hover{border-color:var(--border2);transform:translateY(-3px)}
|
||
.system-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
|
||
.system-card.accent-blue::before{background:linear-gradient(90deg,transparent,rgba(0,200,255,.35),transparent)}
|
||
.system-card.accent-orange::before{background:linear-gradient(90deg,transparent,rgba(245,158,11,.35),transparent)}
|
||
.system-card.accent-green::before{background:linear-gradient(90deg,transparent,rgba(0,229,160,.35),transparent)}
|
||
.sys-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:20px}
|
||
.sys-icon.blue{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.2)}
|
||
.sys-icon.orange{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2)}
|
||
.sys-icon.green{background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2)}
|
||
.sys-icon.purple{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2)}
|
||
.system-card h3{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;text-transform:uppercase}
|
||
.system-card p{font-size:14px;color:var(--muted);line-height:1.7}
|
||
.sys-tag{display:inline-block;font-size:10px;font-weight:600;padding:3px 10px;border-radius:100px;margin-top:14px;letter-spacing:.5px}
|
||
.sys-tag.blue{background:rgba(0,200,255,.08);color:var(--accent);border:1px solid rgba(0,200,255,.15)}
|
||
.sys-tag.orange{background:rgba(245,158,11,.08);color:var(--orange);border:1px solid rgba(245,158,11,.15)}
|
||
.sys-tag.green{background:rgba(0,229,160,.08);color:var(--green);border:1px solid rgba(0,229,160,.15)}
|
||
|
||
/* CONNECTED MODULES */
|
||
.connected-modules{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:52px;margin-bottom:52px}
|
||
.conn-module{background:var(--card);padding:24px 20px;text-align:center;transition:background .2s}.conn-module:hover{background:var(--card2)}
|
||
.conn-module-icon{width:44px;height:44px;border-radius:10px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:20px}
|
||
.conn-module h4{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:#fff;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
|
||
.conn-module p{font-size:12px;color:var(--muted);line-height:1.5}
|
||
.connected-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||
.proof-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;display:flex;align-items:flex-start;gap:16px;transition:border-color .2s}
|
||
.proof-card:hover{border-color:var(--border2)}
|
||
.proof-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
|
||
.proof-icon.time{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.2)}
|
||
.proof-icon.err{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2)}
|
||
.proof-icon.grow{background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2)}
|
||
.proof-card h4{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:5px;text-transform:uppercase}
|
||
.proof-card p{font-size:13px;color:var(--muted);line-height:1.65}
|
||
|
||
/* SMART CALENDAR */
|
||
.cal-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px}
|
||
.cal-features{display:flex;flex-direction:column;gap:20px;margin-top:32px}
|
||
.cal-feat{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:12px;transition:border-color .2s}
|
||
.cal-feat:hover{border-color:var(--border2)}
|
||
.cal-feat-icon{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.2)}
|
||
.cal-feat h4{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:5px}
|
||
.cal-feat p{font-size:13px;color:var(--muted);line-height:1.65}
|
||
.cal-sync-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
|
||
.sync-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:13px;color:var(--muted);font-weight:500}
|
||
.cal-mock{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
|
||
.cal-mock-header{background:var(--bg2);padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||
.cal-mock-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff}
|
||
.cal-days-header{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 16px 4px;background:var(--bg3)}
|
||
.cal-day-name{text-align:center;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
|
||
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
|
||
.cal-cell{background:var(--card);padding:8px;min-height:68px}.cal-cell.today{background:var(--card2)}.cal-cell.other-month{opacity:.35}
|
||
.cal-date{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
|
||
.cal-cell.today .cal-date{background:var(--accent);color:#05080f;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
|
||
.cal-event{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
|
||
.cal-event.blue{background:rgba(0,200,255,.15);color:var(--accent);border-left:2px solid var(--accent)}
|
||
.cal-event.orange{background:rgba(245,158,11,.15);color:var(--orange);border-left:2px solid var(--orange)}
|
||
.cal-event.green{background:rgba(0,229,160,.12);color:var(--green);border-left:2px solid var(--green)}
|
||
.cal-suggestion{background:var(--bg2);border:1px solid rgba(0,200,255,.2);border-radius:10px;padding:14px 16px;margin:12px;display:flex;align-items:flex-start;gap:10px}
|
||
.cal-suggestion-icon{width:28px;height:28px;border-radius:6px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}
|
||
.cal-suggestion-text{font-size:12px;line-height:1.55}
|
||
.cal-suggestion-text strong{color:var(--accent);font-weight:600}
|
||
.cal-suggestion-text span{color:var(--muted)}
|
||
.cal-suggestion-btns{display:flex;gap:6px;margin-top:8px}
|
||
.cal-sug-btn{font-size:10px;font-weight:600;padding:3px 10px;border-radius:5px;cursor:pointer;border:1px solid;font-family:'Outfit',sans-serif}
|
||
.cal-sug-btn.yes{background:var(--accent);border-color:var(--accent);color:#05080f}
|
||
.cal-sug-btn.no{background:transparent;border-color:var(--border2);color:var(--muted)}
|
||
|
||
/* AI MEASUREMENTS */
|
||
.measure-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px}
|
||
.measure-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
|
||
.mstat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 18px}
|
||
.mstat-num{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;line-height:1;margin-bottom:6px}
|
||
.mstat-num.blue{color:var(--accent)}.mstat-num.orange{color:var(--orange)}.mstat-num.green{color:var(--green)}.mstat-num.white{color:#fff}
|
||
.mstat-label{font-size:13px;color:var(--muted)}
|
||
.measure-feat-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
|
||
.measure-feat-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||
.measure-feat-list li span:first-child{font-size:17px;min-width:24px;margin-top:1px}
|
||
.roof-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
|
||
.roof-card-top{padding:16px 20px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||
.roof-card-top span{font-size:13px;font-weight:500;color:#fff}
|
||
.roof-card-badge{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.25);color:var(--accent);font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.5px}
|
||
.roof-svg-wrap{padding:16px;background:#070d18}
|
||
.roof-summary{padding:16px 20px;border-top:1px solid var(--border)}
|
||
.roof-sum-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
|
||
.roof-sum-row:last-child{border-bottom:none;padding-top:12px;margin-top:4px}
|
||
.roof-sum-row span:first-child{font-size:13px;color:var(--muted)}.roof-sum-row span:last-child{font-size:13px;font-weight:600;color:#fff}
|
||
.roof-sum-row.total span{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800}
|
||
.roof-sum-row.total span:last-child{color:var(--accent)}
|
||
.roof-gen-btn{display:block;margin:12px 20px 20px;background:var(--accent);color:#05080f;text-align:center;padding:11px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;letter-spacing:.3px}
|
||
|
||
/* PLATFORM FEATURES (original feat-cards) */
|
||
.features-section{background:var(--bg)}
|
||
.features-grid{display:grid;gap:24px;margin-top:60px}
|
||
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||
.feat-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:36px;position:relative;overflow:hidden;transition:border-color .2s}
|
||
.feat-card:hover{border-color:rgba(0,200,255,.2)}
|
||
.feat-card.wide{grid-column:1/-1}
|
||
.feat-accent{position:absolute;top:0;right:0;width:200px;height:200px;pointer-events:none;opacity:.5}
|
||
.feat-tag{display:inline-block;background:rgba(0,200,255,.08);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:20px;border:1px solid rgba(0,200,255,.15)}
|
||
.feat-card h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.2}
|
||
.feat-card p{font-size:15px;color:var(--muted);line-height:1.75}
|
||
.feat-list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px}
|
||
.feat-list li{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5}
|
||
.feat-list li::before{content:'';width:16px;height:16px;min-width:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='rgba(0,200,255,.12)' stroke='rgba(0,200,255,.35)' stroke-width='1'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%2300c8ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;margin-top:2px}
|
||
|
||
/* HAIL SECTION (v2 style + original map) */
|
||
.hail-section{background:var(--bg);position:relative;overflow:hidden}
|
||
.hail-section::before{content:'';position:absolute;top:-100px;left:-100px;width:500px;height:400px;background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 70%);pointer-events:none}
|
||
.hail-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px}
|
||
.hail-feat-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
|
||
.hail-feat-list li{display:flex;gap:12px;font-size:15px;color:var(--text);align-items:flex-start}
|
||
.hail-feat-list li span:first-child{font-size:18px;min-width:26px;margin-top:1px}
|
||
.hail-map-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.4)}
|
||
.hail-map-bar{padding:14px 20px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||
.hail-map-bar-title{font-size:13px;font-weight:600;color:#fff}
|
||
.hail-alert-badge{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:#ef4444;font-size:10px;font-weight:700;padding:4px 10px;border-radius:100px;animation:hailBlink 2s ease infinite}
|
||
@keyframes hailBlink{0%,100%{opacity:1}50%{opacity:.6}}
|
||
.hail-map-visual{position:relative;height:220px;background:#040b14;overflow:hidden}
|
||
.map-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px}
|
||
/* original hail map styles */
|
||
.hail-map{width:100%;aspect-ratio:16/10;background:var(--bg2);border-radius:12px;position:relative;overflow:hidden;margin-bottom:16px}
|
||
.hail-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px}
|
||
.hail-dot{position:absolute;border-radius:50%;animation:hailPulse 3s ease infinite}
|
||
@keyframes hailPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.3);opacity:.5}}
|
||
.hail-legend{display:flex;gap:16px;flex-wrap:wrap}
|
||
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
|
||
.legend-dot{width:10px;height:10px;border-radius:50%}
|
||
.hail-features{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:12px}
|
||
.hail-features li{display:flex;gap:12px;font-size:15px;color:var(--text)}
|
||
.hail-features li span:first-child{color:var(--orange);font-size:18px;min-width:24px}
|
||
/* address scoring */
|
||
.addr-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--bg2);border-radius:8px;margin-bottom:6px;transition:background .2s}
|
||
.addr-item:hover{background:var(--bg3)}
|
||
.addr-name{font-size:13px;font-weight:500;color:#fff}
|
||
.addr-score{font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px}
|
||
.addr-score.hot{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.25)}
|
||
.addr-score.warm{background:rgba(245,158,11,.12);color:var(--orange);border:1px solid rgba(245,158,11,.22)}
|
||
.addr-score.cool{background:rgba(0,229,160,.1);color:var(--green);border:1px solid rgba(0,229,160,.2)}
|
||
.map-legend{padding:10px 20px;display:flex;gap:20px;border-top:1px solid var(--border);background:var(--bg2)}
|
||
|
||
/* HOW IT WORKS */
|
||
.how-section{background:var(--bg2)}
|
||
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:60px;position:relative}
|
||
.steps::before{content:'';position:absolute;top:28px;left:calc(10% + 28px);right:calc(10% + 28px);height:1px;background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent);pointer-events:none}
|
||
.step{text-align:center;padding:0 16px}
|
||
.step-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:18px;color:var(--accent);transition:border-color .2s,box-shadow .2s;position:relative;z-index:1}
|
||
.step:hover .step-num{border-color:var(--accent);box-shadow:0 0 20px rgba(0,200,255,.2)}
|
||
.step h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||
.step p{font-size:13px;color:var(--muted);line-height:1.65}
|
||
|
||
/* DASHBOARD */
|
||
.dash-mock{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 60px 100px rgba(0,0,0,.6);margin-top:52px}
|
||
.dash-topbar{background:var(--bg2);padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||
.dash-topbar-left{display:flex;align-items:center;gap:12px}
|
||
.dash-logo-small{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;color:#fff}
|
||
.dash-logo-small span{color:var(--orange)}
|
||
.dash-tab-row{display:flex;gap:2px}
|
||
.dash-tab{font-size:12px;padding:6px 14px;border-radius:6px;color:var(--muted);font-weight:500;cursor:pointer;transition:.2s}
|
||
.dash-tab.active{background:var(--card2);color:#fff}
|
||
.dash-topbar-right{display:flex;align-items:center;gap:8px}
|
||
.dash-notification{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--muted)}
|
||
.dash-body{display:grid;grid-template-columns:200px 1fr;min-height:400px}
|
||
.dash-sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:16px 12px}
|
||
.dash-nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:2px;cursor:pointer;transition:.2s}
|
||
.dash-nav-item.active{background:rgba(0,200,255,.08);color:var(--accent);border:1px solid rgba(0,200,255,.12)}
|
||
.dash-nav-item:hover:not(.active){background:rgba(255,255,255,.03);color:var(--text)}
|
||
.dash-nav-icon{font-size:15px;min-width:18px;text-align:center}
|
||
.dash-content{padding:20px}
|
||
.dash-greeting{font-size:13px;color:var(--muted);margin-bottom:4px}
|
||
.dash-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:#fff;margin-bottom:16px}
|
||
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
|
||
.kpi{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;transition:border-color .2s}
|
||
.kpi:hover{border-color:var(--border2)}
|
||
.kpi-label{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:6px;display:flex;align-items:center;gap:6px}
|
||
.kpi-label-icon{font-size:14px}
|
||
.kpi-val{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;color:#fff;line-height:1}
|
||
.kpi-val.blue{color:var(--accent)}.kpi-val.orange{color:var(--orange)}.kpi-val.green{color:var(--green)}
|
||
.kpi-sub{font-size:11px;color:var(--muted);margin-top:3px}
|
||
.dash-lower{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||
.dash-panel{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px}
|
||
.dash-panel-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
|
||
.sched-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
|
||
.sched-item:last-child{border-bottom:none}
|
||
.sched-time{font-size:11px;font-weight:700;color:var(--accent);min-width:48px}
|
||
.sched-info{flex:1}.sched-name{font-size:12px;font-weight:600;color:#fff}.sched-addr{font-size:11px;color:var(--muted)}.sched-pin{font-size:13px;color:var(--muted)}
|
||
.activity-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:12px}
|
||
.activity-dot{width:6px;height:6px;border-radius:50%;margin-top:4px;flex-shrink:0}
|
||
.activity-text{color:var(--muted);line-height:1.5}.activity-text strong{color:#fff;font-weight:600}
|
||
.activity-time{color:var(--muted);font-size:10px;margin-left:auto;white-space:nowrap;padding-left:8px}
|
||
|
||
/* PRODUCT SCREENSHOTS */
|
||
.screenshots-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:48px}
|
||
.screen-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
|
||
.screen-card-label{padding:12px 16px;border-top:1px solid var(--border)}
|
||
.screen-tag{font-size:12px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
|
||
.screen-desc{font-size:13px;color:var(--text);font-weight:500}
|
||
|
||
/* SHOWCASE TABS */
|
||
.showcase-section{background:var(--bg);overflow:hidden}
|
||
.showcase-tabs{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:4px;margin:40px 0 0;width:fit-content;flex-wrap:wrap}
|
||
.stab{background:none;border:none;color:var(--muted);font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;padding:9px 20px;border-radius:7px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
|
||
.stab.active{background:var(--card);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
|
||
.showcase-panel{display:none;margin-top:40px}
|
||
.showcase-panel.active{display:grid}
|
||
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||
.case-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color .2s;cursor:pointer}
|
||
.case-card:hover{border-color:rgba(0,200,255,.25)}
|
||
.case-visual{height:200px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
|
||
.case-body{padding:24px}
|
||
.case-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:4px;margin-bottom:10px}
|
||
.case-tag.storm{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
|
||
.case-tag.lidar{background:rgba(0,200,255,.1);color:var(--accent);border:1px solid rgba(0,200,255,.2)}
|
||
.case-tag.claim{background:rgba(245,158,11,.1);color:var(--orange);border:1px solid rgba(245,158,11,.2)}
|
||
.case-card h3{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.25}
|
||
.case-card p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:16px}
|
||
.case-metrics{display:flex;gap:20px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border)}
|
||
.case-metric{text-align:left}.case-metric-val{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:#fff;line-height:1}
|
||
.case-metric-label{font-size:11px;color:var(--muted);margin-top:3px}
|
||
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
|
||
.ba-col h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px}
|
||
.ba-before h3{color:#ef4444}.ba-after h3{color:var(--green)}
|
||
.ba-step{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start}
|
||
.ba-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
|
||
.ba-before .ba-icon{background:rgba(239,68,68,.1)}.ba-after .ba-icon{background:rgba(0,229,160,.1)}
|
||
.ba-step-text{font-size:14px;color:var(--muted);line-height:1.6;padding-top:4px}
|
||
.ba-step-text strong{color:var(--text);font-weight:500}
|
||
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||
.gallery-item{border-radius:12px;overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;position:relative;cursor:pointer;transition:border-color .2s}
|
||
.gallery-item:hover{border-color:rgba(0,200,255,.3)}
|
||
.gallery-item:first-child{grid-column:span 2;aspect-ratio:16/9}
|
||
.gallery-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
|
||
.gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:linear-gradient(transparent,rgba(6,8,16,.9));font-size:13px;color:#fff;font-weight:500}
|
||
.gallery-sub{font-size:11px;color:var(--muted);margin-top:2px}
|
||
|
||
/* COMPETITOR ADVANTAGE */
|
||
.adv-section{background:var(--bg2)}
|
||
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
|
||
.adv-card{border:1px solid var(--border);border-radius:14px;padding:28px;background:var(--bg);transition:border-color .2s}
|
||
.adv-card:hover{border-color:var(--border2)}
|
||
.adv-num{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:900;color:rgba(0,200,255,.1);line-height:1;margin-bottom:12px}
|
||
.adv-card h3{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;text-transform:uppercase}
|
||
.adv-card p{font-size:14px;color:var(--muted);line-height:1.7}
|
||
.vs-badge{display:inline-block;background:rgba(245,158,11,.1);color:var(--orange);font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;margin-bottom:10px;border:1px solid rgba(245,158,11,.2)}
|
||
|
||
/* COMPARE */
|
||
.compare-section{background:var(--bg2)}
|
||
.compare-wrap{margin-top:56px;border-radius:16px;border:1px solid var(--border);overflow:hidden}
|
||
table{width:100%;border-collapse:collapse;font-size:14px}
|
||
th{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-align:left;padding:14px 20px;background:var(--bg2);color:var(--muted);letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap}
|
||
th.ours{color:var(--accent);background:rgba(0,200,255,.04)}
|
||
td{padding:13px 20px;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:middle;font-size:13px}
|
||
td.ours{color:#fff;font-weight:500;background:rgba(0,200,255,.02)}
|
||
tr:last-child td{border-bottom:none}
|
||
tr:hover td{background:rgba(255,255,255,.015)}
|
||
tr:hover td.ours{background:rgba(0,200,255,.03)}
|
||
.check{color:var(--green);font-size:15px;font-weight:700}.cross{color:#ef4444;opacity:.75;font-size:14px}.partial{color:var(--orange)}
|
||
.feat-name{color:var(--text);font-weight:500}
|
||
|
||
/* ROI */
|
||
.roi-section{background:var(--bg)}
|
||
.roi-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:52px;align-items:start}
|
||
.roi-inputs{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px}
|
||
.roi-results{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:20px;padding:36px;position:sticky;top:90px}
|
||
.roi-result-highlight{background:linear-gradient(135deg,rgba(0,200,255,.06),rgba(0,229,160,.04));border:1px solid rgba(0,229,160,.15);border-radius:14px;padding:24px;margin-bottom:20px;text-align:center}
|
||
.roi-result-num{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:900;color:var(--green);line-height:1;letter-spacing:-1px}
|
||
.roi-result-label{font-size:14px;color:var(--muted);margin-top:6px}
|
||
.roi-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||
.roi-res-item{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
|
||
.roi-res-label{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
|
||
.roi-res-val{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:#fff}
|
||
.roi-breakdown{margin-top:20px;border-top:1px solid var(--border);padding-top:16px}
|
||
.roi-breakdown-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin-bottom:12px}
|
||
.roi-break-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
|
||
.roi-break-row span:first-child{color:var(--muted)}.roi-break-row span:last-child{color:#fff;font-weight:500}
|
||
.roi-break-row.total{border-bottom:none;padding-top:10px;margin-top:6px}
|
||
.roi-break-row.total span{font-weight:700;color:var(--orange)}
|
||
.slider-row{margin-bottom:24px}
|
||
.slider-label{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:10px}
|
||
.slider-label strong{color:#fff}
|
||
input[type=range]{width:100%;height:4px;background:var(--border);border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}
|
||
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}
|
||
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}
|
||
|
||
/* PRICING */
|
||
.pricing-section{background:var(--bg2)}
|
||
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:start}
|
||
.price-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px}
|
||
.price-card.featured{border-color:rgba(0,200,255,.3);background:linear-gradient(160deg,rgba(0,200,255,.04) 0%,var(--card) 60%)}
|
||
.price-tier{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
|
||
.price-tier.feat-tier{color:var(--accent)}
|
||
.price-amount{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||
.price-amount sup{font-size:24px;vertical-align:top;margin-top:8px;display:inline-block}
|
||
.price-amount sub{font-size:16px;color:var(--muted);font-weight:400;letter-spacing:0}
|
||
.price-amount.custom{font-size:36px;padding-top:8px}
|
||
.price-desc{font-size:14px;color:var(--muted);margin:12px 0 24px;line-height:1.65}
|
||
.price-feats{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
|
||
.price-feats li{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:10px}
|
||
.price-feats li::before{content:'✓';color:var(--green);font-weight:700;min-width:16px}
|
||
.price-cta{display:block;text-align:center;padding:13px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif}
|
||
.price-cta.primary-btn{background:var(--orange);color:#080c14}
|
||
.price-cta.primary-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.3)}
|
||
.price-cta.outline-btn{border:1px solid var(--border2);color:#fff}
|
||
.price-cta.outline-btn:hover{border-color:rgba(255,255,255,.3)}
|
||
.popular-badge{display:inline-block;background:var(--accent);color:#05080f;font-size:10px;font-weight:700;padding:4px 12px;border-radius:100px;float:right;margin-top:2px;letter-spacing:.3px}
|
||
|
||
/* TESTIMONIALS */
|
||
.testimonials-section{background:var(--bg)}
|
||
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
|
||
.test-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:border-color .2s;position:relative}
|
||
.test-card:hover{border-color:var(--border2)}
|
||
.test-card.featured{border-color:rgba(0,200,255,.2);background:linear-gradient(160deg,rgba(0,200,255,.03),var(--card))}
|
||
.stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||
.test-card blockquote{font-size:15px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:20px;font-weight:400}
|
||
.test-author{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:16px}
|
||
.author-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--green));display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;color:#05080f;flex-shrink:0}
|
||
.author-name{font-weight:600;font-size:14px;color:#fff}.author-role{font-size:12px;color:var(--muted)}
|
||
.test-result{position:absolute;top:20px;right:20px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:6px 10px;text-align:center}
|
||
.test-result-num{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;color:var(--green);line-height:1}
|
||
.test-result-label{font-size:9px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.3px}
|
||
|
||
/* FAQ */
|
||
.faq-section{background:var(--bg2)}
|
||
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
|
||
.faq-item{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}
|
||
.faq-q{width:100%;background:none;border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:15px;font-weight:500;text-align:left;padding:20px 24px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.4}
|
||
.faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform .3s,border-color .2s;font-size:14px}
|
||
.faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--accent);color:var(--accent)}
|
||
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 24px}
|
||
.faq-item.open .faq-a{max-height:300px;padding:0 24px 20px}
|
||
.faq-a p{font-size:14px;color:var(--muted);line-height:1.75;border-top:1px solid var(--border);padding-top:14px}
|
||
|
||
/* CTA BAND */
|
||
.cta-band{background:linear-gradient(135deg,rgba(0,200,255,.06) 0%,rgba(0,229,160,.04) 50%,rgba(245,158,11,.04) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:100px 24px;text-align:center;position:relative;overflow:hidden}
|
||
.cta-band::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse,rgba(0,200,255,.06) 0%,transparent 70%);pointer-events:none}
|
||
.cta-band h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(38px,5.5vw,68px);font-weight:900;color:#fff;line-height:1.0;max-width:750px;margin:0 auto 20px;text-transform:uppercase;letter-spacing:-1px}
|
||
.cta-band h2 em{font-style:normal;color:var(--orange)}
|
||
.cta-band p{font-size:18px;color:var(--muted);max-width:480px;margin:0 auto 36px;font-weight:400}
|
||
.cta-form{display:flex;gap:12px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||
.cta-form input{flex:1;min-width:220px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px 18px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||
.cta-form input::placeholder{color:var(--muted)}
|
||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||
.cta-note{font-size:13px;color:var(--muted);margin-top:14px}
|
||
.countdown{display:flex;gap:12px;justify-content:center;margin-top:16px}
|
||
.cd-unit{text-align:center}
|
||
.cd-num{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:#fff;line-height:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:6px 14px;min-width:58px;display:block}
|
||
.cd-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:5px;display:block}
|
||
|
||
/* FOOTER */
|
||
footer{padding:56px 24px 36px;border-top:1px solid var(--border)}
|
||
.footer-inner{max-width:1140px;margin:0 auto}
|
||
.footer-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:48px;margin-bottom:48px}
|
||
.footer-brand p{font-size:14px;color:var(--muted);line-height:1.7;max-width:260px;margin-top:10px}
|
||
.footer-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:#fff;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
|
||
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
|
||
.footer-col a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s}
|
||
.footer-col a:hover{color:#fff}
|
||
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px}
|
||
.footer-bottom p{font-size:13px;color:var(--muted)}
|
||
.footer-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--border);padding:5px 14px;border-radius:100px;font-size:12px;color:var(--muted)}
|
||
|
||
/* MOBILE STICKY */
|
||
.mobile-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||
.mobile-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||
.mobile-sticky .primary{background:var(--orange);color:#080c14}
|
||
.mobile-sticky .outline{border:1px solid var(--border2);color:#fff}
|
||
|
||
/* VIDEO SECTION */
|
||
.video-section{background:var(--bg2);padding:100px 24px}
|
||
.chapter-markers{display:flex;gap:0;margin-top:16px;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
|
||
.chapter{flex:1;padding:12px 16px;border-right:1px solid var(--border);cursor:pointer;transition:background .2s}
|
||
.chapter:last-child{border-right:none}
|
||
.chapter:hover{background:var(--bg2)}
|
||
.chapter-time{font-size:11px;font-weight:600;margin-bottom:3px}
|
||
.chapter-label{font-size:13px;color:var(--text);font-weight:500}
|
||
.chapter.active .chapter-time{color:var(--accent)}
|
||
.chapter.inactive .chapter-time{color:var(--muted)}
|
||
.chapter.inactive .chapter-label{color:var(--muted)}
|
||
|
||
@media(max-width:900px){
|
||
nav ul,.nav-ghost{display:none}
|
||
nav{padding:14px 20px}
|
||
.hero h1{font-size:clamp(44px,12vw,80px)}
|
||
.systems-hero,.cal-split,.measure-split,.hail-split,.roi-wrap,.compare-wrap,.footer-top,.connected-proof,.dash-body{grid-template-columns:1fr!important}
|
||
.feat-row,.systems-grid,.pricing-grid,.test-grid,.faq-grid,.adv-grid,.case-grid,.ba-wrap{grid-template-columns:1fr!important}
|
||
.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}
|
||
.connected-modules{grid-template-columns:repeat(2,1fr)}
|
||
.mobile-sticky{display:flex}
|
||
body{padding-bottom:76px}
|
||
.dash-kpis{grid-template-columns:1fr 1fr}
|
||
.dash-lower{grid-template-columns:1fr}
|
||
section{padding:72px 20px}
|
||
.hero{padding:100px 20px 60px}
|
||
.screenshots-grid{grid-template-columns:1fr 1fr!important}
|
||
.gallery-grid{grid-template-columns:1fr!important}
|
||
.gallery-item:first-child{grid-column:auto}
|
||
.feat-card.wide{grid-column:auto}
|
||
.compare-wrap{overflow-x:auto}
|
||
table{font-size:12px;min-width:560px}
|
||
th,td{padding:10px 12px}
|
||
}
|
||
@media(max-width:580px){
|
||
section{padding:64px 16px}
|
||
.hero{padding:100px 16px 60px}
|
||
.hero-stats{gap:24px}
|
||
.footer-top{grid-template-columns:1fr!important}
|
||
.pricing-grid{grid-template-columns:1fr!important}
|
||
.screenshots-grid{grid-template-columns:1fr!important}
|
||
}
|
||
|
||
/* ── bg helpers ── */
|
||
.has-bg{position:relative;overflow:hidden}
|
||
.has-bg>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||
.has-bg>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||
.has-bg>.container,.has-bg>.hero-bg,.has-bg>.eyebrow,.has-bg>h1,.has-bg>.hero-sub,.has-bg>.hero-actions,.has-bg>.hero-stats,.has-bg>div{position:relative;z-index:2}
|
||
/* ── bigger section titles ── */
|
||
.section-title{font-size:clamp(36px,5.2vw,66px);line-height:.96}
|
||
/* ── CTA strip ── */
|
||
.cta-strip{padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||
.cta-strip>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||
.cta-strip>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||
.cta-strip>.glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:800px;height:420px;border-radius:50%;z-index:1;pointer-events:none}
|
||
.cta-strip>.wrap{position:relative;z-index:2;max-width:760px;margin:0 auto}
|
||
.strip-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||
.strip-tdot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:pulse 2s ease infinite}
|
||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5.2vw,64px);font-weight:900;line-height:.97;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:18px}
|
||
.cta-strip p{font-size:17px;color:var(--muted);line-height:1.72;max-width:580px;margin:0 auto 32px}
|
||
.strip-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
|
||
.strip-trust{display:flex;gap:18px;justify-content:center;margin-top:18px;flex-wrap:wrap}
|
||
.strip-trust span{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
|
||
.strip-trust b{color:var(--green)}
|
||
.smet-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
|
||
.smet{background:var(--card);border-radius:14px;padding:18px 24px;text-align:center;min-width:128px}
|
||
.smet-v{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;line-height:1}
|
||
.smet-l{font-size:11px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.5px;line-height:1.4}
|
||
|
||
|
||
/* ── universal z-index fix: anything after bg-ov is always visible ── */
|
||
section>.bg-ov~*,.cta-strip>.bg-ov~*{position:relative;z-index:2}
|
||
section>.bg-ov~.container{position:relative;z-index:2}
|
||
/* ensure inline-bg sections stack correctly */
|
||
section{isolation:isolate}
|
||
@media(max-width:1280px){nav{padding:14px 32px}section{padding:80px 24px}.cta-band{padding:80px 24px}.cta-strip{padding:72px 24px}.video-section{padding:80px 24px}.systems-hero{gap:48px}.cal-split{gap:48px}.measure-split{gap:48px}.hail-split{gap:48px}.roi-wrap{gap:32px}.footer-top{gap:36px}}
|
||
@media(max-width:1100px){nav ul{gap:18px}.nav-right{gap:12px}.dash-body{grid-template-columns:180px 1fr}.dash-kpis{gap:10px}}
|
||
@media(max-width:1024px){nav{padding:13px 24px}nav ul{gap:14px}nav ul a{font-size:13px}section{padding:72px 22px}.video-section{padding:72px 22px}.hero{padding:108px 20px 64px;min-height:auto}.hero h1{font-size:clamp(44px,7vw,80px)}.hero-stats{gap:28px;margin-top:60px}.stat-num{font-size:36px}.systems-hero{grid-template-columns:1fr;gap:40px}.cal-split{grid-template-columns:1fr;gap:40px}.measure-split{grid-template-columns:1fr;gap:40px}.hail-split{grid-template-columns:1fr;gap:40px}.roi-wrap{grid-template-columns:1fr;gap:28px}.roi-results{position:static}.systems-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid .price-card:nth-child(3){grid-column:span 2;max-width:540px;margin:0 auto;width:100%}.test-grid{grid-template-columns:repeat(2,1fr)}.adv-grid{grid-template-columns:repeat(2,1fr)}.adv-grid .adv-card:nth-child(3){grid-column:span 2;max-width:540px;margin:0 auto;width:100%}.faq-grid{grid-template-columns:1fr}.case-grid{grid-template-columns:1fr 1fr}.ba-wrap{grid-template-columns:1fr;gap:24px}.connected-modules{grid-template-columns:repeat(2,1fr)}.connected-proof{grid-template-columns:1fr;gap:16px}.screenshots-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-item:first-child{grid-column:span 2}.steps{grid-template-columns:repeat(5,1fr);gap:0}.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-body{grid-template-columns:160px 1fr}.feat-row{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:28px}.footer-brand{grid-column:span 3}.roi-result-num{font-size:44px}.shot{height:auto}}
|
||
@media(max-width:900px){.urgency-bar p{font-size:12px;gap:8px}.cd-block{font-size:13px;padding:2px 6px;min-width:28px}}
|
||
@media(max-width:768px){nav{padding:12px 16px}nav ul{display:none}.nav-ghost{display:none}.nav-right{gap:8px}.nav-cta{padding:8px 14px;font-size:13px}.urgency-bar{padding:8px 14px}.urgency-bar p{font-size:11.5px;line-height:1.5}section{padding:56px 18px}.video-section{padding:56px 18px}.cta-band{padding:56px 18px}.cta-strip{padding:56px 18px}.hero{padding:88px 16px 52px;min-height:auto}.hero h1{font-size:clamp(38px,9vw,64px)}.hero-sub{font-size:15px}.section-title{font-size:clamp(30px,6.5vw,48px)}.section-sub{font-size:15px}.hero-stats{gap:20px;margin-top:48px}.stat+.stat::before{display:none}.stat-num{font-size:30px}.stat-label{font-size:12px}.systems-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.pricing-grid .price-card:nth-child(3){grid-column:auto;max-width:none}.test-grid{grid-template-columns:1fr}.adv-grid{grid-template-columns:1fr}.adv-grid .adv-card:nth-child(3){grid-column:auto;max-width:none}.case-grid{grid-template-columns:1fr}.connected-modules{grid-template-columns:repeat(2,1fr)}.screenshots-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr}.gallery-item:first-child{grid-column:auto}.feat-row{grid-template-columns:1fr}.feat-card{padding:28px}.feat-card.wide{grid-column:auto}.steps{grid-template-columns:1fr 1fr;gap:20px}.steps::before{display:none}.dash-body{grid-template-columns:1fr}.dash-sidebar{display:none}.dash-kpis{grid-template-columns:repeat(2,1fr);gap:10px}.dash-lower{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;gap:24px}.footer-brand{grid-column:span 2}.footer-bottom{flex-direction:column;text-align:center;gap:8px}.cta-band h2{font-size:clamp(30px,7vw,52px)}.cta-strip h2{font-size:clamp(28px,7vw,48px)}.cta-band p{font-size:16px}.cta-strip p{font-size:15px}.mobile-sticky{display:flex}body{padding-bottom:72px}.compare-wrap{overflow-x:auto}table{font-size:12px;min-width:560px}th,td{padding:10px 12px}.roi-inputs,.roi-results{padding:26px}.roi-result-num{font-size:38px}.roi-results-grid{grid-template-columns:1fr 1fr;gap:10px}.price-card{padding:28px}.price-amount{font-size:44px}.test-card{padding:22px}.faq-q{font-size:14.5px;padding:18px 20px}.faq-a{padding:0 20px}.faq-item.open .faq-a{padding:0 20px 18px}.smet{min-width:108px;padding:14px 18px}.smet-v{font-size:26px}.trust-items{gap:20px}.trust-item{font-size:13px}.proof-bar-inner{gap:12px}.proof-num-card{min-width:130px;padding:12px 18px}.proof-num-card .pnum{font-size:26px}}
|
||
@media(max-width:560px){section{padding:48px 16px}.video-section{padding:48px 16px}.cta-band{padding:48px 16px}.cta-strip{padding:48px 16px}.hero{padding:80px 14px 48px}.hero-stats{gap:18px}.connected-modules{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr;gap:24px}.footer-brand{grid-column:auto}.hero-actions{flex-direction:column;width:100%}.hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%;text-align:center}.strip-btns{flex-direction:column;width:100%}.strip-btns .btn-primary,.strip-btns .btn-secondary,.strip-btns .btn-ghost{width:100%;text-align:center}.cta-form{flex-direction:column}.cta-form input{min-width:100%;width:100%}.cta-form .btn-primary{width:100%;text-align:center}.steps{grid-template-columns:1fr}.chapter-markers{flex-direction:column}.chapter{border-right:none;border-bottom:1px solid var(--border)}.chapter:last-child{border-bottom:none}}
|
||
@media(max-width:480px){body{font-size:15px}nav{padding:10px 12px}.logo-text{font-size:16px}.logo-mark{width:28px;height:28px;font-size:14px}.nav-cta{padding:7px 12px;font-size:12px}.nav-right{gap:6px}.urgency-bar{padding:8px 10px}.urgency-bar p{font-size:11px;gap:6px}.cd-block{font-size:12px;padding:2px 5px;min-width:24px}section{padding:42px 14px}.video-section{padding:42px 14px}.cta-band{padding:42px 14px}.cta-strip{padding:42px 14px}.hero{padding:72px 12px 42px}.hero h1{font-size:clamp(32px,11vw,52px);max-width:100%}.hero-sub{font-size:14.5px}.section-title{font-size:clamp(24px,8vw,40px)}.section-sub{font-size:14.5px}.hero-stats{gap:16px;margin-top:36px}.stat-num{font-size:26px}.cta-band h2{font-size:clamp(26px,9vw,42px)}.cta-strip h2{font-size:clamp(26px,9vw,42px)}.btn-primary,.btn-secondary{padding:12px 22px;font-size:15px}.proof-bar{padding:18px 14px}.proof-bar-inner{gap:10px}.proof-num-card{min-width:120px;padding:10px 14px}.proof-num-card .pnum{font-size:22px}.proof-num-card .plabel{font-size:11px}.dash-kpis{grid-template-columns:1fr 1fr}.kpi{padding:12px}.kpi-val{font-size:20px}.roi-inputs,.roi-results{padding:22px}.roi-result-num{font-size:32px}.roi-results-grid{grid-template-columns:1fr}.price-card{padding:24px}.price-amount{font-size:38px}.test-card{padding:20px}.test-card blockquote{font-size:13.5px}.test-result{position:static;display:inline-block;margin-bottom:10px}.feat-card{padding:24px}.feat-card h3{font-size:20px}.feat-card p{font-size:14px}.faq-q{font-size:14px;padding:16px 18px}.faq-a{padding:0 18px}.faq-item.open .faq-a{padding:0 18px 16px}.faq-a p{font-size:13.5px}.mobile-sticky{padding:10px 12px;gap:8px}.mobile-sticky a{padding:10px;font-size:13px}.smet-row{gap:8px}.smet{min-width:calc(50% - 4px);padding:12px 14px}.smet-v{font-size:22px}.strip-trust{flex-direction:column;gap:8px}.countdown{gap:6px}.cd-num{font-size:24px;padding:5px 10px;min-width:46px}.adv-card{padding:22px}.adv-num{font-size:44px}.cal-feat{padding:16px}.case-body{padding:20px}.problem-item{padding:24px 20px}.system-card{padding:22px}.conn-module{padding:18px 14px}.proof-card{padding:22px}.measure-stats{grid-template-columns:1fr 1fr;gap:10px}.mstat{padding:16px 14px}.mstat-num{font-size:26px}.trust-bar{padding:24px 14px}.trust-bar-inner{gap:14px}.trust-items{gap:14px}.trust-item{font-size:12px}}
|
||
@media(max-width:380px){.hero h1{font-size:clamp(28px,12vw,42px)}.section-title{font-size:clamp(22px,9vw,34px)}.stat-num{font-size:22px}.measure-stats{grid-template-columns:1fr}.dash-kpis{grid-template-columns:1fr}.connected-modules{grid-template-columns:1fr}.smet{min-width:100%}}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav id="topnav">
|
||
<a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||
<ul>
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#measurements">Measurements</a></li>
|
||
<li><a href="#hail">Hail Intel</a></li>
|
||
<li><a href="#compare">Compare</a></li>
|
||
<li><a href="#pricing">Pricing</a></li>
|
||
</ul>
|
||
<div class="nav-right">
|
||
<a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- URGENCY BAR -->
|
||
<div class="urgency-bar" style="margin-top:72px">
|
||
<p>🔥 <strong>Only a Few Licenses Left</strong> - Lock in $349/mo forever before we raise prices
|
||
<span class="ub-countdown">
|
||
<span class="cd-block" id="ub-d">02</span><span class="cd-sep">:</span>
|
||
<span class="cd-block" id="ub-h">14</span><span class="cd-sep">:</span>
|
||
<span class="cd-block" id="ub-m">37</span><span class="cd-sep">:</span>
|
||
<span class="cd-block" id="ub-s">44</span>
|
||
</span>
|
||
<a href="https://book.lynkeduppro.com/" style="color:var(--orange);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(245,158,11,.4)">Claim Your Spot →</a>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero has-bg" id="home">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1800&q=80');filter:brightness(.11) saturate(.4)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(5,8,15,.45) 0%,rgba(5,8,15,.78) 55%,rgba(5,8,15,1) 100%)"></div>
|
||
<div class="hero-bg" aria-hidden="true">
|
||
<div class="hero-grid"></div>
|
||
<div class="hero-glow-1"></div><div class="hero-glow-2"></div><div class="hero-glow-3"></div>
|
||
</div>
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span> Trusted by 500+ Texas Roofers · Built by Roofers, For Roofers</div>
|
||
<h1>You Run 5 Apps.<br><span class="line-blue">They Run One.</span><br><span class="line-orange">That's the Gap.</span></h1>
|
||
<p class="hero-sub">LynkedUp Pro replaces EagleView, JobNimbus, SalesRabbit, and 2 others with one AI-powered roofing platform at a flat $349/mo. It's your assistant that never sleeps or takes a day off. No per-report fees. No per-user charges. No excuses.</p>
|
||
<div class="hero-actions">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo</a>
|
||
<a href="#roi" class="btn-secondary">Calculate My Savings First</a>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px;flex-wrap:wrap">
|
||
<span style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px">✅ Free onboarding included</span>
|
||
<span style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px">✅ Cancel anytime</span>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat"><div class="stat-num"><span class="highlight">$2.1M</span></div><div class="stat-label">Claims processed via platform</div></div>
|
||
<div class="stat"><div class="stat-num"><span class="highlight">4 min</span></div><div class="stat-label">Avg scan to adjuster report</div></div>
|
||
<div class="stat"><div class="stat-num"><span class="highlight">11</span></div><div class="stat-label">Pilot crews across Texas</div></div>
|
||
<div class="stat"><div class="stat-num"><span class="highlight">$0</span></div><div class="stat-label">Per-report fee. Ever.</div></div>
|
||
</div>
|
||
<div style="margin-top:48px;display:flex;align-items:center;justify-content:center;gap:8px">
|
||
<div style="display:flex">
|
||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;margin-left:-8px;first-child:margin-left:0">J</div>
|
||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;margin-left:-8px">M</div>
|
||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#0ea5e9);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;margin-left:-8px">S</div>
|
||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#00e5a0,#0ea5e9);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:10px;margin-left:-8px">+8</div>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--muted)">4.9★ · 248 reviews</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROOF NUMBERS BAR -->
|
||
<div class="proof-bar">
|
||
<div class="proof-bar-inner">
|
||
<div class="proof-num-card"><span class="pnum" style="color:var(--accent)">500+</span><span class="plabel">Roofs Scanned<br>in Beta</span></div>
|
||
<div class="proof-num-card"><span class="pnum" style="color:var(--orange)">11</span><span class="plabel">Pilot Crews<br>Across Texas</span></div>
|
||
<div class="proof-num-card"><span class="pnum" style="color:var(--green)">$2.1M</span><span class="plabel">Claims Processed<br>via Platform</span></div>
|
||
<div class="proof-num-card"><span class="pnum" style="color:#fff">4 min</span><span class="plabel">Avg Scan<br>to Report</span></div>
|
||
<div class="proof-num-card"><span class="pnum" style="color:var(--orange)">$349</span><span class="plabel">Flat Rate<br>Per Month</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TRUST BAR -->
|
||
<div class="trust-bar">
|
||
<div class="trust-bar-inner">
|
||
<span class="trust-label">Replaces & Integrates With</span>
|
||
<div class="trust-divider"></div>
|
||
<div class="trust-items">
|
||
<span class="trust-item">QuickBooks</span>
|
||
<span class="trust-item">iOS + Android</span>
|
||
<span class="trust-item">Google Calendar</span>
|
||
<span class="trust-item">Calendly</span>
|
||
<span class="trust-item">Xactimate</span>
|
||
<span class="trust-item">EagleView</span>
|
||
<span class="trust-item">DJI Drones</span>
|
||
<span class="trust-item">HailTrace</span>
|
||
<span class="trust-item">HailWatch</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROBLEM BAND -->
|
||
<section class="problem-section has-bg" id="problem">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(11,18,32,.98) 0%,rgba(11,18,32,.93) 100%)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">The Problem</div>
|
||
<h2 class="section-title">3-5 Jobs Lost<br>Per Storm Season.<br><span style="color:#ef4444">Same Reason. Every Time.</span></h2>
|
||
<p class="section-sub">The average Texas roofer loses 3-5 jobs per storm season to competitors who showed up faster, scanned quicker, and filed cleaner claims. Here's why.</p>
|
||
<div class="problem-grid">
|
||
<div class="problem-item"><div class="problem-icon">🌩️</div><h3>Storms Don't Wait</h3><p>By the time you hear about a hail event, competitors have already knocked 40 doors. Speed wins - you need alerts before the rain stops.</p></div>
|
||
<div class="problem-item"><div class="problem-icon">📋</div><h3>EagleView Costs a Fortune</h3><p>$15-$87 per report. 48-hour turnaround. Homeowners won't wait - they sign with whoever shows up with numbers first. That's revenue walking out the door.</p></div>
|
||
<div class="problem-item"><div class="problem-icon">🗂️</div><h3>Claims Get Underpaid</h3><p>Insurance adjusters reject vague reports. Without AI-annotated hail impact documentation, you're leaving tens of thousands on the table per job.</p></div>
|
||
<div class="problem-item"><div class="problem-icon">📅</div><h3>Your Calendar Is Chaos</h3><p>Double-bookings, no-shows, reps without context. Every scheduling failure is a homeowner who goes with someone else before you can get back to them.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ CTA STRIP 1 ══ -->
|
||
<section class="cta-strip">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504309092620-4d0ec726efa4?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(16,6,2,.97) 100%)"></div>
|
||
|
||
<div class="wrap">
|
||
<div class="strip-tag" style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:#ef4444">
|
||
<span class="strip-tdot" style="background:#ef4444"></span>
|
||
Happening right now in your territory
|
||
</div>
|
||
<h2>Hail Just Fell.<br><span style="color:#ef4444">Is Anyone</span><br><span style="color:var(--orange)">Moving?</span></h2>
|
||
<p>Right now, in a neighborhood you know, hail is on the ground. A LynkedUp Pro user already has that swath mapped, the top 89 addresses scored, and three reps auto-routed. You have 17 minutes before the window closes.</p>
|
||
<div class="smet-row">
|
||
<div class="smet" style="border:1px solid rgba(239,68,68,.22)"><div class="smet-v" style="color:#ef4444"><1hr</div><div class="smet-l">Alert to reps in field</div></div>
|
||
<div class="smet" style="border:1px solid rgba(245,158,11,.22)"><div class="smet-v" style="color:var(--orange)">17min</div><div class="smet-l">Storm → dispatch time</div></div>
|
||
<div class="smet" style="border:1px solid rgba(0,229,160,.22)"><div class="smet-v" style="color:var(--green)">11</div><div class="smet-l">Contracts same day</div></div>
|
||
<div class="smet" style="border:1px solid rgba(0,200,255,.22)"><div class="smet-v" style="color:var(--accent)">$349</div><div class="smet-l">Flat. All in. One bill.</div></div>
|
||
</div>
|
||
<div class="strip-btns">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Claim Founders Lifetime Deal</a>
|
||
|
||
</div>
|
||
<div class="strip-trust">
|
||
<span><b>✅</b> No per-report fees ever</span>
|
||
<span><b>✅</b> Founders pricing locked in</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 CORE SYSTEMS -->
|
||
<section style="background:var(--bg);padding:100px 24px;position:relative;overflow:hidden" id="features">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(.07) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.97);position:absolute;inset:0;z-index:1"></div>
|
||
<div class="container reveal">
|
||
<div class="systems-hero">
|
||
<div>
|
||
<div class="section-label orange">Platform Overview</div>
|
||
<h2 class="section-title">6 Weapons.<br><span style="color:var(--orange)">One Bill.</span><br>Zero Gaps.</h2>
|
||
<p class="section-sub">All connected. All automated. All built to perform. From the first lead to the final invoice, nothing falls through the cracks.</p>
|
||
<ul class="systems-bullets">
|
||
<li><div class="check-icon"><svg viewBox="0 0 10 8"><polyline points="1,4 3.5,7 9,1"/></svg></div><span>Pipeline automations and AI insights built in from day one</span></li>
|
||
<li><div class="check-icon"><svg viewBox="0 0 10 8"><polyline points="1,4 3.5,7 9,1"/></svg></div><span>Seamless collaboration across office, sales reps, and field crews</span></li>
|
||
<li><div class="check-icon"><svg viewBox="0 0 10 8"><polyline points="1,4 3.5,7 9,1"/></svg></div><span>One subscription - no per-user fees, no per-report surprises</span></li>
|
||
<li><div class="check-icon"><svg viewBox="0 0 10 8"><polyline points="1,4 3.5,7 9,1"/></svg></div><span>Built for roofing by roofers - not adapted from generic software</span></li>
|
||
</ul>
|
||
<div style="margin-top:36px;display:flex;gap:14px;flex-wrap:wrap">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="font-size:15px;padding:13px 28px">Claim Founders Lifetime Deal</a>
|
||
<a href="#dashboard" class="btn-secondary" style="font-size:15px;padding:13px 28px">See Dashboard</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="dash-mock" style="box-shadow:none">
|
||
<img src="/page/assets/overview13 (1).png" alt="LynkedUp Pro Overview Dashboard" style="display:block;width:100%;height:auto" loading="lazy">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="systems-grid">
|
||
<div class="system-card accent-blue"><div class="sys-icon blue">👥</div><h3>CRM</h3><p>High-output CRM with pipeline automations, AI insights, and team performance tracking built for maximum results.</p><div class="sys-tag blue">Pipeline · AI Insights</div></div>
|
||
<div class="system-card accent-orange"><div class="sys-icon orange">🎨</div><h3>Canvas</h3><p>Your all-in-one sales toolbox. Create estimates, professional proposals, and close more jobs from anywhere.</p><div class="sys-tag orange">Estimates · Proposals</div></div>
|
||
<div class="system-card accent-green"><div class="sys-icon green">📐</div><h3>Measurements</h3><p>AI-powered roof measurements - accurate, fast, and claim-ready. Measure once, use everywhere across every job.</p><div class="sys-tag green">AI · LiDAR · Instant</div></div>
|
||
<div class="system-card accent-blue"><div class="sys-icon blue">⭐</div><h3>Client Experience</h3><p>Automated follow-ups, digital contracts, and client portals that build trust and drive referrals on autopilot.</p><div class="sys-tag blue">Portals · Reviews</div></div>
|
||
<div class="system-card accent-orange"><div class="sys-icon orange">💳</div><h3>Billing</h3><p>Get paid faster. Invoicing, payment processing, and cash flow management that keeps every job profitable.</p><div class="sys-tag orange">Invoices · Payments</div></div>
|
||
<div class="system-card accent-green"><div class="sys-icon purple">🧮</div><h3>Estimating</h3><p>Material pricing, labor, margins - all pre-loaded for roofing. Turn measurements into winning proposals in minutes.</p><div class="sys-tag green">Auto-Pricing · Templates</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ALL WORK CONNECTED -->
|
||
<section style="background:var(--bg2);padding:100px 24px;position:relative;overflow:hidden" id="connected">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(.07) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(11,18,32,.97);position:absolute;inset:0;z-index:1"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label green">All-In-One Platform</div>
|
||
<h2 class="section-title">Stop Juggling Apps<br><span style="color:var(--green)">That Don't Know</span><br>What Each Other Did.</h2>
|
||
<p class="section-sub">From leads to final invoice, every detail connected so nothing slips through the cracks. One source of truth for your entire operation.</p>
|
||
<div class="connected-modules">
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.2)">👤</div><h4>Leads</h4><p>Capture and qualify leads automatically.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2)">📅</div><h4>Schedule</h4><p>Smart scheduling that adapts.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2)">🔍</div><h4>Inspections</h4><p>Collect, document, and move forward.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2)">💰</div><h4>Estimates</h4><p>Create faster. Win more.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.2)">📄</div><h4>Proposals</h4><p>Professional proposals that close.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2)">🔨</div><h4>Jobs</h4><p>Stay on track. Every step.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2)">📸</div><h4>Photos</h4><p>Everything in one place.</p></div>
|
||
<div class="conn-module"><div class="conn-module-icon" style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2)">🧾</div><h4>Invoices</h4><p>Get paid faster. Keep cash flow strong.</p></div>
|
||
</div>
|
||
<div class="connected-proof">
|
||
<div class="proof-card"><div class="proof-icon time">⏱️</div><div><h4>Save Time</h4><p>Automate the busy work. Less admin, more productive hours out in the field where it counts.</p></div></div>
|
||
<div class="proof-card"><div class="proof-icon err">🎯</div><div><h4>Reduce Errors</h4><p>Connected data means fewer mistakes. The right info at the right time, every time.</p></div></div>
|
||
<div class="proof-card"><div class="proof-icon grow">📈</div><div><h4>Grow Faster</h4><p>Better systems, better decisions, bigger results. Close more jobs and increase your margins.</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- SMART CALENDAR -->
|
||
<section style="background:var(--bg);padding:100px 24px;position:relative;overflow:hidden" id="calendar">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1508739773434-c26b3d09e071?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(90deg,rgba(5,8,15,.99) 45%,rgba(5,8,15,.8) 100%);position:absolute;inset:0;z-index:1"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">Smart Scheduling</div>
|
||
<h2 class="section-title">Your Rep Was Late.<br><span style="color:var(--accent)">The Job Is Gone.</span><br>Fix It Now.</h2>
|
||
<p class="section-sub">An optimized calendar that learns, syncs, and suggests - while you stay in control. Never miss what matters. Always know what's next.</p>
|
||
<div class="cal-split">
|
||
<div>
|
||
<div class="cal-features">
|
||
<div class="cal-feat"><div class="cal-feat-icon">🔄</div><div><h4>Sync Everywhere</h4><p>Real-time two-way sync with iOS, Google Calendar, and Calendly. Your whole team stays aligned without the extra effort.</p></div></div>
|
||
<div class="cal-feat"><div class="cal-feat-icon">🧠</div><div><h4>AI Suggests Best Times</h4><p>Smartly suggests optimal scheduling windows, avoids conflicts, and even checks traffic to recommend when you should leave.</p></div></div>
|
||
<div class="cal-feat"><div class="cal-feat-icon">🛡️</div><div><h4>You Stay In Control</h4><p>Nothing changes without your approval. Every suggestion is a nudge - you always make the final call, every time.</p></div></div>
|
||
<div class="cal-feat"><div class="cal-feat-icon">📍</div><div><h4>Location Ready</h4><p>Directions and job details in one tap. Real-time alerts keep field reps on track and informed all day long.</p></div></div>
|
||
</div>
|
||
<div class="cal-sync-row">
|
||
<div class="sync-pill">📱 iOS Calendar</div>
|
||
<div class="sync-pill">📆 Google Calendar</div>
|
||
<div class="sync-pill">🔗 Calendly</div>
|
||
</div>
|
||
<div style="margin-top:24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
|
||
<div style="text-align:center;padding:16px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--accent)">3</div><div style="font-size:12px;color:var(--muted);margin-top:4px">Scheduled Today</div></div>
|
||
<div style="text-align:center;padding:16px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--green)">1</div><div style="font-size:12px;color:var(--muted);margin-top:4px">In Progress</div></div>
|
||
<div style="text-align:center;padding:16px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--orange)">98%</div><div style="font-size:12px;color:var(--muted);margin-top:4px">On Track</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cal-mock">
|
||
<img style="width: 100%;" src="/page/assets/calendar.png" alt="LynkedUp Pro Smart Calendar" class="shot" loading="lazy">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI MEASUREMENTS -->
|
||
<section style="background:var(--bg2);padding:100px 24px" id="measurements">
|
||
<div class="container reveal">
|
||
<div class="measure-split">
|
||
<div class="roof-card">
|
||
<div class="roof-card-top">
|
||
<span>Measurement Summary - Project #1286</span>
|
||
<span class="roof-card-badge">AI-POWERED</span>
|
||
</div>
|
||
<div class="roof-svg-wrap">
|
||
<svg width="100%" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="320" height="200" fill="#070d18"/>
|
||
<polygon points="160,20 280,110 220,110 220,180 100,180 100,110 40,110" fill="rgba(0,200,255,.05)" stroke="rgba(0,200,255,.5)" stroke-width="1.2"/>
|
||
<polygon points="160,20 40,110 100,110 100,80 160,30" fill="rgba(0,200,255,.03)" stroke="rgba(0,200,255,.3)" stroke-width="1"/>
|
||
<line x1="40" y1="115" x2="280" y2="115" stroke="rgba(0,200,255,.3)" stroke-width="1" stroke-dasharray="4 3"/>
|
||
<text x="160" y="127" fill="rgba(0,200,255,.9)" font-size="9" text-anchor="middle" font-family="monospace" font-weight="bold">27'-6"</text>
|
||
<line x1="35" y1="20" x2="35" y2="110" stroke="rgba(0,200,255,.3)" stroke-width="1" stroke-dasharray="4 3"/>
|
||
<text x="27" y="70" fill="rgba(0,200,255,.9)" font-size="9" text-anchor="middle" font-family="monospace" font-weight="bold" transform="rotate(-90,27,70)">18'-7"</text>
|
||
<rect x="178" y="24" width="130" height="90" rx="6" fill="rgba(7,13,24,.9)" stroke="rgba(0,200,255,.15)" stroke-width="1"/>
|
||
<text x="243" y="40" fill="rgba(255,255,255,.5)" font-size="8" text-anchor="middle" font-family="monospace">TOTAL ROOF AREA</text>
|
||
<text x="243" y="58" fill="#00c8ff" font-size="16" text-anchor="middle" font-family="monospace" font-weight="bold">2,347 sq ft</text>
|
||
<text x="243" y="71" fill="rgba(255,255,255,.3)" font-size="7.5" text-anchor="middle" font-family="monospace">23.47 SQUARES</text>
|
||
<rect x="178" y="122" width="130" height="70" rx="6" fill="rgba(7,13,24,.9)" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<text x="188" y="135" fill="rgba(255,255,255,.4)" font-size="7.5" font-family="monospace">PLANE 1</text><text x="298" y="135" fill="rgba(255,255,255,.7)" font-size="7.5" font-family="monospace" text-anchor="end">425 SQ FT</text>
|
||
<text x="188" y="147" fill="rgba(255,255,255,.4)" font-size="7.5" font-family="monospace">PLANE 2</text><text x="298" y="147" fill="rgba(255,255,255,.7)" font-size="7.5" font-family="monospace" text-anchor="end">362 SQ FT</text>
|
||
<text x="188" y="159" fill="rgba(255,255,255,.4)" font-size="7.5" font-family="monospace">PLANE 3</text><text x="298" y="159" fill="rgba(255,255,255,.7)" font-size="7.5" font-family="monospace" text-anchor="end">289 SQ FT</text>
|
||
<text x="188" y="171" fill="rgba(255,255,255,.4)" font-size="7.5" font-family="monospace">PLANE 4</text><text x="298" y="171" fill="rgba(255,255,255,.7)" font-size="7.5" font-family="monospace" text-anchor="end">256 SQ FT</text>
|
||
<text x="188" y="183" fill="rgba(255,255,255,.4)" font-size="7.5" font-family="monospace">PLANE 5+</text><text x="298" y="183" fill="rgba(255,255,255,.7)" font-size="7.5" font-family="monospace" text-anchor="end">1,015 SQ FT</text>
|
||
</svg>
|
||
</div>
|
||
<div class="roof-summary">
|
||
<div class="roof-sum-row"><span>Planes Measured</span><span>14</span></div>
|
||
<div class="roof-sum-row"><span>Photos Attached</span><span>24</span></div>
|
||
<div class="roof-sum-row"><span>Scan Time</span><span>3.8 min</span></div>
|
||
<div class="roof-sum-row total"><span>Total Roof Area</span><span>2,347.18 sq ft</span></div>
|
||
</div>
|
||
<a href="https://book.lynkeduppro.com/" class="roof-gen-btn">Book a demo</a>
|
||
</div>
|
||
<div>
|
||
<div class="section-label green">AI Measurements</div>
|
||
<h2 class="section-title">4 Minutes.<br><span style="color:var(--green)">$0 Per Report.</span><br>Every Single Time.</h2>
|
||
<p class="section-sub">AI-powered measurements that are accurate, fast, and claim-ready. Stop paying $15-$87 per third-party report.</p>
|
||
<ul class="measure-feat-list">
|
||
<li><span>🎯</span><span><strong style="color:#fff">AI Measurements -</strong> Measure any roof in minutes with AI & LiDAR precision you can trust and take to the adjuster.</span></li>
|
||
<li><span>📋</span><span><strong style="color:#fff">Claim Ready -</strong> Xactimate®-style reports with full photo evidence. Adjusters accept them the first time.</span></li>
|
||
<li><span>☁️</span><span><strong style="color:#fff">Sync Anywhere -</strong> Access on any device, anytime. Your whole team works from the same data.</span></li>
|
||
<li><span>⚡</span><span><strong style="color:#fff">Instant Estimates -</strong> Turn measurements directly into accurate material estimates in seconds.</span></li>
|
||
</ul>
|
||
<div class="measure-stats">
|
||
<div class="mstat" style="position:relative"><div class="mstat-num blue">10×</div><div class="mstat-label">Faster than manual</div><span style="position:absolute;bottom:6px;right:8px;font-size:10px;color:var(--muted)">*</span></div>
|
||
<div class="mstat" style="position:relative"><div class="mstat-num green">98.6%</div><div class="mstat-label">AI + LiDAR accurate</div><span style="position:absolute;bottom:6px;right:8px;font-size:10px;color:var(--muted)">*</span></div>
|
||
<div class="mstat"><div class="mstat-num orange">$0</div><div class="mstat-label">Per-report fee</div></div>
|
||
<div class="mstat"><div class="mstat-num white">3.8</div><div class="mstat-label">Min avg scan time</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PLATFORM FEATURES (original detailed feat-cards) -->
|
||
<section class="features-section has-bg" id="platform-features">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.97)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label orange">Deep Dive - Platform Features</div>
|
||
<h2 class="section-title">Every Advantage<br><span style="color:var(--orange)">Your Competitor</span><br>Doesn't Have Yet.</h2>
|
||
<p class="section-sub">From the first hail alert to the signed contract and submitted claim - all in one workflow.</p>
|
||
<div class="features-grid">
|
||
<div class="feat-row">
|
||
<div class="feat-card">
|
||
<svg class="feat-accent" viewBox="0 0 200 200" fill="none"><circle cx="160" cy="40" r="120" fill="url(#g1)"/><defs><radialGradient id="g1"><stop stop-color="#00c8ff" stop-opacity=".15"/><stop offset="1" stop-color="#00c8ff" stop-opacity="0"/></radialGradient></defs></svg>
|
||
<span class="feat-tag">AI Diagnostics</span>
|
||
<h3>LiDAR-Powered Digital Twin</h3>
|
||
<p>Deploy a drone, walk the property - LynkedUp Pro auto-generates a centimeter-accurate 3D model of every roof in under 4 minutes. AI flags hail impacts, ridge damage, and granule loss automatically.</p>
|
||
<ul class="feat-list">
|
||
<li>Auto-annotated hail impact zones for adjuster reports</li>
|
||
<li>3D measurements fed directly into estimates</li>
|
||
<li>Faster than EagleView - no 48-hour wait, no per-report fees</li>
|
||
<li>Photogrammetry + LiDAR fusion for insurance-grade accuracy</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feat-card">
|
||
<svg class="feat-accent" viewBox="0 0 200 200" fill="none"><circle cx="160" cy="40" r="120" fill="url(#g2)"/><defs><radialGradient id="g2"><stop stop-color="#f59e0b" stop-opacity=".15"/><stop offset="1" stop-color="#f59e0b" stop-opacity="0"/></radialGradient></defs></svg>
|
||
<span class="feat-tag" style="background:rgba(245,158,11,.08);color:var(--orange);border-color:rgba(245,158,11,.2)">Field Intelligence</span>
|
||
<h3>Geospatial Canvassing & Territory Maps</h3>
|
||
<p>See every home in your territory on a live map - enriched with homeowner data, damage probability scores, and real-time rep tracking. Like SalesRabbit's DataGrid, but storm-aware.</p>
|
||
<ul class="feat-list">
|
||
<li>Live hail swath overlays on canvassing maps</li>
|
||
<li>Rep GPS tracking and territory assignment</li>
|
||
<li>Homeowner contact data enrichment per address</li>
|
||
<li>Damage probability scoring auto-updated after every storm</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="feat-row">
|
||
<div class="feat-card">
|
||
<svg class="feat-accent" viewBox="0 0 200 200" fill="none"><circle cx="160" cy="40" r="120" fill="url(#g3)"/><defs><radialGradient id="g3"><stop stop-color="#ef4444" stop-opacity=".15"/><stop offset="1" stop-color="#ef4444" stop-opacity="0"/></radialGradient></defs></svg>
|
||
<span class="feat-tag" style="background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.2)">Storm Intelligence</span>
|
||
<h3>Real-Time Hail & Storm Alerts</h3>
|
||
<p>Get notified the moment a hail event drops in your county. Automatic territory prioritization and canvassing routes pushed to every rep's phone - before competitors even open their weather app.</p>
|
||
<ul class="feat-list">
|
||
<li>Sub-hour storm event notifications by county and zip</li>
|
||
<li>HailTrace and HailWatch dual-source data fusion</li>
|
||
<li>Auto-generated storm damage canvassing zones</li>
|
||
<li>Historical hail overlay for insurance documentation</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feat-card">
|
||
<svg class="feat-accent" viewBox="0 0 200 200" fill="none"><circle cx="160" cy="40" r="120" fill="url(#g4)"/><defs><radialGradient id="g4"><stop stop-color="#a855f7" stop-opacity=".15"/><stop offset="1" stop-color="#a855f7" stop-opacity="0"/></radialGradient></defs></svg>
|
||
<span class="feat-tag" style="background:rgba(139,92,246,.08);color:#a855f7;border-color:rgba(139,92,246,.2)">CRM + Estimates</span>
|
||
<h3>Roofing CRM with Instant Proposals</h3>
|
||
<p>Manage every lead, job, and claim from one screen. AI-powered proposals with live material pricing generated on-site from your digital twin data. No copy-paste between tools.</p>
|
||
<ul class="feat-list">
|
||
<li>Satellite-to-proposal in under 5 minutes</li>
|
||
<li>Live material pricing with supplier integrations</li>
|
||
<li>Insurance supplement workflow built-in</li>
|
||
<li>Full pipeline from lead → signed contract → payment</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="feat-card wide" style="background:linear-gradient(120deg,rgba(0,200,255,.04) 0%,var(--card) 50%)">
|
||
<span class="feat-tag">Insurance Workflow</span>
|
||
<h3>Adjuster-Ready Reports in One Click</h3>
|
||
<p style="max-width:640px">The most expensive gap in roofing software: you do the work, but the claim gets underpaid. LynkedUp Pro auto-generates adjuster reports that combine your LiDAR digital twin, AI-annotated hail impacts, and historical storm data into a single PDF - exactly what adjusters need, wired directly into your CRM and canvassing workflow.</p>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:28px">
|
||
<div style="position:relative"><div style="font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--accent);margin-bottom:4px">100%</div><div style="font-size:13px;color:var(--muted)">Insurance-accepted report format</div><span style="position:absolute;bottom:0;right:0;font-size:10px;color:var(--muted)">*</span></div>
|
||
<div><div style="font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--green);margin-bottom:4px">Auto</div><div style="font-size:13px;color:var(--muted)">Hail impact annotation from AI scan</div></div>
|
||
<div><div style="font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--orange);margin-bottom:4px">1-Click</div><div style="font-size:13px;color:var(--muted)">Generate & send to adjuster</div></div>
|
||
<div><div style="font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:#a855f7;margin-bottom:4px">0 hrs</div><div style="font-size:13px;color:var(--muted)">Manual report documentation time</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- HAIL INTELLIGENCE - SPLIT (v2 address scoring) + ORIGINAL animated map -->
|
||
<section class="hail-section has-bg" id="hail">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1527689368864-3a821dbccc34?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.98) 0%,rgba(14,6,2,.97) 100%)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label orange">Real-Time Storm Intelligence</div>
|
||
<h2 class="section-title">Storm Hits.<br><span style="color:var(--orange)">Alert Fires.</span><br>You Win First.</h2>
|
||
<p class="section-sub">Know about hail events before your phone rings. Hit the neighborhood while competitors are still checking the weather app.</p>
|
||
<div class="hail-split">
|
||
<div class="hail-map-card">
|
||
<div class="hail-map-bar">
|
||
<span class="hail-map-bar-title">⚡ Storm Territory Map</span>
|
||
<span class="hail-alert-badge">🚨 ACTIVE HAIL EVENT</span>
|
||
</div>
|
||
<div style="padding:16px">
|
||
<div style="font-size:13px;color:var(--muted);margin-bottom:12px;font-weight:500">Live Storm Map - DFW Metro</div>
|
||
<div class="hail-map">
|
||
<div class="hail-map-grid"></div>
|
||
<div class="hail-dot" style="left:30%;top:25%;width:80px;height:80px;background:radial-gradient(ellipse,rgba(239,68,68,.55),transparent 70%);animation-delay:0s"></div>
|
||
<div class="hail-dot" style="left:50%;top:35%;width:120px;height:120px;background:radial-gradient(ellipse,rgba(239,68,68,.65),transparent 70%);animation-delay:.5s"></div>
|
||
<div class="hail-dot" style="left:65%;top:55%;width:60px;height:60px;background:radial-gradient(ellipse,rgba(245,158,11,.5),transparent 70%);animation-delay:1s"></div>
|
||
<div class="hail-dot" style="left:20%;top:60%;width:40px;height:40px;background:radial-gradient(ellipse,rgba(245,158,11,.4),transparent 70%);animation-delay:1.5s"></div>
|
||
<div class="hail-dot" style="left:75%;top:20%;width:30px;height:30px;background:radial-gradient(ellipse,rgba(34,197,94,.4),transparent 70%);animation-delay:.8s"></div>
|
||
<div style="position:absolute;left:48%;top:33%;width:10px;height:10px;background:var(--green);border-radius:50%;border:2px solid #060810;z-index:2"></div>
|
||
<div style="position:absolute;left:32%;top:28%;width:10px;height:10px;background:var(--accent2);border-radius:50%;border:2px solid #060810;z-index:2"></div>
|
||
<div style="position:absolute;bottom:12px;left:12px;background:rgba(6,8,16,.85);border-radius:8px;padding:8px 12px;font-size:11px;color:var(--green);font-weight:600;border:1px solid rgba(0,229,160,.2)">⚡ New hail event detected - 3 reps notified</div>
|
||
</div>
|
||
<div class="hail-legend" style="margin-bottom:12px">
|
||
<span class="legend-item"><span class="legend-dot" style="background:#ef4444"></span>Severe hail (>1.5")</span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:#f59e0b"></span>Moderate hail</span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:#22c55e"></span>Light hail</span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:var(--green)"></span>Your reps</span>
|
||
</div>
|
||
<div style="background:var(--bg3);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;margin-bottom:12px">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px"><span style="color:var(--muted)">Addresses in storm zone</span><span style="color:#fff;font-weight:600">247 homes</span></div>
|
||
<div style="display:flex;justify-content:space-between;font-size:13px"><span style="color:var(--muted)">High-probability leads</span><span style="color:var(--accent);font-weight:600">89 flagged</span></div>
|
||
<div style="display:flex;justify-content:space-between;font-size:13px"><span style="color:var(--muted)">Reps auto-routed</span><span style="color:var(--accent2);font-weight:600">2 active</span></div>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-left:2px">Priority Address Queue</div>
|
||
<div class="addr-item"><div class="addr-name">📍 123 Maple St, Anytown</div><span class="addr-score hot">HIGH 94</span></div>
|
||
<div class="addr-item"><div class="addr-name">📍 456 Oak Ave, Anytown</div><span class="addr-score hot">HIGH 88</span></div>
|
||
<div class="addr-item"><div class="addr-name">📍 789 Pine Rd, Anytown</div><span class="addr-score warm">MED 71</span></div>
|
||
<div class="addr-item"><div class="addr-name">📍 321 Cedar Ln, Anytown</div><span class="addr-score cool">LOW 42</span></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<ul class="hail-feat-list">
|
||
<li><span>⚡</span><span><strong style="color:#fff">Real-Time Hail Alerts -</strong> Storm events fire instant notifications with impact zones mapped to your canvassing territory before competitors even open their weather app.</span></li>
|
||
<li><span>🗺️</span><span><strong style="color:#fff">Territory Intelligence -</strong> Every address scored by impact severity. Your reps go straight to the highest-value doors, auto-routed within minutes of a storm.</span></li>
|
||
<li><span>🤖</span><span><strong style="color:#fff">AI Damage Diagnosis -</strong> LiDAR drone scans build a 3D digital twin and AI-flags every hail impact in under 4 minutes - on-site, included in your subscription.</span></li>
|
||
<li><span>📎</span><span><strong style="color:#fff">Adjuster-Ready Reports -</strong> Auto-generated reports with full storm documentation sent directly to insurance - job done, first submission.</span></li>
|
||
<li><span>📡</span><span><strong style="color:#fff">HailTrace + HailWatch -</strong> Dual-source storm data fusion plus NOAA for maximum coverage. Never miss an event in your market.</span></li>
|
||
</ul>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px">
|
||
<div style="background:var(--card);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:20px;text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--orange)">4 min</div><div style="font-size:13px;color:var(--muted);margin-top:4px">AI Scan to Report</div></div>
|
||
<div style="background:var(--card);border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:20px;text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:#ef4444"><1 hr</div><div style="font-size:13px;color:var(--muted);margin-top:4px">Alert to Reps in Field</div></div>
|
||
</div>
|
||
<div style="margin-top:28px"><a href="https://book.lynkeduppro.com/" class="btn-primary" style="font-size:15px;padding:13px 28px;display:inline-block">See Hail Intel In Action →</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS -->
|
||
<section class="how-section has-bg" id="workflow">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(11,18,32,.97)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">How It Works</div>
|
||
<h2 class="section-title" style="text-align:center">2:14PM Storm.<br><span style="color:var(--accent)">2:31PM Reps Out.</span><br>5PM: 11 Contracts.</h2>
|
||
<div class="steps">
|
||
<div class="step"><div class="step-num">01</div><h3>Storm Detected</h3><p>Hail event fires a real-time alert. Territory map auto-highlights the impact zone and scores every address by priority.</p></div>
|
||
<div class="step"><div class="step-num">02</div><h3>Reps Dispatched</h3><p>Field reps receive optimized canvassing routes on their phone with homeowner data pre-loaded per address.</p></div>
|
||
<div class="step"><div class="step-num">03</div><h3>AI Scan + Measure</h3><p>Rep deploys drone. LynkedUp Pro builds a digital twin and AI-flags every hail impact in under 4 minutes.</p></div>
|
||
<div class="step"><div class="step-num">04</div><h3>Instant Proposal</h3><p>Measurements feed directly into an on-site proposal with live material pricing. Customer signs on the spot.</p></div>
|
||
<div class="step"><div class="step-num">05</div><h3>Claim Filed</h3><p>Auto-generated adjuster report with full documentation sent to insurance. Pipeline updated. Done.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ CTA STRIP 2 ══ -->
|
||
<section class="cta-strip">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(2,8,14,.96) 100%)"></div>
|
||
<div class="glow" style="background:radial-gradient(ellipse,rgba(0,200,255,.07),transparent 70%)"></div>
|
||
<div class="wrap">
|
||
<div class="strip-tag" style="background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.22);color:var(--accent)">
|
||
<span class="strip-tdot" style="background:var(--accent)"></span>
|
||
Storm to signed contract - one tool, one afternoon
|
||
</div>
|
||
<h2>Your Crew Can<br>Do This. The Only<br><span style="color:var(--accent)">Missing Piece Is the Software.</span></h2>
|
||
<p>You already have the crew, the skills, and the territory. LynkedUp Pro gives you the hail alerts, the AI scans, the instant proposals, and the adjuster reports, all connected, all on one screen, all for $349 flat.</p>
|
||
<div class="smet-row">
|
||
<div class="smet" style="border:1px solid rgba(0,200,255,.2)"><div class="smet-v" style="color:var(--accent)">4 min</div><div class="smet-l">Scan to full report</div></div>
|
||
<div class="smet" style="border:1px solid rgba(0,229,160,.2)"><div class="smet-v" style="color:var(--green)">$0</div><div class="smet-l">Per-report cost. Ever.</div></div>
|
||
<div class="smet" style="border:1px solid rgba(245,158,11,.2)"><div class="smet-v" style="color:var(--orange)">100%</div><div class="smet-l">First-submission claim rate</div></div>
|
||
<div class="smet" style="border:1px solid rgba(255,255,255,.1)"><div class="smet-v" style="color:#fff">5</div><div class="smet-l">Tools this replaces</div></div>
|
||
</div>
|
||
<div class="strip-btns">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo →</a>
|
||
|
||
</div>
|
||
<div class="strip-trust">
|
||
<span><b>✅</b> Works on iOS & Android</span>
|
||
<span><b>✅</b> Free onboarding call</span>
|
||
<span><b>✅</b> Up & running in 24 hrs</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VIDEO DEMO SECTION (from original) -->
|
||
<section class="video-section" id="video">
|
||
<div class="container reveal">
|
||
<div class="section-label">Platform Walkthrough</div>
|
||
<h2 class="section-title">Watch a Texas Crew<br><span style="color:var(--accent)">Go Storm to Contract</span><br>in 90 Seconds.</h2>
|
||
<p class="section-sub" style="margin-bottom:40px">Watch how a Texas crew goes from hail alert to filed insurance claim - in one afternoon, on one platform.</p>
|
||
<div style="max-width:820px;margin:0 auto;position:relative">
|
||
<div style="background:#000;border-radius:16px;border:1px solid var(--border);overflow:hidden;position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;cursor:pointer" id="video-frame" onclick="playVideo()">
|
||
<svg width="100%" height="100%" viewBox="0 0 820 461" fill="none" preserveAspectRatio="xMidYMid slice" style="position:absolute;inset:0">
|
||
<rect width="820" height="461" fill="#060d1a"/>
|
||
<rect x="0" y="0" width="820" height="42" fill="#0a1424" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
|
||
<circle cx="18" cy="21" r="5" fill="var(--accent)"/>
|
||
<rect x="32" y="14" width="80" height="14" rx="3" fill="rgba(255,255,255,.1)"/>
|
||
<rect x="0" y="42" width="60" height="419" fill="#080e1c"/>
|
||
<circle cx="30" cy="76" r="12" fill="rgba(0,200,255,.12)" stroke="rgba(0,200,255,.25)" stroke-width="1"/>
|
||
<circle cx="30" cy="116" r="12" fill="rgba(255,255,255,.04)"/><circle cx="30" cy="156" r="12" fill="rgba(255,255,255,.04)"/><circle cx="30" cy="196" r="12" fill="rgba(255,255,255,.04)"/>
|
||
<rect x="60" y="42" width="520" height="419" fill="#090e1c"/>
|
||
<line x1="60" y1="126" x2="580" y2="126" stroke="rgba(255,255,255,.035)" stroke-width="1"/><line x1="60" y1="210" x2="580" y2="210" stroke="rgba(255,255,255,.035)" stroke-width="1"/><line x1="190" y1="42" x2="190" y2="461" stroke="rgba(255,255,255,.035)" stroke-width="1"/><line x1="320" y1="42" x2="320" y2="461" stroke="rgba(255,255,255,.035)" stroke-width="1"/><line x1="450" y1="42" x2="450" y2="461" stroke="rgba(255,255,255,.035)" stroke-width="1"/>
|
||
<ellipse cx="290" cy="240" rx="150" ry="100" fill="rgba(239,68,68,.12)" stroke="rgba(239,68,68,.22)" stroke-width="1" stroke-dasharray="6 4"/>
|
||
<ellipse cx="275" cy="228" rx="85" ry="58" fill="rgba(239,68,68,.2)" stroke="rgba(239,68,68,.38)" stroke-width="1.5"/>
|
||
<circle cx="255" cy="215" r="7" fill="var(--green)" stroke="#060810" stroke-width="2"/><circle cx="305" cy="238" r="7" fill="var(--accent2)" stroke="#060810" stroke-width="2"/><circle cx="278" cy="258" r="7" fill="#a855f7" stroke="#060810" stroke-width="2"/>
|
||
<rect x="72" y="52" width="220" height="38" rx="6" fill="rgba(239,68,68,.1)" stroke="rgba(239,68,68,.28)" stroke-width="1"/>
|
||
<circle cx="88" cy="71" r="5" fill="#ef4444"/>
|
||
<rect x="100" y="62" width="130" height="7" rx="2" fill="rgba(239,68,68,.5)"/><rect x="100" y="74" width="170" height="5" rx="2" fill="rgba(255,255,255,.1)"/>
|
||
<rect x="580" y="42" width="240" height="419" fill="#0a1424" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
|
||
<rect width="820" height="461" fill="rgba(6,8,16,.45)"/>
|
||
</svg>
|
||
<div id="play-btn" style="position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px">
|
||
<div style="width:80px;height:80px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(245,158,11,.4)">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="#080c14"><path d="M8 5v14l11-7z"/></svg>
|
||
</div>
|
||
<div style="text-align:center">
|
||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:#fff">Watch 90-Second Demo</div>
|
||
<div style="font-size:13px;color:rgba(255,255,255,.6);margin-top:4px">Storm alert → contract signed</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chapter-markers">
|
||
<div class="chapter active"><div class="chapter-time active" style="color:var(--accent)">0:00</div><div class="chapter-label">Storm alert fires</div></div>
|
||
<div class="chapter"><div class="chapter-time inactive" style="color:var(--muted)">0:18</div><div class="chapter-label" style="color:var(--muted)">Rep dispatched</div></div>
|
||
<div class="chapter"><div class="chapter-time inactive" style="color:var(--muted)">0:35</div><div class="chapter-label" style="color:var(--muted)">Drone scan + AI</div></div>
|
||
<div class="chapter"><div class="chapter-time inactive" style="color:var(--muted)">1:02</div><div class="chapter-label" style="color:var(--muted)">Proposal signed</div></div>
|
||
<div class="chapter" style="border-right:none"><div class="chapter-time inactive" style="color:var(--muted)">1:28</div><div class="chapter-label" style="color:var(--muted)">Claim filed</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:28px">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="display:inline-block">Book a demo →</a>
|
||
<p style="font-size:13px;color:var(--muted);margin-top:10px">30-minute walkthrough with a real roofing workflow · No sales pressure</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FULL DASHBOARD SHOWCASE -->
|
||
<section style="background:var(--bg);padding:100px 24px;overflow:hidden;position:relative" id="dashboard">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(.07) saturate(.3)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.97);position:absolute;inset:0;z-index:1"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">Platform Preview</div>
|
||
<h2 class="section-title">The Real Dashboard.<br><span style="color:var(--accent)">Your Whole Business,</span><br>One Screen.</h2>
|
||
<p class="section-sub">Every screen your reps, managers, and office team will use - designed for speed in the field and clarity in the office.</p>
|
||
<div class="dash-mock">
|
||
<div class="dash-topbar">
|
||
<div class="dash-topbar-left">
|
||
<div class="dash-logo-small">LynkedUp <span>Pro</span></div>
|
||
<div class="dash-tab-row"><div class="dash-tab active">Owners Box</div><div class="dash-tab">Dashboard</div><div class="dash-tab">Projects</div></div>
|
||
</div>
|
||
<div class="dash-topbar-right">
|
||
<div class="dash-notification">🔔</div>
|
||
<div class="dash-notification" style="background:rgba(0,200,255,.1);border-color:rgba(0,200,255,.2);color:var(--accent);font-size:10px;font-weight:700">J</div>
|
||
</div>
|
||
</div>
|
||
<div class="dash-body">
|
||
<div class="dash-sidebar">
|
||
<div class="dash-nav-item active"><span class="dash-nav-icon">🏠</span>Owners Box</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">📊</span>Dashboard</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">🗂️</span>Projects</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">👤</span>Leads</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">🔀</span>Pipeline</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">📡</span>LynkDispatch</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">🗺️</span>Territory Map</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">🎨</span>Canvas</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">📐</span>Measurements</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">💰</span>Estimates</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">⭐</span>Client Experience</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">💳</span>Billing</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">📋</span>Team Schedule</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">📈</span>Reports</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">🤖</span>AI Assistant</div>
|
||
<div class="dash-nav-item"><span class="dash-nav-icon">⚙️</span>Settings</div>
|
||
</div>
|
||
<div class="dash-content">
|
||
<div class="dash-greeting">Good morning, Justin 👋 Here's what's happening today.</div>
|
||
<div class="dash-title">Owners Box</div>
|
||
<div class="dash-kpis">
|
||
<div class="kpi"><div class="kpi-label"><span class="kpi-label-icon">📅</span>Appointments</div><div class="kpi-val blue">18</div><div class="kpi-sub">Today</div></div>
|
||
<div class="kpi"><div class="kpi-label"><span class="kpi-label-icon">🏗️</span>Projects</div><div class="kpi-val orange">27</div><div class="kpi-sub">In Progress</div></div>
|
||
<div class="kpi"><div class="kpi-label"><span class="kpi-label-icon">📤</span>Estimates</div><div class="kpi-val">14</div><div class="kpi-sub">Sent</div></div>
|
||
<div class="kpi"><div class="kpi-label"><span class="kpi-label-icon">💵</span>Revenue</div><div class="kpi-val green" style="font-size:18px">$48,750</div><div class="kpi-sub">This Week ↑</div></div>
|
||
</div>
|
||
<div class="dash-lower">
|
||
<div class="dash-panel">
|
||
<div class="dash-panel-title">Today's Schedule</div>
|
||
<div class="sched-item"><span class="sched-time">10 AM</span><div class="sched-info"><div class="sched-name">Roof Inspection</div><div class="sched-addr">123 Maple St · Justin J.</div></div><span class="sched-pin">📍</span></div>
|
||
<div class="sched-item"><span class="sched-time">11 AM</span><div class="sched-info"><div class="sched-name">Estimate Review</div><div class="sched-addr">456 Oak Ave · Sarah M.</div></div><span class="sched-pin">📍</span></div>
|
||
<div class="sched-item"><span class="sched-time">1 PM</span><div class="sched-info"><div class="sched-name">Material Delivery</div><div class="sched-addr">789 Pine Rd · Mike T.</div></div><span class="sched-pin">📍</span></div>
|
||
<div class="sched-item"><span class="sched-time">2 PM</span><div class="sched-info"><div class="sched-name">Project Walkthrough</div><div class="sched-addr">321 Cedar Ln · Justin J.</div></div><span class="sched-pin">📍</span></div>
|
||
</div>
|
||
<div class="dash-panel">
|
||
<div class="dash-panel-title">Recent Activity</div>
|
||
<div class="activity-item"><div class="activity-dot" style="background:var(--green)"></div><div class="activity-text"><strong>New Lead Added</strong> - John Smith</div><span class="activity-time">34m ago</span></div>
|
||
<div class="activity-item"><div class="activity-dot" style="background:var(--accent)"></div><div class="activity-text"><strong>Estimate Sent</strong> - 456 Oak Ave</div><span class="activity-time">1h ago</span></div>
|
||
<div class="activity-item"><div class="activity-dot" style="background:var(--orange)"></div><div class="activity-text"><strong>Project Updated</strong> - 789 Pine Rd</div><span class="activity-time">2h ago</span></div>
|
||
<div class="activity-item"><div class="activity-dot" style="background:var(--green)"></div><div class="activity-text"><strong>Payment Received</strong> - 123 Maple St</div><span class="activity-time">3h ago</span></div>
|
||
<div class="activity-item"><div class="activity-dot" style="background:#ef4444"></div><div class="activity-text"><strong>⚡ Hail Event Detected</strong> - TX-Tarrant Co.</div><span class="activity-time">5h ago</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- PRODUCT SCREENSHOTS (from original) -->
|
||
<section style="background:var(--bg2);padding:100px 24px;position:relative;overflow:hidden" id="screenshots">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(.07) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(11,18,32,.97);position:absolute;inset:0;z-index:1"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">Product Screenshots</div>
|
||
<h2 class="section-title">Every Screen Your<br><span style="color:var(--green)">Reps Use All Day.</span><br>All From One Login.</h2>
|
||
<p class="section-sub">CRM pipeline, LiDAR scanning, mobile rep app, and adjuster reports - all from one platform on any device.</p>
|
||
<div class="screenshots-grid" style="grid-template-columns:1fr 1fr 1fr">
|
||
<!-- Screen 1: CRM Dashboard -->
|
||
<div class="screen-card">
|
||
<div style="background:#060d1a;aspect-ratio:4/3;position:relative;overflow:hidden">
|
||
<svg width="100%" height="100%" viewBox="0 0 340 255" fill="none">
|
||
<rect width="340" height="255" fill="#060d1a"/>
|
||
<rect x="0" y="0" width="340" height="32" fill="#0a1424"/>
|
||
<rect x="10" y="11" width="60" height="10" rx="2" fill="rgba(255,255,255,.12)"/>
|
||
<rect x="260" y="8" width="70" height="16" rx="4" fill="rgba(0,200,255,.15)" stroke="rgba(0,200,255,.3)" stroke-width="1"/>
|
||
<rect x="8" y="40" width="72" height="48" rx="6" fill="#0f1e2e" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="16" y="48" width="36" height="4" rx="2" fill="rgba(255,255,255,.1)"/><rect x="16" y="56" width="50" height="14" rx="2" fill="rgba(0,200,255,.15)"/>
|
||
<rect x="88" y="40" width="72" height="48" rx="6" fill="#0f1e2e" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="96" y="48" width="36" height="4" rx="2" fill="rgba(255,255,255,.1)"/><rect x="96" y="56" width="50" height="14" rx="2" fill="rgba(14,165,233,.15)"/>
|
||
<rect x="168" y="40" width="72" height="48" rx="6" fill="#0f1e2e" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="176" y="48" width="36" height="4" rx="2" fill="rgba(255,255,255,.1)"/><rect x="176" y="56" width="50" height="14" rx="2" fill="rgba(245,158,11,.15)"/>
|
||
<rect x="248" y="40" width="84" height="48" rx="6" fill="#0f1e2e" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="256" y="48" width="36" height="4" rx="2" fill="rgba(255,255,255,.1)"/><rect x="256" y="56" width="50" height="14" rx="2" fill="rgba(168,85,247,.15)"/>
|
||
<rect x="8" y="97" width="78" height="150" rx="6" fill="#0a1424" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
|
||
<rect x="14" y="104" width="40" height="5" rx="2" fill="rgba(255,255,255,.15)"/>
|
||
<rect x="14" y="115" width="66" height="30" rx="4" fill="#0f1e2e" stroke="rgba(0,200,255,.2)" stroke-width="1"/>
|
||
<rect x="20" y="121" width="40" height="4" rx="2" fill="rgba(255,255,255,.12)"/>
|
||
<rect x="14" y="150" width="66" height="30" rx="4" fill="#0f1e2e" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="94" y="97" width="78" height="150" rx="6" fill="#0a1424" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
|
||
<rect x="180" y="97" width="78" height="150" rx="6" fill="#0a1424" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
|
||
<rect x="266" y="97" width="66" height="150" rx="6" fill="#0a1424" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
|
||
<rect x="0" y="238" width="340" height="17" fill="rgba(0,0,0,.7)"/>
|
||
<text x="170" y="250" fill="rgba(255,255,255,.5)" font-size="9" text-anchor="middle" font-family="monospace">CRM PIPELINE - 24 ACTIVE LEADS</text>
|
||
</svg>
|
||
</div>
|
||
<div class="screen-card-label"><div class="screen-tag">CRM Dashboard</div><div class="screen-desc">Pipeline kanban, lead tracking, and real-time metrics in one view</div></div>
|
||
</div>
|
||
<!-- Screen 2: LiDAR Scan -->
|
||
<div class="screen-card">
|
||
<div style="background:#060d14;aspect-ratio:4/3;position:relative;overflow:hidden">
|
||
<svg width="100%" height="100%" viewBox="0 0 340 255" fill="none">
|
||
<rect width="340" height="255" fill="#060d14"/>
|
||
<rect x="0" y="0" width="340" height="32" fill="#0a1424"/>
|
||
<rect x="10" y="10" width="80" height="12" rx="3" fill="rgba(0,200,255,.2)"/>
|
||
<polygon points="30,200 170,100 310,200" fill="rgba(0,200,255,.07)" stroke="rgba(0,200,255,.5)" stroke-width="1.5"/>
|
||
<line x1="80" y1="185" x2="170" y2="115" stroke="rgba(0,200,255,.12)" stroke-width=".5"/>
|
||
<line x1="130" y1="193" x2="170" y2="108" stroke="rgba(0,200,255,.12)" stroke-width=".5"/>
|
||
<line x1="210" y1="193" x2="170" y2="108" stroke="rgba(0,200,255,.12)" stroke-width=".5"/>
|
||
<circle cx="95" cy="165" r="8" fill="rgba(239,68,68,.15)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<circle cx="95" cy="165" r="4" fill="rgba(239,68,68,.7)"/>
|
||
<circle cx="145" cy="145" r="6" fill="rgba(239,68,68,.15)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<circle cx="175" cy="150" r="10" fill="rgba(239,68,68,.15)" stroke="#ef4444" stroke-width="2"/>
|
||
<circle cx="210" cy="165" r="7" fill="rgba(245,158,11,.15)" stroke="#f59e0b" stroke-width="1.5"/>
|
||
<line x1="30" y1="210" x2="310" y2="210" stroke="rgba(14,165,233,.4)" stroke-width="1" stroke-dasharray="5 3"/>
|
||
<text x="170" y="222" fill="rgba(14,165,233,.8)" font-size="9" text-anchor="middle" font-family="monospace">44.7 ft</text>
|
||
<rect x="0" y="228" width="340" height="27" fill="#080e1c"/>
|
||
<text x="170" y="246" fill="#00c8ff" font-size="9" text-anchor="middle" font-family="monospace">AI SCAN COMPLETE · 5 ZONES · 19 IMPACTS → GENERATE REPORT</text>
|
||
<rect x="165" y="8" width="125" height="20" rx="4" fill="rgba(0,200,255,.1)" stroke="rgba(0,200,255,.25)" stroke-width="1"/>
|
||
<text x="227" y="21" fill="var(--accent)" font-size="8" text-anchor="middle" font-family="monospace">LIDAR SCAN · 3.8 MIN</text>
|
||
</svg>
|
||
</div>
|
||
<div class="screen-card-label"><div class="screen-tag" style="color:var(--green)">LiDAR Scan + AI</div><div class="screen-desc">3D digital twin with AI-annotated hail impact zones and measurements</div></div>
|
||
</div>
|
||
<!-- Screen 3: Adjuster Report -->
|
||
<div class="screen-card">
|
||
<div style="background:#060810;aspect-ratio:4/3;position:relative;overflow:hidden">
|
||
<svg width="100%" height="100%" viewBox="0 0 340 255" fill="none">
|
||
<rect width="340" height="255" fill="#060810"/>
|
||
<rect x="40" y="10" width="260" height="235" rx="8" fill="#0c1520" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="40" y="10" width="260" height="40" rx="8" fill="rgba(0,200,255,.08)" stroke="rgba(0,200,255,.15)" stroke-width="1"/>
|
||
<rect x="52" y="20" width="90" height="8" rx="2" fill="rgba(0,200,255,.35)"/><rect x="52" y="32" width="130" height="5" rx="2" fill="rgba(255,255,255,.15)"/>
|
||
<polygon points="100,110 170,65 240,110" fill="rgba(0,200,255,.06)" stroke="rgba(0,200,255,.35)" stroke-width="1"/>
|
||
<circle cx="125" cy="98" r="5" fill="rgba(239,68,68,.7)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="155" cy="84" r="5" fill="rgba(239,68,68,.7)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="192" cy="90" r="6" fill="rgba(239,68,68,.8)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<rect x="52" y="120" width="100" height="5" rx="2" fill="rgba(255,255,255,.15)"/><rect x="220" y="118" width="70" height="9" rx="2" fill="rgba(255,255,255,.08)"/>
|
||
<rect x="52" y="132" width="80" height="4" rx="2" fill="rgba(255,255,255,.08)"/><rect x="52" y="144" width="90" height="4" rx="2" fill="rgba(255,255,255,.08)"/>
|
||
<rect x="52" y="168" width="120" height="28" rx="5" fill="rgba(0,200,255,.1)" stroke="rgba(0,200,255,.3)" stroke-width="1.5"/>
|
||
<text x="112" y="177" fill="#00c8ff" font-size="8" text-anchor="middle" font-family="monospace" font-weight="700">✓ INSURANCE APPROVED</text>
|
||
<text x="112" y="188" fill="rgba(0,200,255,.6)" font-size="7" text-anchor="middle" font-family="monospace">First submission · No callback</text>
|
||
<rect x="178" y="168" width="110" height="28" rx="5" fill="rgba(14,165,233,.15)" stroke="rgba(14,165,233,.3)" stroke-width="1"/>
|
||
<text x="233" y="184" fill="#0ea5e9" font-size="8" text-anchor="middle" font-family="monospace">SEND TO ADJUSTER →</text>
|
||
</svg>
|
||
</div>
|
||
<div class="screen-card-label"><div class="screen-tag" style="color:var(--orange)">Adjuster Report</div><div class="screen-desc">One-click insurance-grade report with AI impact zones and storm data</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CASE STUDIES + BEFORE/AFTER + GALLERY (from original) -->
|
||
<section class="showcase-section has-bg" id="work">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.97)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">Real Results</div>
|
||
<h2 class="section-title">11 Contracts.<br><span style="color:var(--green)">Same Day.</span><br>Zero Competition.</h2>
|
||
<p class="section-sub">See how LynkedUp Pro performs in the field - from post-storm canvassing runs to adjuster-ready digital twin reports.</p>
|
||
<div class="showcase-tabs">
|
||
<button class="stab active" onclick="switchTab('cases')">Case Studies</button>
|
||
<button class="stab" onclick="switchTab('before')">Before vs. After</button>
|
||
<button class="stab" onclick="switchTab('gallery')">Platform Gallery</button>
|
||
</div>
|
||
|
||
<!-- CASE STUDIES -->
|
||
<div class="showcase-panel active case-grid" id="tab-cases">
|
||
<div class="case-card">
|
||
<div class="case-visual" style="background:linear-gradient(135deg,#0c1120 0%,#0f1e35 100%)">
|
||
<svg width="320" height="180" viewBox="0 0 320 180" fill="none" style="position:absolute;inset:0;width:100%;height:100%">
|
||
<rect width="320" height="180" fill="#060d1a"/>
|
||
<polygon points="60,130 160,55 260,130" fill="rgba(0,200,255,.08)" stroke="rgba(0,200,255,.5)" stroke-width="1.5"/>
|
||
<circle cx="110" cy="100" r="5" fill="rgba(239,68,68,.7)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="145" cy="88" r="4" fill="rgba(239,68,68,.6)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="195" cy="95" r="6" fill="rgba(239,68,68,.8)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="220" cy="110" r="3" fill="rgba(245,158,11,.6)" stroke="#f59e0b" stroke-width="1"/>
|
||
<line x1="60" y1="140" x2="260" y2="140" stroke="rgba(14,165,233,.4)" stroke-width="1" stroke-dasharray="4 3"/>
|
||
<text x="155" y="155" fill="rgba(14,165,233,.8)" font-size="10" text-anchor="middle" font-family="monospace">42.3 ft</text>
|
||
<rect x="200" y="15" width="106" height="22" rx="4" fill="rgba(0,200,255,.1)" stroke="rgba(0,200,255,.3)" stroke-width="1"/>
|
||
<text x="253" y="30" fill="#00c8ff" font-size="10" text-anchor="middle" font-family="monospace">LiDAR SCAN ✓</text>
|
||
</svg>
|
||
</div>
|
||
<div class="case-body">
|
||
<span class="case-tag lidar">LiDAR Digital Twin</span>
|
||
<h3>Denton, TX - Post-Hailstorm Roof Assessment</h3>
|
||
<p>Crew deployed LynkedUp Pro after the May hailstorm hit Denton. Drone scan on 14 properties in a single afternoon. AI flagged 312 individual hail impact zones. Every adjuster report auto-generated and filed same day.</p>
|
||
<div class="case-metrics">
|
||
<div class="case-metric"><div class="case-metric-val" style="color:var(--accent)">14</div><div class="case-metric-label">Roofs scanned</div></div>
|
||
<div class="case-metric"><div class="case-metric-val" style="color:#ef4444">312</div><div class="case-metric-label">Hail impacts flagged</div></div>
|
||
<div class="case-metric"><div class="case-metric-val" style="color:var(--accent2)">3.8 min</div><div class="case-metric-label">Avg. scan time</div></div>
|
||
<div class="case-metric"><div class="case-metric-val" style="color:var(--orange)">$0</div><div class="case-metric-label">Per-report cost</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="case-visual" style="background:linear-gradient(135deg,#0c1120 0%,#1a100c 100%)">
|
||
<svg width="320" height="180" viewBox="0 0 320 180" fill="none" style="position:absolute;inset:0;width:100%;height:100%">
|
||
<rect width="320" height="180" fill="#080c14"/>
|
||
<ellipse cx="155" cy="85" rx="90" ry="60" fill="rgba(239,68,68,.18)" stroke="rgba(239,68,68,.3)" stroke-width="1" stroke-dasharray="5 3"/>
|
||
<ellipse cx="140" cy="80" rx="50" ry="34" fill="rgba(239,68,68,.28)" stroke="rgba(239,68,68,.45)" stroke-width="1.5"/>
|
||
<circle cx="130" cy="72" r="5" fill="var(--green)" stroke="#060810" stroke-width="2"/>
|
||
<circle cx="168" cy="88" r="5" fill="#0ea5e9" stroke="#060810" stroke-width="2"/>
|
||
<circle cx="148" cy="100" r="5" fill="#a855f7" stroke="#060810" stroke-width="2"/>
|
||
<rect x="8" y="8" width="140" height="20" rx="4" fill="rgba(239,68,68,.12)" stroke="rgba(239,68,68,.25)" stroke-width="1"/>
|
||
<text x="78" y="22" fill="#ef4444" font-size="9" text-anchor="middle" font-family="monospace" font-weight="700">⚡ STORM EVENT - HOUSTON NW</text>
|
||
<rect x="8" y="150" width="130" height="20" rx="4" fill="rgba(0,0,0,.5)" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
|
||
<text x="73" y="164" fill="rgba(255,255,255,.7)" font-size="9" text-anchor="middle" font-family="monospace">3 REPS AUTO-DISPATCHED</text>
|
||
</svg>
|
||
</div>
|
||
<div class="case-body">
|
||
<span class="case-tag storm">Storm Canvassing</span>
|
||
<h3>Houston NW - Same-Day Storm Response</h3>
|
||
<p>Alert fired at 2:14 PM. Three reps were auto-routed into the storm swath by 2:31 PM. By end of day, 11 contracts signed - all before a single competitor crew arrived the next morning.</p>
|
||
<div class="case-metrics">
|
||
<div class="case-metric"><div class="case-metric-val" style="color:var(--orange)">17 min</div><div class="case-metric-label">Alert → reps deployed</div></div>
|
||
<div class="case-metric"><div class="case-metric-val" style="color:var(--accent)">11</div><div class="case-metric-label">Contracts signed</div></div>
|
||
<div class="case-metric"><div class="case-metric-val" style="color:#ef4444">89</div><div class="case-metric-label">Homes scored</div></div>
|
||
<div class="case-metric"><div class="case-metric-val" style="color:var(--accent2)">1st</div><div class="case-metric-label">On scene - zero competition</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BEFORE / AFTER -->
|
||
<div class="showcase-panel" id="tab-before" style="grid-template-columns:1fr">
|
||
<div class="ba-wrap">
|
||
<div class="ba-col ba-before">
|
||
<h3>❌ Before LynkedUp Pro</h3>
|
||
<div class="ba-step"><div class="ba-icon">📋</div><div class="ba-step-text"><strong>Manual spreadsheets</strong> - Leads, jobs, follow-ups scattered across Excel, texts, and sticky notes.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">⏱️</div><div class="ba-step-text"><strong>48-hour EagleView wait</strong> - $35-$87 per report, 1-2 day turnaround. Homeowners signed elsewhere.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">📱</div><div class="ba-step-text"><strong>5+ disconnected apps</strong> - CRM, calendar, canvassing, measurements, billing - no sync, constant errors.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">🌩️</div><div class="ba-step-text"><strong>Missed storm windows</strong> - Heard about hail from a neighbor. Competitors already had 20 contracts.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">📄</div><div class="ba-step-text"><strong>Manual adjuster reports</strong> - Hours of documentation per job. Claims underpaid due to missing evidence.</div></div>
|
||
</div>
|
||
<div class="ba-col ba-after">
|
||
<h3>✓ With LynkedUp Pro</h3>
|
||
<div class="ba-step"><div class="ba-icon">🎯</div><div class="ba-step-text"><strong>Everything connected</strong> - One source of truth across your entire team from lead to final invoice.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">⚡</div><div class="ba-step-text"><strong>4-minute AI scan</strong> - Drone deploys, LiDAR measures, AI annotates, report generated. On-site. Included.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">📊</div><div class="ba-step-text"><strong>6 systems, one login</strong> - CRM, Canvas, Measurements, Client Experience, Billing, and Estimating - all in sync.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">📡</div><div class="ba-step-text"><strong>First to the door</strong> - Sub-hour hail alerts auto-route reps to scored addresses before competitors check the news.</div></div>
|
||
<div class="ba-step"><div class="ba-icon">✅</div><div class="ba-step-text"><strong>One-click adjuster reports</strong> - AI + LiDAR evidence packed into insurance-accepted PDFs. First submission gets approved.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GALLERY -->
|
||
<div class="showcase-panel" id="tab-gallery" style="grid-template-columns:1fr">
|
||
<div class="gallery-grid">
|
||
<div class="gallery-item" style="grid-column:span 2">
|
||
<div class="gallery-thumb" style="background:linear-gradient(135deg,#060d1a,#0c1830)">
|
||
<svg width="100%" height="100%" viewBox="0 0 600 280" fill="none">
|
||
<rect width="600" height="280" fill="#060d1a"/>
|
||
<rect x="0" y="0" width="600" height="40" fill="#0a1220" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<circle cx="20" cy="20" r="4" fill="var(--accent)"/>
|
||
<rect x="32" y="14" width="60" height="12" rx="2" fill="rgba(255,255,255,.1)"/>
|
||
<rect x="0" y="40" width="56" height="240" fill="#080f1a"/>
|
||
<circle cx="28" cy="68" r="10" fill="rgba(0,200,255,.15)" stroke="rgba(0,200,255,.3)" stroke-width="1"/>
|
||
<circle cx="28" cy="100" r="10" fill="rgba(255,255,255,.04)"/><circle cx="28" cy="132" r="10" fill="rgba(255,255,255,.04)"/><circle cx="28" cy="164" r="10" fill="rgba(255,255,255,.04)"/>
|
||
<rect x="56" y="40" width="400" height="240" fill="#090e1a"/>
|
||
<ellipse cx="240" cy="155" rx="110" ry="75" fill="rgba(239,68,68,.12)" stroke="rgba(239,68,68,.25)" stroke-width="1" stroke-dasharray="6 4"/>
|
||
<ellipse cx="230" cy="148" rx="60" ry="42" fill="rgba(239,68,68,.2)" stroke="rgba(239,68,68,.4)" stroke-width="1.5"/>
|
||
<circle cx="215" cy="138" r="6" fill="var(--green)" stroke="#060810" stroke-width="2"/>
|
||
<circle cx="255" cy="158" r="6" fill="#0ea5e9" stroke="#060810" stroke-width="2"/>
|
||
<circle cx="238" cy="175" r="6" fill="#a855f7" stroke="#060810" stroke-width="2"/>
|
||
<rect x="66" y="48" width="180" height="28" rx="5" fill="rgba(239,68,68,.12)" stroke="rgba(239,68,68,.3)" stroke-width="1"/>
|
||
<circle cx="82" cy="62" r="4" fill="#ef4444"/>
|
||
<rect x="92" y="57" width="100" height="5" rx="2" fill="rgba(239,68,68,.5)"/>
|
||
<rect x="456" y="40" width="144" height="240" fill="#0a1220" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
</svg>
|
||
</div>
|
||
<div class="gallery-caption">Live storm canvassing dashboard<div class="gallery-sub">Real-time hail overlay · Rep tracking · Territory scoring</div></div>
|
||
</div>
|
||
<div class="gallery-item">
|
||
<div class="gallery-thumb" style="background:#060d14">
|
||
<svg width="100%" height="100%" viewBox="0 0 280 210" fill="none">
|
||
<rect width="280" height="210" fill="#060d14"/>
|
||
<polygon points="40,160 140,70 240,160" fill="rgba(0,200,255,.07)" stroke="rgba(0,200,255,.45)" stroke-width="1.5"/>
|
||
<circle cx="85" cy="128" r="5" fill="rgba(239,68,68,.8)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="112" cy="113" r="4" fill="rgba(239,68,68,.7)" stroke="#ef4444" stroke-width="1"/>
|
||
<circle cx="155" cy="108" r="6" fill="rgba(239,68,68,.9)" stroke="#ef4444" stroke-width="1.5"/>
|
||
<circle cx="183" cy="121" r="4" fill="rgba(245,158,11,.6)" stroke="#f59e0b" stroke-width="1"/>
|
||
<rect x="8" y="8" width="120" height="18" rx="4" fill="rgba(0,200,255,.1)" stroke="rgba(0,200,255,.25)" stroke-width="1"/>
|
||
<text x="68" y="20" fill="#00c8ff" font-size="8" text-anchor="middle" font-family="monospace" font-weight="700">AI SCAN COMPLETE - 3.8 MIN</text>
|
||
<rect x="8" y="182" width="264" height="20" rx="4" fill="rgba(0,0,0,.6)"/>
|
||
<text x="140" y="195" fill="rgba(255,255,255,.6)" font-size="8" text-anchor="middle" font-family="monospace">4 HAIL ZONES · 19 IMPACTS · REPORT READY</text>
|
||
</svg>
|
||
</div>
|
||
<div class="gallery-caption">LiDAR digital twin + AI damage detection<div class="gallery-sub">Auto-annotated hail impacts on 3D model</div></div>
|
||
</div>
|
||
<div class="gallery-item">
|
||
<div class="gallery-thumb" style="background:#060810">
|
||
<svg width="100%" height="100%" viewBox="0 0 280 210" fill="none">
|
||
<rect width="280" height="210" fill="#060810"/>
|
||
<rect x="20" y="20" width="240" height="170" rx="8" fill="#0c1520" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
|
||
<rect x="20" y="20" width="240" height="36" rx="8" fill="rgba(0,200,255,.08)" stroke="rgba(0,200,255,.12)" stroke-width="1"/>
|
||
<rect x="32" y="30" width="80" height="7" rx="2" fill="rgba(0,200,255,.3)"/><rect x="32" y="41" width="120" height="5" rx="2" fill="rgba(255,255,255,.1)"/>
|
||
<rect x="32" y="68" width="100" height="5" rx="2" fill="rgba(255,255,255,.15)"/>
|
||
<rect x="32" y="80" width="200" height="8" rx="2" fill="rgba(0,200,255,.15)"/>
|
||
<rect x="32" y="96" width="220" height="5" rx="2" fill="rgba(255,255,255,.07)"/><rect x="32" y="108" width="180" height="5" rx="2" fill="rgba(255,255,255,.07)"/>
|
||
<rect x="32" y="130" width="100" height="28" rx="5" fill="rgba(0,200,255,.12)" stroke="rgba(0,200,255,.3)" stroke-width="1"/>
|
||
<text x="82" y="147" fill="#00c8ff" font-size="8" text-anchor="middle" font-family="monospace">✓ SIGN PROPOSAL</text>
|
||
<rect x="144" y="130" width="116" height="28" rx="5" fill="rgba(245,158,11,.12)" stroke="rgba(245,158,11,.3)" stroke-width="1"/>
|
||
<text x="202" y="147" fill="var(--orange)" font-size="8" text-anchor="middle" font-family="monospace">SEND FOR REVIEW →</text>
|
||
</svg>
|
||
</div>
|
||
<div class="gallery-caption">Proposal builder + digital signature<div class="gallery-sub">On-site close - measurements pre-loaded</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- COMPETITOR ADVANTAGE CARDS (from original - detailed vs specific tools) -->
|
||
<section class="adv-section has-bg" id="compare">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.98)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">Competitive Edge</div>
|
||
<h2 class="section-title">5 Bills. 5 Logins.<br><span style="color:var(--orange)">Zero Storm</span><br>Intelligence.</h2>
|
||
<p class="section-sub">The Texas roofing market has specialized tools - but no one has connected them. Until now.</p>
|
||
<div class="adv-grid">
|
||
<div class="adv-card"><div class="vs-badge">vs. EagleView</div><div class="adv-num">01</div><h3>Real-time vs. 48-hour wait</h3><p>EagleView costs $15-$87 per report and takes up to 2 days. LynkedUp Pro's LiDAR drone scan delivers the same accuracy in under 4 minutes, on-site, included in your subscription.</p></div>
|
||
<div class="adv-card"><div class="vs-badge">vs. SalesRabbit</div><div class="adv-num">02</div><h3>Storm-aware vs. generic canvassing</h3><p>SalesRabbit's DataGrid shows homeowner data - but has no idea a hail event just happened two blocks over. LynkedUp Pro canvassing maps auto-reprioritize territories the moment a storm hits.</p></div>
|
||
<div class="adv-card"><div class="vs-badge">vs. JobNimbus / Roofr</div><div class="adv-num">03</div><h3>Field-first vs. office-first</h3><p>JobNimbus is a great office CRM. Roofr is a great measurement tool. Neither was built for a rep standing in a hail-damaged neighborhood needing a scan, estimate, and signed contract in 30 minutes.</p></div>
|
||
<div class="adv-card"><div class="vs-badge">vs. Loveland IMGING</div><div class="adv-num">04</div><h3>Full workflow vs. inspection-only</h3><p>Loveland/IMGING builds excellent drone digital twins for insurance inspections. But it stops there. LynkedUp Pro connects the drone scan directly into your CRM, canvassing, proposal, and claim workflow.</p></div>
|
||
<div class="adv-card"><div class="vs-badge">vs. RoofLink</div><div class="adv-num">05</div><h3>AI-native vs. feature-patched</h3><p>RoofLink is a solid Texas-based all-in-one. But it was built before LiDAR drones and storm-data APIs. LynkedUp Pro is architected from the ground up for AI diagnostics and geospatial intelligence.</p></div>
|
||
<div class="adv-card"><div class="vs-badge">vs. HailTrace</div><div class="adv-num">06</div><h3>Intelligence + action, not just data</h3><p>HailTrace gives you excellent hail maps. LynkedUp Pro takes that map and automatically routes your reps, scores every address, and triggers your canvassing workflow - no copy-paste required.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FULL COMPARISON TABLE -->
|
||
<section style="background:var(--bg);padding:80px 24px">
|
||
<div class="container reveal">
|
||
<div class="section-label">Feature Comparison</div>
|
||
<h2 class="section-title">Column by Column.<br><span style="color:var(--accent)">Win by Win.</span></h2>
|
||
<div class="compare-wrap" style="overflow-x:auto">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="min-width:220px">Feature</th>
|
||
<th class="ours">LynkedUp Pro ✦</th>
|
||
<th>JobNimbus</th>
|
||
<th>AccuLynx</th>
|
||
<th>EagleView</th>
|
||
<th>Roofr</th>
|
||
<th>SalesRabbit</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="feat-name">Roofing-specific CRM</td><td class="ours"><span class="check">✓</span></td><td><span class="partial">~</span></td><td><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="partial">~</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">AI Roof Measurements (Built-In)</td><td class="ours"><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="partial">~</span></td><td><span class="check">✓</span></td><td><span class="check">✓</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">Smart Calendar + AI Suggestions</td><td class="ours"><span class="check">✓</span></td><td><span class="partial">~</span></td><td><span class="partial">~</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">Real-Time Hail Alerts</td><td class="ours"><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="partial">~</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">LiDAR / Drone Digital Twin</td><td class="ours"><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="partial">~</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">Adjuster-Ready Auto Reports</td><td class="ours"><span class="check">✓</span></td><td><span class="partial">~</span></td><td><span class="partial">~</span></td><td><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">Storm Territory Canvassing Map</td><td class="ours"><span class="check">✓</span></td><td><span class="partial">~</span></td><td><span class="partial">~</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="partial">~</span></td></tr>
|
||
<tr><td class="feat-name">Proposals + Digital Signatures</td><td class="ours"><span class="check">✓</span></td><td><span class="check">✓</span></td><td><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="check">✓</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">Owners Box Command Center</td><td class="ours"><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td></tr>
|
||
<tr><td class="feat-name">Flat-Rate Pricing (No Per-User Fees)</td><td class="ours"><span class="check">✓</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="cross">✗</span></td><td><span class="partial">~</span></td><td><span class="check">✓</span></td></tr>
|
||
<tr><td class="feat-name">Built Exclusively for Roofers</td><td class="ours"><span class="check">✓</span></td><td><span class="partial">~</span></td><td><span class="check">✓</span></td><td><span class="partial">~</span></td><td><span class="check">✓</span></td><td><span class="partial">~</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p style="font-size:12px;color:var(--muted);margin-top:14px;line-height:1.7">✓ = Included ~ = Partial or add-on cost ✗ = Not available. Data based on publicly available information as of 2026. JobNimbus starts at $300/mo; AccuLynx estimated $60-$120/user/mo + $500-$5,000 onboarding fees. EagleView charges $15-$87 per report.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ROI CALCULATOR -->
|
||
<section class="roi-section has-bg" id="roi">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.97)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label green">ROI Calculator</div>
|
||
<h2 class="section-title">Move the Sliders.<br><span style="color:var(--green)">Watch $1,000+</span><br>Come Back.</h2>
|
||
<p class="section-sub">Move the sliders and watch your current tool costs vs. LynkedUp Pro flat-rate pricing. The math usually surprises people.</p>
|
||
<div class="roi-wrap">
|
||
<div class="roi-inputs">
|
||
<h3 style="font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:24px">Your Current Monthly Costs</h3>
|
||
<div class="slider-row"><div class="slider-label"><span>Roof Reports / Month</span><strong id="lbl-reports">20 reports</strong></div><input type="range" id="sl-reports" min="0" max="100" value="20" step="1" oninput="calcROI()"/></div>
|
||
<div class="slider-row"><div class="slider-label"><span>Cost Per Report (EagleView avg)</span><strong id="lbl-rpt-cost">$35 / report</strong></div><input type="range" id="sl-rpt-cost" min="0" max="87" value="35" step="1" oninput="calcROI()"/></div>
|
||
<div class="slider-row"><div class="slider-label"><span>Current CRM Cost</span><strong id="lbl-crm">$300 / mo</strong></div><input type="range" id="sl-crm" min="0" max="1000" value="300" step="10" oninput="calcROI()"/></div>
|
||
<div class="slider-row"><div class="slider-label"><span>Canvassing / Dispatch Tool</span><strong id="lbl-canvas">$150 / mo</strong></div><input type="range" id="sl-canvas" min="0" max="500" value="150" step="10" oninput="calcROI()"/></div>
|
||
<div class="slider-row"><div class="slider-label"><span>Field Team Size</span><strong id="lbl-users">8 users</strong></div><input type="range" id="sl-users" min="1" max="50" value="8" step="1" oninput="calcROI()"/></div>
|
||
<div class="roi-breakdown">
|
||
<div class="roi-breakdown-title">Your Current Monthly Stack</div>
|
||
<div class="roi-break-row"><span>Report Fees (EagleView)</span><span id="br-reports">$700</span></div>
|
||
<div class="roi-break-row"><span>CRM Platform</span><span id="br-crm">$300</span></div>
|
||
<div class="roi-break-row"><span>Canvassing Tool</span><span id="br-canvas">$150</span></div>
|
||
<div class="roi-break-row"><span>Per-User Tool Costs</span><span id="br-users">$200</span></div>
|
||
<div class="roi-break-row total"><span>Total Monthly Cost</span><span id="br-total">$1,350</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="roi-results">
|
||
<h3 style="font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:20px">With LynkedUp Pro at $349/mo</h3>
|
||
<div class="roi-result-highlight">
|
||
<div class="roi-result-num" id="res-monthly">$1,001</div>
|
||
<div class="roi-result-label">Monthly savings vs. your current stack</div>
|
||
</div>
|
||
<div class="roi-results-grid">
|
||
<div class="roi-res-item"><div class="roi-res-label">Annual Savings</div><div class="roi-res-val" id="res-annual">$12,012</div></div>
|
||
<div class="roi-res-item"><div class="roi-res-label">Payback Period</div><div class="roi-res-val" id="res-payback">~9 days</div></div>
|
||
<div class="roi-res-item"><div class="roi-res-label">3-Year Total Saved</div><div class="roi-res-val" id="res-3yr">$36,036</div></div>
|
||
<div class="roi-res-item"><div class="roi-res-label">LynkedUp Pro Cost</div><div class="roi-res-val">$349<span style="font-size:14px;color:var(--muted)">/mo</span></div></div>
|
||
</div>
|
||
<div style="margin-top:24px">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="display:block;text-align:center;font-size:15px;padding:14px">Lock In Your Savings →</a>
|
||
<p style="font-size:12px;color:var(--muted);text-align:center;margin-top:10px">No contracts · Cancel anytime · Full onboarding included</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section class="roofing-offer-section" id="pricing">
|
||
<div class="container">
|
||
|
||
<!-- TOP HEADING -->
|
||
<div class="text-center roofing-heading mb-5">
|
||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||
</div>
|
||
|
||
<!-- MAIN GRID -->
|
||
<div class="row g-4 align-items-stretch">
|
||
|
||
<!-- LEFT CARD -->
|
||
<div class="col-lg-6">
|
||
<div class="lifetime-card h-100">
|
||
<div class="popular-tag">MOST POPULAR</div>
|
||
<h3>Founders Lifetime Access</h3>
|
||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||
<div class="price-box">
|
||
<h2>$2000<sup style="font-size:.4em;vertical-align:super">**</sup></h2>
|
||
<span>PAY ONCE • USE FOREVER</span>
|
||
</div>
|
||
<ul class="feature-list">
|
||
<li>Complete Roofing CRM</li>
|
||
<li>Lead Management System</li>
|
||
<li>Canvassing & Field Tracking</li>
|
||
<li>Insurance Workflow</li>
|
||
<li>Proposal & Inspection Tools</li>
|
||
<li>Team Management Dashboard</li>
|
||
<li>Unlimited Projects</li>
|
||
<li>Future Feature Updates</li>
|
||
<li>Priority Support</li>
|
||
</ul>
|
||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT CARD -->
|
||
<div class="col-lg-6">
|
||
<div class="roofing-info-card h-100">
|
||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||
<div class="info-box">
|
||
<h5>More Revenue Visibility</h5>
|
||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||
</div>
|
||
<div class="info-box">
|
||
<h5>Less Operational Chaos</h5>
|
||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||
</div>
|
||
<div class="info-box">
|
||
<h5>Built for Roofing Teams</h5>
|
||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||
<div class="terms-wrapper mt-4">
|
||
<details class="custom-accordion-item">
|
||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||
<div class="accordion-body">
|
||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<!-- CTA -->
|
||
<div class="roofing-cta-box mt-5 text-center">
|
||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||
<p>Join the next generation of roofing companies scaling with automation,
|
||
field intelligence, and operational visibility.</p>
|
||
<div class="cta-btn-group">
|
||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<style>
|
||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||
.roofing-offer-section{
|
||
padding:64px 0;
|
||
background:
|
||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||
#1a120d;
|
||
overflow:hidden; position:relative;
|
||
}
|
||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||
.roofing-offer-section .h-100{height:100%;}
|
||
.roofing-offer-section .text-center{text-align:center;}
|
||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||
@media (max-width:991px){
|
||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||
}
|
||
@media (max-width:767px){
|
||
.roofing-offer-section{padding:48px 0;}
|
||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||
.roofing-offer-section .lifetime-card,
|
||
.roofing-offer-section .roofing-info-card,
|
||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||
}
|
||
</style>
|
||
|
||
<!-- TESTIMONIALS -->
|
||
<section class="testimonials-section has-bg" id="testimonials">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:rgba(5,8,15,.97)"></div>
|
||
<div class="container reveal">
|
||
<div class="section-label">Social Proof</div>
|
||
<h2 class="section-title">+43% Close Rate.<br><span style="color:var(--green)">$2,100 Saved.</span><br>11 Contracts in a Day.</h2>
|
||
<p class="section-sub">Real crews. Real numbers. Real Texas storm seasons.</p>
|
||
<div class="test-grid">
|
||
<div class="test-card featured">
|
||
<div class="test-result"><div class="test-result-num">+43%</div><div class="test-result-label">Close Rate</div></div>
|
||
<span style="position:absolute;bottom:10px;right:14px;font-size:11px;color:var(--muted)">*</span>
|
||
<div class="stars">★★★★★</div>
|
||
<blockquote>"We were on JobNimbus and paying EagleView separately. Within 60 days of switching, our close rate jumped 43%. The hail alerts alone paid for the whole subscription in week one of storm season. I wish we'd had this two years ago."</blockquote>
|
||
<div class="test-author">
|
||
<div class="author-avatar">JR</div>
|
||
<div>
|
||
<div class="author-name">Jason Rodriguez</div>
|
||
<div class="author-role">Owner · Dallas, TX · 14-person crew</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="test-card">
|
||
<div class="test-result"><div class="test-result-num">$2.1K</div><div class="test-result-label">Saved / Month</div></div>
|
||
<span style="position:absolute;bottom:10px;right:14px;font-size:11px;color:var(--muted)">*</span>
|
||
<div class="stars">★★★★★</div>
|
||
<blockquote>"I cut EagleView, JobNimbus, and SalesRabbit all in one move. LynkedUp Pro replaced all three for less money - and the measurements are actually better. Every insurance claim gets approved on the first submission now."</blockquote>
|
||
<div class="test-author">
|
||
<div class="author-avatar">MT</div>
|
||
<div>
|
||
<div class="author-name">Marcus Thompson</div>
|
||
<div class="author-role">Operations Manager · Fort Worth, TX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="test-card">
|
||
<div class="test-result"><div class="test-result-num">17 min</div><div class="test-result-label">Storm → Reps Out</div></div>
|
||
<span style="position:absolute;bottom:10px;right:14px;font-size:11px;color:var(--muted)">*</span>
|
||
<div class="stars">★★★★★</div>
|
||
<blockquote>"The hail alert fired at 2:14 PM. By 2:31 PM my three reps were already on doors in the impact zone. By EOD we had 11 signed contracts. Our closest competitor showed up the next morning. That's the difference this makes."</blockquote>
|
||
<div class="test-author">
|
||
<div class="author-avatar">SA</div>
|
||
<div>
|
||
<div class="author-name">Sarah Alonzo</div>
|
||
<div class="author-role">Business Development Manager · Houston, TX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- GUARANTEE BAND -->
|
||
<div style="margin-top:60px;background:linear-gradient(135deg,rgba(0,229,160,.05),rgba(0,200,255,.05));border:1px solid rgba(0,229,160,.2);border-radius:20px;padding:48px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center">
|
||
<div style="width:100px;height:100px;border-radius:50%;border:3px solid rgba(0,229,160,.4);display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;text-align:center">
|
||
<div style="font-size:28px">🛡️</div>
|
||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;color:var(--green);letter-spacing:1px;margin-top:4px">FOUNDERS</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;color:#fff;text-transform:uppercase;margin-bottom:10px">Founders Pricing Locked In</h3>
|
||
<p style="font-size:16px;color:var(--muted);line-height:1.7;max-width:600px">Lock in your Founders Lifetime rate today - one payment, no monthly fees, and no per-report charges. Your founding-member pricing is secured for as long as you use LynkedUp Pro.</p>
|
||
<div style="display:flex;gap:24px;margin-top:16px;flex-wrap:wrap">
|
||
<span style="font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px">✅ Founders pricing locked in</span>
|
||
<span style="font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px">✅ One-time payment, no monthly fees</span>
|
||
<span style="font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px">✅ Keep your data regardless</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ CTA STRIP 3 ══ -->
|
||
<section class="cta-strip">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1800&q=80');filter:brightness(.08) saturate(.35)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||
|
||
<div class="wrap">
|
||
<div class="strip-tag" style="background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.22);color:var(--green)">
|
||
<span class="strip-tdot" style="background:var(--green)"></span>
|
||
The results above are from real Texas crews, right now
|
||
</div>
|
||
<h2>Your Next Storm Season<br>Can Look Like This -<br><span style="color:var(--orange)">Or Exactly Like Last One.</span></h2>
|
||
<p>Jason jumped 43% on close rate. Marcus saved $2,100 a month. Sarah had 11 signed contracts the same afternoon hail dropped. Every one of them made one decision: swap 5 tools for one platform.</p>
|
||
<div class="strip-btns">
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="font-size:17px;padding:16px 38px">Book a demo</a>
|
||
|
||
</div>
|
||
<div class="strip-trust" style="margin-top:20px">
|
||
<span><b>✅</b> Founders pricing locked in</span>
|
||
<span><b>✅</b> Free onboarding & training</span>
|
||
<span><b>✅</b> Rated 4.9/5 by beta crews</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section class="faq-section" id="faq">
|
||
<div class="container reveal">
|
||
<div class="section-label">Common Questions</div>
|
||
<h2 class="section-title">Still On the Fence?<br><span style="color:var(--accent)">We've Heard</span><br>It All Before.</h2>
|
||
<div class="faq-grid">
|
||
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">How is LynkedUp Pro different from JobNimbus or AccuLynx?<div class="faq-icon">+</div></button><div class="faq-a"><p>JobNimbus was built for multi-trade contractors and requires expensive add-ons for measurements and canvassing. AccuLynx charges per-user and doesn't include hail intelligence or LiDAR measurements. LynkedUp Pro includes all 6 core systems - CRM, Canvas, Measurements, Client Experience, Billing, and Estimating - in one flat-rate subscription built exclusively for roofers.</p></div></div>
|
||
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">Do I need my own drone for LiDAR measurements?<div class="faq-icon">+</div></button><div class="faq-a"><p>Yes, drone hardware is not included but LynkedUp Pro is compatible with DJI Mavic 3, DJI Mini 4 Pro, and most consumer DJI drones. Our software handles all scanning, processing, and report generation. FAA Part 107 certification may be required for commercial drone operations in your area.</p></div></div>
|
||
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">How do the real-time hail alerts work?<div class="faq-icon">+</div></button><div class="faq-a"><p>We fuse data from HailTrace, HailWatch, and NOAA for dual-source storm coverage. When a hail event occurs in your service territory, you receive an instant push notification with the impact zone mapped and every address scored by hail severity. You can be knocking on doors within minutes of a storm ending.</p></div></div>
|
||
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">Are there any per-report or per-user fees?<div class="faq-icon">+</div></button><div class="faq-a"><p>No. Starter includes up to 3 users and Professional includes up to 15 users - both on flat monthly rates. Unlike EagleView ($15-$87 per report) or AccuLynx ($60-$120/user/month), you get unlimited reports and all features included in your subscription tier.</p></div></div>
|
||
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">How long does onboarding take?<div class="faq-icon">+</div></button><div class="faq-a"><p>Most teams are fully onboarded within a week. We provide a dedicated onboarding session, video walkthroughs, and live chat support. The Owners Box admin panel makes it easy to manage compliance documents, team access, and accounting - no IT department required.</p></div></div>
|
||
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">Does it work for retail roofing, not just insurance/storm?<div class="faq-icon">+</div></button><div class="faq-a"><p>Absolutely. While we're especially powerful for storm restoration, the full CRM, scheduling, estimating, and billing suite is equally effective for retail roofing. The smart calendar and client experience features drive referrals and repeat business regardless of how you source jobs.</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FINAL CTA -->
|
||
<section class="cta-band has-bg" id="demo">
|
||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||
<div class="container" style="position:relative;z-index:1">
|
||
<div style="display:inline-flex;align-items:center;gap:10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:10px 20px;margin-bottom:32px;font-size:13px;color:var(--orange)">🔥 Only a Few Licenses Left. Lock In $349/mo Forever</div>
|
||
<h2>Storm Season Is Coming.<br><em style="font-style:normal;color:var(--orange)">Will You Be Ready</em><br>This Time?</h2>
|
||
<p>Every storm season you run on five broken tools is money left on the table. LynkedUp Pro pays for itself in the first storm week. Book a demo to see it in action.</p>
|
||
<div class="countdown">
|
||
<div class="cd-unit"><span class="cd-num" id="cd-d">02</span><span class="cd-label">Days</span></div>
|
||
<div class="cd-unit"><span class="cd-num" style="background:transparent;border:none;color:var(--muted);font-size:28px">:</span></div>
|
||
<div class="cd-unit"><span class="cd-num" id="cd-h">14</span><span class="cd-label">Hours</span></div>
|
||
<div class="cd-unit"><span class="cd-num" style="background:transparent;border:none;color:var(--muted);font-size:28px">:</span></div>
|
||
<div class="cd-unit"><span class="cd-num" id="cd-m">37</span><span class="cd-label">Mins</span></div>
|
||
<div class="cd-unit"><span class="cd-num" style="background:transparent;border:none;color:var(--muted);font-size:28px">:</span></div>
|
||
<div class="cd-unit"><span class="cd-num" id="cd-s">44</span><span class="cd-label">Secs</span></div>
|
||
</div>
|
||
<div class="cta-form" style="margin-top:36px">
|
||
|
||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="white-space:nowrap">Claim Founders Lifetime Deal</a>
|
||
</div>
|
||
<p class="cta-note">✅ Free onboarding call included · ✅ Founders pricing locked in · ✅ Cancel anytime</p>
|
||
<div style="display:flex;gap:32px;justify-content:center;margin-top:48px;flex-wrap:wrap;padding-top:40px;border-top:1px solid var(--border)">
|
||
<div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:#fff">500+</div><div style="font-size:13px;color:var(--muted);margin-top:4px">Roofs Scanned in Beta</div></div>
|
||
<div style="width:1px;background:var(--border)"></div>
|
||
<div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:#fff">4 min</div><div style="font-size:13px;color:var(--muted);margin-top:4px">Scan to Adjuster Report</div></div>
|
||
<div style="width:1px;background:var(--border)"></div>
|
||
<div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--orange)">$0</div><div style="font-size:13px;color:var(--muted);margin-top:4px">Per-Report Fee. Ever.</div></div>
|
||
<div style="width:1px;background:var(--border)"></div>
|
||
<div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--green)">4.9★</div><div style="font-size:13px;color:var(--muted);margin-top:4px">Avg Rating from Beta Crews</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<div class="footer-top">
|
||
<div class="footer-brand">
|
||
<a href="https://book.lynkeduppro.com/" class="logo" style="display:inline-flex;text-decoration:none"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||
<p>One system. One source of truth. Built for roofing. Built for you. Work your way - we keep it together.</p>
|
||
<div style="margin-top:12px;font-size:13px;color:var(--muted)">📞 <a href="tel:" style="color:var(--muted);text-decoration:none">Talk to a real person →</a></div>
|
||
<div style="margin-top:18px;display:flex;gap:10px;flex-wrap:wrap">
|
||
<div class="footer-badge">🏆 Built for Roofers</div>
|
||
<div class="footer-badge">🛡️ Founders Pricing Locked In</div>
|
||
<div class="footer-badge">⭐ 4.9/5 Rating</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 LynkedUp Pro. All rights reserved. · One System. One Source of Truth. Built for Roofing. Built for You.</p>
|
||
<p style="font-size:12px;color:rgba(138,155,181,.5)">Competing with EagleView, JobNimbus, AccuLynx, Roofr, SalesRabbit, RoofLink - and winning.</p>
|
||
</div>
|
||
<p style="font-size:11px;color:rgba(138,155,181,.5);line-height:1.6;margin-top:20px">* Figures shown are illustrative and reflect beta-period targets; individual results vary.<br>** Founders Lifetime Deal is a one-time payment; limited founding-member availability.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="mobile-sticky">
|
||
<a href="https://book.lynkeduppro.com/" class="primary">Book a demo</a>
|
||
<a href="#features" class="outline">See Features</a>
|
||
</div>
|
||
|
||
<script>
|
||
// Scroll reveal
|
||
const observer=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')});},{threshold:.1});
|
||
document.querySelectorAll('.reveal').forEach(el=>observer.observe(el));
|
||
|
||
// Nav shrink
|
||
window.addEventListener('scroll',()=>{const n=document.getElementById('topnav');if(window.scrollY>60){n.style.padding='10px 48px'}else{n.style.padding='16px 48px'}});
|
||
|
||
// Showcase tabs
|
||
function switchTab(id){
|
||
document.querySelectorAll('.stab').forEach(b=>b.classList.remove('active'));
|
||
document.querySelectorAll('.showcase-panel').forEach(p=>p.classList.remove('active'));
|
||
event.currentTarget.classList.add('active');
|
||
document.getElementById('tab-'+id).classList.add('active');
|
||
}
|
||
|
||
// ROI Calculator
|
||
function fmt(n){return '$'+Math.round(n).toLocaleString()}
|
||
function calcROI(){
|
||
const reports=+document.getElementById('sl-reports').value;
|
||
const rptCost=+document.getElementById('sl-rpt-cost').value;
|
||
const crm=+document.getElementById('sl-crm').value;
|
||
const canvas=+document.getElementById('sl-canvas').value;
|
||
const users=+document.getElementById('sl-users').value;
|
||
const perUser=users*25;
|
||
document.getElementById('lbl-reports').textContent=reports+' reports';
|
||
document.getElementById('lbl-rpt-cost').textContent='$'+rptCost+' / report';
|
||
document.getElementById('lbl-crm').textContent='$'+crm+' / mo';
|
||
document.getElementById('lbl-canvas').textContent='$'+canvas+' / mo';
|
||
document.getElementById('lbl-users').textContent=users+' users';
|
||
const reportFees=reports*rptCost;
|
||
const total=reportFees+crm+canvas+perUser;
|
||
const lynked=349;const saved=total-lynked;
|
||
const days=saved>0?Math.max(1,Math.round(30/(saved/30))):0;
|
||
document.getElementById('br-reports').textContent=fmt(reportFees);
|
||
document.getElementById('br-crm').textContent=fmt(crm);
|
||
document.getElementById('br-canvas').textContent=fmt(canvas);
|
||
document.getElementById('br-users').textContent=fmt(perUser);
|
||
document.getElementById('br-total').textContent=fmt(total);
|
||
document.getElementById('res-monthly').textContent=saved>0?fmt(saved):'$0';
|
||
document.getElementById('res-annual').textContent=saved>0?fmt(saved*12):'$0';
|
||
document.getElementById('res-payback').textContent=saved>0?'~'+days+' days':'Already saving';
|
||
document.getElementById('res-3yr').textContent=saved>0?fmt(saved*36):'$0';
|
||
}
|
||
calcROI();
|
||
|
||
// FAQ
|
||
function toggleFaq(btn){
|
||
const item=btn.closest('.faq-item');const isOpen=item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item.open').forEach(i=>i.classList.remove('open'));
|
||
if(!isOpen)item.classList.add('open');
|
||
}
|
||
|
||
// Countdown (shared by urgency bar + CTA section)
|
||
let target=new Date();
|
||
target.setDate(target.getDate()+2);target.setHours(target.getHours()+14);
|
||
target.setMinutes(target.getMinutes()+37);target.setSeconds(target.getSeconds()+44);
|
||
function tick(){
|
||
const diff=target-Date.now();
|
||
if(diff<=0){['cd-d','cd-h','cd-m','cd-s','ub-d','ub-h','ub-m','ub-s'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent='00'});return;}
|
||
const d=String(Math.floor(diff/86400000)).padStart(2,'0');
|
||
const h=String(Math.floor((diff%86400000)/3600000)).padStart(2,'0');
|
||
const m=String(Math.floor((diff%3600000)/60000)).padStart(2,'0');
|
||
const s=String(Math.floor((diff%60000)/1000)).padStart(2,'0');
|
||
['cd-d','ub-d'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent=d});
|
||
['cd-h','ub-h'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent=h});
|
||
['cd-m','ub-m'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent=m});
|
||
['cd-s','ub-s'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent=s});
|
||
}
|
||
tick();setInterval(tick,1000);
|
||
|
||
|
||
|
||
// Smooth scroll for all anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(a=>{
|
||
a.addEventListener('click',function(e){
|
||
const target=document.querySelector(this.getAttribute('href'));
|
||
if(target){e.preventDefault();target.scrollIntoView({behavior:'smooth',block:'start'});}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||
<a href="#pricing" id="floatingDealBtn">
|
||
🔥 Founders Lifetime Deal - $2000
|
||
</a>
|
||
|
||
<style>
|
||
#floatingDealBtn {
|
||
position: fixed;
|
||
right: 24px;
|
||
bottom: 24px;
|
||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||
color: white;
|
||
padding: 16px 24px;
|
||
border-radius: 999px;
|
||
text-decoration: none;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||
z-index: 9999;
|
||
transition: all 0.3s ease;
|
||
animation: floatPulse 2s infinite;
|
||
}
|
||
|
||
#floatingDealBtn:hover {
|
||
transform: translateY(-4px) scale(1.03);
|
||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||
}
|
||
|
||
@keyframes floatPulse {
|
||
0% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(-6px);
|
||
}
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
}
|
||
|
||
@media(max-width:768px) {
|
||
#floatingDealBtn {
|
||
right: 16px;
|
||
bottom: 16px;
|
||
padding: 14px 18px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||
<script src="/square-checkout.js"></script>
|
||
|
||
</body>
|
||
</html>
|