.landing-header {
background: var(--surface);
border-bottom: 1px solid var(--border-soft);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 100;
}
.landing-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.landing-header .brand-logo img {
border-radius: var(--radius-md);
height: 40px;
width: auto;
max-width: 180px;
}
.landing-phone-cta {
background: var(--primary-blue);
color: white;
padding: 10px 20px;
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: var(--weight-bold);
font-size: 15px;
box-shadow: var(--shadow-card);
transition: var(--transition-bounce);
}
.landing-phone-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(12, 113, 195, 0.3);
}
.landing-footer {
padding: 24px 0;
border-top: 1px solid var(--border-soft);
background: var(--surface);
}
.landing-footer p {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
.landing-footer p + p {
margin-top: 8px;
font-size: 12px;
}
.landing-footer a {
color: var(--text-muted);
text-decoration: none;
}
.landing-footer a:hover {
color: var(--primary-blue);
}
.landing-section-lead {
text-align: center;
color: var(--text-muted);
font-size: 16px;
line-height: 1.55;
max-width: 640px;
margin: -8px auto 32px;
}
.landing-section-lead-top {
margin-top: 0;
margin-bottom: 24px;
}
.landing-guarantees,
.landing-steps,
.landing-reviews,
.landing-bio,
.landing-zones,
.landing-pricing,
.landing-faq,
.landing-final-action {
opacity: 0;
transform: translateY(30px);
animation: section-reveal 0.7s ease forwards;
}
.landing-guarantees { animation-delay: 0.1s; }
.landing-steps { animation-delay: 0.15s; }
.landing-reviews { animation-delay: 0.2s; }
.landing-bio { animation-delay: 0.22s; }
.landing-zones { animation-delay: 0.25s; }
.landing-pricing { animation-delay: 0.28s; }
.landing-faq { animation-delay: 0.3s; }
.landing-final-action { animation-delay: 0.32s; }
.landing-form-section {
opacity: 1;
transform: none;
animation: none;
}
@keyframes section-reveal {
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
}
@media (max-width: 640px) {
.landing-steps,
.landing-reviews,
.landing-faq,
.landing-pricing,
.landing-form-section {
padding: 50px 0;
}
.landing-phone-cta {
font-size: 13px;
padding: 8px 14px;
}
.landing-footer {
padding-bottom: 80px;
}
.btn-cta-green {
font-size: 15px;
padding: 14px 24px;
}
.landing-section-lead {
font-size: 14px;
margin: -4px auto 22px;
padding: 0 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.availability-dot {
animation: none;
}
.btn-cta-green {
animation: none;
}
.landing-guarantees,
.landing-steps,
.landing-reviews,
.landing-bio,
.landing-zones,
.landing-faq,
.landing-pricing,
.landing-form-section,
.landing-final-action {
animation: none;
opacity: 1;
transform: none;
}
}
.landing-guarantees {
padding: 50px 0;
}
.landing-guarantees .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-guarantees-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 960px;
margin: 0 auto;
}
.landing-guarantee-card {
text-align: center;
padding: 30px 24px;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
border: 1px solid var(--border-soft);
transition: transform 0.3s ease;
}
.landing-guarantee-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 38px rgba(15, 23, 42, 0.08);
}
.guarantee-icon {
width: 64px;
height: 64px;
font-size: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--border-soft);
}
.landing-guarantee-card h3 {
font-size: 17px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 12px;
}
.landing-guarantee-card p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
@media (max-width: 640px) {
.landing-guarantees {
padding: 40px 0;
}
.landing-guarantees-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
.landing-steps {
padding: 80px 0;
}
.landing-steps .section-title {
text-align: center;
margin-bottom: 50px;
}
.landing-steps-grid {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
max-width: 960px;
margin: 0 auto;
}
.landing-step {
text-align: center;
flex: 1;
max-width: 260px;
}
.landing-step-connector {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--primary-blue);
font-weight: var(--weight-bold);
padding-top: 40px;
flex-shrink: 0;
}
.landing-step-icon {
font-size: 40px;
display: block;
margin-bottom: 8px;
}
.landing-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--primary-blue);
color: white;
font-weight: var(--weight-bold);
border-radius: 50%;
font-size: 15px;
margin-bottom: 12px;
}
.landing-step h3 {
font-size: 17px;
margin: 0 0 8px;
color: var(--primary-dark);
}
.landing-step p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.55;
}
.landing-steps-stat {
text-align: center;
margin: 36px auto 0;
font-size: 15px;
font-weight: var(--weight-bold);
color: var(--primary-blue);
padding: 12px 28px;
background: rgba(12, 113, 195, 0.08);
border-radius: var(--radius-pill);
display: block;
max-width: fit-content;
}
.landing-steps .text-center {
text-align: center;
}
@media (max-width: 900px) {
.landing-steps-grid {
flex-direction: column;
align-items: center;
gap: 8px;
}
.landing-step-connector {
padding-top: 0;
transform: rotate(90deg);
}
.landing-step {
max-width: 100%;
}
}
.landing-reviews {
padding: 80px 0;
}
.landing-reviews .section-title {
text-align: center;
margin-bottom: 16px;
}
.landing-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.landing-testimonial-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 28px 28px 22px;
box-shadow: var(--shadow-soft);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.landing-testimonial-card::before {
content: '\201C';
position: absolute;
top: -10px;
right: 18px;
font-size: 96px;
color: var(--primary-blue);
opacity: 0.08;
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.landing-testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(12, 113, 195, 0.12);
border-color: var(--primary-light);
}
.testimonial-stars {
color: #fbbf24;
font-size: 18px;
letter-spacing: 3px;
margin-bottom: 12px;
line-height: 1;
}
.testimonial-problem {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--primary-blue);
background: rgba(12, 113, 195, 0.08);
text-transform: uppercase;
letter-spacing: 0.8px;
margin: 0 0 14px;
padding: 5px 12px;
border-radius: var(--radius-pill);
display: inline-block;
}
.testimonial-text {
font-size: 14px;
color: var(--text-dark);
line-height: 1.65;
margin: 0 0 18px;
}
.testimonial-author {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
border-top: 1px solid var(--border-soft);
padding-top: 14px;
}
.testimonial-author strong {
font-size: 14px;
color: var(--text-dark);
font-weight: var(--weight-bold);
}
.testimonial-location {
font-size: 13px;
color: var(--text-muted);
}
@media (max-width: 900px) {
.landing-testimonials-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
.landing-faq {
padding: 80px 0;
}
.landing-faq .section-title {
text-align: center;
margin-bottom: 18px;
}
.landing-faq .landing-section-lead {
text-align: center;
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
max-width: 620px;
margin: 0 auto 40px;
}
.landing-faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-faq-item {
background: var(--surface);
border-radius: 18px;
border: 1.5px solid rgba(12, 113, 195, 0.10);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease,
transform 0.25s ease;
}
.landing-faq-item:hover {
border-color: rgba(12, 113, 195, 0.28);
box-shadow: 0 6px 18px rgba(12, 113, 195, 0.08);
}
.landing-faq-item[open] {
border-color: var(--primary-blue);
box-shadow: 0 10px 30px rgba(12, 113, 195, 0.12);
}
.landing-faq-question {
padding: 22px 24px;
font-size: 16px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
user-select: none;
transition: color 0.2s ease;
line-height: 1.4;
}
.landing-faq-question::-webkit-details-marker {
display: none;
}
.landing-faq-question::marker {
content: '';
}
.landing-faq-question:hover {
color: var(--primary-blue);
}
.faq-chevron {
width: 36px;
height: 36px;
flex-shrink: 0;
position: relative;
border-radius: 999px;
border: 1.5px solid rgba(12, 113, 195, 0.18);
background: rgba(12, 113, 195, 0.04);
transition: border-color 0.25s ease, background-color 0.25s ease,
transform 0.3s ease;
}
.landing-faq-item:hover .faq-chevron {
border-color: rgba(12, 113, 195, 0.32);
background: rgba(12, 113, 195, 0.08);
}
.landing-faq-item[open] .faq-chevron {
border-color: var(--primary-blue);
background: rgba(12, 113, 195, 0.12);
}
.faq-chevron::before,
.faq-chevron::after {
content: '';
position: absolute;
background: var(--primary-blue);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-chevron::before {
width: 12px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.faq-chevron::after {
width: 2px;
height: 12px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.landing-faq-item[open] .faq-chevron::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.landing-faq-answer {
padding: 0 24px 22px;
animation: faq-slide-down 0.3s ease;
}
.landing-faq-answer p {
font-size: 14.5px;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
padding-right: 54px;
}
@keyframes faq-slide-down {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.landing-faq-question {
padding: 18px 18px;
font-size: 14.5px;
gap: 12px;
}
.faq-chevron {
width: 30px;
height: 30px;
}
.faq-chevron::before {
width: 10px;
}
.faq-chevron::after {
height: 10px;
}
.landing-faq-answer {
padding: 0 18px 18px;
}
.landing-faq-answer p {
font-size: 14px;
padding-right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.landing-faq-item,
.landing-faq-item .faq-chevron,
.landing-faq-item .faq-chevron::before,
.landing-faq-item .faq-chevron::after {
transition: none;
}
.landing-faq-answer {
animation: none;
}
}
.landing-faq-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 1100px;
margin: 0 auto 28px;
padding: 0 8px;
}
.landing-faq-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
background: var(--surface);
border: 1.5px solid var(--border-soft);
border-radius: var(--radius-pill, 999px);
color: var(--text-dark);
font-size: 13.5px;
font-weight: var(--weight-medium);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
line-height: 1.2;
font-family: inherit;
}
.landing-faq-pill:hover {
border-color: color-mix(in srgb, var(--primary-blue) 50%, var(--border-soft));
background: color-mix(in srgb, var(--primary-blue) 4%, white);
color: var(--primary-dark);
transform: translateY(-1px);
}
.landing-faq-pill:focus-visible {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
.landing-faq-pill.is-active {
background: var(--primary-blue);
border-color: var(--primary-blue);
color: #ffffff;
box-shadow: 0 6px 16px rgba(12, 113, 195, 0.22);
}
.landing-faq-pill-icon {
font-size: 15px;
line-height: 1;
}
.landing-faq-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: color-mix(in srgb, var(--primary-blue) 10%, white);
color: var(--primary-blue);
border-radius: 999px;
font-size: 11.5px;
font-weight: var(--weight-extra);
font-variant-numeric: tabular-nums;
transition: background-color 0.2s ease, color 0.2s ease;
}
.landing-faq-pill.is-active .landing-faq-pill-count {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
.landing-faq-list--filterable {
max-width: 1100px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-auto-rows: min-content;
align-items: start;
gap: 12px 16px;
}
.landing-faq-list--filterable .landing-faq-item[open] {
grid-column: 1 / -1;
}
.landing-faq-item.is-filtered-out {
display: none;
}
.landing-faq-list--filterable .landing-faq-item:not(.is-filtered-out) {
animation: faq-item-reveal 0.32s ease both;
}
@keyframes faq-item-reveal {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
.landing-faq-list--filterable {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.landing-faq-filters {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 6px;
margin-bottom: 22px;
scroll-snap-type: x proximity;
}
.landing-faq-filters::-webkit-scrollbar {
display: none;
}
.landing-faq-pill {
flex-shrink: 0;
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.landing-faq-list--filterable .landing-faq-item:not(.is-filtered-out) {
animation: none;
}
.landing-faq-pill {
transition: none;
}
}
.landing-bio {
padding: 80px 0;
}
.landing-bio .section-title {
text-align: center;
margin: 0 auto 40px;
}
.landing-bio-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: center;
max-width: 980px;
margin: 0 auto;
}
.landing-bio-photo-wrap {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
}
.landing-bio-photo {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
border: 6px solid var(--surface);
}
.landing-bio-photo-badge {
position: absolute;
bottom: 6px;
right: -8px;
background: var(--primary-blue);
color: white;
font-weight: var(--weight-bold);
font-size: 14px;
padding: 8px 14px;
border-radius: var(--radius-pill);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}
.landing-bio-title {
font-size: 22px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 14px;
line-height: 1.3;
}
.landing-bio-lead {
font-size: 17px;
color: var(--primary-dark);
font-weight: var(--weight-medium);
line-height: 1.5;
margin: 0 0 14px;
}
.landing-bio-text {
font-size: 15px;
color: var(--text-muted);
line-height: 1.65;
margin: 0 0 12px;
}
.landing-bio-facts {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
border-top: 1px solid var(--border-soft);
padding-top: 20px;
}
.landing-bio-facts li {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.landing-bio-fact-value {
font-size: 22px;
font-weight: var(--weight-bold);
color: var(--primary-blue);
line-height: 1.1;
}
.landing-bio-fact-label {
font-size: 12px;
color: var(--text-muted);
line-height: 1.3;
margin-top: 4px;
}
@media (max-width: 900px) {
.landing-bio-grid {
grid-template-columns: 1fr;
gap: 28px;
text-align: center;
}
.landing-bio-photo-wrap {
width: 220px;
height: 220px;
}
.landing-bio-title,
.landing-bio-lead,
.landing-bio-text {
text-align: center;
}
.landing-bio-facts {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.landing-bio-facts li {
align-items: center;
text-align: center;
}
}
@media (max-width: 640px) {
.landing-bio {
padding: 50px 0;
}
.landing-bio .section-title {
margin-bottom: 30px;
}
.landing-bio-photo-wrap {
width: 180px;
height: 180px;
}
.landing-bio-title {
font-size: 19px;
}
.landing-bio-lead {
font-size: 15px;
}
.landing-bio-text {
font-size: 14px;
}
.landing-bio-fact-value {
font-size: 18px;
}
}
.landing-pricing {
padding: 80px 0;
}
.landing-pricing .section-title {
text-align: center;
margin-bottom: 28px;
}
.landing-pricing-card {
position: relative;
max-width: 1120px;
margin: 0 auto;
padding: clamp(28px, 4vw, 48px);
background: linear-gradient(180deg, var(--surface) 0%, #FAFCFF 100%);
border: 1px solid var(--border-soft);
border-top: 4px solid var(--primary-blue);
border-radius: var(--radius-xl);
box-shadow: 0 24px 60px rgba(12, 113, 195, 0.10);
text-align: center;
overflow: hidden;
}
.landing-pricing-eyebrow {
}
.landing-pricing-comparison {
font-size: 14px;
color: var(--text-muted);
font-style: italic;
margin: 0 0 24px;
line-height: 1.5;
text-align: center;
}
.landing-pricing-grid {
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
gap: 28px;
align-items: stretch;
margin-bottom: 28px;
text-align: left;
}
.landing-pricing-rate {
background: linear-gradient(135deg, var(--primary-light) 0%, #ffffff 100%);
border: 1px solid rgba(12, 113, 195, 0.18);
border-radius: var(--radius-lg);
padding: 28px 24px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.landing-pricing-rate-label {
display: block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--primary-blue);
margin-bottom: 4px;
}
.landing-pricing-amounts {
display: flex;
align-items: baseline;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.landing-price-gross {
font-size: 22px;
color: var(--text-muted);
text-decoration: line-through;
font-weight: var(--weight-medium);
}
.landing-price-arrow {
font-size: 22px;
color: var(--primary-blue);
font-weight: var(--weight-bold);
}
.landing-price-net {
font-size: clamp(38px, 6vw, 50px);
font-weight: var(--weight-extra);
color: var(--primary-dark);
letter-spacing: -0.02em;
line-height: 1;
}
.landing-price-caption {
font-size: 13px;
color: var(--text-muted);
margin: 8px 0 0;
}
.landing-pricing-includes {
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-pricing-includes-label {
display: block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--primary-blue);
margin-bottom: 12px;
}
.landing-pricing-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 22px;
text-align: left;
}
.landing-pricing-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 4px 0;
font-size: 14px;
color: var(--text-dark);
line-height: 1.45;
}
.landing-pricing-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: var(--weight-bold);
flex-shrink: 0;
}
.landing-pricing-trust {
font-size: 11px;
color: var(--text-muted);
text-align: center;
margin: 18px 0 0;
letter-spacing: 0.02em;
}
.landing-pricing-trust strong {
color: var(--primary-dark);
font-weight: var(--weight-bold);
}
.landing-pricing-card .triple-cta-group {
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 900px) {
.landing-pricing-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.landing-pricing-rate {
padding: 22px 20px;
}
.landing-pricing-includes {
text-align: center;
}
.landing-pricing-includes-label {
text-align: center;
}
.landing-pricing-list {
text-align: left;
max-width: 580px;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.landing-pricing-card {
padding: 22px 18px;
border-radius: var(--radius-lg);
max-width: 100%;
}
.landing-pricing-comparison {
font-size: 13px;
margin-bottom: 18px;
}
.landing-pricing-rate {
padding: 16px 12px;
margin-bottom: 18px;
}
.landing-pricing-amounts {
gap: 10px;
}
.landing-price-gross {
font-size: 18px;
}
.landing-price-arrow {
font-size: 18px;
}
.landing-price-net {
font-size: 36px;
}
.landing-price-caption {
font-size: 12px;
}
.landing-pricing-list {
grid-template-columns: 1fr;
gap: 4px;
margin-bottom: 18px;
}
.landing-pricing-list li {
font-size: 13px;
}
.landing-pricing-trust {
font-size: 10px;
margin-top: 14px;
}
}
.pricing-anchor {
padding: 56px 0;
}
.pricing-anchor .section-title {
text-align: center;
margin-bottom: 28px;
}
.pricing-anchor-card {
position: relative;
max-width: 1120px;
margin: 0 auto;
padding: clamp(24px, 3.5vw, 40px);
background: linear-gradient(180deg, var(--surface) 0%, #FAFCFF 100%);
border: 1px solid var(--border-soft);
border-top: 4px solid var(--primary-blue);
border-radius: var(--radius-xl);
box-shadow: 0 24px 60px rgba(12, 113, 195, 0.10);
text-align: center;
overflow: hidden;
}
.pricing-anchor-grid {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 280px);
gap: 28px;
align-items: center;
margin: 18px 0 22px;
text-align: left;
}
.pricing-anchor-seal {
display: flex;
align-items: center;
justify-content: center;
}
.pricing-anchor-logo {
display: block;
width: auto;
max-width: 100%;
max-height: 140px;
height: auto;
object-fit: contain;
}
.pricing-anchor-rate {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.pricing-anchor-amounts {
display: flex;
align-items: baseline;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.pricing-anchor-gross {
font-size: 22px;
color: var(--text-muted);
text-decoration: line-through;
font-weight: var(--weight-medium);
}
.pricing-anchor-arrow {
font-size: 22px;
color: var(--primary-blue);
font-weight: var(--weight-bold);
}
.pricing-anchor-net {
font-size: clamp(38px, 5.5vw, 52px);
font-weight: var(--weight-extra);
color: var(--primary-dark);
letter-spacing: -0.02em;
line-height: 1;
}
.pricing-anchor-caption {
font-size: 14px;
color: var(--text-muted);
margin: 6px 0 0;
line-height: 1.4;
}
.pricing-anchor-caption strong {
color: var(--primary-dark);
font-weight: var(--weight-bold);
}
.pricing-anchor-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.pricing-anchor-cta .btn-primary {
width: 100%;
text-align: center;
}
.pricing-anchor-cta-callback {
font-size: 13px;
color: var(--primary-blue);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.15s ease;
}
.pricing-anchor-cta-callback:hover {
color: var(--primary-dark);
}
.pricing-anchor-bullets {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px 22px;
text-align: left;
border-top: 1px solid var(--border-soft);
padding-top: 18px;
}
.pricing-anchor-bullets li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--text-dark);
line-height: 1.45;
}
.pricing-anchor-check {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: var(--weight-bold);
flex-shrink: 0;
margin-top: 1px;
}
.pricing-anchor-trust {
font-size: 11px;
color: var(--text-muted);
text-align: center;
margin: 0;
letter-spacing: 0.02em;
}
.pricing-anchor-trust strong {
color: var(--primary-dark);
font-weight: var(--weight-bold);
}
.pricing-anchor-trust-link {
color: var(--primary-blue);
font-weight: var(--weight-medium);
text-decoration: underline;
text-underline-offset: 2px;
}
.pricing-anchor-trust-link:hover {
color: var(--primary-dark);
}
.pricing-anchor-trust-link:focus-visible {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
@media (max-width: 900px) {
.pricing-anchor {
padding: 44px 0;
}
.pricing-anchor-grid {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.pricing-anchor-seal {
max-width: 220px;
margin: 0 auto;
}
.pricing-anchor-logo {
max-height: 120px;
}
.pricing-anchor-cta {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.pricing-anchor-cta .btn-primary {
width: auto;
min-width: 220px;
}
.pricing-anchor-bullets {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.pricing-anchor {
padding: 36px 0;
}
.pricing-anchor-card {
padding: 22px 18px;
border-radius: var(--radius-lg);
}
.pricing-anchor-grid {
grid-template-columns: 1fr;
gap: 16px;
margin: 14px 0 18px;
}
.pricing-anchor-seal {
max-width: 200px;
margin: 0 auto;
}
.pricing-anchor-logo {
max-height: 100px;
}
.pricing-anchor-amounts {
gap: 10px;
}
.pricing-anchor-gross {
font-size: 18px;
}
.pricing-anchor-arrow {
font-size: 18px;
}
.pricing-anchor-net {
font-size: 38px;
}
.pricing-anchor-caption {
font-size: 13px;
}
.pricing-anchor-cta {
grid-column: auto;
flex-direction: column;
gap: 10px;
}
.pricing-anchor-cta .btn-primary {
width: 100%;
min-width: 0;
}
.pricing-anchor-bullets {
grid-template-columns: 1fr;
gap: 8px;
padding-top: 14px;
}
.pricing-anchor-bullets li {
font-size: 13px;
}
.pricing-anchor-trust {
font-size: 10px;
}
}
.landing-zones {
padding: 80px 0;
}
.landing-zones-eyebrow {
display: block;
text-align: center;
color: var(--primary-blue);
font-weight: var(--weight-bold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 8px;
}
.landing-zones .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-zones-card {
max-width: 880px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
padding: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.landing-zones-block-title {
font-size: 15px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary-light);
}
.landing-zones-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.landing-zones-list li {
background: var(--bg-alt, #f8fafc);
color: var(--primary-dark);
font-size: 13px;
font-weight: var(--weight-medium);
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-soft);
}
.landing-zones-list-soft li {
background: transparent;
color: var(--text-muted);
border-style: dashed;
}
.landing-zones-cta {
text-align: center;
margin-top: 24px;
margin-bottom: 0;
}
.landing-zones-link {
color: var(--primary-blue);
font-weight: var(--weight-bold);
text-decoration: none;
font-size: 15px;
border-bottom: 2px solid transparent;
transition: border-color 0.2s;
}
.landing-zones-link:hover {
border-bottom-color: var(--primary-blue);
}
@media (max-width: 900px) {
.landing-zones-card {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px;
}
}
@media (max-width: 640px) {
.landing-zones {
padding: 50px 0;
}
.landing-zones-card {
padding: 20px;
}
.landing-zones-block-title {
font-size: 14px;
}
.landing-zones-list li {
font-size: 12px;
padding: 5px 10px;
}
}
.local-coverage {
padding: 80px 0;
}
.local-coverage-header {
max-width: 720px;
margin: 0 auto 40px;
text-align: center;
}
.local-coverage-eyebrow {
display: block;
color: var(--primary-blue);
font-weight: var(--weight-bold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 8px;
}
.local-coverage-header .section-title {
margin-bottom: 12px;
}
.local-coverage-intro {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.local-coverage-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.local-coverage-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
padding: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.local-coverage-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}
.local-coverage-card-title {
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 10px;
}
.local-coverage-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.local-coverage-distance,
.local-coverage-postal {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: var(--weight-medium);
padding: 4px 10px;
border-radius: var(--radius-pill);
}
.local-coverage-distance {
background: var(--primary-light);
color: var(--primary-blue);
}
.local-coverage-postal {
background: var(--bg-alt, #f8fafc);
color: var(--text-muted);
border: 1px solid var(--border-soft);
}
.local-coverage-card-desc {
color: var(--text-muted);
font-size: 14px;
line-height: 1.65;
margin: 0;
}
@media (max-width: 640px) {
.local-coverage {
padding: 50px 0;
}
.local-coverage-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.local-coverage-card {
padding: 20px;
}
}
.landing-services {
padding: 60px 0;
}
.landing-services .section-title {
text-align: center;
margin-bottom: 8px;
}
.landing-services-intro {
text-align: center;
font-size: 15px;
color: var(--text-muted);
margin: 0 0 36px;
}
.landing-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.landing-service-card {
position: relative;
display: block;
background: var(--surface);
border-radius: var(--radius-lg);
padding: 24px 18px;
text-align: center;
border: 1px solid var(--border-soft);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
color: inherit;
text-decoration: none;
}
.landing-service-card:hover,
.landing-service-card:focus-visible {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(12, 113, 195, 0.1);
border-color: var(--primary-blue);
text-decoration: none;
}
.landing-service-card:focus-visible {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
.landing-service-icon {
display: block;
font-size: 32px;
margin-bottom: 10px;
line-height: 1;
}
.landing-service-body {
display: block;
}
.landing-service-title {
font-size: 15px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 6px;
line-height: 1.3;
}
.landing-service-desc {
font-size: 13px;
color: var(--text-muted);
margin: 0;
line-height: 1.45;
}
@media (max-width: 640px) {
.landing-services {
padding: 44px 0;
}
.landing-services-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.landing-service-icon {
font-size: 26px;
}
.landing-service-title {
font-size: 14px;
}
.landing-service-card.is-stretch {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
text-align: left;
padding: 16px 18px;
}
.landing-service-card.is-stretch .landing-service-icon {
font-size: 32px;
margin: 0;
flex-shrink: 0;
}
.landing-service-card.is-stretch .landing-service-body {
flex: 1;
min-width: 0;
}
.landing-service-card.is-stretch .landing-service-title {
margin: 0 0 4px;
}
}
.landing-form-section {
padding: 80px 0;
}
.landing-form-card {
background: var(--surface);
border-radius: var(--radius-xl);
padding: clamp(28px, 5vw, 48px);
box-shadow: 0 12px 40px rgba(12, 113, 195, 0.12);
max-width: 480px;
margin: 0 auto;
border: 2px solid var(--primary-blue);
}
.landing-form-card .section-title {
text-align: center;
}
@media (max-width: 640px) {
.landing-form-card {
padding: 24px;
}
}
.landing-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
padding: 12px 16px;
background: var(--surface);
border-top: 1px solid var(--border-soft);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(100%);
transition: transform 0.35s ease;
}
.landing-sticky-cta.visible {
transform: translateY(0);
}
.landing-sticky-btn {
width: 100%;
font-size: 16px;
padding: 14px 20px;
}
@media (min-width: 901px) {
.landing-sticky-cta {
display: none;
}
}
.landing-booking {
background: linear-gradient(
to bottom,
var(--bg-alt)       0%,
var(--primary-light) 12%,
var(--primary-light) 88%,
var(--bg-alt)       100%
);
}
.landing-final-action {
padding: 80px 0;
}
.landing-final-header {
text-align: center;
max-width: 720px;
margin: 0 auto 20px;
}
.landing-final-eyebrow {
display: inline-block;
color: var(--primary-blue);
font-weight: var(--weight-bold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 8px;
}
.landing-final-phone-cta {
margin-top: 24px;
margin-bottom: 24px;
}
.landing-final-phone-cta .btn-phone {
font-size: 16px;
padding: 16px 32px;
box-shadow: 0 4px 16px rgba(12, 113, 195, 0.15);
border-radius: var(--radius-pill);
}
.landing-final-or-text {
display: inline-block;
position: relative;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 auto;
}
.landing-final-or-text::before,
.landing-final-or-text::after {
content: '';
position: absolute;
top: 50%;
width: 40px;
height: 1px;
background: var(--border-soft);
}
.landing-final-or-text::before {
right: 100%;
margin-right: 12px;
}
.landing-final-or-text::after {
left: 100%;
margin-left: 12px;
}
.landing-final-grid {
display: grid;
grid-template-columns: minmax(0, 480px) minmax(0, 480px);
grid-template-areas:
"ptrA ptrB"
"form book";
column-gap: 32px;
row-gap: 14px;
justify-content: center;
align-items: stretch;
margin: 0 auto;
}
.landing-final-pointer-form    { grid-area: ptrA; }
.landing-final-pointer-booking { grid-area: ptrB; }
.landing-final-form            { grid-area: form; }
.landing-final-booking         { grid-area: book; }
.landing-final-pointer {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding-bottom: 6px;
}
.landing-final-pointer-label {
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--primary-dark);
display: flex;
align-items: center;
gap: 8px;
}
.landing-final-pointer-label strong {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary-dark);
font-weight: var(--weight-bold);
background: #fff;
padding: 4px 10px;
border-radius: var(--radius-pill);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
border: 1px solid var(--border-soft);
}
.landing-final-pointer-label .pointer-sep {
opacity: 0.3;
}
.landing-final-pointer-form .landing-final-pointer-icon {
color: var(--success-green);
animation: landing-pointer-bounce 1.5s ease-in-out infinite;
}
.landing-final-pointer-booking .landing-final-pointer-icon {
color: var(--primary-blue);
animation: landing-pointer-bounce 1.5s ease-in-out infinite;
animation-delay: 0.75s;
}
@keyframes landing-pointer-bounce {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
.landing-final-pointer-form .landing-final-pointer-icon,
.landing-final-pointer-booking .landing-final-pointer-icon { animation: none; }
}
.landing-final-booking {
display: flex;
flex-direction: column;
scroll-margin-top: 18vh;
}
.landing-final-booking .si-booking-widget {
margin: 0;
width: 100%;
max-width: none;
height: 100%;
}
.landing-final-form {
position: relative;
background: linear-gradient(180deg, var(--surface) 0%, #FAFCFF 100%);
border: 1px solid var(--border-soft);
border-top: 4px solid var(--success-green);
border-radius: var(--radius-xl);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
scroll-margin-top: 18vh;
}
.landing-final-form-inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 36px 32px;
}
.landing-final-form-head {
text-align: center;
margin-bottom: 24px;
}
.landing-final-form-title {
font-size: 22px;
font-weight: var(--weight-extra);
color: var(--primary-dark);
margin: 0 0 8px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.landing-final-form-sub {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.landing-final-reassurance {
max-width: 720px;
margin: 32px auto 0;
text-align: center;
color: var(--text-muted);
font-size: 14px;
padding: 14px 20px;
background: var(--surface);
border-radius: var(--radius-md);
border: 1px dashed var(--border-soft);
}
.landing-final-reassurance span {
margin-right: 6px;
}
@media (max-width: 900px) {
.landing-final-grid {
grid-template-columns: minmax(0, 480px);
grid-template-areas:
"ptrA"
"form"
"ptrB"
"book";
column-gap: 0;
row-gap: 12px;
justify-content: center;
}
.landing-final-pointer-booking {
margin-top: 14px;
}
.landing-final-form-inner {
justify-content: flex-start;
padding: 32px 28px;
}
.landing-final-booking .si-booking-widget {
height: auto;
}
}
@media (max-width: 640px) {
.landing-final-action {
padding: 50px 0;
}
.landing-final-form-inner {
padding: 28px 20px;
}
.landing-final-form-title {
font-size: 19px;
}
.landing-final-form-sub {
font-size: 14px;
}
.landing-final-form-head {
margin-bottom: 20px;
}
}
.landing-hero {
padding: var(--hero-padding-top-mobile) 0 var(--hero-padding-bottom-mobile);
}
@media (min-width: 901px) {
.landing-hero {
padding-top: var(--hero-padding-top-desktop);
padding-bottom: var(--hero-padding-bottom-desktop);
}
}
.landing-hero-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: center;
}
.landing-hero-content {
max-width: 640px;
}
.landing-hero h1 {
font-size: clamp(28px, 4.5vw, 44px);
line-height: 1.05;
margin: 16px 0 12px;
color: var(--primary-dark);
letter-spacing: -2px;
}
.landing-hero h1 span {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline;
padding-bottom: 0.12em;
}
.landing-hero-subtitle {
font-size: 15px;
color: var(--primary-blue);
font-weight: var(--weight-medium);
letter-spacing: 1px;
margin: 0 0 16px;
}
.landing-hero-text {
font-size: clamp(16px, 2vw, 18px);
color: var(--text-muted);
line-height: 1.65;
margin: 0 0 28px;
}
.landing-hero .hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.landing-hero--service .landing-hero-grid {
grid-template-columns: 1fr 480px;
gap: 56px;
}
.landing-hero-mobile-visual {
display: block;
}
@media (min-width: 641px) {
.landing-hero-mobile-visual {
display: none !important;
}
}
@media (max-width: 1100px) {
.landing-hero--service .landing-hero-grid {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
.landing-hero--service .landing-hero-content {
display: contents;
}
.landing-hero--service .hero-badge { order: 0; }
.landing-hero--service h1 { order: 1; }
.landing-hero--service .landing-hero-subtitle { order: 2; }
.landing-hero--service .landing-hero-visual {
order: 3;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.landing-hero--service .landing-hero-text { order: 4; }
.landing-hero--service .triple-cta-group { order: 5; margin: 0; }
.landing-hero--service .hero-reassurance { order: 6; }
.landing-hero--service .hero-micro-testimonial { order: 7; }
}
.landing-hero--pricing .landing-hero-grid {
grid-template-columns: 1fr minmax(360px, 430px);
gap: 56px;
}
.landing-hero--pricing .landing-hero-content,
.landing-hero--pricing .landing-hero-visual,
.hero-pricing-summary {
min-width: 0;
}
.hero-pricing-summary {
position: relative;
width: 100%;
max-width: 430px;
padding: 24px;
background: linear-gradient(180deg, var(--surface) 0%, var(--primary-light) 140%);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.hero-pricing-summary::before {
content: "";
position: absolute;
inset: auto -24px -48px auto;
width: 170px;
height: 170px;
background: var(--primary-blue);
opacity: 0.08;
border-radius: 50%;
pointer-events: none;
}
.hero-pricing-summary > * {
position: relative;
z-index: 1;
}
.hero-pricing-summary-flow {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: stretch;
margin-bottom: 14px;
}
.hero-pricing-summary-tile {
display: flex;
min-height: 110px;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-subtle);
}
.hero-pricing-summary-tile.is-credit {
background: var(--primary-light);
}
.hero-pricing-summary-label {
display: block;
color: var(--text-muted);
font-size: 12px;
font-weight: var(--weight-bold);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.hero-pricing-summary-value {
display: block;
color: var(--primary-dark);
font-size: 28px;
font-weight: var(--weight-black);
line-height: 1;
}
.hero-pricing-summary-operator {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
align-self: center;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 50%;
color: var(--primary-blue);
font-size: 18px;
font-weight: var(--weight-black);
box-shadow: var(--shadow-subtle);
}
.hero-pricing-summary-net {
padding: 20px;
background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
border-radius: var(--radius-lg);
color: var(--surface);
text-align: center;
box-shadow: var(--shadow-soft);
}
.hero-pricing-summary-net .hero-pricing-summary-label {
color: var(--surface);
opacity: 0.86;
}
.hero-pricing-summary-net strong {
display: block;
margin-top: 6px;
color: var(--surface);
font-size: clamp(38px, 5vw, 52px);
font-weight: var(--weight-black);
letter-spacing: -1.5px;
line-height: 1;
}
.hero-pricing-summary-note {
margin: 14px 0 0;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
.hero-pricing-summary-checks {
display: grid;
gap: 8px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.hero-pricing-summary-checks li {
display: flex;
gap: 8px;
align-items: flex-start;
color: var(--primary-dark);
font-size: 13px;
font-weight: var(--weight-medium);
line-height: 1.35;
}
.hero-pricing-summary-checks li::before {
content: "✓";
flex-shrink: 0;
color: var(--primary-blue);
font-weight: var(--weight-black);
}
@media (max-width: 1100px) {
.landing-hero--pricing .landing-hero-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.landing-hero--pricing .landing-hero-content {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.landing-hero--pricing .landing-hero-visual {
justify-content: center;
width: 100%;
max-width: 520px;
margin: 0 auto;
}
}
.landing-hero-founder-mobile {
display: contents;
}
.landing-hero-author-card {
display: none;
}
.landing-hero-author-card--under-photo {
display: none;
}
.landing-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.landing-hero-photo-wrap {
position: relative;
width: fit-content;
margin: 0 auto;
}
.landing-founder-photo {
width: 280px;
height: 280px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--primary-blue);
box-shadow: 0 12px 40px rgba(12, 113, 195, 0.2);
display: block;
}
.landing-hero-badge-price {
position: absolute;
bottom: 20px;
right: -20px;
background: var(--primary-blue);
color: white;
padding: 10px 18px;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: 0 6px 20px rgba(12, 113, 195, 0.3);
}
.badge-price-value {
display: block;
font-size: 22px;
font-weight: var(--weight-extra);
line-height: 1.1;
}
.badge-price-label {
font-size: 11px;
opacity: 0.9;
}
.landing-hero-badge-exp {
position: absolute;
top: 10px;
right: -20px;
background: var(--surface);
color: var(--text-dark);
padding: 8px 14px;
border-radius: var(--radius-lg);
font-size: 13px;
font-weight: var(--weight-medium);
box-shadow: var(--shadow-card);
}
.landing-hero-badge-exp span {
font-weight: var(--weight-extra);
color: var(--primary-blue);
}
.hero-micro-testimonial {
background: linear-gradient(180deg, var(--surface) 0%, var(--primary-light) 140%);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 18px 20px;
margin-top: 12px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.micro-testimonial-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.micro-testimonial-reviewer {
display: flex;
align-items: center;
gap: 10px;
}
.micro-review-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.micro-review-avatar-placeholder {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary-blue);
color: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: var(--weight-bold);
flex-shrink: 0;
}
.micro-review-name {
display: block;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
text-decoration: none;
line-height: 1.3;
}
.micro-review-name:hover {
color: var(--primary-blue);
}
.micro-review-date {
display: block;
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
.micro-testimonial-google-badge {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.google-badge-label {
font-size: 11px;
color: var(--text-muted);
font-weight: var(--weight-medium);
}
.micro-testimonial-stars {
color: #facc15;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.micro-testimonial-text {
font-size: 13px;
color: var(--text-dark);
font-style: italic;
text-align: left;
margin: 0;
line-height: 1.6;
}
.micro-review-more {
color: var(--primary-blue);
font-style: normal;
font-weight: var(--weight-medium);
text-decoration: none;
white-space: nowrap;
font-size: 12px;
}
.micro-review-more:hover {
text-decoration: underline;
}
@media (max-width: 900px) {
.landing-hero-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 24px;
}
.landing-hero-content {
display: contents;
}
.landing-hero--pricing .landing-hero-content {
display: block;
}
.landing-hero-content .hero-badge { order: 0; }
.landing-hero-content h1 { order: 1; margin: 0; }
.landing-hero-subtitle { order: 2; margin: 0; }
.landing-hero-visual {
order: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.landing-hero--pricing .landing-hero-visual {
order: initial;
}
.landing-hero-text { order: 4; }
.landing-hero .triple-cta-group { order: 5; margin: 0; }
.hero-reassurance { order: 6; }
.hero-micro-testimonial { order: 7; }
.landing-hero-content:has(.hero-reassurance-top) .hero-reassurance-top { order: 3; }
.landing-hero-content:has(.hero-reassurance-top) .landing-hero-visual { order: 4; }
.landing-hero-content:has(.hero-reassurance-top) .landing-hero-text { order: 5; }
.landing-hero-content:has(.hero-reassurance-top) .triple-cta-group { order: 6; }
.landing-hero-content:has(.hero-reassurance-top) .hero-reassurance-bottom { order: 7; }
.landing-hero-content:has(.hero-reassurance-top) .hero-micro-testimonial { order: 8; }
.landing-hero .triple-cta-group.justify-content-start {
justify-content: center;
}
.landing-founder-photo {
width: 180px;
height: 180px;
}
.landing-hero-badge-exp {
right: -15px;
top: -5px;
}
.landing-hero-badge-price {
bottom: 0;
right: -15px;
}
.landing-hero--service .landing-hero-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.landing-hero--pricing .landing-hero-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.hero-pricing-summary {
max-width: 520px;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.landing-hero {
padding-top: var(--hero-padding-top-mobile);
padding-bottom: var(--hero-padding-bottom-mobile);
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
row-gap: 12px;
text-align: left;
align-items: start;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-content,
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-visual {
display: contents;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-content h1 {
grid-column: 1;
grid-row: 1;
align-self: stretch;
margin: 0;
padding-right: 80px;
text-align: left;
line-height: 1.16;
max-width: none;
text-wrap: balance;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-content h1[data-hero-dynamic] .hero-title-slot {
display: block;
margin-top: 10px;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-founder-mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
grid-column: 1;
grid-row: 1;
width: 76px;
justify-self: end;
align-self: center;
margin: 0;
z-index: 1;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-founder-mobile .landing-hero-photo-wrap {
margin: 0;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-founder-mobile .landing-hero-author-card--under-photo {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 100%;
text-align: center;
line-height: 1.22;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-founder-mobile .author-card-name {
color: var(--primary-dark);
font-size: 12px;
font-weight: var(--weight-extra);
letter-spacing: -0.01em;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-founder-mobile .author-card-exp {
color: var(--text-muted);
font-size: 10px;
font-weight: var(--weight-medium);
line-height: 1.2;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-subtitle {
grid-column: 1 / -1;
grid-row: 2;
margin: 2px 0 0;
text-align: center;
line-height: 1.5;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .hero-reassurance-top {
grid-column: 1 / -1;
grid-row: 3;
margin: 0;
gap: 10px;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .hero-sap-seal {
grid-column: 1 / -1;
grid-row: 4;
max-width: none;
margin: 0;
padding: 6px 10px;
gap: 8px;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .hero-sap-seal--before-cta {
margin: 0;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .triple-cta-group {
grid-column: 1 / -1;
grid-row: 5;
margin: 4px 0 0;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .hero-reassurance-bottom {
display: none;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .hero-micro-testimonial {
display: none;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-founder-photo {
width: 72px;
height: 72px;
border-width: 2px;
}
.landing-hero--pricing {
padding-bottom: 48px;
}
.landing-hero--service .landing-hero-grid,
.landing-hero--pricing .landing-hero-grid {
display: flex;
flex-direction: column;
gap: 14px;
text-align: center;
}
.landing-hero-content .hero-badge { display: none; }
.landing-hero-text { display: none; }
.hero-badge { display: none; }
.landing-hero h1 {
font-size: 26px;
}
.landing-hero--service .landing-hero-content {
display: flex;
width: 100%;
max-width: 100%;
flex-direction: column;
align-items: center;
gap: 14px;
}
.landing-hero--pricing h1 {
max-width: 22rem;
margin-left: auto;
margin-right: auto;
line-height: 1.08;
letter-spacing: -1.2px;
}
.landing-hero--pricing .landing-hero-subtitle {
max-width: 22rem;
margin-left: auto;
margin-right: auto;
line-height: 1.45;
letter-spacing: 0.3px;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-visual {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 360px;
margin: 0 auto;
}
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-photo-wrap {
margin: 0;
}
.landing-founder-photo {
width: 96px;
height: 96px;
border-width: 3px;
flex-shrink: 0;
}
.landing-hero--service .landing-hero-mobile-visual {
display: block !important;
width: 100%;
margin: 0 auto 2px;
}
.landing-hero--service .landing-hero-visual {
display: none;
}
.hero-pricing-summary {
width: 100%;
padding: 16px;
border-radius: var(--radius-lg);
max-width: 100%;
box-sizing: border-box;
}
.landing-hero--pricing .landing-hero-visual {
width: 100%;
max-width: 100%;
align-items: stretch;
}
.landing-hero--pricing .landing-hero-content {
width: 100%;
max-width: 100%;
}
.landing-hero--pricing .hero-reassurance,
.landing-hero--pricing .hero-micro-testimonial {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.hero-pricing-summary-flow {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 10px;
}
.hero-pricing-summary-tile {
min-height: auto;
padding: 12px 14px;
gap: 5px;
}
.hero-pricing-summary-operator {
width: 24px;
height: 24px;
margin: 0 auto;
font-size: 15px;
}
.hero-pricing-summary-value {
font-size: 24px;
}
.hero-pricing-summary-net {
padding: 16px 14px;
}
.hero-pricing-summary-net strong {
font-size: 38px;
}
.hero-pricing-summary-note {
font-size: 12px;
}
.hero-pricing-summary-checks li {
font-size: 12px;
text-align: left;
}
.landing-hero-badge-price,
.landing-hero-badge-exp {
display: none;
}
.landing-hero-author-card {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
line-height: 1.35;
}
.author-card-name {
color: var(--primary-dark);
font-size: 18px;
font-weight: var(--weight-extra);
}
.author-card-role {
color: var(--primary-blue);
font-size: 13px;
font-weight: var(--weight-bold);
}
.author-card-exp {
color: var(--text-muted);
font-size: 13px;
}
.hero-micro-testimonial {
padding: 12px 14px;
font-size: 13px;
}
.micro-testimonial-text {
font-size: 13px;
}
.micro-testimonial-author {
font-size: 11px;
}
}
.landing-service-details {
padding: 80px 0;
}
.landing-service-details .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-service-details .landing-section-lead {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.landing-service-details-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 12px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-align: center;
margin-bottom: 14px;
}
.landing-service-details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.landing-service-detail-card {
background: var(--surface);
padding: 36px 28px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-subtle);
text-align: center;
transition: var(--transition);
}
.landing-service-detail-card:hover {
box-shadow: var(--shadow-card);
transform: translateY(-5px);
border-color: var(--primary-blue);
}
.landing-service-detail-icon {
font-size: 44px;
display: block;
margin-bottom: 20px;
transition: var(--transition);
}
.landing-service-detail-card:hover .landing-service-detail-icon {
transform: scale(1.1);
}
.landing-service-detail-card h3 {
font-size: 19px;
font-weight: var(--weight-extra);
margin-bottom: 12px;
color: var(--primary-dark);
}
.landing-service-detail-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.7;
margin: 0;
}
@media (max-width: 1024px) {
.landing-service-details-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.landing-service-details {
padding: 50px 0;
}
.landing-service-details-grid {
grid-template-columns: 1fr;
}
.landing-service-detail-card {
padding: 28px 20px;
}
}
.landing-related-services {
padding: 80px 0;
}
.landing-related-services .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-related-services .landing-section-lead {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.landing-related-services-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 12px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-align: center;
margin-bottom: 14px;
}
.landing-related-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-top: 36px;
}
.landing-related-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 28px 20px;
background: var(--surface);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--primary-dark);
border: 1px solid var(--border-soft);
transition: var(--transition);
text-align: center;
box-shadow: var(--shadow-subtle);
}
.landing-related-card:hover {
border-color: var(--primary-blue);
box-shadow: var(--shadow-card);
transform: translateY(-4px);
}
.landing-related-card-icon {
font-size: 32px;
line-height: 1;
}
.landing-related-card-title {
font-size: 14px;
font-weight: var(--weight-extra);
color: var(--primary-dark);
}
@media (max-width: 640px) {
.landing-related-services {
padding: 50px 0;
}
.landing-related-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.landing-related-card {
padding: 20px 14px;
}
.landing-related-card-icon {
font-size: 28px;
}
}
.landing-why {
padding: 80px 0;
}
.landing-why .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-why-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 12px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-align: center;
margin-bottom: 14px;
}
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 960px;
margin: 40px auto 0;
}
.why-grid--2x2 {
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
}
.why-grid--4col {
grid-template-columns: repeat(4, 1fr);
max-width: 1280px;
}
.why-card {
text-align: center;
padding: 30px 24px;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
border: 1px solid var(--border-soft);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 38px rgba(15, 23, 42, 0.08);
}
.why-card-icon {
width: 64px;
height: 64px;
font-size: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-blue);
box-shadow: inset 0 0 0 1px var(--border-soft);
}
.why-card-title {
font-size: 17px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 12px;
line-height: 1.3;
}
.why-card-text {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.55;
}
@media (max-width: 1024px) {
.landing-why {
padding: 60px 0;
}
.why-grid,
.why-grid--2x2,
.why-grid--4col {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
max-width: 720px;
}
}
@media (max-width: 640px) {
.landing-why {
padding: 40px 0;
}
.why-grid,
.why-grid--2x2,
.why-grid--4col {
grid-template-columns: 1fr;
gap: 14px;
max-width: 100%;
}
.why-card {
padding: 24px 20px;
}
.why-card-icon {
width: 56px;
height: 56px;
font-size: 28px;
margin-bottom: 12px;
}
}
.landing-use-cases {
padding: 80px 0;
}
.landing-use-cases .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-use-cases-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 12px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-align: center;
margin-bottom: 14px;
}
.use-cases-list {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 1100px;
margin: 40px auto 0;
}
.use-case-card {
display: grid;
grid-template-columns: minmax(280px, 38%) 1fr;
gap: 0;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.use-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.10);
}
.use-case-card--text-only {
grid-template-columns: 1fr;
}
.use-case-card--reverse .use-case-media {
order: 2;
}
.use-case-card--reverse .use-case-content {
order: 1;
}
.use-case-media {
position: relative;
background: var(--primary-light);
overflow: hidden;
min-height: 100%;
}
.use-case-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
.use-case-num-badge {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: var(--radius-pill, 999px);
background: rgba(15, 23, 42, 0.85);
color: #fff;
font-weight: var(--weight-extra);
font-size: 14px;
letter-spacing: 0.04em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}
.use-case-content {
padding: 22px 28px 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.use-case-header {
margin-bottom: 12px;
}
.use-case-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-blue);
color: #fff;
font-weight: var(--weight-bold);
font-size: 16px;
margin-bottom: 10px;
}
.use-case-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
margin-bottom: 6px;
}
.use-case-persona {
font-size: 19px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 4px;
line-height: 1.2;
}
.use-case-context {
font-size: 13.5px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.use-case-highlight {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin: 2px 0 14px;
padding: 7px 14px;
background: linear-gradient(135deg, var(--primary-light), color-mix(in srgb, var(--primary-light) 60%, white));
border: 1px solid color-mix(in srgb, var(--primary-blue) 18%, transparent);
border-radius: var(--radius-pill, 999px);
box-shadow: 0 6px 18px rgba(12, 113, 195, 0.10);
}
.use-case-highlight-icon {
font-size: 14px;
line-height: 1;
}
.use-case-highlight-text {
font-size: 13px;
font-weight: var(--weight-extra);
color: var(--primary-dark);
letter-spacing: 0.01em;
}
.use-case-timeline {
list-style: none;
margin: 0;
padding: 0;
position: relative;
counter-reset: step;
}
.use-case-step {
position: relative;
padding-left: 28px;
padding-bottom: 12px;
}
.use-case-step:last-child {
padding-bottom: 0;
}
.use-case-step::before {
content: "";
position: absolute;
top: 18px;
bottom: -2px;
left: 8px;
width: 2px;
background: linear-gradient(to bottom,
var(--primary-blue) 0%,
color-mix(in srgb, var(--primary-blue) 35%, transparent) 100%);
}
.use-case-step:last-child::before {
display: none;
}
.use-case-step-dot {
position: absolute;
top: 4px;
left: 1px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--surface);
border: 3px solid var(--text-muted);
box-shadow: 0 0 0 4px var(--surface);
z-index: 1;
transition: transform 0.3s ease;
}
.use-case-step--problem .use-case-step-dot {
border-color: color-mix(in srgb, var(--text-muted) 65%, transparent);
}
.use-case-step--intervention .use-case-step-dot {
border-color: var(--primary-blue);
background: var(--primary-light);
}
.use-case-step--result .use-case-step-dot {
border-color: var(--success-green, #16a34a);
background: color-mix(in srgb, var(--success-green, #16a34a) 18%, white);
box-shadow:
0 0 0 4px var(--surface),
0 0 0 8px color-mix(in srgb, var(--success-green, #16a34a) 12%, transparent);
}
.use-case-card:hover .use-case-step--result .use-case-step-dot {
transform: scale(1.1);
}
.use-case-step-body {
padding-top: 0;
}
.use-case-step-label {
display: block;
font-size: 10.5px;
font-weight: var(--weight-extra);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted);
margin-bottom: 2px;
}
.use-case-step--intervention .use-case-step-label {
color: var(--primary-blue);
}
.use-case-step--result .use-case-step-label {
color: var(--success-green, #16a34a);
}
.use-case-step-body p {
font-size: 13px;
color: var(--text-dark);
line-height: 1.5;
margin: 0;
}
.use-case-step--result .use-case-step-body p {
color: var(--primary-dark);
font-weight: 500;
}
.use-case-footer {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--border-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.use-case-duration {
display: inline-block;
font-size: 13px;
color: var(--primary-blue);
font-weight: var(--weight-bold);
background: var(--primary-light);
padding: 6px 16px;
border-radius: var(--radius-pill, 999px);
}
.use-case-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-decoration: none;
padding: 6px 4px;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
line-height: 1.2;
}
.use-case-cta:hover,
.use-case-cta:focus-visible {
color: var(--primary-dark);
border-bottom-color: var(--primary-dark);
}
.use-case-cta-arrow {
display: inline-block;
font-size: 16px;
line-height: 1;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.use-case-cta:hover .use-case-cta-arrow,
.use-case-cta:focus-visible .use-case-cta-arrow {
transform: translateX(4px);
}
.use-case-footer:has(.use-case-cta:only-child) {
justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
.use-case-cta-arrow {
transition: none;
}
}
@media (max-width: 1024px) {
.landing-use-cases {
padding: 60px 0;
}
.use-cases-list {
gap: 28px;
max-width: 720px;
}
.use-case-card,
.use-case-card--reverse {
grid-template-columns: 1fr;
}
.use-case-card--reverse .use-case-media,
.use-case-card--reverse .use-case-content {
order: initial;
}
.use-case-media {
min-height: 0;
aspect-ratio: 16 / 9;
}
.use-case-media img {
object-position: center 25%;
}
.use-case-content {
padding: 22px 24px 20px;
}
}
@media (max-width: 640px) {
.landing-use-cases {
padding: 40px 0;
}
.use-cases-list {
gap: 18px;
margin-top: 32px;
}
.use-case-media {
aspect-ratio: 4 / 3;
}
.use-case-num-badge {
top: 12px;
left: 12px;
min-width: 38px;
height: 38px;
font-size: 12px;
padding: 0 11px;
}
.use-case-content {
padding: 22px 20px 20px;
}
.use-case-persona {
font-size: 18px;
}
.use-case-highlight {
margin: 2px 0 18px;
padding: 8px 14px;
}
.use-case-highlight-text {
font-size: 13px;
}
.use-case-step {
padding-left: 28px;
padding-bottom: 16px;
}
.use-case-step-body p {
font-size: 13px;
}
.use-case-footer {
margin-top: 18px;
padding-top: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.use-case-card,
.use-case-step-dot {
transition: none;
}
}
.landing-self-diagnosis {
padding: 80px 0;
}
.landing-self-diagnosis .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-self-diagnosis-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 12px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-align: center;
margin-bottom: 14px;
}
.landing-self-diagnosis .landing-section-lead {
text-align: center;
max-width: 680px;
margin: 0 auto 36px;
}
.landing-self-diagnosis .section-title + .self-diagnosis-card,
.landing-self-diagnosis .landing-section-lead + .self-diagnosis-card {
margin-top: 24px;
}
.self-diagnosis-card {
max-width: 960px;
margin: 0 auto;
}
.self-diagnosis-fieldset {
border: 0;
margin: 0;
padding: 0;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.self-diagnosis-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 320px) {
.self-diagnosis-list {
grid-template-columns: 1fr;
}
}
.self-diagnosis-item {
margin: 0;
}
.self-diagnosis-label {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px 20px;
border-radius: var(--radius-lg);
background: var(--surface);
border: 1px solid var(--border-soft);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
cursor: pointer;
transition: transform 0.3s ease, border-color 0.2s ease,
background-color 0.2s ease, box-shadow 0.3s ease;
min-height: 100%;
}
.self-diagnosis-label:hover {
transform: translateY(-3px);
box-shadow: 0 20px 42px rgba(15, 23, 42, 0.12);
border-color: var(--primary-blue);
}
.self-diagnosis-label:active {
transform: translateY(-1px);
}
.self-diagnosis-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
.self-diagnosis-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--primary-light);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 1;
box-shadow: inset 0 0 0 1px rgba(12, 113, 195, 0.1);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.self-diagnosis-label:hover .self-diagnosis-icon {
transform: scale(1.05);
}
.self-diagnosis-text-wrap {
flex: 1;
min-width: 0;
padding-right: 32px;
}
.self-diagnosis-text {
display: block;
font-size: 16px;
color: var(--text-dark);
line-height: 1.4;
font-weight: var(--weight-bold);
}
.self-diagnosis-check {
position: absolute;
top: 20px;
right: 20px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--border-soft);
background: var(--surface);
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
transition: all 0.2s ease;
}
.self-diagnosis-label:hover .self-diagnosis-check {
border-color: var(--primary-blue);
}
.self-diagnosis-checkbox:checked ~ .self-diagnosis-check,
.self-diagnosis-label:has(.self-diagnosis-checkbox:checked) .self-diagnosis-check {
background: var(--primary-blue);
border-color: var(--primary-blue);
color: var(--surface);
transform: scale(1.1);
}
.self-diagnosis-check svg {
position: absolute;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.self-diagnosis-check .check-icon-tick {
opacity: 0;
transform: scale(0.5);
}
.self-diagnosis-check .check-icon-plus {
opacity: 0.4;
}
.self-diagnosis-label:hover .self-diagnosis-check .check-icon-plus {
opacity: 1;
}
.self-diagnosis-checkbox:checked ~ .self-diagnosis-check .check-icon-plus,
.self-diagnosis-label:has(.self-diagnosis-checkbox:checked) .self-diagnosis-check .check-icon-plus {
opacity: 0;
transform: scale(0.5);
}
.self-diagnosis-checkbox:checked ~ .self-diagnosis-check .check-icon-tick,
.self-diagnosis-label:has(.self-diagnosis-checkbox:checked) .self-diagnosis-check .check-icon-tick {
opacity: 1;
transform: scale(1);
}
.self-diagnosis-label:has(.self-diagnosis-checkbox:checked) {
background: var(--surface);
border-color: var(--primary-blue);
box-shadow: 0 10px 25px rgba(12, 113, 195, 0.12);
}
.self-diagnosis-label:has(.self-diagnosis-checkbox:checked) .self-diagnosis-icon {
background: var(--primary-blue);
color: var(--surface);
}
.self-diagnosis-label:has(.self-diagnosis-checkbox:focus-visible) {
outline: 2px solid var(--primary-blue);
outline-offset: 3px;
}
.self-diagnosis-banner {
margin-top: 40px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-soft);
padding: 40px 32px;
background: var(--primary-light);
transition: background-color 0.35s ease, border-color 0.35s ease;
text-align: center;
}
.self-diagnosis-banner[data-level="empty"] {
background: var(--surface);
border-style: dashed;
}
.self-diagnosis-banner[data-level="low"],
.self-diagnosis-banner[data-level="medium"] {
background: var(--primary-light);
border-color: var(--primary-blue);
}
.self-diagnosis-banner[data-level="high"] {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--surface);
}
.self-diagnosis-banner-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.self-diagnosis-verdict {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.self-diagnosis-verdict-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.self-diagnosis-verdict-icon {
flex-shrink: 0;
font-size: 32px;
line-height: 1;
}
.self-diagnosis-verdict-title {
font-size: 24px;
color: var(--primary-dark);
font-weight: var(--weight-extra);
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
.self-diagnosis-banner[data-level="high"] .self-diagnosis-verdict-title {
color: var(--surface);
}
.self-diagnosis-verdict-text {
font-size: 17px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
font-weight: var(--weight-medium);
max-width: 38em;
text-align: center;
}
.self-diagnosis-banner[data-level="empty"] .self-diagnosis-verdict-text {
color: var(--text-muted);
}
.self-diagnosis-banner[data-level="medium"] .self-diagnosis-verdict-text {
color: var(--primary-dark);
}
.self-diagnosis-banner[data-level="high"] .self-diagnosis-verdict-text {
color: rgba(255, 255, 255, 0.9);
}
.self-diagnosis-cta {
align-self: center;
min-width: min(100%, 320px);
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.self-diagnosis-banner[data-level="high"] .self-diagnosis-cta {
background: var(--surface);
color: var(--primary-dark);
}
.self-diagnosis-cta:hover {
transform: translateY(-1px);
}
.self-diagnosis-banner[data-level="empty"] .self-diagnosis-cta {
opacity: 0.92;
}
@media (max-width: 900px) {
.landing-self-diagnosis {
padding: 60px 0;
}
}
@media (max-width: 640px) {
.landing-self-diagnosis {
padding: 24px 0;
}
.landing-self-diagnosis-eyebrow {
margin-bottom: 4px;
font-size: 10px;
}
.landing-self-diagnosis .section-title {
font-size: 20px;
margin-bottom: 4px;
}
.landing-self-diagnosis .landing-section-lead {
margin-bottom: 16px;
font-size: 14px;
}
.landing-self-diagnosis .section-title + .self-diagnosis-card,
.landing-self-diagnosis .landing-section-lead + .self-diagnosis-card {
margin-top: 12px;
}
.self-diagnosis-label {
padding: 12px 8px 10px;
gap: 6px;
flex-direction: column;
align-items: center;
text-align: center;
}
.self-diagnosis-icon {
width: 34px;
height: 34px;
font-size: 18px;
border-radius: 10px;
}
.self-diagnosis-text-wrap {
padding-right: 0;
}
.self-diagnosis-text {
font-size: 12px;
line-height: 1.3;
font-weight: var(--weight-bold);
}
.self-diagnosis-check {
top: 6px;
right: 6px;
transform: none;
width: 16px;
height: 16px;
border-width: 2px;
border-color: var(--primary-blue);
background: var(--primary-light);
opacity: 0.8;
}
.self-diagnosis-checkbox:checked ~ .self-diagnosis-check,
.self-diagnosis-label:has(.self-diagnosis-checkbox:checked) .self-diagnosis-check {
transform: scale(1.1);
opacity: 1;
background: var(--primary-blue);
}
.self-diagnosis-check svg {
width: 9px;
height: 9px;
}
.self-diagnosis-banner {
margin-top: 12px;
padding: 16px 12px;
}
.self-diagnosis-banner-inner {
gap: 12px;
}
.self-diagnosis-verdict {
gap: 4px;
}
.self-diagnosis-verdict-head {
gap: 4px;
}
.self-diagnosis-verdict-icon {
font-size: 24px;
}
.self-diagnosis-verdict-title {
font-size: 16px;
}
.self-diagnosis-verdict-text {
font-size: 13px;
line-height: 1.4;
}
.self-diagnosis-cta {
width: 100%;
align-self: stretch;
padding: 10px 14px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.self-diagnosis-label,
.self-diagnosis-banner,
.self-diagnosis-cta {
transition: none !important;
}
}
.landing-tax-credit {
padding: 80px 0;
}
.landing-tax-credit .section-title {
text-align: center;
margin-bottom: 12px;
}
.landing-tax-credit-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 12px;
font-weight: var(--weight-extra);
color: var(--primary-blue);
text-align: center;
margin-bottom: 14px;
}
.landing-tax-credit .landing-section-lead {
text-align: center;
max-width: 720px;
margin: 0 auto 8px;
}
.tax-credit-grid {
list-style: none;
padding: 0;
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 1100px;
counter-reset: tc-step;
}
.tax-credit-card {
position: relative;
background: var(--surface);
border-radius: var(--radius-lg);
border: 1px solid var(--border-soft);
padding: 26px 24px 28px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
overflow: visible;
}
.tax-credit-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--tc-accent, var(--primary-blue));
}
.tax-credit-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
border-color: var(--tc-accent, var(--primary-blue));
}
.tax-credit-card--step1 {
--tc-accent: #38bdf8;
--tc-accent-soft: rgba(56, 189, 248, 0.10);
--tc-accent-strong: #0284c7;
}
.tax-credit-card--step2 {
--tc-accent: var(--primary-blue);
--tc-accent-soft: rgba(12, 113, 195, 0.10);
--tc-accent-strong: var(--primary-dark);
}
.tax-credit-card--step3 {
--tc-accent: var(--success-green);
--tc-accent-soft: rgba(22, 163, 74, 0.10);
--tc-accent-strong: #15803d;
}
.tax-credit-card--step3 {
background: linear-gradient(180deg, var(--surface) 0%, rgba(22, 163, 74, 0.03) 100%);
box-shadow: 0 14px 34px rgba(22, 163, 74, 0.10);
}
.tax-credit-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.tax-credit-step-pill {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
background: var(--tc-accent-soft);
border-radius: var(--radius-pill);
font-size: 12px;
line-height: 1.2;
}
.tax-credit-step-num {
font-weight: var(--weight-extra);
color: var(--tc-accent-strong);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tax-credit-step-time {
font-weight: var(--weight-medium);
color: var(--tc-accent-strong);
opacity: 0.85;
}
.tax-credit-step-time::before {
content: "·";
margin-right: 4px;
opacity: 0.5;
}
.tax-credit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--tc-accent-soft);
border: 1.5px solid var(--tc-accent);
font-size: 24px;
line-height: 1;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.tax-credit-card:hover .tax-credit-icon {
transform: scale(1.08) rotate(-4deg);
}
.tax-credit-title {
font-size: 17px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 6px 0 0;
line-height: 1.35;
}
.tax-credit-text {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.6;
flex: 1;
}
.tax-credit-amount {
display: inline-flex;
align-self: flex-start;
margin-top: 6px;
padding: 8px 14px;
background: var(--tc-accent);
color: #fff;
font-weight: var(--weight-bold);
font-size: 14px;
border-radius: var(--radius-pill);
letter-spacing: 0.01em;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}
.tax-credit-card--step3 .tax-credit-amount {
font-size: 15px;
padding: 9px 16px;
}
.tax-credit-connector {
position: absolute;
top: 48px;
right: -22px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: var(--weight-bold);
color: var(--tc-accent);
background: var(--surface);
border-radius: 50%;
border: 1.5px dashed var(--tc-accent);
z-index: 2;
line-height: 1;
}
.tax-credit-note {
text-align: center;
margin: 32px auto 0;
font-size: 12px;
color: var(--text-muted);
max-width: 720px;
line-height: 1.6;
}
@media (max-width: 960px) {
.landing-tax-credit {
padding: 60px 0;
}
.tax-credit-grid {
grid-template-columns: 1fr;
gap: 18px;
max-width: 560px;
}
.tax-credit-connector {
top: auto;
right: 50%;
bottom: -22px;
transform: translateX(50%);
}
.tax-credit-connector::before {
content: "↓";
}
.tax-credit-connector {
font-size: 0;
}
.tax-credit-connector::before {
font-size: 22px;
line-height: 1;
}
.tax-credit-card {
padding: 22px 20px 24px;
}
}
@media (max-width: 480px) {
.landing-tax-credit {
padding: 44px 0;
}
.tax-credit-card-header {
gap: 8px;
}
.tax-credit-icon {
width: 42px;
height: 42px;
font-size: 22px;
}
.tax-credit-step-pill {
font-size: 11px;
padding: 5px 10px;
}
.tax-credit-title {
font-size: 16px;
}
}
.sap-proof-strip {
padding: 58px 0;
}
.sap-proof-panel {
display: grid;
grid-template-columns: 190px 1fr;
gap: 28px;
align-items: center;
max-width: 1040px;
margin: 0 auto 22px;
padding: 24px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
}
.sap-proof-logo-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 132px;
padding: 18px;
background: var(--primary-light);
border-radius: var(--radius-lg);
}
.sap-proof-logo {
display: block;
max-width: 148px;
max-height: 104px;
object-fit: contain;
}
.sap-proof-eyebrow,
.sap-section-eyebrow {
display: block;
color: var(--primary-blue);
font-size: 12px;
font-weight: var(--weight-extra);
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
margin-bottom: 14px;
}
.sap-proof-panel .sap-proof-eyebrow {
text-align: left;
}
.sap-proof-title {
color: var(--primary-dark);
font-size: clamp(24px, 3vw, 34px);
line-height: 1.12;
letter-spacing: -0.8px;
margin: 0 0 10px;
}
.sap-proof-text {
color: var(--text-muted);
font-size: 16px;
line-height: 1.65;
margin: 0;
}
.sap-proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1040px;
margin: 0 auto;
}
.sap-proof-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-subtle);
}
.sap-proof-item-icon {
display: inline-flex;
width: 40px;
height: 40px;
flex-shrink: 0;
align-items: center;
justify-content: center;
background: var(--primary-light);
border-radius: 50%;
font-size: 20px;
}
.sap-proof-item strong {
display: block;
color: var(--primary-dark);
font-size: 18px;
font-weight: var(--weight-black);
line-height: 1.1;
}
.sap-proof-item span:not(.sap-proof-item-icon) {
display: block;
color: var(--text-muted);
font-size: 13px;
line-height: 1.35;
margin-top: 4px;
}
@media (max-width: 900px) {
.sap-proof-panel {
grid-template-columns: 1fr;
text-align: center;
}
.sap-proof-panel .sap-proof-eyebrow {
text-align: center;
}
.sap-proof-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.sap-proof-strip {
padding: 42px 0;
}
.sap-proof-panel {
padding: 18px;
}
.sap-proof-grid {
grid-template-columns: 1fr;
}
}
.sap-eligibility {
padding: 80px 0;
}
.sap-eligibility .section-title,
.sap-eligibility .landing-section-lead {
text-align: center;
}
.sap-eligibility .landing-section-lead {
max-width: 720px;
margin: 0 auto;
}
.sap-eligibility-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 1040px;
margin: 42px auto 0;
}
.sap-eligibility-card {
position: relative;
padding: 28px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-subtle);
overflow: hidden;
}
.sap-eligibility-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 5px;
background: var(--primary-blue);
}
.sap-eligibility-card.is-no::before {
background: var(--primary-dark);
}
.sap-eligibility-icon {
display: inline-flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
background: var(--primary-light);
border-radius: 50%;
font-size: 24px;
margin-bottom: 16px;
}
.sap-eligibility-card h3 {
color: var(--primary-dark);
font-size: 24px;
line-height: 1.2;
margin: 0 0 10px;
}
.sap-eligibility-card p {
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
margin: 0 0 18px;
}
.sap-eligibility-card ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.sap-eligibility-card li {
display: flex;
gap: 10px;
color: var(--text-dark);
font-size: 15px;
line-height: 1.45;
}
.sap-eligibility-card li::before {
content: "✓";
flex-shrink: 0;
color: var(--primary-blue);
font-weight: var(--weight-black);
}
.sap-eligibility-card.is-no li::before {
content: "×";
color: var(--text-muted);
}
.sap-eligibility-note {
max-width: 820px;
margin: 28px auto 0;
padding: 16px 18px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
text-align: center;
}
@media (max-width: 820px) {
.sap-eligibility-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.sap-eligibility {
padding: 52px 0;
}
.sap-eligibility-card {
padding: 24px 20px;
}
}
.sap-covered-services {
padding: 80px 0;
}
.sap-covered-services .section-title,
.sap-covered-services .landing-section-lead {
text-align: center;
}
.sap-covered-services .landing-section-lead {
max-width: 760px;
margin: 0 auto;
}
.sap-covered-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1080px;
margin: 42px auto 0;
}
.sap-covered-card {
padding: 24px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-subtle);
transition: var(--transition);
}
.sap-covered-card:hover {
transform: translateY(-4px);
border-color: var(--primary-blue);
box-shadow: var(--shadow-card);
}
.sap-covered-icon {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: var(--primary-light);
border-radius: 50%;
font-size: 22px;
margin-bottom: 16px;
}
.sap-covered-card h3 {
color: var(--primary-dark);
font-size: 19px;
line-height: 1.25;
margin: 0 0 8px;
}
.sap-covered-card p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.sap-covered-aside {
max-width: 1080px;
margin: 28px auto 0;
padding: 24px;
background: var(--primary-light);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
}
.sap-covered-aside h3 {
color: var(--primary-dark);
font-size: 22px;
margin: 0 0 8px;
}
.sap-covered-aside p {
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
margin: 0 0 16px;
}
.sap-covered-aside ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.sap-covered-aside li {
display: flex;
gap: 8px;
color: var(--primary-dark);
font-size: 14px;
line-height: 1.45;
}
.sap-covered-aside li::before {
content: "×";
flex-shrink: 0;
color: var(--text-muted);
font-weight: var(--weight-black);
}
@media (max-width: 900px) {
.sap-covered-grid {
grid-template-columns: repeat(2, 1fr);
}
.sap-covered-aside ul {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.sap-covered-services {
padding: 52px 0;
}
.sap-covered-grid {
grid-template-columns: 1fr;
}
.sap-covered-card,
.sap-covered-aside {
padding: 20px;
}
}
.tarifs-proof-strip {
padding: 56px 0;
}
.tarifs-proof-eyebrow {
display: block;
text-align: center;
color: var(--primary-blue);
font-size: 12px;
font-weight: var(--weight-extra);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
}
.tarifs-proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 1080px;
margin: 0 auto;
}
.tarifs-proof-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-subtle);
}
.tarifs-proof-icon {
display: inline-flex;
width: 42px;
height: 42px;
flex-shrink: 0;
align-items: center;
justify-content: center;
background: var(--primary-light);
border-radius: 50%;
font-size: 20px;
}
.tarifs-proof-card strong {
display: block;
color: var(--primary-dark);
font-size: 22px;
font-weight: var(--weight-black);
line-height: 1.1;
}
.tarifs-proof-card span:not(.tarifs-proof-icon) {
display: block;
color: var(--text-muted);
font-size: 13px;
line-height: 1.35;
margin-top: 3px;
}
@media (max-width: 900px) {
.tarifs-proof-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.tarifs-proof-strip {
padding: 42px 0;
}
.tarifs-proof-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.tarifs-proof-card {
padding: 16px;
}
}
.tarifs-examples {
padding: 80px 0;
}
.tarifs-examples-eyebrow {
display: block;
text-align: center;
color: var(--primary-blue);
font-size: 12px;
font-weight: var(--weight-extra);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
}
.tarifs-examples .section-title {
max-width: 820px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tarifs-examples .landing-section-lead {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.tarifs-examples-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 42px auto 0;
max-width: 1080px;
}
.tarifs-example-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px 24px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-subtle);
transition: var(--transition);
}
.tarifs-example-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
border-color: var(--primary-blue);
}
.tarifs-example-badge {
align-self: flex-start;
padding: 6px 12px;
background: var(--primary-light);
color: var(--primary-blue);
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: var(--weight-bold);
}
.tarifs-example-card h3 {
color: var(--primary-dark);
font-size: 20px;
line-height: 1.2;
margin: 0;
}
.tarifs-example-text {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.tarifs-example-amounts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: auto;
}
.tarifs-example-amounts div {
padding: 14px;
background: var(--primary-light);
border-radius: var(--radius-md);
}
.tarifs-example-amounts div:first-child {
background: var(--bg-alt-solid);
}
.tarifs-example-amounts span {
display: block;
color: var(--text-muted);
font-size: 11px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.tarifs-example-amounts strong {
display: block;
color: var(--primary-dark);
font-size: 22px;
font-weight: var(--weight-black);
line-height: 1;
}
.tarifs-examples-note {
max-width: 760px;
margin: 28px auto 0;
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
text-align: center;
}
@media (max-width: 900px) {
.tarifs-examples-grid {
grid-template-columns: 1fr;
max-width: 620px;
}
}
@media (max-width: 560px) {
.tarifs-examples {
padding: 50px 0;
}
.tarifs-example-card {
padding: 22px 18px;
}
.tarifs-example-amounts {
grid-template-columns: 1fr;
}
}
[class^="landing-"][class$="-eyebrow"],
[class*=" landing-"][class$="-eyebrow"] {
display: inline-block;
margin: 0 auto 18px;
padding: 7px 16px;
background: rgba(12, 113, 195, 0.08);
color: var(--primary-blue);
font-size: 13px;
font-weight: var(--weight-bold);
line-height: 1.2;
letter-spacing: 0.10em;
text-transform: uppercase;
text-align: center;
border-radius: var(--radius-pill);
border: 1px solid rgba(12, 113, 195, 0.14);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
section[class*="landing-"] .container > [class^="landing-"][class$="-eyebrow"],
section[class*="landing-"] .container > [class*=" landing-"][class$="-eyebrow"] {
display: block;
width: fit-content;
}
[class^="landing-"][class$="-eyebrow"]:hover,
[class*=" landing-"][class$="-eyebrow"]:hover {
background: rgba(12, 113, 195, 0.12);
border-color: rgba(12, 113, 195, 0.22);
}
@media (max-width: 600px) {
[class^="landing-"][class$="-eyebrow"],
[class*=" landing-"][class$="-eyebrow"] {
font-size: 11px;
padding: 6px 14px;
margin-bottom: 14px;
letter-spacing: 0.08em;
}
}
.payment-methods {
padding: 60px 0;
}
.payment-methods .section-header {
margin-bottom: 40px;
}
.payment-methods-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
.payment-method-card {
text-align: center;
padding: 30px 24px;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
border: 1px solid var(--border-soft);
transition: transform 0.3s ease;
}
.payment-method-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 38px rgba(15, 23, 42, 0.08);
}
.payment-icon {
width: 64px;
height: 64px;
font-size: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-blue);
}
.payment-method-card h3 {
font-size: 17px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 12px;
}
.payment-method-card p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
@media (max-width: 992px) {
.payment-methods-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.payment-methods {
padding: 40px 0;
}
.payment-methods-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
.contact-choice-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.contact-choice-card,
.info-card,
.contact-form-wrapper,
.contact-next-card {
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-subtle);
}
.contact-choice-card {
display: flex;
min-height: 100%;
flex-direction: column;
padding: 24px;
transition: var(--transition);
}
.contact-choice-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--primary-blue) 42%, var(--border-soft));
box-shadow: var(--shadow-card);
}
.contact-choice-icon,
.info-icon {
display: inline-grid;
width: 46px;
height: 46px;
place-items: center;
border-radius: var(--radius-md);
background: var(--primary-light);
color: var(--primary-blue);
font-size: 23px;
}
.contact-choice-card h3,
.info-card h3,
.contact-next-card h3 {
margin: 16px 0 8px;
color: var(--primary-dark);
font-size: 18px;
font-weight: var(--weight-extra);
line-height: 1.2;
}
.contact-choice-card p,
.info-card p,
.contact-next-card p,
.contact-form-intro,
.field-help,
.form-reassurance {
color: var(--text-muted);
font-size: 14px;
line-height: 1.65;
}
.contact-choice-card p {
flex: 1;
margin: 0 0 18px;
}
.contact-choice-link {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: var(--primary-light);
color: var(--primary-blue);
font-size: 14px;
font-weight: var(--weight-bold);
padding: 10px 14px;
text-decoration: none;
transition: var(--transition);
}
.contact-choice-link:hover {
background: var(--primary-blue);
color: var(--surface);
}
.contact-grid {
display: grid;
grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
gap: clamp(24px, 4vw, 42px);
align-items: start;
}
.contact-info {
display: grid;
gap: 16px;
position: sticky;
top: 108px;
}
.info-card {
padding: 24px;
}
.info-card.info-card-primary {
border-color: color-mix(in srgb, var(--primary-blue) 44%, var(--border-soft));
background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--primary-light) 56%, var(--surface)) 100%);
}
.info-card p {
margin: 8px 0 0;
}
.phone-big,
.email-link {
display: block;
margin: 12px 0;
color: var(--primary-blue);
text-decoration: none;
font-weight: var(--weight-black);
}
.phone-big {
font-size: clamp(23px, 3vw, 30px);
letter-spacing: -0.03em;
}
.email-link {
font-size: 15px;
overflow-wrap: anywhere;
}
.hours-detail {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
}
.hours-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
.hours-row span,
.hours-row strong {
color: var(--text-muted);
font-size: 13px;
}
.hours-row strong {
color: var(--primary-dark);
}
.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 12px;
border: 1.5px solid #25D366;
border-radius: var(--radius-pill);
background: transparent;
color: #25D366;
font-size: 14px;
font-weight: var(--weight-bold);
padding: 10px 18px;
text-decoration: none;
transition: var(--transition);
}
.btn-whatsapp:hover {
background: #25D366;
color: var(--surface);
transform: translateY(-2px);
}
.si-whatsapp-soon {
border-color: color-mix(in srgb, var(--primary-blue) 24%, var(--border-soft));
color: var(--primary-blue);
}
.si-whatsapp-soon:hover {
background: var(--primary-light);
color: var(--primary-blue);
}
.contact-form-wrapper {
padding: clamp(26px, 4vw, 42px);
scroll-margin-top: 110px;
}
.contact-form-intro {
margin: 0 0 24px;
max-width: 650px;
}
.form-error-banner {
border: 1px solid var(--error-border);
border-radius: var(--radius-lg);
background: var(--error-bg);
color: var(--error-red-dark);
font-size: 14px;
font-weight: var(--weight-bold);
margin-bottom: 18px;
padding: 14px 16px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
margin-bottom: 7px;
color: var(--text-dark);
font-size: 14px;
font-weight: var(--weight-bold);
}
.label-optional {
margin-left: 4px;
color: var(--text-muted);
font-size: 12px;
font-weight: var(--weight-normal);
}
.form-group input,
.form-group textarea,
.email-input-wrapper input[type="email"],
.address-input-wrapper input[type="text"] {
width: 100%;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--primary-light) 54%, var(--surface));
color: var(--text-dark);
font-family: inherit;
font-size: 15px;
padding: 13px 16px;
transition: var(--transition);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.email-input-wrapper input[type="email"]:focus,
.address-input-wrapper input[type="text"]:focus {
border-color: var(--primary-blue);
outline: none;
background: var(--surface);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 14%, transparent);
}
.field-help {
margin: 8px 0 0;
font-size: 13px;
}
.form-reassurance {
margin: 14px 0 0;
text-align: center;
font-size: 13px;
}
.email-input-wrapper,
.address-input-wrapper {
position: relative;
}
.address-input-wrapper {
display: flex;
align-items: center;
}
.address-icon {
position: absolute;
left: 14px;
z-index: 1;
pointer-events: none;
font-size: 16px;
line-height: 1;
}
.address-input-wrapper input[type="text"] {
padding-left: 40px;
padding-right: 42px;
}
.address-clear {
position: absolute;
right: 12px;
display: none;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
color: var(--text-muted);
cursor: pointer;
font-size: 12px;
line-height: 1;
transition: var(--transition);
}
.address-clear:hover {
background: var(--border-soft);
color: var(--text-dark);
}
.address-no-api {
margin-top: 7px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.45;
}
.form-group:has(#address[data-places-valid="1"]) .address-places-hint {
display: none;
}
.email-suggestions {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: 0;
z-index: 200;
overflow: hidden;
margin: 0;
padding: 4px 0;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-card);
list-style: none;
}
.email-suggestions[hidden] {
display: none;
}
.email-suggestions li {
display: flex;
align-items: center;
padding: 9px 14px;
cursor: pointer;
font-size: 14px;
transition: background 0.12s;
}
.email-suggestions li:hover,
.email-suggestions li.es-active {
background: var(--primary-light);
}
.es-local {
color: var(--text-dark);
font-weight: var(--weight-medium);
}
.es-at {
color: var(--text-muted);
}
.es-domain {
color: var(--primary-blue);
font-weight: var(--weight-medium);
}
.btn-loading {
pointer-events: none;
opacity: 0.7;
position: relative;
}
.btn-loading::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 10px;
border: 2px solid color-mix(in srgb, var(--surface) 34%, transparent);
border-top-color: var(--surface);
border-radius: var(--radius-pill);
vertical-align: middle;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
.form-group.has-error input,
.form-group.has-error textarea {
border-color: var(--error-red-dark);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-red-dark) 14%, transparent);
}
.field-error-msg {
margin-top: 5px;
color: var(--error-red-dark);
font-size: 12px;
font-weight: var(--weight-medium);
}
@media (max-width: 1100px) {
.contact-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-grid {
grid-template-columns: 1fr;
}
.contact-info {
position: static;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.contact-info {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.contact-choice-grid {
grid-template-columns: 1fr;
}
.contact-choice-card,
.info-card,
.contact-form-wrapper,
.contact-next-card {
border-radius: var(--radius-lg);
}
.hours-row {
flex-direction: column;
gap: 2px;
}
}
.contact-choice-section,
.contact-next-section {
padding: clamp(100px, 10vw, 140px) 0;
}
.contact-content {
padding: clamp(80px, 8vw, 120px) 0;
}
.landing-contact-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
border: 1px solid color-mix(in srgb, var(--primary-blue) 22%, var(--border-soft));
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--surface) 88%, var(--primary-light));
color: var(--primary-blue);
font-size: 13px;
font-weight: var(--weight-bold);
line-height: 1;
padding: 10px 14px;
box-shadow: var(--shadow-xs);
margin: 0 auto 14px;
}
@media (min-width: 901px) {
.landing-hero .hero-reassurance {
grid-template-columns: repeat(4, auto);
max-width: none;
justify-content: flex-start;
}
}
#nav-wrapper.nav-conversion-mode .hamburger {
display: none !important;
}