.card--dark {
background: var(--bw-primary);
color: #EAF4FF;
border: 1px solid #0A3050;
box-shadow: 0 10px 24px rgba(12, 60, 96, 0.12);
}
.card--dark h2,
.card--dark h3 {
color: #FFFFFF;
}
.card--dark .muted {
color: rgba(234, 244, 255, 0.75);
} .card__divider {
border: 0;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent 60%);
margin: 24px 0;
} .cta-large {
padding: 16px 32px;
font-size: 17px;
}
.cta-full {
width: 100%;
display: flex; justify-content: center;
} .cta {
display: inline-flex; 
} .lf-hero {
background: linear-gradient(135deg, #F6FAFE 0%, #FFFFFF 100%);
padding: 80px 0 60px;
}
.lf-hero .container {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.lf-badge {
display: inline-block;
background: linear-gradient(135deg, var(--bw-primary) 0%, var(--bw-accent) 100%);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 20px;
}
.lf-hero h1 {
font-size: clamp(32px, 4.5vw, 44px);
margin-bottom: 24px;
}
.lf-lead {
font-size: 18px;
line-height: 1.65;
color: var(--bw-text-body);
margin-bottom: 32px;
}
.lf-hero-cta {
display: flex;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.lf-trust-badges {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-top: 4px;
}
.lf-hero-img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(12, 60, 96, 0.15);
display: block;
} .lf-problem {
padding: 80px 0;
background: var(--bw-bg-light);
}
.lf-problem h2 {
text-align: center;
margin-bottom: 40px;
}
.lf-pain-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.lf-pain-item {
background: rgba(255, 255, 255, 0.08);
padding: 24px 28px;
border-radius: 12px;
text-align: center;
transition: all 0.2s ease;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
}
.lf-pain-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.lf-pain-icon {
font-size: 36px;
margin-bottom: 12px;
line-height: 1;
display: block;
color: var(--bw-accent);
}
.lf-pain-item p {
color: #EAF4FF;
line-height: 1.5;
font-size: 15px;
margin: 0;
}
.lf-outcome-list {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 20px;
}
.lf-outcome-item {
color: #EAF4FF;
line-height: 1.7;
margin: 0;
} .lf-outcome-note {
margin-top: 16px;
font-size: 14px;
opacity: 0.85;
font-style: italic;
color: rgba(234, 244, 255, 0.9);
}  .lf-sources {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.lf-sources p {
margin: 0;
color: rgba(234, 244, 255, 0.6);
font-size: 12px;
}
.lf-sources sup {
color: var(--bw-accent);
font-weight: 600;
} .lf-outcome-note {
margin-top: 16px;
color: rgba(234, 244, 255, 0.6);
} .lf-pain-item sup {
color: var(--bw-accent);
font-weight: 600;
font-size: 10px;
} .lf-solution {
padding: 80px 0;
}
.lf-solution h2 {
text-align: center;
margin-bottom: 48px;
font-size: clamp(28px, 4vw, 36px);
}
.lf-icon {
font-size: 48px;
margin-bottom: 16px;
display: block;
text-align: center;
}
.lf-solution .card {
text-align: left;
padding: 28px;
}
.lf-solution .card h3 {
margin: 0 0 16px 0;
font-size: 22px;
font-weight: 600;
}
.lf-solution .card ul {
margin: 0;
padding-left: 0;
list-style: none; }
.lf-solution .card li {
color: var(--bw-text-body);
margin-bottom: 12px;
padding-left: 24px;
position: relative;
}
.lf-solution .card li::before {
content: '✓';
position: absolute;
left: 0;
color: #1E9E6A; font-weight: bold;
} .lf-requirements {
padding: 80px 0;
}
.lf-requirements h2,
.lf-requirements .lf-lead {
text-align: center;
}
.lf-requirements .lf-lead {
margin-bottom: 40px;
}
.lf-lead {
margin-top: 20px;
}
.lf-req-item {
text-align: center;
padding: 24px;
background: var(--bw-bg-light);
border-radius: 12px;
border: 1px solid var(--bw-border);
transition: all 0.2s ease;
}
.lf-req-item:hover {
box-shadow: 0 4px 12px rgba(12, 60, 96, 0.08);
}
.lf-req-icon {
font-size: 32px;
font-weight: 700;
line-height: 1;
margin-bottom: 15px;
color: var(--bw-accent);
}
.lf-req-item h3 {
font-size: 20px;
margin-bottom: 10px;
}
.lf-req-item p {
color: var(--bw-text-body);
font-size: 15px;
}
.lf-req-cost {
font-weight: 600;
color: var(--bw-primary);
margin-top: 10px;
} .lf-motor {
padding: 80px 0;
background: var(--bw-bg-light);
}
.lf-motor h2 {
text-align: center;
margin-bottom: 48px;
font-size: clamp(28px, 4vw, 36px);
}
.lf-motor-card {
background: #fff;
border-radius: 16px;
padding: 32px 28px;
position: relative;
box-shadow: 0 4px 16px rgba(12, 60, 96, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
} .lf-motor-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
border-radius: 16px 16px 0 0;
background: linear-gradient(90deg, var(--bw-primary) 0%, var(--bw-accent) 100%);
}
.lf-motor-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(12, 60, 96, 0.12);
}
.lf-motor-badge {
display: inline-block;
background: var(--bw-primary);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 6px;
margin-bottom: 20px;
}
.lf-motor-card h3 {
font-size: 24px;
font-weight: 700;
margin: 0 0 16px 0;
}
.lf-motor-card > p {
color: var(--bw-text-body);
font-size: 15px;
margin: 0 0 20px 0;
}
.lf-motor-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.lf-motor-card li {
position: relative;
padding-left: 24px;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
}
.lf-motor-card li::before {
content: '•';
position: absolute;
left: 0;
color: var(--bw-accent);
font-size: 18px;
font-weight: bold;
} .lf-roi {
padding: 80px 0;
}
.lf-roi h2 {
text-align: center;
margin-bottom: 32px;
font-size: clamp(28px, 4vw, 36px);
}
.lf-calculator {
background: linear-gradient(135deg, #F6FAFE 0%, #FFFFFF 100%);
border: 2px solid var(--bw-accent);
box-shadow: 0 8px 24px rgba(25, 169, 230, 0.15);
border-radius: 16px;
padding: 32px;
}
.lf-calc-inputs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 28px;
}
.lf-input-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
}
.lf-input-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--bw-border);
border-radius: 8px;
font-size: 16px;
color: var(--bw-primary);
box-sizing: border-box;
}
.lf-input-group input:focus {
outline: none;
border-color: var(--bw-accent);
}
.lf-result-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #fff;
border-radius: 8px;
border: 1px solid var(--bw-border);
margin-bottom: 12px;
}
.lf-result-value {
font-size: 24px;
font-weight: bold;
color: var(--bw-primary);
}
.lf-result-value.lf-highlight {
color: #1E9E6A; font-size: 32px;
}
.lf-calc-note {
margin-top: 24px;
padding: 16px 20px;
background: rgba(25, 169, 230, 0.08);
border-radius: 8px;
border-left: 4px solid var(--bw-accent);
} .lf-pricing {
padding: 80px 0;
background: var(--bw-bg-light);
}
.lf-pricing h2 {
text-align: center;
margin-bottom: 40px;
font-size: clamp(28px, 4vw, 36px);
}
.lf-pricing h3 {
margin-bottom: 20px;
}
.lf-price-card {
background: #fff;
border: 3px solid var(--bw-accent);
border-radius: 20px;
padding: 40px;
box-shadow: 0 12px 40px rgba(25, 169, 230, 0.2);
}
.lf-price-header {
text-align: center;
margin-bottom: 32px;
}
.lf-price-amount {
font-size: 56px;
font-weight: bold;
line-height: 1;
}
.lf-price-tax {
margin-top: 20px;
}
.lf-price-note {
font-size: 18px;
color: var(--bw-text-body);
margin-left: 8px;
}
.lf-price-divider {
border: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bw-border), transparent);
margin: 32px 0;
} .lf-price-includes {
margin-bottom: 32px; } .lf-price-includes h4,
.lf-price-savings h4 {
margin: 0 0 16px 0; } .lf-price-cta {
margin-top: 40px; text-align: center; } .lf-price-includes ul,
.lf-price-savings ul {
list-style: none; margin: 0;
padding: 0;
} .lf-price-includes li,
.lf-price-savings li {
padding: 10px 0 10px 32px;
position: relative;
font-size: 15px;
line-height: 1.5;
} .lf-price-includes li::before {
content: '✓';
position: absolute;
left: 0;
color: #1E9E6A;
font-weight: bold;
font-size: 18px;
}
.lf-price-savings li::before {
content: '💰';
position: absolute;
left: 0;
} .lf-trust-row {
display: flex; justify-content: center; gap: 24px; margin-top: 24px;
flex-wrap: wrap; }
.lf-trust-row span {
display: inline-flex; align-items: center;
gap: 8px;
font-size: 14px;
color: var(--bw-text-body);
}
.lf-price-note {
margin-top: 24px;
text-align: center;
} .lf-faq {
padding: 80px 0;
}
.lf-faq h2 {
text-align: center;
margin-bottom: 40px;
font-size: clamp(28px, 4vw, 36px);
}
.lf-faq-item {
background: #fff;
border: 1px solid var(--bw-border);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 16px;
cursor: pointer;
}
.lf-faq-item summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
} .lf-faq-item summary::after {
content: '+';
font-size: 24px;
color: var(--bw-accent);
margin-left: 16px;
}
.lf-faq-item[open] summary::after {
content: '−';
} .lf-features {
padding: 80px 0;
background: var(--bw-bg-light);
}
.lf-features h2 {
text-align: center;
margin-bottom: 40px;
font-size: clamp(28px, 4vw, 36px);
}
.lf-feature-table {
width: 100%;
table-layout: fixed; border-collapse: collapse;
background: #FFFFFF;
border-radius: 12px;
overflow: hidden;
border: 1px solid #D6E5F2; } .lf-feature-table td, 
.lf-feature-table th {
word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; vertical-align: top; }
.lf-feature-table th {
background: var(--bw-primary);
color: #fff;
padding: 16px;
text-align: left;
}
.lf-feature-table td {
padding: 16px;
border-bottom: 1px solid var(--bw-border);
color: var(--bw-text-body);
} .lf-demo {
padding: 80px 0;
}
.lf-demo h2 {
text-align: center;
margin-bottom: 32px;
font-size: clamp(28px, 4vw, 36px);
} .lf-video-container {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(12, 60, 96, 0.15);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lf-video-container:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(12, 60, 96, 0.25);
}
.lf-video-thumbnail {
position: relative;
width: 100%; padding-bottom: 66.625%; 
background: #000;
}
.lf-video-thumbnail img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
} .lf-video-play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: none;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 2;
}
.lf-video-play-btn:hover {
transform: translate(-50%, -50%) scale(1.15);
} .lf-video-lightbox {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 9999;
animation: fadeIn 0.3s ease; display: none; 
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.lf-lightbox-backdrop {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.92);
cursor: pointer;
}
.lf-lightbox-content {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1200px;
z-index: 10000;
}
.lf-lightbox-close {
position: absolute;
top: -50px; right: 0;
background: none;
border: none;
cursor: pointer;
padding: 8px;
transition: transform 0.2s ease;
}
.lf-lightbox-close:hover {
transform: scale(1.1);
} .lf-lightbox-video {
position: relative;
width: 100%;
padding-bottom: 56.25%; 
background: #000;
border-radius: 8px;
overflow: hidden;
}
.lf-lightbox-video iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: none;
} body.lf-lightbox-open {
overflow: hidden;
} @media (max-width: 768px) {
.lf-video-play-btn svg {
width: 60px; height: 60px;
}
.lf-lightbox-content {
width: 95%;
}
.lf-lightbox-close {
top: -40px; right: -10px;
}
.lf-lightbox-close svg {
width: 28px; height: 28px;
}
} .lf-final-cta {
padding: 80px 0;
background: linear-gradient(135deg, #F6FAFE 0%, #FFFFFF 100%);
}
.lf-cta-box {
text-align: center;
padding: 48px;
background: #fff;
border: 2px solid var(--bw-accent);
border-radius: 20px;
box-shadow: 0 12px 40px rgba(25, 169, 230, 0.15);
}
.lf-cta-box h2 {
margin-bottom: 16px;
font-size: clamp(28px, 4vw, 36px);
} .lf-final-cta .cta {
margin-bottom: 24px; 
} .lf-trust-icons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 600px;
margin: 0 auto 24px;
}
.lf-trust-icons span {
font-size: 14px;
color: var(--bw-text-body);
} @media (max-width: 1024px) {
.lf-hero .container {
grid-template-columns: 1fr;
gap: 40px;
}
.lf-calc-inputs {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.lf-hero {
padding: 60px 0 40px;
}
.lf-hero h1 {
font-size: 32px;
}
.lf-hero-cta {
flex-direction: column;
}
.lf-hero-cta .cta {
width: 100%;
}
.lf-pain-grid {
grid-template-columns: 1fr;
} .lf-pain-item:last-child:nth-child(4) {
grid-column: 1 / span 1;
}
.lf-trust-icons {
grid-template-columns: 1fr;
} .lf-features .card {
overflow-x: auto;
} .lf-feature-table th, 
.lf-feature-table td {
padding: 8px 6px; 
font-size: 12px; 
}
} @media (max-width: 480px) { .lf-features .card {
padding: 0px; overflow-x: hidden; } .lf-feature-table th, 
.lf-feature-table td {
padding: 6px 4px; font-size: 12px; line-height: 1.35; word-break: break-word; hyphens: auto; }  .lf-feature-table th:first-child,
.lf-feature-table td:first-child {
width: 24%; } .lf-feature-table th:nth-child(2),
.lf-feature-table td:nth-child(2),
.lf-feature-table th:nth-child(3),
.lf-feature-table td:nth-child(3) {
width: 38%;
}
}