<!DOCTYPE html>

<head>

<title>Pro Service Tracker — Lawn Care Edition</title>

<style>

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {

–forest: #1e3d1f;

–moss: #2e5c30;

–leaf: #5a9e3a;

–bright: #7dc44f;

–cream: #f4f1ea;

–offwhite:#faf9f6;

–charcoal:#1a1a18;

–slate: #4a5560;

–muted: #8a9198;

–gold: #c8960a;

–navy: #1a2e45;

–steel: #1c2d40;

–r: 8px;

–r-lg: 16px;

}

html { scroll-behavior: smooth; }

body {

font-family: ‘Source Sans 3’, sans-serif;

background: var(–offwhite);

color: var(–charcoal);

line-height: 1.6;

font-weight: 400;

overflow-x: hidden;

}

/* ── NAV ── */

nav {

position: fixed; top: 0; left: 0; right: 0; z-index: 100;

padding: 1.2rem 4rem;

display: flex; align-items: center; justify-content: space-between;

transition: background 0.35s, box-shadow 0.35s, padding 0.35s;

}

nav.scrolled {

background: rgba(14,26,15,0.97);

backdrop-filter: blur(12px);

box-shadow: 0 1px 0 rgba(255,255,255,0.06);

padding: 0.9rem 4rem;

}

.nav-logo {

font-family: ‘Playfair Display’, serif;

font-size: 1.15rem;

font-weight: 700;

color: #fff;

letter-spacing: -0.01em;

}

.nav-logo span { color: var(–bright); }

.nav-links {

display: flex; gap: 2.5rem; list-style: none;

}

.nav-links a {

color: rgba(255,255,255,0.72);

text-decoration: none;

font-size: 0.88rem;

font-weight: 500;

letter-spacing: 0.04em;

text-transform: uppercase;

transition: color 0.2s;

}

.nav-links a:hover { color: var(–bright); }

.nav-cta {

background: var(–leaf);

color: #fff !important;

padding: 0.5rem 1.2rem;

border-radius: 4px;

opacity: 1 !important;

transition: background 0.2s !important;

}

.nav-cta:hover { background: var(–bright) !important; color: var(–forest) !important; }

/* ── HERO ── */

