Goutam/lynkeduppro-crm
2
1
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
d82d71d0b25eb336bdc81a0cfbc521f152054436
lynkeduppro-crm/public/page/6.html
T
tanweer919 a459fefb7f feat(landing): port the full marketing site into the CRM (static) 
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.
2026-07-18 00:06:53 +05:30

1103 lines
66 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LynkedUp Pro - Field Intelligence Platform for Roofers</title>
<meta name="description" content="The CRM/ERP built exclusively for roofing contractors. AI measurements, hail alerts, smart scheduling, LiDAR digital twins. One platform. No bloat."/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--black:#080808;
--s1:#0f0f0f;
--s2:#161616;
--s3:#1e1e1e;
--s4:#252525;
--amber:#FF9500;
--amber-dim:rgba(255,149,0,.1);
--cyan:#22D3EE;
--green:#00E5A0;
--white:#F6F3EE;
--muted:#686868;
--muted2:#9E9E9E;
--text:#DEDAD4;
--border:rgba(255,255,255,.07);
--border2:rgba(255,255,255,.13);
--font-d:'Barlow Condensed',sans-serif;
--font-b:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:var(--font-b);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:18px 56px;background:rgba(8,8,8,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:padding .3s}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:34px;height:34px;background:var(--amber);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:18px;font-weight:900;color:var(--black);letter-spacing:-1px}
.logo-text{font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--white);letter-spacing:.5px}
.logo-text em{color:var(--amber);font-style:normal}
nav ul{display:flex;gap:32px;list-style:none}
nav a{color:var(--muted2);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.2px;transition:color .2s}
nav a:hover{color:var(--white)}
.nav-right{display:flex;align-items:center;gap:12px}
.btn-ghost{color:var(--muted2);font-size:14px;font-weight:500;padding:9px 20px;border-radius:7px;border:1px solid var(--border2);text-decoration:none;transition:all .2s}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,.22)}
.btn-nav-cta{background:var(--amber);color:var(--black);font-size:14px;font-weight:700;padding:9px 22px;border-radius:7px;text-decoration:none;letter-spacing:.2px;transition:opacity .2s,transform .15s}
.btn-nav-cta:hover{opacity:.88;transform:translateY(-1px)}
/* ── BUTTONS ── */
.btn-primary{display:inline-block;background:var(--amber);color:var(--black);padding:15px 34px;border-radius:8px;font-weight:700;font-size:16px;font-family:var(--font-b);letter-spacing:.2px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,149,0,.35)}
.btn-primary.sm{padding:12px 26px;font-size:14px}
.btn-outline{display:inline-block;background:transparent;color:var(--white);padding:15px 34px;border-radius:8px;font-weight:500;font-size:16px;text-decoration:none;border:1px solid var(--border2);transition:border-color .2s,background .2s}
.btn-outline:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.btn-outline.sm{padding:12px 26px;font-size:14px}
.btn-block{display:block;text-align:center;width:100%}
/* ── IN-SECTION CTA BAND ── */
.cta-band{padding:52px 24px;text-align:center;background:var(--s1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-band.dark{background:var(--black)}
.cta-band h3{font-family:var(--font-d);font-size:clamp(28px,3.5vw,44px);font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:1px;line-height:1.05;margin-bottom:8px}
.cta-band h3 em{color:var(--amber);font-style:normal}
.cta-band p{font-size:16px;color:var(--muted2);margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto}
.cta-band .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ── HERO ── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;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:80px 80px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black,transparent);pointer-events:none}
.hero-glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse,rgba(255,149,0,.07),transparent 65%);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--amber-dim);border:1px solid rgba(255,149,0,.25);color:var(--amber);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 18px;border-radius:100px;margin-bottom:36px;animation:fadeUp .5s ease both}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-family:var(--font-d);font-size:clamp(60px,9.5vw,116px);font-weight:900;line-height:.9;letter-spacing:1px;color:var(--white);max-width:980px;text-transform:uppercase;animation:fadeUp .6s .08s ease both}
.hero h1 .a{color:var(--amber)}
.hero-sub{font-size:clamp(17px,2vw,19px);color:var(--muted2);max-width:520px;margin:28px auto 0;line-height:1.7;font-weight:400;animation:fadeUp .6s .18s ease both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:44px;animation:fadeUp .6s .26s ease both}
.hero-stats{display:flex;align-items:stretch;justify-content:center;margin-top:72px;animation:fadeUp .6s .36s ease both;border:1px solid var(--border);border-radius:14px;overflow:hidden;flex-wrap:wrap}
.hstat{padding:22px 36px;text-align:center;border-right:1px solid var(--border);flex:1;min-width:130px}
.hstat:last-child{border-right:none}
.hstat-num{font-family:var(--font-d);font-size:38px;font-weight:900;line-height:1;color:var(--white);letter-spacing:.5px}
.hstat-num .a{color:var(--amber)}
.hstat-label{font-size:12px;color:var(--muted);margin-top:5px;font-weight:400;letter-spacing:.2px;line-height:1.4}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* ── TRUST ── */
.trust{padding:26px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--s1)}
.trust-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center}
.trust-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.trust-sep{width:1px;height:18px;background:var(--border2);flex-shrink:0}
.trust-logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:center}
.trust-logo{font-family:var(--font-d);font-size:14px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.22);text-transform:uppercase;transition:color .2s}
.trust-logo:hover{color:rgba(255,255,255,.45)}
/* ── COMMON ── */
.container{max-width:1140px;margin:0 auto}
section{padding:96px 24px}
.section-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:12px}
.section-label.cyan{color:var(--cyan)}
.section-title{font-family:var(--font-d);font-size:clamp(38px,5vw,70px);font-weight:900;line-height:.92;letter-spacing:1px;color:var(--white);text-transform:uppercase}
.section-sub{font-size:18px;color:var(--muted2);margin-top:16px;max-width:520px;font-weight:400;line-height:1.7}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}
/* ── PROBLEM ── */
.problem{background:var(--s1);border-bottom:1px solid var(--border)}
.prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:56px}
.prob-item{background:var(--s2);padding:32px 28px;transition:background .2s}
.prob-item:hover{background:var(--s3)}
.prob-icon{font-size:28px;margin-bottom:16px}
.prob-item h3{font-family:var(--font-d);font-size:20px;font-weight:800;color:var(--white);text-transform:uppercase;margin-bottom:8px;letter-spacing:.3px}
.prob-item p{font-size:14px;color:var(--muted2);line-height:1.75}
/* ── SYSTEMS ── */
.systems{background:var(--black)}
.sys-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:60px}
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sys-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:32px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.sys-card:hover{border-color:var(--border2);transform:translateY(-4px)}
.sys-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px}
.sys-card.ca::before{background:linear-gradient(90deg,transparent,rgba(255,149,0,.55),transparent)}
.sys-card.cc::before{background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),transparent)}
.sys-card.cg::before{background:linear-gradient(90deg,transparent,rgba(0,229,160,.55),transparent)}
.sys-n{font-family:var(--font-d);font-size:64px;font-weight:900;line-height:1;color:rgba(255,255,255,.035);position:absolute;top:16px;right:20px}
.sys-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}
.sys-icon.a{background:rgba(255,149,0,.1);border:1px solid rgba(255,149,0,.2)}
.sys-icon.c{background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2)}
.sys-icon.g{background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2)}
.sys-card h3{font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--white);text-transform:uppercase;margin-bottom:10px;letter-spacing:.3px}
.sys-card p{font-size:14px;color:var(--muted2);line-height:1.75}
.sys-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 11px;border-radius:100px;margin-top:16px;letter-spacing:.5px;text-transform:uppercase}
.sys-tag.a{background:rgba(255,149,0,.08);color:var(--amber);border:1px solid rgba(255,149,0,.2)}
.sys-tag.c{background:rgba(34,211,238,.08);color:var(--cyan);border:1px solid rgba(34,211,238,.2)}
.sys-tag.g{background:rgba(0,229,160,.08);color:var(--green);border:1px solid rgba(0,229,160,.2)}
/* ── SPOTLIGHT (Calendar) ── */
.spotlight{background:var(--s1);border-top:1px solid var(--border)}
.spot-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-top:56px}
.spot-feats{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.spot-feat{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;background:var(--s2);border:1px solid var(--border);border-radius:10px;transition:border-color .2s}
.spot-feat:hover{border-color:var(--border2)}
.spot-fi{width:36px;height:36px;border-radius:8px;background:rgba(255,149,0,.1);border:1px solid rgba(255,149,0,.2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;margin-top:1px}
.spot-feat h4{font-family:var(--font-d);font-size:17px;font-weight:800;color:var(--white);text-transform:uppercase;margin-bottom:3px;letter-spacing:.3px}
.spot-feat p{font-size:13px;color:var(--muted2);line-height:1.65}
/* Calendar Mockup */
.cal-mock{background:var(--s2);border:1px solid var(--border2);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.cal-hdr{padding:14px 18px;background:var(--s3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cal-hdr-title{font-family:var(--font-d);font-size:15px;font-weight:800;color:var(--white);letter-spacing:.5px}
.cal-hdr-badge{background:rgba(255,149,0,.1);border:1px solid rgba(255,149,0,.25);color:var(--amber);font-size:9px;font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.5px}
.cal-days-row{display:grid;grid-template-columns:repeat(7,1fr);padding:8px 14px 4px;background:var(--s3)}
.cal-dn{text-align:center;font-size:9px;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)}
.cc{background:var(--s2);padding:6px 8px;min-height:56px}
.cc.today{background:var(--s3)}
.cc.dim{opacity:.3}
.cd{font-size:10px;font-weight:500;color:var(--muted);margin-bottom:2px}
.cc.today .cd{background:var(--amber);color:var(--black);width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.ce{font-size:8.5px;padding:2px 4px;border-radius:2px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ce.a{background:rgba(255,149,0,.18);color:var(--amber);border-left:2px solid var(--amber)}
.ce.c{background:rgba(34,211,238,.13);color:var(--cyan);border-left:2px solid var(--cyan)}
.ce.g{background:rgba(0,229,160,.1);color:var(--green);border-left:2px solid var(--green)}
.cal-ai{margin:10px;background:var(--s3);border:1px solid rgba(255,149,0,.2);border-radius:8px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px}
.cal-ai-icon{width:26px;height:26px;border-radius:6px;background:rgba(255,149,0,.12);border:1px solid rgba(255,149,0,.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.cal-ai-text{font-size:11px;line-height:1.5}
.cal-ai-text strong{color:var(--amber);font-weight:700}
.cal-ai-text span{color:var(--muted2)}
.cal-ai-btns{display:flex;gap:6px;margin-top:8px}
.cal-ab{font-size:9.5px;font-weight:700;padding:3px 10px;border-radius:4px;cursor:pointer;border:1px solid;font-family:var(--font-b)}
.cal-ab.yes{background:var(--amber);border-color:var(--amber);color:var(--black)}
.cal-ab.no{background:transparent;border-color:var(--border2);color:var(--muted2)}
/* ── HAIL ── */
.hail{background:var(--black);border-top:1px solid var(--border)}
.hail-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-top:56px}
.hail-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.hail-list li{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--text);line-height:1.6}
.hail-list li .ico{font-size:18px;min-width:26px;margin-top:2px}
.hail-map-card{background:var(--s2);border:1px solid var(--border2);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.hail-bar{padding:14px 18px;background:var(--s3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.hail-bar-title{font-size:13px;font-weight:600;color:var(--white)}
.hail-alert-pill{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:#ef4444;font-size:9px;font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.5px;animation:hblink 2s ease infinite}
@keyframes hblink{0%,100%{opacity:1}50%{opacity:.5}}
.hail-map-vis{position:relative;height:200px;background:#06090f;overflow:hidden}
.hm-grid{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:28px 28px}
.hm-dot{position:absolute;border-radius:50%;animation:hmpulse 3s ease infinite}
@keyframes hmpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.4);opacity:.4}}
.hm-label{position:absolute;font-size:9px;color:rgba(255,255,255,.6);font-weight:600;white-space:nowrap}
.hail-addresses{padding:14px 18px;border-top:1px solid var(--border)}
.ha-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-bottom:10px}
.ha-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--s3);border-radius:6px;margin-bottom:5px;transition:background .2s}
.ha-row:hover{background:var(--s4)}
.ha-name{font-size:12px;font-weight:500;color:var(--white)}
.ha-score{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px}
.ha-score.hot{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.25)}
.ha-score.warm{background:rgba(255,149,0,.12);color:var(--amber);border:1px solid rgba(255,149,0,.22)}
.ha-score.cool{background:rgba(0,229,160,.1);color:var(--green);border:1px solid rgba(0,229,160,.2)}
/* ── TESTIMONIALS ── */
.testimonials{background:var(--s1);border-top:1px solid var(--border)}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.test-card{background:var(--s2);border:1px solid var(--border);border-radius:14px;padding:28px;position:relative;transition:border-color .2s}
.test-card:hover{border-color:var(--border2)}
.test-card.feat{border-color:rgba(255,149,0,.2)}
.stars{color:var(--amber);letter-spacing:2px;font-size:13px;margin-bottom:14px}
.test-quote{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}
.test-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--cyan));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:14px;font-weight:800;color:var(--black);flex-shrink:0}
.test-name{font-weight:700;font-size:14px;color:var(--white)}
.test-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-rnum{font-family:var(--font-d);font-size:18px;font-weight:900;color:var(--green);line-height:1}
.test-rlabel{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
/* ── COMPARE ── */
.compare{background:var(--black);border-top:1px solid var(--border)}
.cmp-wrap{border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:56px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--font-d);font-size:13px;font-weight:800;text-align:left;padding:14px 20px;background:var(--s2);color:var(--muted);letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;text-transform:uppercase}
th.ours{color:var(--amber);background:rgba(255,149,0,.05)}
td{padding:12px 20px;border-bottom:1px solid var(--border);color:var(--muted2);vertical-align:middle}
td.ours{color:var(--white);font-weight:500;background:rgba(255,149,0,.025)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.012)}
tr:hover td.ours{background:rgba(255,149,0,.03)}
.fn{color:var(--text);font-weight:500}
.ck{color:var(--green);font-size:15px;font-weight:700}
.cr{color:#ef4444;opacity:.7;font-size:14px}
.cp{color:var(--amber)}
/* ── PRICING ── */
.pricing{background:var(--s1);border-top:1px solid var(--border)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.price-card{background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:36px;position:relative;transition:border-color .2s,transform .2s}
.price-card:hover{border-color:var(--border2);transform:translateY(-4px)}
.price-card.pop{border-color:rgba(255,149,0,.3);background:linear-gradient(160deg,rgba(255,149,0,.04),var(--s2))}
.pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--black);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 16px;border-radius:100px;white-space:nowrap}
.price-tier{font-family:var(--font-d);font-size:14px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.price-amt{display:flex;align-items:flex-end;gap:3px;margin-bottom:4px}
.p-dollar{font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--muted);margin-bottom:10px}
.p-num{font-family:var(--font-d);font-size:62px;font-weight:900;line-height:1;color:var(--white)}
.p-custom{font-family:var(--font-d);font-size:44px;font-weight:900;line-height:1;color:var(--white);margin-bottom:12px}
.p-period{font-size:13px;color:var(--muted);margin-bottom:14px;font-weight:400}
.p-desc{font-size:14px;color:var(--muted2);line-height:1.7;margin-bottom:28px}
.p-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
.p-feat{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted2)}
.p-check{width:16px;height:16px;border-radius:50%;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.3);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px;font-size:9px;color:var(--green)}
.btn-primary-block{display:block;text-align:center;padding:14px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;font-family:var(--font-b);background:var(--amber);color:var(--black);transition:transform .15s,box-shadow .15s;letter-spacing:.2px}
.btn-primary-block:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,149,0,.3)}
.btn-outline-block{display:block;text-align:center;padding:14px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;font-family:var(--font-b);background:transparent;color:var(--white);border:1px solid var(--border2);transition:border-color .2s}
.btn-outline-block:hover{border-color:rgba(255,255,255,.28)}
.p-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}
/* ── FAQ ── */
.faq{background:var(--black);border-top:1px solid var(--border)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.faq-item{border:1px solid var(--border);border-radius:10px;background:var(--s1);overflow:hidden}
.faq-q{width:100%;background:none;border:none;color:var(--white);font-family:var(--font-b);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);font-size:14px;transition:transform .3s,border-color .2s}
.faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--amber);color:var(--amber)}
.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(--muted2);line-height:1.75;border-top:1px solid var(--border);padding-top:14px}
/* ── FINAL CTA ── */
.cta-final{padding:120px 24px;text-align:center;background:var(--s1);border-top:1px solid var(--border);position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(255,149,0,.07),transparent 65%);pointer-events:none}
.cta-final h2{font-family:var(--font-d);font-size:clamp(48px,7.5vw,96px);font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:1px;color:var(--white);max-width:820px;margin:0 auto 20px}
.cta-final h2 em{color:var(--amber);font-style:normal}
.cta-final p{font-size:18px;color:var(--muted2);max-width:460px;margin:0 auto 40px;font-weight:400;line-height:1.65}
.cta-form{display:flex;gap:12px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.cta-input{flex:1;min-width:220px;background:var(--s2);border:1px solid var(--border2);border-radius:8px;padding:14px 18px;color:var(--white);font-size:15px;font-family:var(--font-b);outline:none;transition:border-color .2s}
.cta-input::placeholder{color:var(--muted)}
.cta-input:focus{border-color:rgba(255,149,0,.45)}
.cta-note{font-size:12px;color:var(--muted);margin-top:14px}
/* ── FOOTER ── */
footer{padding:60px 24px 36px;border-top:1px solid var(--border);background:var(--s1)}
.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:240px;margin-top:12px}
.footer-col h4{font-family:var(--font-d);font-size:13px;font-weight:800;color:var(--white);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:var(--white)}
.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:4px 14px;border-radius:100px;font-size:11px;color:var(--muted)}
/* ── MOBILE STICKY ── */
.mobile-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--s2);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:700;font-size:14px;text-decoration:none;font-family:var(--font-b)}
.mobile-sticky .ms-primary{background:var(--amber);color:var(--black)}
.mobile-sticky .ms-outline{border:1px solid var(--border2);color:var(--white)}
/* ── MEDIA ── */
img,svg,video{max-width:100%;height:auto}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:1280px){
nav{padding:16px 36px}
section{padding:80px 24px}
.cta-final{padding:96px 24px}
}
@media(max-width:1024px){
nav{padding:14px 26px}
nav ul{gap:22px}
section{padding:72px 22px}
.cta-final{padding:80px 22px}
.hero{padding:110px 22px 64px}
.hero h1{font-size:clamp(50px,8vw,92px)}
.prob-grid{grid-template-columns:repeat(2,1fr)}
.sys-grid,.test-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
.sys-header{grid-template-columns:1fr;gap:24px}
.spot-split,.hail-split{grid-template-columns:1fr;gap:48px}
.footer-top{grid-template-columns:1fr 1fr 1fr;gap:32px}
.footer-brand{grid-column:1/-1}
.footer-brand p{max-width:none}
}
@media(max-width:900px){
nav ul{display:none}
nav{padding:14px 20px}
.hero h1{font-size:clamp(46px,11vw,80px)}
.mobile-sticky{display:flex}
body{padding-bottom:78px}
}
@media(max-width:768px){
nav{padding:14px 18px}
.logo-text{font-size:20px}
.nav-right{gap:8px}
.btn-ghost{padding:8px 14px;font-size:13px}
.btn-nav-cta{padding:8px 16px;font-size:13px}
section{padding:56px 18px}
.cta-final{padding:64px 18px}
.hero{min-height:auto;padding:104px 18px 56px}
.hero h1{font-size:clamp(42px,10vw,68px);max-width:100%}
.hero-sub{font-size:16px;margin-top:22px}
.hero-actions{margin-top:32px;gap:10px}
.hero-stats{margin-top:52px;border:none;flex-direction:column}
.hstat{border-right:none;border-bottom:1px solid var(--border);padding:18px 20px;min-width:0;flex:0 0 auto;width:100%}
.hstat:last-child{border-bottom:none}
.eyebrow{margin-bottom:28px;font-size:11px;padding:5px 14px}
.section-title{font-size:clamp(34px,7vw,56px)}
.section-sub{font-size:16px}
.prob-grid,.sys-grid,.pricing-grid,.test-grid,.faq-grid{grid-template-columns:1fr;margin-top:40px}
.prob-item{padding:26px 22px}
.sys-card{padding:26px}
.price-card{padding:30px 24px}
.cta-band{padding:44px 20px}
.cta-band .actions{flex-direction:column;align-items:stretch}
.cta-band .actions .btn-primary,.cta-band .actions .btn-outline{width:100%;text-align:center}
.cta-final h2{font-size:clamp(38px,9vw,72px)}
.cta-final p{font-size:16px;margin-bottom:32px}
.cta-form{flex-direction:column;align-items:stretch;max-width:100%}
.cta-input{min-width:0;width:100%}
.cta-form .btn-primary{width:100%;text-align:center}
.footer-top{grid-template-columns:1fr 1fr;gap:28px}
.footer-brand{grid-column:1/-1}
.footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
.trust-inner{gap:18px}
.trust-logos{gap:18px}
.trust-sep{display:none}
table{font-size:12px;min-width:560px}
th,td{padding:10px 12px}
.spot-feat{padding:14px 16px}
.hail-list li{font-size:14px}
.test-result{position:static;display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 12px}
.test-rnum{font-size:16px}
.p-num{font-size:54px}
.p-custom{font-size:38px}
}
@media(max-width:480px){
nav{padding:12px 14px}
.logo-mark{width:30px;height:30px;font-size:16px}
.logo-text{font-size:18px}
.btn-ghost{display:none}
.btn-nav-cta{padding:8px 14px;font-size:12px}
section{padding:48px 16px}
.cta-final{padding:56px 16px}
.hero{padding:96px 16px 48px}
.hero h1{font-size:clamp(36px,10vw,52px);line-height:.95;letter-spacing:.5px}
.hero-sub{font-size:15px;margin-top:18px}
.hero-actions{margin-top:26px;flex-direction:column;align-items:stretch;width:100%}
.hero-actions .btn-primary,.hero-actions .btn-outline{width:100%;text-align:center;padding:14px 20px}
.hero-stats{margin-top:40px}
.hstat-num{font-size:32px}
.section-title{font-size:clamp(30px,8vw,44px);letter-spacing:.5px}
.section-sub{font-size:15px}
.btn-primary,.btn-outline{padding:13px 22px;font-size:15px}
.cta-band{padding:36px 16px}
.cta-band h3{font-size:clamp(26px,7vw,34px)}
.cta-band p{font-size:15px;margin-bottom:20px}
.prob-item{padding:22px 18px}
.prob-item h3{font-size:18px}
.sys-card{padding:22px 20px}
.sys-card h3{font-size:20px}
.sys-n{font-size:50px;top:12px;right:14px}
.spot-feats{margin-top:22px}
.spot-feat{padding:12px 14px;gap:12px}
.spot-feat h4{font-size:15px}
.spot-feat p{font-size:12.5px}
.cal-mock{border-radius:12px}
.cal-grid .cc{min-height:48px;padding:5px 4px}
.ce{font-size:7.5px;padding:1px 3px}
.cd{font-size:9px}
.cal-ai{margin:8px;padding:10px 12px}
.hail-map-vis{height:180px}
.ha-name{font-size:11px}
.ha-score{font-size:9px;padding:2px 6px}
.test-card{padding:24px 20px}
.test-quote{font-size:14px}
.price-card{padding:26px 20px}
.p-num{font-size:48px}
.p-custom{font-size:34px}
.p-feats{margin-bottom:22px}
.p-feat{font-size:13px}
.faq-grid{margin-top:36px}
.faq-q{padding:16px 18px;font-size:14px}
.faq-item.open .faq-a{padding:0 18px 16px}
.faq-a{padding:0 18px}
.cta-final h2{font-size:clamp(32px,9vw,52px);letter-spacing:.5px}
.cta-final p{font-size:15px}
.cta-input{padding:13px 16px;font-size:14px}
.footer-top{grid-template-columns:1fr;gap:28px;margin-bottom:36px}
.footer-bottom p{font-size:12px}
footer{padding:48px 16px 28px}
.trust{padding:20px 16px}
.trust-label{font-size:10px;letter-spacing:1.8px}
.trust-logo{font-size:12px}
.mobile-sticky{padding:10px 12px;gap:8px}
.mobile-sticky a{padding:11px;font-size:13px}
}
@media(max-width:360px){
.hero h1{font-size:34px}
.section-title{font-size:28px}
.cta-final h2{font-size:30px}
.hstat-num{font-size:28px}
}
</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="#calendar">Calendar</a></li>
<li><a href="#hail">Hail Intel</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
<div class="nav-right">
<a href="https://launch.lynkeduppro.com/" class="btn-nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="btn-nav-cta">Book a demo</a>
</div>
</nav>
<!-- HERO -->
<section class="hero" id="home">
<div class="hero-grid"></div>
<div class="hero-glow"></div>
<div class="eyebrow"><span class="eyebrow-dot"></span>Built exclusively for roofing contractors</div>
<h1>THE ONLY<br><span class="a">CRM/ERP</span><br>BUILT FOR<br>ROOFERS</h1>
<p class="hero-sub">6 fully-integrated systems: AI measurements, hail alerts, smart scheduling, LiDAR digital twins, and instant adjuster reports. Your assistant that never sleeps or takes a day off. One platform. No tool sprawl.</p>
<div class="hero-actions">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo</a>
<a href="#features" class="btn-outline">Explore Features</a>
</div>
<div class="hero-sub" style="margin-top:18px;font-size:14px;color:var(--muted2)">4.9★ · 248 reviews</div>
<div class="hero-stats">
<div class="hstat">
<div class="hstat-num">2<span class="a">+</span> hrs</div>
<div class="hstat-label">Saved per crew per day</div>
</div>
<div class="hstat">
<div class="hstat-num"><span class="a">$</span>850</div>
<div class="hstat-label">Avg. monthly savings vs. stacked tools</div>
</div>
<div class="hstat">
<div class="hstat-num">6</div>
<div class="hstat-label">Integrated core systems</div>
</div>
<div class="hstat">
<div class="hstat-num">98<span class="a">%</span></div>
<div class="hstat-label">Customer retention rate</div>
</div>
</div>
</section>
<!-- TRUST BAR -->
<div class="trust">
<div class="trust-inner">
<span class="trust-label">Replaces</span>
<div class="trust-sep"></div>
<div class="trust-logos">
<span class="trust-logo">JobNimbus</span>
<span class="trust-logo">AccuLynx</span>
<span class="trust-logo">EagleView</span>
<span class="trust-logo">Roofr</span>
<span class="trust-logo">SalesRabbit</span>
<span class="trust-logo">RoofLink</span>
</div>
</div>
</div>
<!-- PROBLEM -->
<section class="problem" id="problem">
<div class="container">
<div class="reveal">
<div class="section-label">The problem</div>
<div class="section-title">ROOFERS PAY<br>FOR TOO MANY TOOLS</div>
<p class="section-sub">Juggling 5-6 disconnected apps costs you time, jobs, and real money every month. LynkedUp Pro replaces them all.</p>
</div>
<div class="prob-grid reveal">
<div class="prob-item">
<div class="prob-icon">💸</div>
<h3>Tool Sprawl</h3>
<p>Average roofer pays $900-$1,400/mo across CRM, measurement, scheduling, and reporting tools that don't talk to each other.</p>
</div>
<div class="prob-item">
<div class="prob-icon">⏱️</div>
<h3>Manual Re-entry</h3>
<p>Data entered across three systems. Addresses wrong, jobs duplicated, leads lost. Hours wasted every single week.</p>
</div>
<div class="prob-item">
<div class="prob-icon">🌩️</div>
<h3>Missed Storm Jobs</h3>
<p>No real-time hail alerts means you find out about storm damage after your competitors have knocked every door.</p>
</div>
<div class="prob-item">
<div class="prob-icon">📋</div>
<h3>Slow Adjuster Reports</h3>
<p>Building a proper insurance report takes 90 minutes of manual work. Every time. While the homeowner waits.</p>
</div>
</div>
</div>
</section>
<!-- CTA BAND 1: After Problem -->
<div class="cta-band dark reveal">
<h3>Stop Paying for Tools That<br><em>Don't Talk to Each Other</em></h3>
<p>See how LynkedUp Pro consolidates your entire operation into one platform and saves you $850+ a month doing it.</p>
<div class="actions">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo</a>
<a href="#pricing" class="btn-outline">View Pricing</a>
</div>
</div>
<!-- 6 CORE SYSTEMS -->
<section class="systems" id="features">
<div class="container">
<div class="sys-header reveal">
<div>
<div class="section-label">6 core systems</div>
<div class="section-title">ONE PLATFORM.<br>ZERO GAPS.</div>
</div>
<div>
<p class="section-sub">Every module purpose-built for roofing. Every system connected. No subscriptions stacked on subscriptions.</p>
<a href="#pricing" class="btn-primary" style="margin-top:24px">See Pricing →</a>
</div>
</div>
<div class="sys-grid reveal">
<div class="sys-card ca">
<div class="sys-n">01</div>
<div class="sys-icon a">📅</div>
<h3>Smart Calendar</h3>
<p>AI scheduling that routes crews by location, weather, and skill set. Drag-and-drop with automated homeowner notifications.</p>
<span class="sys-tag a">AI Routing</span>
</div>
<div class="sys-card cc">
<div class="sys-n">02</div>
<div class="sys-icon c">📐</div>
<h3>AI Measurements</h3>
<p>Instant aerial measurements with pitch detection. Drone integration + LiDAR digital twin creation. No ladder for the estimate.</p>
<span class="sys-tag c">LiDAR + Drone</span>
</div>
<div class="sys-card cg">
<div class="sys-n">03</div>
<div class="sys-icon g">🌩️</div>
<h3>Hail Intelligence</h3>
<p>Real-time NEXRAD radar alerts overlaid on your customer map. Deploy canvassing crews to the right streets first.</p>
<span class="sys-tag g">Real-Time Radar</span>
</div>
<div class="sys-card ca">
<div class="sys-n">04</div>
<div class="sys-icon a">📊</div>
<h3>CRM & Pipeline</h3>
<p>Visual sales pipeline built for roofing, from knock to signed contract. No generic CRM adapted from another industry.</p>
<span class="sys-tag a">Full Pipeline</span>
</div>
<div class="sys-card cc">
<div class="sys-n">05</div>
<div class="sys-icon c">📄</div>
<h3>Adjuster Reports</h3>
<p>One-click insurance reports with photo organization, scope notes, and damage documentation. 90 minutes → 3.</p>
<span class="sys-tag c">3-Min Reports</span>
</div>
<div class="sys-card cg">
<div class="sys-n">06</div>
<div class="sys-icon g">📈</div>
<h3>Owner's Dashboard</h3>
<p>Live KPIs, crew performance, revenue tracking, and job costing. The full picture from anywhere, on any device.</p>
<span class="sys-tag g">Live KPIs</span>
</div>
</div>
</div>
</section>
<!-- CTA BAND 2: After Systems -->
<div class="cta-band reveal">
<h3>All 6 Systems. <em>One Subscription.</em></h3>
<p>Starting at $149/month. No per-report fees. No add-ons. Cancel anytime.</p>
<div class="actions">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo</a>
</div>
</div>
<!-- SPOTLIGHT: SMART CALENDAR -->
<section class="spotlight" id="calendar">
<div class="container">
<div class="reveal">
<div class="section-label">Smart Calendar</div>
<div class="section-title">SCHEDULE SMARTER.<br>WASTE NOTHING.</div>
</div>
<div class="spot-split reveal">
<div>
<p class="section-sub">Your dispatcher's AI assistant. Automatically clusters jobs by zip code, checks weather, and texts the homeowner, all without touching a phone.</p>
<div class="spot-feats">
<div class="spot-feat">
<div class="spot-fi">🗺️</div>
<div>
<h4>Route Optimization</h4>
<p>AI groups jobs by territory and skill, eliminating windshield time. Save 2+ hours per crew daily.</p>
</div>
</div>
<div class="spot-feat">
<div class="spot-fi">☁️</div>
<div>
<h4>Weather-Aware Scheduling</h4>
<p>Auto-reschedules installs when rain is forecasted. Notifies homeowner and crew in one click.</p>
</div>
</div>
<div class="spot-feat">
<div class="spot-fi">🔔</div>
<div>
<h4>Automated Notifications</h4>
<p>Branded SMS/email confirmations, reminders, and arrival windows, sent automatically.</p>
</div>
</div>
<div class="spot-feat">
<div class="spot-fi">🔄</div>
<div>
<h4>Google & Outlook Sync</h4>
<p>Two-way sync keeps office and field calendars always in lockstep.</p>
</div>
</div>
</div>
<div style="margin-top:28px;display:flex;gap:12px;flex-wrap:wrap">
<a href="#pricing" class="btn-outline sm">View Plans</a>
</div>
</div>
<!-- CALENDAR MOCKUP -->
<img src="/page/assets/lynkedispatch.png" alt="LynkedUp Pro smart calendar and crew dispatch" class="shot" loading="lazy">
</div>
</div>
</section>
<!-- HAIL INTELLIGENCE -->
<section class="hail" id="hail">
<div class="container">
<div class="reveal">
<div class="section-label cyan">Hail Intelligence</div>
<div class="section-title">BE FIRST ON<br>EVERY STORM.</div>
</div>
<div class="hail-split reveal">
<div>
<p class="section-sub">Real-time NEXRAD radar alerts overlaid on your customer map. Know which streets got hit before your competitors even check the weather.</p>
<ul class="hail-list">
<li><span class="ico">⚡</span><div>Real-time hail alerts pinpointed to individual addresses, not just zip codes</div></li>
<li><span class="ico">🗺️</span><div>Hail overlay on your customer database, see which past clients got hit</div></li>
<li><span class="ico">📱</span><div>Instant push alerts to your canvassing team with pre-built door knock scripts</div></li>
<li><span class="ico">📊</span><div>Historical storm data to identify high-frequency hail zones in your market</div></li>
<li><span class="ico">🤝</span><div>Auto-creates leads for affected addresses and queues follow-up tasks</div></li>
</ul>
<div style="margin-top:28px;display:flex;gap:12px;flex-wrap:wrap">
<a href="#features" class="btn-outline sm">All Features</a>
</div>
</div>
<!-- HAIL MAP MOCKUP -->
<img src="/page/assets/map.png" alt="LynkedUp Pro hail intelligence map with affected addresses" class="shot" loading="lazy">
</div>
</div>
</section>
<!-- CTA BAND 3: After Hail -->
<div class="cta-band dark reveal">
<h3>Know About Storms<br><em>Before Your Competition Does</em></h3>
<p>Hail Intelligence is included in every LynkedUp Pro plan. No extra charge, no add-on fee.</p>
<div class="actions">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo </a>
<a href="#pricing" class="btn-outline">See Plan Details</a>
</div>
</div>
<!-- TESTIMONIALS -->
<section class="testimonials" id="testimonials">
<div class="container">
<div class="reveal" style="text-align:center;max-width:600px;margin:0 auto">
<div class="section-label">Real results</div>
<div class="section-title">ROOFERS WHO<br>MADE THE SWITCH</div>
</div>
<div class="test-grid reveal">
<div class="test-card feat">
<div class="test-result"><div class="test-rnum">+43%</div><div class="test-rlabel">Revenue</div></div>
<div class="stars">★★★★★</div>
<blockquote class="test-quote">"We replaced JobNimbus, EagleView, and SalesRabbit in one shot. The hail alert alone got us to 11 houses before anyone else in our market showed up."</blockquote>
<div class="test-author">
<div class="test-av">MR</div>
<div><div class="test-name">Marcus Rivera</div><div class="test-role">Owner · Plano, TX</div></div>
</div>
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
</div>
<div class="test-card">
<div class="test-result"><div class="test-rnum">$1,100</div><div class="test-rlabel">Saved/mo</div></div>
<div class="stars">★★★★★</div>
<blockquote class="test-quote">"I was paying for 5 different subscriptions. Switched to LynkedUp Pro and cut my software bill by $1,100 a month, and everything actually works together."</blockquote>
<div class="test-author">
<div class="test-av">KJ</div>
<div><div class="test-name">Kyle Jensen</div><div class="test-role">Founder · Houston, TX</div></div>
</div>
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
</div>
<div class="test-card">
<div class="test-result"><div class="test-rnum">3 min</div><div class="test-rlabel">Adj. Reports</div></div>
<div class="stars">★★★★★</div>
<blockquote class="test-quote">"Reports used to take me an hour. Now it's 3 minutes and adjusters comment on how professional they look. We close faster because of it."</blockquote>
<div class="test-author">
<div class="test-av">SH</div>
<div><div class="test-name">Sarah Hendricks</div><div class="test-role">Operations Manager · Shreveport, LA</div></div>
</div>
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
</div>
</div>
</div>
</section>
<!-- CTA BAND 4: After Testimonials -->
<div class="cta-band reveal">
<h3>Join Hundreds of Roofers<br><em>Already Winning With LynkedUp Pro</em></h3>
<p>14-day free trial. No credit card required. Set up in under 48 hours.</p>
<div class="actions">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Start Your Free Trial</a>
<a href="#faq" class="btn-outline">Read the FAQ</a>
</div>
</div>
<!-- COMPARE -->
<section class="compare" id="compare">
<div class="container">
<div class="reveal" style="text-align:center;max-width:600px;margin:0 auto">
<div class="section-label">Head to head</div>
<div class="section-title">HOW WE STACK UP</div>
<p class="section-sub" style="text-align:center;margin:14px auto 0">See what you actually get vs. the tools you're paying for now.</p>
</div>
<div class="cmp-wrap reveal">
<table>
<thead>
<tr>
<th style="width:28%">Feature</th>
<th class="ours">LynkedUp Pro</th>
<th>JobNimbus</th>
<th>AccuLynx</th>
<th>EagleView</th>
</tr>
</thead>
<tbody>
<tr><td class="fn">AI Measurements</td><td class="ours"><span class="ck">✓</span> Included</td><td><span class="cr">✗</span></td><td><span class="cp">Add-on</span></td><td><span class="ck">✓</span></td></tr>
<tr><td class="fn">Hail Alerts (Real-Time)</td><td class="ours"><span class="ck">✓</span> Included</td><td><span class="cr">✗</span></td><td><span class="cr">✗</span></td><td><span class="cr">✗</span></td></tr>
<tr><td class="fn">Smart Calendar / AI Routing</td><td class="ours"><span class="ck">✓</span> Included</td><td><span class="cp">Basic</span></td><td><span class="cp">Basic</span></td><td><span class="cr">✗</span></td></tr>
<tr><td class="fn">LiDAR Digital Twins</td><td class="ours"><span class="ck">✓</span> Included</td><td><span class="cr">✗</span></td><td><span class="cr">✗</span></td><td><span class="cp">Add-on</span></td></tr>
<tr><td class="fn">1-Click Adjuster Reports</td><td class="ours"><span class="ck">✓</span> 3 min avg.</td><td><span class="cp">Manual</span></td><td><span class="cp">Manual</span></td><td><span class="cr">✗</span></td></tr>
<tr><td class="fn">Owner's Dashboard (Live KPIs)</td><td class="ours"><span class="ck">✓</span> Included</td><td><span class="cp">Limited</span></td><td><span class="cp">Limited</span></td><td><span class="cr">✗</span></td></tr>
<tr><td class="fn">Monthly Cost (full stack)</td><td class="ours" style="color:var(--amber)">$149-$349</td><td><span style="color:var(--muted2)">$400+ w/ add-ons</span></td><td><span style="color:var(--muted2)">$350+ w/ add-ons</span></td><td><span style="color:var(--muted2)">Per-report fees</span></td></tr>
</tbody>
</table>
</div>
<div style="text-align:center;margin-top:36px" class="reveal">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Switch Today - See the Difference</a>
</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</h2>
<span>PAY ONCE • USE FOREVER</span>
</div>
<ul class="feature-list">
<li>Complete Roofing CRM</li>
<li>Lead Management System</li>
<li>Canvassing &amp; Field Tracking</li>
<li>Insurance Workflow</li>
<li>Proposal &amp; 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 &amp; 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>
<!-- FAQ -->
<section class="faq" id="faq">
<div class="container">
<div class="reveal" style="text-align:center;max-width:560px;margin:0 auto">
<div class="section-label">Questions</div>
<div class="section-title">THINGS ROOFERS<br>ALWAYS ASK</div>
</div>
<div class="faq-grid reveal">
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">How long does onboarding take?<span class="faq-icon">+</span></button>
<div class="faq-a"><p>Most teams are fully operational within 48 hours. We handle data migration, crew setup, and walk through every module live on Zoom. No IT department required.</p></div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">Can I import from JobNimbus or AccuLynx?<span class="faq-icon">+</span></button>
<div class="faq-a"><p>Yes. We have direct import tools for JobNimbus, AccuLynx, and Roofr. Your customers, jobs, and history come with you. We've done this hundreds of times.</p></div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">Does it work without strong cell signal?<span class="faq-icon">+</span></button>
<div class="faq-a"><p>Yes. The mobile app has full offline mode. Photos, notes, and measurements sync automatically when you're back on a network. Field work doesn't stop when the signal does.</p></div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">How accurate are the AI measurements?<span class="faq-icon">+</span></button>
<div class="faq-a"><p>Our AI measurements are within 1-3% of manual measurements on standard residential roofs, validated against EagleView. LiDAR adds sub-inch precision for complex commercial jobs.</p></div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">Is there a contract or can I cancel anytime?<span class="faq-icon">+</span></button>
<div class="faq-a"><p>Month-to-month on all plans. No annual contract required unless you want a discount. Cancel any time with 30 days notice. We don't lock you in.</p></div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">What makes this different from JobNimbus?<span class="faq-icon">+</span></button>
<div class="faq-a"><p>JobNimbus is a general contractor CRM adapted for roofing. We're built from scratch for roofing, every field, every workflow, every report. Plus measurements, hail alerts, and drone integration they don't offer.</p></div>
</div>
</div>
<div style="text-align:center;margin-top:40px" class="reveal">
<p style="font-size:15px;color:var(--muted2);margin-bottom:16px">Still have questions? We'd love to talk.</p>
<a href="https://www.lynkeduppro.com/contact" class="btn-primary mt-4">Talk to a Roofing Tech Expert</a>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="cta-final" id="demo">
<div class="container">
<h2>READY TO <em>DOMINATE</em><br>YOUR MARKET?</h2>
<p>Book a 20-minute demo and see how LynkedUp Pro transforms how your company operates.</p>
<div style="margin-bottom:16px" class="cta-form">
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo →</a>
</div>
<p class="cta-note">No credit card. No obligation. Just a straight conversation about your business.</p>
</div>
</section>
<div style="max-width:1140px;margin:0 auto;padding:0 24px 40px;text-align:center">
<p style="font-size:11px;line-height:1.6;color:var(--muted)">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p>
</div>
<div class="mobile-sticky">
<a href="https://book.lynkeduppro.com/" class="ms-primary">Book a demo</a>
<a href="#features" class="ms-outline">See Features</a>
</div>
<script>
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: .1 });
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
window.addEventListener('scroll', () => {
const n = document.getElementById('topnav');
n.style.padding = window.scrollY > 60 ? '10px 56px' : '18px 56px';
});
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');
}
</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>
Reference in New Issue View Git Blame Copy Permalink