.hero {

min-height: 100vh;

background:

radial-gradient(ellipse 60% 80% at 80% 20%, rgba(94,160,60,0.18) 0%, transparent 60%),

radial-gradient(ellipse 50% 60% at 10% 90%, rgba(30,61,31,0.6) 0%, transparent 70%),

linear-gradient(160deg, #0e1a0f 0%, #1a3020 45%, #0d1c10 100%);

display: flex; flex-direction: column;

justify-content: center; align-items: flex-start;

padding: 0 4rem;

position: relative; overflow: hidden;

}

.hero::before {

content: ‘’;

position: absolute; inset: 0;

background-image: url(“data:image/svg+xml,%3Csvg width=‘60’ height=‘60’ viewBox=‘0 0 60 60’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cg fill=‘none’ fill-rule=‘evenodd’%3E%3Cg fill=’%234a8c3f’ fill-opacity=‘0.04’%3E%3Cpath d=‘M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E”);

opacity: 0.5;

}

.hero-content { position: relative; z-index: 1; max-width: 720px; }

.hero-badge {

display: inline-flex; align-items: center; gap: 0.5rem;

background: rgba(90,158,58,0.18);

border: 1px solid rgba(90,158,58,0.35);

color: var(–bright);

font-size: 0.78rem; font-weight: 600;

letter-spacing: 0.1em; text-transform: uppercase;

padding: 0.3rem 0.9rem; border-radius: 100px;

margin-bottom: 1.8rem;

animation: fadeUp 0.6s ease both;

}

.hero-badge::before { content: ‘’; width: 6px; height: 6px; border-radius: 50%; background: var(–bright); }

.hero h1 {

font-family: ‘Playfair Display’, serif;

font-size: clamp(2.8rem, 5vw, 4.4rem);

line-height: 1.08;

font-weight: 800;

color: #fff;

letter-spacing: -0.02em;

margin-bottom: 1.5rem;

animation: fadeUp 0.6s 0.1s ease both;

}

.hero h1 em { font-style: italic; color: var(–bright); }

.hero-tagline {

font-size: 1.25rem;

color: rgba(255,255,255,0.62);

font-weight: 300;

margin-bottom: 2.4rem;

animation: fadeUp 0.6s 0.2s ease both;

line-height: 1.5;

}

.hero-tagline strong { color: rgba(255,255,255,0.85); font-weight: 500; }

.hero-actions {

display: flex; gap: 1rem; align-items: center;

animation: fadeUp 0.6s 0.3s ease both;

}

.btn-primary {

background: var(–leaf);

color: #fff;

padding: 0.9rem 2rem;

border-radius: var(–r);

text-decoration: none;

font-weight: 600;

font-size: 0.95rem;

letter-spacing: 0.01em;

transition: all 0.25s;

box-shadow: 0 4px 20px rgba(90,158,58,0.35);

}

.btn-primary:hover {

background: var(–bright);

color: var(–forest);

transform: translateY(-2px);

box-shadow: 0 8px 28px rgba(90,158,58,0.45);

}

.btn-ghost {

color: rgba(255,255,255,0.7);

text-decoration: none;

font-size: 0.9rem;

font-weight: 500;

display: flex; align-items: center; gap: 0.4rem;

transition: color 0.2s;

}

.btn-ghost:hover { color: #fff; }

.btn-ghost::after { content: ‘→’; }

.hero-stats {

position: absolute; bottom: 3.5rem; left: 4rem; right: 4rem;

display: flex; gap: 3rem;

animation: fadeUp 0.6s 0.45s ease both;

border-top: 1px solid rgba(255,255,255,0.08);

padding-top: 2rem;

}

.stat-item { }

.stat-val {

display: block;

font-family: ‘Playfair Display’, serif;

font-size: 1.8rem;

font-weight: 700;

color: var(–bright);

line-height: 1;

}

.stat-label {

font-size: 0.78rem;

color: rgba(255,255,255,0.45);

text-transform: uppercase;

letter-spacing: 0.08em;

margin-top: 0.35rem;

display: block;

}

/* ── SECTION BASE ── */

section { padding: 6rem 4rem; }

.section-eyebrow {

display: inline-block;

font-size: 0.75rem; font-weight: 600;

letter-spacing: 0.14em; text-transform: uppercase;

color: var(–leaf);

margin-bottom: 1rem;

}

.section-title {

font-family: ‘Playfair Display’, serif;

font-size: clamp(1.9rem, 3vw, 2.8rem);

font-weight: 700;

line-height: 1.15;

letter-spacing: -0.02em;

color: var(–charcoal);

margin-bottom: 1.2rem;

}

.section-title em { font-style: italic; color: var(–leaf); }

.section-sub {

font-size: 1.05rem;

color: var(–slate);

max-width: 560px;

line-height: 1.65;

}

/* ── PROBLEM SECTION ── */

.problem {

background: var(–cream);

}

.problem-inner {

max-width: 1200px; margin: 0 auto;

display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;

}

.problem-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.problem-card {

background: #fff;

border-radius: var(–r-lg);

padding: 1.6rem;

border-left: 3px solid transparent;

box-shadow: 0 2px 12px rgba(0,0,0,0.06);

transition: transform 0.25s, box-shadow 0.25s;

}

.problem-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

.problem-card:nth-child(1) { border-color: var(–leaf); }

.problem-card:nth-child(2) { border-color: var(–navy); }

.problem-card:nth-child(3) { border-color: var(–gold); }

.problem-card:nth-child(4) { border-color: var(–moss); }

.problem-icon {

font-size: 1.4rem; margin-bottom: 0.8rem; display: block;

}

.problem-card h3 {

font-size: 0.95rem; font-weight: 600;

color: var(–charcoal);

margin-bottom: 0.5rem;

}

.problem-card p {

font-size: 0.88rem;

color: var(–slate);

line-height: 1.55;

}

.problem-footer {

margin-top: 2rem;

background: var(–forest);

color: var(–bright);

border-radius: var(–r);

padding: 1rem 1.4rem;

font-size: 0.9rem; font-weight: 500;

grid-column: 1 / -1;

}

/* ── HOW IT WORKS ── */

.how {

background: var(–forest);

position: relative; overflow: hidden;

}

.how::before {

content: ‘’;

position: absolute; top: -100px; right: -100px;

width: 400px; height: 400px;

border-radius: 50%;

background: radial-gradient(circle, rgba(90,158,58,0.12), transparent 70%);

pointer-events: none;

}

.how-inner { max-width: 1200px; margin: 0 auto; }

.how .section-title { color: #fff; }

.how .section-sub { color: rgba(255,255,255,0.55); max-width: 520px; }

.steps {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 0;

margin-top: 3.5rem;

position: relative;

}

.steps::before {

content: ‘’;

position: absolute;

top: 1.6rem; left: 2.2rem; right: 2.2rem;

height: 1px;

background: linear-gradient(90deg, transparent, rgba(90,158,58,0.4), var(–leaf), rgba(90,158,58,0.4), transparent);

}

.step {

display: flex; flex-direction: column; align-items: center;

text-align: center;

padding: 0 1rem;

position: relative;

}

.step-num {

width: 3.2rem; height: 3.2rem;

border-radius: 50%;

background: var(–moss);

border: 2px solid var(–leaf);

display: flex; align-items: center; justify-content: center;

font-family: ‘Playfair Display’, serif;

font-size: 1rem; font-weight: 700;

color: var(–bright);

margin-bottom: 1.2rem;

position: relative; z-index: 1;

transition: background 0.25s, transform 0.25s;

}

.step:hover .step-num {

background: var(–leaf);

transform: scale(1.08);

}

.step h3 {

font-size: 0.88rem; font-weight: 600;

color: #fff;

margin-bottom: 0.5rem;

line-height: 1.3;

}

.step p {

font-size: 0.8rem;

color: rgba(255,255,255,0.45);

line-height: 1.5;

}

/* ── FEATURES ── */

.features { background: var(–offwhite); }

.features-inner { max-width: 1200px; margin: 0 auto; }

.features-header {

display: grid; grid-template-columns: 1fr 1fr;

gap: 4rem; align-items: end;

margin-bottom: 3.5rem;

}

.feature-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 1.5rem;

}

.feature-card {

background: #fff;

border-radius: var(–r-lg);

padding: 2rem;

border: 1px solid rgba(0,0,0,0.06);

box-shadow: 0 1px 6px rgba(0,0,0,0.04);

transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;

position: relative; overflow: hidden;

}

.feature-card::after {

content: ‘’;

position: absolute; bottom: 0; left: 0; right: 0;

height: 3px;

background: linear-gradient(90deg, var(–leaf), var(–bright));

transform: scaleX(0);

transform-origin: left;

transition: transform 0.3s;

}

.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: rgba(90,158,58,0.2); }

.feature-card:hover::after { transform: scaleX(1); }

.feature-icon {

width: 2.6rem; height: 2.6rem;

border-radius: 10px;

background: rgba(90,158,58,0.1);

display: flex; align-items: center; justify-content: center;

font-size: 1.2rem;

margin-bottom: 1.2rem;

}

.feature-card h3 {

font-size: 1rem; font-weight: 600;

color: var(–charcoal);

margin-bottom: 0.6rem;

}

.feature-card p {

font-size: 0.88rem;

color: var(–slate);

line-height: 1.6;

}

/* ── CREW SECTION ── */

.crew {

background: linear-gradient(135deg, var(–navy) 0%, var(–steel) 100%);

position: relative; overflow: hidden;

}

.crew::before {

content: ‘’;

position: absolute; inset: 0;

background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(90,158,58,0.08), transparent);

}

.crew-inner {

max-width: 1200px; margin: 0 auto;

display: grid; grid-template-columns: 1fr 1.2fr;

gap: 5rem; align-items: center;

position: relative; z-index: 1;

}

.crew .section-title { color: #fff; }

.crew .section-sub { color: rgba(255,255,255,0.55); }

.dispatch-board {

background: rgba(0,0,0,0.35);

border: 1px solid rgba(255,255,255,0.08);

border-radius: var(–r-lg);

overflow: hidden;

backdrop-filter: blur(4px);

}

.dispatch-header {

background: rgba(90,158,58,0.2);

border-bottom: 1px solid rgba(255,255,255,0.08);

padding: 0.9rem 1.2rem;

font-size: 0.8rem; font-weight: 600;

color: var(–bright);

letter-spacing: 0.08em; text-transform: uppercase;

}

.dispatch-row {

padding: 0.9rem 1.2rem;

display: flex; align-items: center; gap: 0.9rem;

border-bottom: 1px solid rgba(255,255,255,0.04);

transition: background 0.2s;

}

.dispatch-row:hover { background: rgba(255,255,255,0.03); }

.dispatch-row:last-child { border-bottom: none; }

.crew-name { font-size: 0.9rem; font-weight: 600; color: #fff; flex: 1; }

.crew-status {

font-size: 0.72rem; font-weight: 700;

padding: 0.2rem 0.65rem; border-radius: 100px;

text-transform: uppercase; letter-spacing: 0.06em;

white-space: nowrap;

}

.status-onjob { background: rgba(90,158,58,0.25); color: var(–bright); border: 1px solid rgba(90,158,58,0.4); }

.status-travel { background: rgba(26,46,69,0.6); color: #7ab4e0; border: 1px solid rgba(120,180,224,0.3); }

.status-lunch { background: rgba(200,150,10,0.2); color: #e0b840; border: 1px solid rgba(200,150,10,0.35); }

.status-done { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }

.crew-detail { font-size: 0.78rem; color: rgba(255,255,255,0.38); text-align: right; }

.lifecycle-flow {

display: flex; flex-wrap: wrap; gap: 0.5rem;

margin-top: 2rem;

}

.flow-step {

background: rgba(255,255,255,0.06);

border: 1px solid rgba(255,255,255,0.1);

border-radius: var(–r);

padding: 0.35rem 0.75rem;

font-size: 0.78rem; font-weight: 500;

color: rgba(255,255,255,0.6);

display: flex; align-items: center; gap: 0.4rem;

}

.flow-step.active { background: rgba(90,158,58,0.2); border-color: rgba(90,158,58,0.4); color: var(–bright); }

.flow-arrow { color: rgba(255,255,255,0.2); font-size: 0.7rem; }

/* ── BILLING ── */

.billing { background: var(–cream); }

.billing-inner { max-width: 1200px; margin: 0 auto; }

.billing-cards {

display: grid; grid-template-columns: repeat(3, 1fr);

gap: 1.5rem; margin-top: 3rem;

}

.billing-card {

background: #fff;

border-radius: var(–r-lg);

padding: 2rem;

border: 1px solid rgba(0,0,0,0.06);

text-align: center;

transition: transform 0.25s, box-shadow 0.25s;

}

.billing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.09); }

.billing-card.highlight {

background: var(–forest);

border-color: var(–moss);

}

.billing-card .card-icon {

font-size: 2rem; margin-bottom: 1rem; display: block;

}

.billing-card h3 {

font-family: ‘Playfair Display’, serif;

font-size: 1.2rem; font-weight: 700;

margin-bottom: 0.6rem;

}

.billing-card.highlight h3 { color: #fff; }

.billing-card p {

font-size: 0.88rem; color: var(–slate); line-height: 1.6;

}

.billing-card.highlight p { color: rgba(255,255,255,0.6); }

.billing-tag {

display: inline-block;

background: var(–leaf);

color: #fff;

font-size: 0.72rem; font-weight: 700;

letter-spacing: 0.08em; text-transform: uppercase;

padding: 0.2rem 0.7rem; border-radius: 100px;

margin-top: 1rem;

}

/* ── SUBSCRIPTION / PRICING MODEL ── */

.pricing-model { background: var(–offwhite); }

.pricing-model-inner { max-width: 1100px; margin: 0 auto; }

.pricing-model-layout {

display: grid; grid-template-columns: 1fr 1fr;

gap: 5rem; align-items: center;

margin-top: 3rem;

}

.pricing-pillars { display: flex; flex-direction: column; gap: 1.5rem; }

.pillar {

display: flex; gap: 1.2rem; align-items: flex-start;

padding: 1.4rem;

background: #fff;

border-radius: var(–r-lg);

border: 1px solid rgba(0,0,0,0.06);

transition: transform 0.2s, box-shadow 0.2s;

}

.pillar:hover { transform: translateX(4px); box-shadow: 0 4px 20px rgba(0,0,0,0.07); }

.pillar-icon {

width: 2.4rem; height: 2.4rem; flex-shrink: 0;

border-radius: var(–r);

background: rgba(90,158,58,0.1);

display: flex; align-items: center; justify-content: center;

font-size: 1.1rem;

}

.pillar-text h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; color: var(–charcoal); }

.pillar-text p { font-size: 0.85rem; color: var(–slate); line-height: 1.5; }

.annual-callout {

background: linear-gradient(135deg, var(–forest), var(–moss));

border-radius: var(–r-lg);

padding: 2.5rem;

text-align: center;

position: relative; overflow: hidden;

}

.annual-callout::before {

content: ‘’;

position: absolute; top: -50%; right: -20%;

width: 300px; height: 300px;

border-radius: 50%;

background: rgba(255,255,255,0.04);

}

.annual-callout .big-pct {

font-family: ‘Playfair Display’, serif;

font-size: 5rem; font-weight: 800;

color: var(–bright);

line-height: 1;

display: block;

position: relative; z-index: 1;

}

.annual-callout h3 {

font-size: 1.2rem; font-weight: 600;

color: #fff;

margin: 0.5rem 0;

position: relative; z-index: 1;

}

.annual-callout p {

font-size: 0.88rem;

color: rgba(255,255,255,0.6);

line-height: 1.6;

max-width: 280px; margin: 0 auto 1.5rem;

position: relative; z-index: 1;

}

.checklist {

text-align: left;

display: flex; flex-direction: column; gap: 0.6rem;

position: relative; z-index: 1;

margin-top: 1.5rem;

}

.checklist li {

display: flex; align-items: center; gap: 0.6rem;

font-size: 0.85rem;

color: rgba(255,255,255,0.75);

list-style: none;

}

.checklist li::before {

content: ‘✓’;

width: 1.2rem; height: 1.2rem;

background: rgba(90,158,58,0.3);

border-radius: 50%;

display: flex; align-items: center; justify-content: center;

font-size: 0.65rem;

color: var(–bright);

font-weight: 700;

flex-shrink: 0;

}

/* ── SEASONAL ── */

.seasonal { background: var(–forest); }

.seasonal-inner { max-width: 1200px; margin: 0 auto; }

.seasonal .section-title { color: #fff; }

.seasonal .section-sub { color: rgba(255,255,255,0.5); }

.season-cards {

display: grid; grid-template-columns: repeat(3, 1fr);

gap: 1.5rem; margin-top: 3rem;

}

.season-card {

border-radius: var(–r-lg);

overflow: hidden;

border: 1px solid rgba(255,255,255,0.08);

transition: transform 0.25s, box-shadow 0.25s;

}

.season-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.4); }

.season-header {

padding: 1.2rem 1.4rem;

display: flex; align-items: center; gap: 0.8rem;

}

.season-header span { font-size: 1.4rem; }

.season-header h3 { font-size: 1rem; font-weight: 700; color: #fff; }

.season-body {

padding: 0 1.4rem 1.4rem;

background: rgba(0,0,0,0.25);

}

.season-body ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.8rem; }

.season-body li {

font-size: 0.85rem;

color: rgba(255,255,255,0.6);

display: flex; align-items: center; gap: 0.5rem;

}

.season-body li::before { content: ‘→’; color: var(–bright); font-size: 0.75rem; }

.season-footer {

padding: 0.65rem 1.4rem;

background: rgba(0,0,0,0.3);

font-size: 0.78rem; font-weight: 600;

color: rgba(255,255,255,0.45);

border-top: 1px solid rgba(255,255,255,0.06);

text-transform: uppercase; letter-spacing: 0.07em;

}

/* ── PLATFORM / VERTICALS ── */

.platform { background: var(–cream); }

.platform-inner { max-width: 1200px; margin: 0 auto; }

.verticals {

display: grid; grid-template-columns: repeat(5, 1fr);

gap: 1rem; margin-top: 3rem;

}

.future-callout {

margin-top: 2.5rem;

background: #fff;

border: 1px solid rgba(0,0,0,0.07);

border-radius: var(–r-lg);

padding: 2rem 2.4rem;

display: grid;

grid-template-columns: auto 1fr;

gap: 2rem;

align-items: start;

}

.future-callout-label {

font-size: 0.72rem; font-weight: 700;

letter-spacing: 0.12em; text-transform: uppercase;

color: var(–leaf);

white-space: nowrap;

padding-top: 0.15rem;

}

.future-callout-right h4 {

font-family: ‘Playfair Display’, serif;

font-size: 1.1rem; font-weight: 700;

color: var(–charcoal);

margin-bottom: 0.6rem;

line-height: 1.25;

}

.future-callout-right p {

font-size: 0.88rem;

color: var(–slate);

line-height: 1.65;

margin-bottom: 1.1rem;

}

.future-tags {

display: flex; flex-wrap: wrap; gap: 0.5rem;

}

.future-tag {

display: inline-flex; align-items: center; gap: 0.35rem;

background: var(–cream);

border: 1px solid rgba(0,0,0,0.08);

border-radius: 100px;

padding: 0.28rem 0.75rem;

font-size: 0.8rem; font-weight: 500;

color: var(–slate);

}

.vertical-card {

border-radius: var(–r-lg);

overflow: hidden;

border: 1px solid rgba(0,0,0,0.08);

transition: transform 0.25s, box-shadow 0.25s;

}

.vertical-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }

.vertical-header {

padding: 1.2rem;

display: flex; align-items: center; gap: 0.75rem;

}

.vertical-initial {

width: 2rem; height: 2rem;

border-radius: 50%;

border: 1px solid rgba(255,255,255,0.35);

display: flex; align-items: center; justify-content: center;

font-size: 0.8rem; font-weight: 700; color: #fff;

background: rgba(255,255,255,0.12);

flex-shrink: 0;

}

.vertical-header h3 { font-size: 1rem; font-weight: 700; color: #fff; }

.vertical-badge {

padding: 0.75rem 1.2rem;

font-size: 0.72rem; font-weight: 700;

text-transform: uppercase; letter-spacing: 0.08em;

text-align: center;

}

.badge-live { background: var(–leaf); color: #fff; }

.badge-soon { background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.45); }

.vertical-url {

font-size: 0.72rem;

color: rgba(255,255,255,0.45);

text-align: center;

padding-bottom: 0.75rem;

display: block;

}

.vertical-body {

background: rgba(0,0,0,0.08);

padding: 0.8rem 1.2rem 1.2rem;

}

.vertical-body ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }

.vertical-body li {

font-size: 0.82rem;

color: rgba(255,255,255,0.55);

display: flex; align-items: center; gap: 0.4rem;

}

.vertical-body li::before { content: ‘·’; color: rgba(255,255,255,0.25); }

/* ── CTA ── */

.cta {

background:

radial-gradient(ellipse 70% 80% at 50% 50%, rgba(90,158,58,0.12), transparent 65%),

linear-gradient(160deg, #0e1a0f 0%, #152318 50%, #0d1c10 100%);

text-align: center;

padding: 7rem 4rem;

position: relative; overflow: hidden;

}

.cta::before {

content: ‘’;

position: absolute; inset: 0;

}

.cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

.cta h2 {

font-family: ‘Playfair Display’, serif;

font-size: clamp(2.2rem, 4vw, 3.4rem);

font-weight: 800; line-height: 1.1;

color: #fff;

letter-spacing: -0.02em;

margin-bottom: 1.2rem;

}

.cta h2 em { font-style: italic; color: var(–bright); }

.cta p { font-size: 1.1rem; color: rgba(255,255,255,0.55); margin-bottom: 2.5rem; }

.cta-actions { display: flex; justify-content: center; gap: 1rem; align-items: center; }

.cta-note {

margin-top: 1.5rem;

font-size: 0.82rem;

color: rgba(255,255,255,0.3);

}

.cta-note a { color: rgba(255,255,255,0.5); text-decoration: underline; }

/* ── FOOTER ── */

footer {

background: #080f08;

padding: 2rem 4rem;

display: flex; align-items: center; justify-content: space-between;

}

.footer-logo {

font-family: ‘Playfair Display’, serif;

font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.5);

}

.footer-logo span { color: var(–bright); }

.footer-links { display: flex; gap: 2rem; }

.footer-links a {

color: rgba(255,255,255,0.3);

text-decoration: none;

font-size: 0.8rem;

transition: color 0.2s;

}

.footer-links a:hover { color: rgba(255,255,255,0.7); }

.footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.2); }

/* ── COMING SOON BANNER ── */

.dev-banner {

position: fixed; top: 0; left: 0; right: 0; z-index: 200;

background: var(–charcoal);

border-bottom: 1px solid rgba(200,150,10,0.35);

padding: 0.55rem 2rem;

display: flex; align-items: center; justify-content: center; gap: 0.75rem;

font-size: 0.8rem; font-weight: 500;

color: rgba(255,255,255,0.7);

letter-spacing: 0.02em;

}

.dev-banner .banner-pill {

background: rgba(200,150,10,0.18);

border: 1px solid rgba(200,150,10,0.45);

color: #e0b840;

font-size: 0.7rem; font-weight: 700;

letter-spacing: 0.1em; text-transform: uppercase;

padding: 0.15rem 0.65rem; border-radius: 100px;

flex-shrink: 0;

}

.dev-banner a {

color: var(–bright); text-decoration: underline;

text-underline-offset: 2px;

}

/* Push everything down to account for banner */

body.has-banner nav { top: 2.3rem; }

body.has-banner { padding-top: 2.3rem; }

/* ── COMING SOON BADGE in CTA ── */

.coming-soon-badge {

display: inline-flex; align-items: center; gap: 0.5rem;

background: rgba(200,150,10,0.15);

border: 1px solid rgba(200,150,10,0.4);

color: #e0b840;

font-size: 0.78rem; font-weight: 700;

letter-spacing: 0.08em; text-transform: uppercase;

padding: 0.35rem 1rem; border-radius: 100px;

margin-bottom: 1.8rem;

}

.beta-blurb {

background: rgba(255,255,255,0.05);

border: 1px solid rgba(255,255,255,0.1);

border-radius: var(–r-lg);

padding: 1.8rem 2rem;

max-width: 520px;

margin: 0 auto 2rem;

text-align: left;

}

.beta-headline {

font-family: ‘Playfair Display’, serif;

font-size: 1.1rem;

font-weight: 700;

color: var(–bright);

margin-bottom: 0.7rem;

}

.beta-body {

font-size: 0.9rem;

color: rgba(255,255,255,0.55);

line-height: 1.65;

margin: 0;

}

/* ── ANIMATIONS ── */

@keyframes fadeUp {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.reveal {

opacity: 0; transform: translateY(24px);

transition: opacity 0.6s ease, transform 0.6s ease;

}

.reveal.visible { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: 0.1s; }

.reveal-delay-2 { transition-delay: 0.2s; }

.reveal-delay-3 { transition-delay: 0.3s; }

.reveal-delay-4 { transition-delay: 0.4s; }

@media (max-width: 900px) {

nav { padding: 1rem 1.5rem; }

nav.scrolled { padding: 0.8rem 1.5rem; }

.nav-links { display: none; }

section { padding: 4rem 1.5rem; }

.hero { padding: 0 1.5rem; min-height: 100svh; }

.hero-stats { left: 1.5rem; right: 1.5rem; gap: 1.5rem; flex-wrap: wrap; }

.problem-inner { grid-template-columns: 1fr; gap: 2.5rem; }

.steps { grid-template-columns: 1fr 1fr; gap: 2rem; }

.steps::before { display: none; }

.feature-grid { grid-template-columns: 1fr 1fr; }

.crew-inner { grid-template-columns: 1fr; }

.billing-cards { grid-template-columns: 1fr; }

.pricing-model-layout { grid-template-columns: 1fr; gap: 2.5rem; }

.season-cards { grid-template-columns: 1fr; }

.verticals { grid-template-columns: 1fr 1fr; }

.future-callout { grid-template-columns: 1fr; gap: 1rem; }

.features-header { grid-template-columns: 1fr; gap: 1rem; }

footer { flex-direction: column; gap: 1rem; text-align: center; }

.footer-links { flex-wrap: wrap; justify-content: center; }

}

</style>

</head>

<span class="banner-pill">In Development</span>

Pro Service Tracker is not yet available — <a href="#cta">check back here</a> for beta testing announcements.

</div>

<div class="nav-logo">Pro Service <span>Tracker</span></div>

<li><a href="#features">Features</a></li>

<li><a href="#billing">Billing</a></li>

<li><a href="#seasonal">Seasonal</a></li>

<li><a href="#platform">Platform</a></li>

<li><a href="#cta" class="nav-cta">Coming Soon</a></li>

</ul>

</nav>

<div class="hero-badge">Lawn Care Edition — mow.proservicetracker.com</div>

<h1>Run a tighter<br>lawn business.<br><em>Automatically.</em></h1>

<strong>Recurring scheduling. Smart routing. Visit-pool billing. Crew management.</strong><br>

Set it once. The system handles the rest.

</p>

<a href="#features" class="btn-primary">Explore Features</a>

<a href="#features" class="btn-ghost">See how it works</a>

</div>

</div>

<span class="stat-label">Flat subscription</span>

</div>

<span class="stat-label">Saved on annual plans</span>

</div>

<span class="stat-val">All seasons</span>

<span class="stat-label">One subscription</span>

</div>

</section>

<div>

<span class="section-eyebrow reveal">The challenge</span>

<h2 class="section-title reveal reveal-delay-1">Running a lawn business<br>is <em>harder than it should be</em></h2>

<p class="section-sub reveal reveal-delay-2">Calls, texts, paper calendars, spreadsheets — and still someone gets missed. There's a better way. Pro Service Tracker automates the operational layer so you can focus on the work, not the paperwork.</p>

</div>

<h3>Scheduling scramble</h3>

<p>Calls, texts, and manual calendars mean someone always gets missed or double-booked.</p>

</div>

<h3>No efficient routing</h3>

<p>Crews crisscross town all day, burning time and fuel with no logical plan.</p>

</div>

<h3>Chasing payments</h3>

<p>Invoicing is late, follow-ups are manual, and cash flow is unpredictable.</p>

</div>

<h3>No visibility</h3>

<p>No easy way to see where you're profitable or how crews are actually performing.</p>

</div>

</section>

<span class="section-eyebrow reveal" style="color:var(--bright)">How it works</span>

<h2 class="section-title reveal reveal-delay-1">Set up once.<br>The system handles the rest.</h2>

<p class="section-sub reveal reveal-delay-2">Five steps from setup to a running operation — then it stays running on its own.</p>

<h3>Configure your services & intervals</h3>

<p>Set your service offerings, schedule intervals, season dates, and crew count.</p>

</div>

<h3>Clients enroll & choose a visit plan</h3>

<p>Clients pick their interval, starting week, and a visit pool or pay-as-you-go.</p>

</div>

<h3>Route auto-generated each week</h3>

<p>One click builds an optimized weekly route across all crews. Review and approve.</p>

</div>

<h3>Clients notified automatically</h3>

<p>Every client gets their service day, 4-hour window, and “on my way” ETA.</p>

</div>

<h3>Crew executes, invoices generate</h3>

<p>Crews check in and out per visit. Job times improve routing. Invoices send automatically.</p>

</div>

</section>

<div>

<span class="section-eyebrow reveal">Core features</span>

<h2 class="section-title reveal reveal-delay-1">Everything a lawn care<br>business needs — <em>nothing it doesn't</em></h2>

</div>

<p class="section-sub reveal reveal-delay-2">Purpose-built for recurring outdoor service businesses. Not generic software adapted to fit.</p>

</div>

<h3>Interval-Based Recurring Scheduling</h3>

<p>Clients enroll once. Services auto-generate every week, bi-week, or month at their chosen interval — forever, until cancelled.</p>

</div>

<h3>AI-Assisted Weekly Route Generation</h3>

<p>Farthest-first clustering minimizes drive time. Routes balanced across all crews. Review on a map, drag to edit, then approve.</p>

</div>

<h3>Client App Included</h3>

<p>Every client gets their own app to view service windows, track visit history, manage their pool balance, and pay invoices.</p>

</div>

<h3>Mileage Auto-Calculated</h3>

<p>Daily route miles per crew are recorded automatically at IRS standard rate as deductible business expenses. Zero manual entry.</p>

</div>

<h3>Business Intelligence Reporting</h3>

<p>Income by zone, mileage expenses, crew production, geographic profitability, and visit pool utilization — all in one place.</p>

</div>

<h3>Automated Client Notifications</h3>

<p>Push, SMS, or email — client's choice. Service window alerts, “on my way” ETA, low pool balance warnings, and more.</p>

</div>

</section>

<div>

<span class="section-eyebrow reveal" style="color:var(--bright)">Crew management</span>

<h2 class="section-title reveal reveal-delay-1">Your crew runs<br>a tighter operation</h2>

<p class="section-sub reveal reveal-delay-2">Every step of the crew day is tracked — so you always know exactly where things stand, without calling anyone.</p>

```

<div class="flow-step active">Start route</div>

<div class="flow-step active">Check in</div>

<div class="flow-step">Lunch break</div>

<div class="flow-step">Check out</div>

<div class="flow-step">Complete route</div>

</div>

<p style="font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.5;">Route start & completion touchpoints with actual vs. planned timing tracked automatically</p>

</div>

<p style="font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.5;">Configurable lunch break timer — owner alerted if crew hasn't returned on time</p>

</div>

<p style="font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.5;">Mileage finalized at route completion — GPS track or planned miles, automatically logged</p>

</div>

<p style="font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.5;">Professional add-on: live crew map, client live tracking, up to 5 linked crew devices</p>

</div>

<div class="dispatch-header">Owner dispatch board</div>

<div class="crew-name">Truck 1 — Mike</div>

</div>

<div class="crew-name">Truck 2 — Sara</div>

<div class="crew-status status-travel">Traveling</div>

<div class="crew-detail">En route to Jones</div>

</div>

<div class="crew-name">Truck 3 — Dan</div>

<div class="crew-status status-lunch">Lunch</div>

<div class="crew-detail">Returns 12:30 PM</div>

</div>

<div class="crew-name">Truck 4 — Priya</div>

<div class="crew-status status-done">Complete</div>

<div class="crew-detail">8/8 stops done</div>

</div>

<p style="font-size:0.78rem;color:rgba(255,255,255,0.25);margin-top:1rem;text-align:center;">Status-only view included on all plans · Live map with Professional add-on</p>

</div>

```

</div>

</section>

<span class="section-eyebrow reveal">Flexible billing</span>

<h2 class="section-title reveal reveal-delay-1">Clients pay the way<br>that <em>works for them</em></h2>

<p class="section-sub reveal reveal-delay-2">Three billing modes — you configure, they choose. Visit pools drive predictable cash flow and client retention.</p>

<p>Default rate per visit, billed after each completed job. Full flexibility, no commitment required. Ideal for new or occasional clients.</p>

</div>

<h3 style="color:#fff">Visit Pool Packs</h3>

<p>Clients purchase a bucket of visits upfront — 8-visit, 16-visit, or custom. Tiered discounts for larger pools. Pool balance always visible in their app.</p>

<div class="billing-tag">Most popular</div>

</div>

<h3>Full-Season Packages</h3>

<p>Visit count auto-calculated from your season dates and their service interval. Largest discount tier. Covers the entire season upfront — maximum cash flow for you.</p>

</div>

</section>

<span class="section-eyebrow reveal">Subscription model</span>

<h2 class="section-title reveal reveal-delay-1">Simple, flat subscription.<br><em>No per-job fees. Ever.</em></h2>

<h4>One flat monthly rate</h4>

<p>Unlimited clients, enrollments, routes, invoices, and crew devices. Your subscription cost doesn't grow as your business grows.</p>

</div>

<h4>Pause anytime for seasonal downtime</h4>

<p>Winter slow season? Pause billing and resume when you're ready. Your data and client enrollments stay exactly as you left them.</p>

</div>

<h4>Switch seasonal service profiles</h4>

<p>Swap your service catalog between seasons — Spring/Summer lawn care, Fall cleanup, Winter services — without any interruption to billing or routing.</p>

</div>

<h4>Professional add-on available</h4>

<p>Bundle live crew GPS tracking, multi-device crew management, and client live maps into your plan for a flat monthly add-on.</p>

</div>

```

<h3>off every year you commit</h3>

<p>Annual plans lock in your rate for 12 months and save you a full fifth of the cost compared to month-to-month billing.</p>

<li>Everything included in your chosen plan</li>

<li>Same features — just a smarter payment cadence</li>

<li>Rate locked for the full year, no surprises</li>

<li>Professional Annual includes the tracking add-on free</li>

<li>Still pauseable and switchable between seasons</li>

</ul>

</div>

```

</div>

</section>

<span class="section-eyebrow reveal" style="color:var(--bright)">Seasonal profiles</span>

<h2 class="section-title reveal reveal-delay-1">Built for every season.<br>One subscription.</h2>

<p class="section-sub reveal reveal-delay-2">Switch your service catalog with a single tap. Your pricing, intervals, and routing logic update automatically.</p>

<h3>Spring & Summer</h3>

</div>

<ul>

<li>Lawn mowing & edging</li>

<li>Fertilization & weed control</li>

<li>Mulching & bed maintenance</li>

<li>Irrigation startup</li>

<li>Landscaping & planting</li>

</ul>

</div>

<div class="season-footer">Switch profile → no interruption</div>

</div>

<h3>Fall Transition</h3>

</div>

<ul>

<li>Leaf removal & cleanup</li>

<li>Aeration & overseeding</li>

<li>Gutter cleaning</li>

<li>Irrigation winterization</li>

<li>Pre-winter lawn prep</li>

</ul>

</div>

<div class="season-footer">Pause → billing stops, data stays</div>

</div>

<h3>Winter Services</h3>

</div>

<ul>

<li>Snow plowing & removal</li>

<li>De-icing & salting</li>

<li>Holiday lighting install</li>

<li>Winter property checks</li>

<li>Storm response</li>

</ul>

</div>

<div class="season-footer">Stay year-round → offer all seasons</div>

</div>

</section>

<span class="section-eyebrow reveal">Platform vision</span>

<h2 class="section-title reveal reveal-delay-1">Built for every on-site<br><em>service business</em></h2>

<p class="section-sub reveal reveal-delay-2">If your business goes to the customer — not the other way around — Pro Service Tracker is built for you. We start with lawn care and expand to every field service vertical, one industry at a time.</p>

</div>

<div class="vertical-badge badge-live">Available Now</div>

<span class="vertical-url">mow.proservicetracker.com</span>

<ul>

<li>Recurring mow scheduling</li>

<li>Weekly route generation</li>

<li>Visit-pool billing</li>

<li>Crew dispatch & tracking</li>

</ul>

</div>

<h3>Plumbing</h3>

</div>

<div class="vertical-badge badge-soon">Coming Soon</div>

<span class="vertical-url">leak.proservicetracker.com</span>

<ul>

<li>Service call scheduling</li>

<li>Technician routing</li>

<li>Job-based billing</li>

<li>Parts & time tracking</li>

</ul>

</div>

<h3>Electrical</h3>

</div>

<div class="vertical-badge badge-soon">Coming Soon</div>

<span class="vertical-url">spark.proservicetracker.com</span>

<ul>

<li>Permit & inspection tracking</li>

<li>Crew assignment</li>

<li>Contract billing</li>

<li>Job site management</li>

</ul>

</div>

</div>

<div class="vertical-badge badge-soon">Coming Soon</div>

<span class="vertical-url">chilly.proservicetracker.com</span>

<ul>

<li>Maintenance contracts</li>

<li>Seasonal scheduling</li>

<li>Equipment tracking</li>

<li>Service history log</li>

</ul>

</div>

</div>

<div class="vertical-badge badge-soon">On the Roadmap</div>

<span class="vertical-url" style="visibility:hidden">placeholder</span>

<ul>

<li>Mobile pet grooming</li>

<li>Auto detailing</li>

<li>Pool & spa service</li>

<li>Window cleaning</li>

</ul>

</div>

```

<div class="future-callout-label">The bigger picture</div>

<h4>Any business that goes to the customer belongs on Pro Service Tracker</h4>

<p>The scheduling, routing, crew management, and billing problems that make lawn care hard are the same problems facing every on-site service industry. Our platform is designed from the ground up to support any business where the work happens at the customer's location — not yours. As we expand beyond our initial verticals, we'll be adding new industry profiles based on where the demand is strongest.</p>

<span class="future-tag">🐾 Mobile pet grooming</span>

<span class="future-tag">🚗 Auto detailing</span>

<span class="future-tag">🏊 Pool & spa service</span>

<span class="future-tag">🪟 Window cleaning</span>

<span class="future-tag">🌿 Pest control</span>

<span class="future-tag">🏠 House cleaning</span>

<span class="future-tag">🌲 Tree & shrub care</span>

<span class="future-tag">❄️ Pressure washing</span>

<span class="future-tag">🛻 Mobile mechanics</span>

<span class="future-tag">📦 Junk removal</span>

<span class="future-tag">🔧 Appliance repair</span>

</div>

```

</div>

</section>

<div class="coming-soon-badge">🚧  Currently In Development</div>

<h2>Something great is<br><em>coming soon.</em></h2>

<p>Pro Service Tracker is being purpose-built for lawn care professionals who are done with spreadsheets, paper calendars, and chasing payments. We're in active development — not available yet, but getting close.</p>

<p class="beta-headline">Interested in beta testing?</p>

<p class="beta-body">We'll be opening limited beta access to lawn care operators before our public launch. Watch this page for announcements, and check back as we get closer to release. Early testers will get hands-on access to shape the product before it ships.</p>

</div>

<p class="cta-note">Annual plans will save 20% off monthly pricing · Professional add-on includes live crew tracking</p>

</div>

</section>

<div class="footer-logo">Pro Service <span>Tracker</span></div>

<a href="#">Features</a>

<a href="#">Pricing</a>

<a href="#">mow.proservicetracker.com</a>

</div>

</footer>

const nav = document.getElementById('nav');

window.addEventListener('scroll', () => {

nav.classList.toggle('scrolled', window.scrollY > 60);

}, { passive: true });

const observer = new IntersectionObserver((entries) => {

entries.forEach(e => {

if (e.isIntersecting) {

e.target.classList.add('visible');

observer.unobserve(e.target);

}

});

}, { threshold: 0.12 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

</script>

</body>

</html>