/* Main CSS - Modern Design System - Clean Version */
/* Extended Color Tokens - Simplified Professional Palette */
:root {
--color-surface: var(--color-bg);
--color-surface-alt: var(--color-bg-light);
--color-surface-strong: #ffffff;
--color-divider: rgba(15, 23, 42, 0.12);
--color-divider-soft: rgba(15, 23, 42, 0.08);
--color-accent-soft: rgba(37, 99, 235, 0.08);
--color-accent-soft-strong: rgba(37, 99, 235, 0.12);
--color-cta-bg: #0f172a;
--color-cta-bg-alt: #1e293b;
--color-cta-text: #ffffff;
/* Use only primary blue - no accent orange, no success green in main elements */
--color-accent: var(--color-primary);
--color-success: var(--color-primary);
/* ===================================
Typography — unified font system (fast)
=================================== */
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-display: var(--font-sans);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-weight-body: 500;
--font-weight-strong: 700;
}
/* Base font application */
html {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-sans);
font-weight: var(--font-weight-body);
letter-spacing: 0.003em;
}
button,
input,
select,
textarea {
font-family: inherit;
}
code,
pre,
kbd,
samp {
font-family: var(--font-mono);
}
/* ===================================
Typography
=================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
letter-spacing: -0.02em;
font-family: var(--font-display);
}
h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin-bottom: 1.5rem;
}
h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
margin-bottom: 1.25rem;
}
h3 {
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 600;
margin-bottom: 1rem;
}
p {
margin-bottom: 1.25rem;
font-size: 1.0625rem;
line-height: 1.8;
color: var(--color-text-light);
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition);
font-weight: 500;
}
a:hover {
color: var(--color-primary-dark);
}
strong {
font-weight: 600;
color: var(--color-text);
}
/* Visually hidden (accessibility + SEO helpers) */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
ul, ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
ul li, ol li {
margin-bottom: 0.75rem;
line-height: 1.8;
color: var(--color-text-light);
}
/* ===================================
Layout
=================================== */
.site-main {
min-height: 60vh;
padding: 0;
}
section {
margin: 0;
padding: 3rem 0;
}
section:nth-child(even):not(.page-hero):not(.hero):not(.cta-section):not(.trust-section) {
background: var(--color-bg-light);
}
section:first-of-type {
padding-top: 0;
}
/* Spacing ottimizzato per homepage */
.home .hero {
margin-bottom: 0;
}
.home .trust-section,
.home .services-section,
.home .how-it-works-section,
.home .cities-section,
.home .faq-section,
.home .testimonials-section {
padding: 0;
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 2.5rem;
}
.section-header h2 {
margin-bottom: 0.75rem;
font-size: clamp(1.75rem, 3vw, 2rem);
}
.section-header p {
font-size: 1.05rem;
color: var(--color-text-light);
margin: 0;
}
.section-footer {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid var(--color-border);
}
.section-footer p {
font-size: 1.1rem;
color: var(--color-text-light);
font-weight: 500;
margin: 0;
}
/* ===================================
Page Hero (for taxonomy and local pages)
=================================== */
.page-hero {
background: linear-gradient(135deg, #0f2a6b 0%, #1e40af 55%, #2563eb 100%);
background-size: 140% 140%;
background-position: 50% 30%;
color: #ffffff;
padding: clamp(4rem, 8vh, 6rem) 1rem clamp(3.5rem, 7vh, 5rem);
text-align: center;
position: relative;
overflow: hidden;
min-height: clamp(520px, 70vh, 680px);
display: flex;
align-items: center;
}
/* Page Hero Enhanced for City Pages */
.page-hero--enhanced {
padding: clamp(4rem, 8vh, 5.5rem) 1rem;
background: linear-gradient(135deg, #0f2a6b 0%, #1e40af 55%, #2563eb 100%);
}
.page-hero__badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.page-hero__badge--location,
.page-hero__badge--availability,
.page-hero__badge--rating {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
padding: 0.5rem 1.25rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.page-hero__badge--location:hover,
.page-hero__badge--availability:hover,
.page-hero__badge--rating:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.page-hero__title--enhanced {
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.page-hero__title--enhanced::after {
content: '';
display: block;
width: 64px;
height: 3px;
margin: 0.8rem auto 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(147, 197, 253, 0.9));
border-radius: 999px;
}
.page-hero__service {
font-size: 1em;
font-weight: 700;
opacity: 0.95;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.page-hero__city {
font-size: 1.2em;
font-weight: 900;
background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
text-transform: uppercase;
letter-spacing: 0.01em;
}
.page-hero__subtitle--enhanced {
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
max-width: 750px;
margin: 0 auto;
line-height: 1.7;
opacity: 0.96;
font-weight: 500;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.page-hero__subtitle--enhanced strong {
color: #ffffff;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.page-hero__stats {
display: flex;
justify-content: center;
gap: clamp(2rem, 5vw, 4rem);
margin: 0;
padding: 2rem 2.5rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(14px) saturate(180%);
border-radius: calc(var(--radius-xl) + 2px);
border: 2px solid rgba(255, 255, 255, 0.3);
max-width: 800px;
margin-left: auto;
margin-right: auto;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25),
0 4px 16px rgba(0, 0, 0, 0.15),
inset 0 2px 0 rgba(255, 255, 255, 0.4);
position: relative;
}
.page-hero__stats::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(45deg,
rgba(255, 255, 255, 0.3),
transparent 30%,
transparent 70%,
rgba(255, 255, 255, 0.3));
border-radius: var(--radius-xl);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.page-hero__stats:hover::before {
opacity: 0.5;
}
.page-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.page-hero__stat .stat-value {
font-size: clamp(2.2rem, 5vw, 3rem);
font-weight: 900;
line-height: 1;
color: #ffffff;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
0 4px 16px rgba(0, 0, 0, 0.2);
letter-spacing: -0.02em;
}
.page-hero__stat {
transition: all 0.3s ease;
}
.page-hero__stat:hover {
transform: translateY(-4px);
}
.page-hero__stat .stat-label {
font-size: 0.88rem;
opacity: 0.92;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-hero__cta-group--enhanced {
margin-top: 2.5rem;
}
.page-hero__cta-note {
font-size: 0.95rem;
opacity: 0.94;
margin-top: 0;
padding: 0.75rem 1.75rem;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
font-weight: 600;
}
.button--pulse {
animation: button-pulse 3s ease-in-out infinite;
}
@keyframes button-pulse {
0%, 100% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.4);
}
}
@media (max-width: 768px) {
.page-hero__badges {
gap: 0.75rem;
}
.page-hero__badge--location,
.page-hero__badge--availability,
.page-hero__badge--rating {
padding: 0.4rem 1rem;
font-size: 0.85rem;
}
.page-hero__stats {
gap: 1.5rem;
flex-wrap: wrap;
padding: 1.5rem 1rem;
}
.page-hero__stat .stat-value {
font-size: 2rem;
}
.page-hero__stat .stat-label {
font-size: 0.75rem;
}
}
.page-hero * {
color: #ffffff !important;
}
.page-hero__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 0;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.015) 2px, rgba(255, 255, 255, 0.015) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.015) 2px, rgba(255, 255, 255, 0.015) 4px);
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.page-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
pointer-events: none;
z-index: 0;
}
.page-hero__content {
position: relative;
z-index: 10;
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
.page-hero__content::before {
content: '';
position: absolute;
inset: -50px;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), transparent 70%);
pointer-events: none;
z-index: -1;
filter: blur(40px);
}
.page-hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
margin-top: 1rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.4);
color: #ffffff !important;
}
.page-hero__badge span {
color: #ffffff !important;
}
.page-hero__badge svg {
width: 20px;
height: 20px;
color: #10b981 !important;
}
.page-hero__title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.1;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
color: #ffffff !important;
}
.page-hero__subtitle {
font-size: clamp(1.05rem, 2vw, 1.25rem);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 400;
color: #ffffff !important;
}
.page-hero__cta-group {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin: 0;
}
.page-hero__cta-group .button--hero-primary {
font-size: 1.2rem;
padding: 1.5rem 2.75rem;
border-radius: calc(var(--radius-xl) + 4px);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 2px 0 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
background: #ffffff !important;
color: var(--color-primary-dark) !important;
-webkit-text-fill-color: var(--color-primary-dark);
}
.page-hero__cta-group .button--hero-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
border-radius: calc(var(--radius-xl) + 4px);
opacity: 1;
transition: opacity 0.3s ease;
}
.page-hero__cta-group .button--hero-primary:hover::before {
opacity: 1;
}
.page-hero__cta-group .button--hero-primary:hover {
transform: translateY(-3px);
box-shadow:
0 26px 60px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.2) inset,
0 2px 0 0 rgba(0, 0, 0, 0.1);
}
.page-hero__cta-group .button__phone {
font-size: 1.4em;
font-weight: 900;
letter-spacing: 0.04em;
}
.page-hero__cta-group .button--hero-primary .button__label,
.page-hero__cta-group .button--hero-primary .button__phone,
.page-hero__cta-group .button--hero-primary svg {
color: var(--color-primary-dark) !important;
-webkit-text-fill-color: var(--color-primary-dark) !important;
}
.button--hero-primary {
background: transparent;
color: var(--color-primary-dark) !important;
box-shadow: none;
}
.button--hero-primary * {
color: var(--color-primary-dark) !important;
}
.button--hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
color: var(--color-primary-dark) !important;
}
.button--hero-primary .button__label {
font-size: 0.88rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.95;
}
.button--hero-primary .button__phone {
font-size: clamp(1.5rem, 2.6vw, 1.85rem);
font-weight: 900;
letter-spacing: 0.04em;
}
.button--hero-secondary {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: #ffffff !important;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.button--hero-secondary:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
color: #ffffff !important;
}
.button__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
}
.button__label {
font-size: 0.85rem;
font-weight: 500;
opacity: 0.9;
}
.button__phone {
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.02em;
}
/* ===================================
Brand Highlight - ZAGLIA
=================================== */
.brand-highlight {
color: var(--color-primary);
font-weight: 900;
font-size: 1.05em;
letter-spacing: 0.02em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
}
.brand-highlight::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -0.1em;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(147, 197, 253, 1), rgba(255, 255, 255, 0));
background-size: 200% 100%;
transform: scaleX(0.35);
transform-origin: center;
opacity: 0.85;
box-shadow: 0 0 10px rgba(147, 197, 253, 0.6);
animation: brand-underline 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes brand-underline {
0%, 100% {
transform: scaleX(0.35);
opacity: 0.7;
background-position: 0% 50%;
}
50% {
transform: scaleX(1);
opacity: 1;
background-position: 100% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.brand-highlight::after {
animation: none;
transform: scaleX(1);
opacity: 0.7;
}
}
/* ===================================
Intro Text Section
=================================== */
.intro-text-section {
padding: 4rem 0;
background: #fff;
}
.intro-text-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.intro-text-content h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: 2rem;
line-height: 1.3;
color: var(--color-text);
}
.intro-text-content p {
font-size: 1.1rem;
line-height: 1.9;
color: var(--color-text-light);
margin-bottom: 1.5rem;
text-align: left;
}
.intro-text-content p:last-child {
margin-bottom: 0;
}
.intro-text-content strong {
color: var(--color-text);
font-weight: 700;
}
.intro-text-content h3 {
color: var(--color-primary);
font-size: 1.5rem;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
/* About Section */
.about-section {
padding: 4rem 0;
background: var(--color-bg-light);
}
.about-content {
max-width: 900px;
margin: 0 auto;
}
.about-content h2 {
font-size: clamp(1.75rem, 3vw, 2rem);
margin-bottom: 2rem;
text-align: center;
}
.about-content p {
font-size: 1.05rem;
line-height: 1.9;
color: var(--color-text-light);
margin-bottom: 1.5rem;
text-align: left;
}
/* Emergency Box */
.emergency-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
margin-top: 1.5rem;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
border-radius: calc(var(--radius-xl) + 4px);
box-shadow:
0 10px 30px rgba(220, 38, 38, 0.4),
0 0 0 0 rgba(220, 38, 38, 0);
position: relative;
overflow: hidden;
animation: glow-box 3s ease-in-out infinite;
border: 3px solid rgba(255, 255, 255, 0.3);
}
@keyframes glow-box {
0%, 100% {
box-shadow:
0 10px 30px rgba(220, 38, 38, 0.4),
0 0 0 0 rgba(220, 38, 38, 0);
}
50% {
box-shadow:
0 10px 30px rgba(220, 38, 38, 0.4),
0 0 20px 5px rgba(220, 38, 38, 0.6);
}
}
.emergency-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
animation: move-pattern 20s linear infinite;
}
@keyframes move-pattern {
from {
transform: translateX(0) translateY(0);
}
to {
transform: translateX(40px) translateY(40px);
}
}
.emergency-box__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
z-index: 1;
animation: pulse-emergency 2s infinite;
border: 2px solid rgba(255, 255, 255, 0.4);
}
@keyframes pulse-emergency {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
50% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
.emergency-box__icon svg {
width: 22px;
height: 22px;
}
.emergency-box__content {
width: 100%;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.emergency-box__title {
font-size: clamp(1.35rem, 3vw, 1.65rem);
font-weight: 900;
color: #fff;
margin: 0;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.emergency-box__text {
font-size: clamp(0.98rem, 2vw, 1.1rem);
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.5;
max-width: 600px;
}
.emergency-box__phone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #fff;
color: #dc2626 !important;
padding: 0.7rem 1.6rem;
border-radius: 50px;
font-weight: 900;
font-size: clamp(1.15rem, 2.2vw, 1.35rem);
text-decoration: none;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
letter-spacing: 0.05em;
margin: 0.5rem 0;
border: 2px solid transparent;
}
.emergency-box__phone::before {
content: "📞";
font-size: 1.1em;
line-height: 1;
}
.emergency-box__phone:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
color: #991b1b !important;
border-color: rgba(220, 38, 38, 0.2);
background: #fef2f2;
}
.emergency-box__features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin: 0;
}
.emergency-box__features span {
font-size: 0.9rem;
font-weight: 700;
color: #fff;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.emergency-box__features span:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.emergency-box__features span:nth-child(1),
.emergency-box__features span:nth-child(2),
.emergency-box__features span:nth-child(3) {
animation: none;
}
.emergency-box-section {
padding: 3rem 0;
background: var(--color-bg-light);
}
@media (max-width: 768px) {
.emergency-box {
padding: 1.75rem 1.25rem;
gap: 1rem;
}
.emergency-box__icon {
width: 56px;
height: 56px;
}
.emergency-box__icon svg {
width: 26px;
height: 26px;
}
.emergency-box__title {
font-size: 1.3rem;
}
.emergency-box__text {
font-size: 0.98rem;
}
.emergency-box__features span {
padding: 0.4rem 0.75rem;
font-size: 0.82rem;
}
.emergency-box__phone {
font-size: 1.15rem;
padding: 0.65rem 1.3rem;
}
}
/* Entry Content Section Enhanced */
.entry-content-section {
padding: 4rem 0;
background: #ffffff;
}
.entry-content {
max-width: 900px;
margin: 0 auto;
}
.entry-content h2 {
font-size: clamp(1.85rem, 3vw, 2.25rem);
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--color-primary);
position: relative;
scroll-margin-top: 100px;
}
.entry-content h2::before {
content: '';
position: absolute;
left: -1.5rem;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 40%;
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
border-radius: 999px;
opacity: 0.6;
}
.entry-content h2::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 3px;
background: var(--color-primary-light);
transition: width 0.6s ease;
}
.entry-content h2:hover::after {
width: 120px;
}
.entry-content h3 {
font-size: clamp(1.35rem, 2.5vw, 1.65rem);
margin-top: 2.5rem;
margin-bottom: 1.25rem;
color: var(--color-primary);
}
.entry-content p {
font-size: 1.08rem;
line-height: 1.85;
margin-bottom: 1.5rem;
color: rgba(15, 23, 42, 0.85);
}
.single-service_city .entry-content > p:first-of-type {
font-size: 1.18rem;
line-height: 1.8;
color: rgba(15, 23, 42, 0.92);
}
.entry-content ul,
.entry-content ol {
margin: 2rem 0;
padding-left: 0;
list-style: none;
}
.entry-content li {
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 1.25rem;
color: rgba(15, 23, 42, 0.8);
padding-left: 2.5rem;
position: relative;
}
.entry-content li::before {
content: '→';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: 900;
font-size: 1.2rem;
}
.entry-content ol {
counter-reset: list-counter;
}
.entry-content ol li::before {
content: counter(list-counter);
counter-increment: list-counter;
position: absolute;
left: 0;
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 900;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.entry-content strong {
color: var(--color-primary);
font-weight: 700;
}
/* ===================================
Stats Section
=================================== */
.stats-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: #fff;
padding: 2rem 0;
position: relative;
overflow: hidden;
margin-top: -3rem;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
position: relative;
z-index: 1;
}
.stat-item {
text-align: center;
padding: 1.5rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: var(--transition);
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.stat-icon {
width: 48px;
height: 48px;
margin: 0 auto 1rem;
color: #fff;
opacity: 0.9;
}
.stat-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1;
margin-bottom: 0.5rem;
color: #fff;
}
.stat-label {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* ===================================
Quick Benefits Section
=================================== */
.quick-benefits-section {
padding: 2rem 0;
background: var(--color-bg-light);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.quick-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.quick-benefit {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
padding: 1.5rem 1rem;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: var(--transition);
}
.quick-benefit:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.quick-benefit svg {
color: var(--color-primary);
transition: var(--transition);
}
.quick-benefit:hover svg {
transform: scale(1.1);
}
.quick-benefit strong {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text);
}
.quick-benefit span {
font-size: 0.9rem;
color: var(--color-text-light);
}
/* Quick Benefits Enhanced */
.quick-benefits-section--enhanced {
padding: 0;
margin-top: -3rem;
position: relative;
z-index: 10;
}
.quick-benefits-grid--enhanced {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.quick-benefit--enhanced {
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 1.25rem;
padding: 2rem 1.75rem;
background: #ffffff;
border: 2px solid rgba(37, 99, 235, 0.12);
border-radius: calc(var(--radius-xl) + 2px);
box-shadow:
0 4px 16px rgba(15, 23, 42, 0.08),
0 2px 8px rgba(15, 23, 42, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.quick-benefit--enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.quick-benefit--enhanced:hover::before {
transform: scaleX(1);
}
.quick-benefit--enhanced:hover {
transform: translateY(-6px);
box-shadow:
0 12px 32px rgba(37, 99, 235, 0.15),
0 6px 16px rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.25);
}
.quick-benefit__icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.08));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}
.quick-benefit--enhanced:hover .quick-benefit__icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.12));
}
.quick-benefit__icon svg {
color: var(--color-primary);
width: 28px;
height: 28px;
}
.quick-benefit__content {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.quick-benefit--enhanced .quick-benefit__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
}
.quick-benefit--enhanced .quick-benefit__subtitle {
font-size: 0.92rem;
color: var(--color-text-light);
line-height: 1.4;
}
@media (max-width: 768px) {
.quick-benefits-section--enhanced {
margin-top: -2rem;
}
.quick-benefits-grid--enhanced {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.quick-benefit--enhanced {
padding: 1.5rem 1.25rem;
}
.quick-benefit__icon {
width: 48px;
height: 48px;
}
.quick-benefit__icon svg {
width: 24px;
height: 24px;
}
}
/* ===================================
How It Works Section
=================================== */
.how-it-works-section {
padding: 3rem 0;
background: var(--color-bg-light);
}
.steps-simple {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 2.5rem;
}
.step-simple {
text-align: center;
}
.step-simple__number {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.5rem;
margin: 0 auto 1.5rem;
box-shadow: var(--shadow-md);
}
.step-simple h3 {
margin: 0 0 0.75rem 0;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
}
.step-simple p {
margin: 0;
font-size: 0.95rem;
color: var(--color-text-light);
}
/* ===================================
Service Cards Enhanced
=================================== */
.services-grid,
.locations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2.5rem;
}
.services-grid--enhanced {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2.5rem;
}
.services-grid--simple {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.service-card,
.location-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 0;
transition: var(--transition);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.service-card::before,
.location-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform: scaleX(0);
transition: var(--transition);
}
.service-card:hover::before,
.location-card:hover::before {
transform: scaleX(1);
}
.service-card:hover,
.location-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
.service-card h3,
.location-card h3 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-text);
font-size: 1.35rem;
}
/* Service Card Enhanced Layout */
.service-card--enhanced {
padding: 0;
}
.service-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 2rem 2rem 1rem;
gap: 1rem;
}
.service-card__icon {
width: 64px;
height: 64px;
padding: 12px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: var(--radius-lg);
color: var(--color-primary);
transition: var(--transition);
flex-shrink: 0;
}
.service-card:hover .service-card__icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
}
.service-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.service-card__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: linear-gradient(135deg, var(--color-success), #059669);
color: #fff;
padding: 0.4rem 0.75rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--shadow-sm);
}
.service-card__badge svg {
width: 16px;
height: 16px;
}
/* Service Card Body */
.service-card__body {
padding: 0 2rem 1.5rem;
}
.service-card--enhanced h3 {
margin-bottom: 1rem;
font-size: 1.4rem;
font-weight: 700;
}
.service-card__description {
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-text-light);
margin-bottom: 1.25rem;
}
/* Service Card Stats */
.service-card__stats {
display: flex;
gap: 1.5rem;
padding: 1rem;
background: var(--color-bg-light);
border-radius: var(--radius-md);
}
.service-card__stat {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
}
.service-card__stat svg {
color: var(--color-primary);
flex-shrink: 0;
}
/* Service Card Locations - Internal Linking */
.service-card__locations {
padding: 1.5rem 2rem;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.03), rgba(59, 130, 246, 0.03));
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.service-card__locations-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.service-card__locations-header svg {
width: 16px;
height: 16px;
color: var(--color-primary);
}
.service-card__locations-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.service-card__location-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 1rem;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
}
.service-card__location-link:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.service-card__location-link--featured {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #fff;
border-color: var(--color-primary);
font-weight: 700;
box-shadow: var(--shadow-sm);
}
.service-card__location-link--featured svg {
width: 14px;
height: 14px;
color: #fbbf24;
}
.service-card__location-link--featured:hover {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
border-color: var(--color-primary-dark);
box-shadow: var(--shadow-md);
}
.service-card__more-cities {
text-align: center;
padding-top: 0.75rem;
border-top: 1px dashed var(--color-border);
font-size: 0.85rem;
color: var(--color-text-light);
font-weight: 600;
font-style: italic;
}
/* Service Card Footer */
.service-card__footer {
padding: 1.5rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.service-card__cta-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.button--card-main {
flex: 1;
min-width: 180px;
justify-content: center;
}
.button--card-secondary {
flex: 0 0 auto;
font-size: 0.9rem;
padding: 0.75rem 1.25rem;
}
.service-card__quick-info {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--color-text-light);
font-weight: 500;
padding: 0.75rem;
background: var(--color-bg-light);
border-radius: var(--radius-md);
}
.service-card__quick-info svg {
width: 14px;
height: 14px;
color: var(--color-success);
flex-shrink: 0;
}
/* Button Outline Variant */
.button--outline {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
box-shadow: none;
}
.button--outline:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* Service Card Simple Version */
.service-card--simple {
padding: 2rem;
text-align: center;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
}
.service-card--simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform: scaleX(0);
transition: var(--transition);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.service-card--simple:hover::before {
transform: scaleX(1);
}
.service-card--simple:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
.service-card--simple .service-card__icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
padding: 12px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: var(--radius-lg);
color: var(--color-primary);
transition: var(--transition);
}
.service-card--simple:hover .service-card__icon {
transform: scale(1.15) rotate(5deg);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
}
.service-card--simple h3 {
margin: 0 0 1rem 0;
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text);
}
.service-card--simple p {
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-text-light);
margin-bottom: 1.5rem;
flex-grow: 1;
}
.service-card--simple .button {
width: 100%;
justify-content: center;
}
/* Legacy Service Card (for compatibility) */
.service-card:not(.service-card--enhanced):not(.service-card--simple) {
padding: 2rem;
}
.service-card:not(.service-card--enhanced):not(.service-card--simple) .service-card__icon {
margin-bottom: 1.5rem;
}
.service-card:not(.service-card--enhanced):not(.service-card--simple) p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
min-height: 3em;
flex-grow: 1;
}
.service-card:not(.service-card--enhanced):not(.service-card--simple) .button {
width: 100%;
justify-content: center;
margin-top: auto;
}
/* ===================================
Location Cards
=================================== */
.location-card {
text-align: center;
}
.location-card--macro {
border: 2px solid var(--color-primary);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(59, 130, 246, 0.05));
}
.location-card--macro::before {
transform: scaleX(1);
}
.location-card__header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.location-card__header svg {
width: 32px;
height: 32px;
color: var(--color-accent);
}
.location-card__badge {
display: inline-block;
background: var(--color-primary);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.location-card__icon {
width: 48px;
height: 48px;
margin: 0 auto 1rem;
padding: 10px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: 50%;
color: var(--color-primary);
transition: var(--transition);
}
.location-card:hover .location-card__icon {
transform: scale(1.1);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
}
.location-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.location-card p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
color: var(--color-text-light);
}
.button--full {
width: 100%;
justify-content: center;
margin-top: auto;
}
.locations-more {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid var(--color-border);
font-size: 1.1rem;
color: var(--color-text-light);
font-weight: 500;
}
/* ===================================
Trust Section
=================================== */
.trust-section {
padding: 5rem 0;
background: #fff;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2.5rem;
}
.trust-item {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 2rem;
transition: var(--transition);
position: relative;
overflow: hidden;
text-align: center;
}
.trust-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.trust-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
padding: 14px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: 50%;
color: var(--color-primary);
transition: var(--transition);
}
.trust-item:hover .trust-icon {
transform: scale(1.1);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
}
.trust-icon svg {
width: 100%;
height: 100%;
display: block;
}
.trust-item h3 {
font-size: 1.2rem;
margin-bottom: 0.75rem;
}
.trust-item p {
font-size: 0.95rem;
margin: 0;
}
/* ===================================
Testimonials Section
=================================== */
.testimonials-section {
padding: 5rem 0;
background: #fff;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.testimonial-card {
background: var(--color-bg-light);
padding: 2.5rem;
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
transition: var(--transition);
position: relative;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 1rem;
left: 1.5rem;
font-size: 6rem;
font-family: inherit;
color: var(--color-primary);
opacity: 0.1;
line-height: 1;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.testimonial-rating {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
}
.testimonial-rating svg {
width: 20px;
height: 20px;
color: #fbbf24;
}
.testimonial-text {
font-size: 1rem;
line-height: 1.8;
color: var(--color-text);
margin-bottom: 1.5rem;
font-style: italic;
position: relative;
}
.testimonial-author {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 1.5rem;
border-top: 2px solid var(--color-border);
}
.testimonial-author strong {
color: var(--color-text);
font-weight: 700;
font-size: 1.05rem;
}
.testimonial-author span {
color: var(--color-text-light);
font-size: 0.9rem;
}
/* ===================================
FAQ Section
=================================== */
.faq-section {
padding: 5rem 0;
background: var(--color-bg-light);
}
.faq-list,
.faq-grid {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
}
.faq-item {
margin-bottom: 0;
padding: 2rem;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.faq-item:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.faq-item h3 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-primary);
font-size: 1.2rem;
font-weight: 600;
}
.faq-item p,
.faq-answer {
margin-top: 0.75rem;
color: var(--color-text-light);
line-height: 1.8;
margin-bottom: 0;
}
/* ===================================
Cities Section Enhanced
=================================== */
.cities-section {
padding: 4rem 0;
background: var(--color-bg-light);
}
.cities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-top: 2.5rem;
}
.cities-grid--enhanced {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem;
}
.cities-grid--simple {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
/* City Card Enhanced */
.city-card--enhanced {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 0;
transition: var(--transition);
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
}
.city-card--enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform: scaleX(0);
transition: var(--transition);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.city-card--enhanced:hover::before {
transform: scaleX(1);
}
.city-card--enhanced:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
/* Featured City (Verona) */
.city-card--featured {
border: 2px solid var(--color-primary);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02), rgba(59, 130, 246, 0.02));
}
.city-card--featured::before {
transform: scaleX(1);
height: 5px;
}
.city-card__featured-badge {
position: absolute;
top: -12px;
right: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: linear-gradient(135deg, var(--color-accent), #d97706);
color: #fff;
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--shadow-md);
z-index: 10;
}
.city-card__featured-badge svg {
width: 16px;
height: 16px;
color: #fbbf24;
}
/* City Card Header */
.city-card__header {
padding: 2rem 2rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.city-card__icon {
width: 56px;
height: 56px;
padding: 12px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: 50%;
color: var(--color-primary);
transition: var(--transition);
}
.city-card--enhanced:hover .city-card__icon {
transform: scale(1.15) rotate(-5deg);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
}
.city-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.city-card--enhanced h3 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: var(--color-text);
}
/* City Card Body */
.city-card__body {
padding: 0 2rem 1.5rem;
text-align: center;
}
.city-card__description {
font-size: 0.9rem;
line-height: 1.7;
color: var(--color-text-light);
margin-bottom: 1rem;
}
.city-card__stat {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
background: var(--color-bg-light);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
}
.city-card__stat svg {
width: 16px;
height: 16px;
color: var(--color-primary);
}
/* City Card Services - Internal Linking */
.city-card__services {
padding: 1.5rem 2rem;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.03), rgba(59, 130, 246, 0.03));
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.city-card__services-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.city-card__services-header svg {
width: 14px;
height: 14px;
color: var(--color-success);
}
.city-card__services-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.city-card__service-link {
display: inline-block;
padding: 0.45rem 0.9rem;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
}
.city-card__service-link:hover {
background: var(--color-success);
color: #fff;
border-color: var(--color-success);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
/* City Card Footer */
.city-card__footer {
padding: 1.5rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.city-card__all-services {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
padding: 0.6rem;
border-radius: var(--radius-md);
transition: var(--transition);
}
.city-card__all-services:hover {
background: var(--color-bg-light);
text-decoration: none;
}
.city-card__all-services svg {
width: 14px;
height: 14px;
transition: var(--transition);
}
.city-card__all-services:hover svg {
transform: translateX(3px);
}
/* City Card Simple Version */
.city-card--simple {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 2rem;
text-align: center;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
}
.city-card--simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-success), #059669);
transform: scaleX(0);
transition: var(--transition);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.city-card--simple:hover::before {
transform: scaleX(1);
}
.city-card--simple:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--color-success);
}
.city-card--simple .city-card__icon {
width: 56px;
height: 56px;
padding: 12px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
border-radius: 50%;
color: var(--color-success);
margin: 0 auto 1.5rem;
transition: var(--transition);
}
.city-card--simple:hover .city-card__icon {
transform: scale(1.15) rotate(-5deg);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
}
.city-card--simple .city-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.city-card--simple h3 {
margin: 0 0 1.5rem 0;
font-size: 1.3rem;
font-weight: 700;
color: var(--color-text);
}
.city-card--simple .button {
width: 100%;
justify-content: center;
}
/* City Link Simple - Ultra Minimal */
.city-link-simple {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background: #fff;
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--color-text);
font-size: 1rem;
font-weight: 500;
transition: var(--transition);
}
.city-link-simple:hover {
border-color: var(--color-success);
background: rgba(16, 185, 129, 0.05);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.city-link-simple svg {
width: 24px;
height: 24px;
color: var(--color-success);
flex-shrink: 0;
transition: var(--transition);
}
.city-link-simple:hover svg {
transform: scale(1.15);
}
.city-link-simple span {
color: var(--color-text);
}
.city-link-simple strong {
color: var(--color-text);
font-weight: 700;
}
/* Section Footer Enhanced */
.section-footer__content {
text-align: center;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.section-footer__content p {
font-size: 1.1rem;
margin: 0;
}
.city-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
background: #fff;
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text);
font-weight: 500;
transition: var(--transition);
}
.city-link svg {
flex-shrink: 0;
color: var(--color-primary);
transition: var(--transition);
}
.city-link:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.city-link:hover svg {
transform: scale(1.2);
}
.city-link__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.city-link__text strong {
font-size: 1rem;
font-weight: 600;
}
.city-link__text small {
font-size: 0.85rem;
color: var(--color-text-light);
font-weight: 400;
}
/* ===================================
Quick Info Section
=================================== */
.quick-info-section {
padding: 4rem 0;
background: #fff;
}
.quick-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.quick-info-item {
padding: 2rem;
background: var(--color-bg-light);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: var(--transition);
}
.quick-info-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.quick-info-item h3 {
color: var(--color-primary);
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.quick-info-item p {
margin: 0;
line-height: 1.7;
}
/* ===================================
CTA Section
=================================== */
.cta-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
padding: 4rem 1rem;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
border-radius: 0;
margin: 0;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cta-section > * {
position: relative;
z-index: 1;
}
.cta-content {
text-align: center;
position: relative;
z-index: 1;
}
.cta-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
opacity: 0.9;
animation: pulse-icon 2s ease-in-out infinite;
}
@keyframes pulse-icon {
0%, 100% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
.cta-section h2 {
margin-bottom: 1rem;
color: #fff;
font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.cta-section p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
margin-bottom: 2rem;
}
.cta-section .button {
background: #fff !important;
color: var(--color-primary) !important;
box-shadow: var(--shadow-xl);
}
.cta-section .button:hover {
background: rgba(255, 255, 255, 0.95) !important;
transform: translateY(-3px);
color: var(--color-primary) !important;
}
.cta-section .button--cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 1.25rem;
padding: 1.25rem 2.5rem;
background: #ffffff !important;
color: var(--color-primary) !important;
}
.cta-section .button--cta:hover {
color: var(--color-primary-dark) !important;
}
.cta-section .button--cta svg {
width: 24px;
height: 24px;
color: var(--color-primary) !important;
}
.cta-guarantee {
margin-top: 1.5rem;
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
}
/* CTA final on service/city pages: closer to home hero */
.archive-service .cta-section--final,
.archive-city .cta-section--final,
.taxonomy-service .cta-section--final,
.taxonomy-city .cta-section--final,
.single-service_city .cta-section--final {
background: linear-gradient(135deg, #0f2a6b 0%, #1e40af 55%, #2563eb 100%);
padding: clamp(3.5rem, 6vw, 5rem) 1rem;
text-align: center;
color: #ffffff;
}
.archive-service .cta-section--final::before,
.archive-city .cta-section--final::before,
.taxonomy-service .cta-section--final::before,
.taxonomy-city .cta-section--final::before,
.single-service_city .cta-section--final::before {
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1), transparent 55%),
radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.08), transparent 50%);
animation: none;
}
.archive-service .cta-section--final::after,
.archive-city .cta-section--final::after,
.taxonomy-service .cta-section--final::after,
.taxonomy-city .cta-section--final::after,
.single-service_city .cta-section--final::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.25) 100%);
pointer-events: none;
}
.archive-service .cta-section--final .cta-content h2,
.archive-city .cta-section--final .cta-content h2,
.taxonomy-service .cta-section--final .cta-content h2,
.taxonomy-city .cta-section--final .cta-content h2,
.single-service_city .cta-section--final .cta-content h2 {
text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.archive-service .cta-section--final .cta-content p,
.archive-city .cta-section--final .cta-content p,
.taxonomy-service .cta-section--final .cta-content p,
.taxonomy-city .cta-section--final .cta-content p,
.single-service_city .cta-section--final .cta-content p {
color: rgba(255, 255, 255, 0.9);
}
.archive-service .cta-section--final .button--cta,
.archive-city .cta-section--final .button--cta,
.taxonomy-service .cta-section--final .button--cta,
.taxonomy-city .cta-section--final .button--cta,
.single-service_city .cta-section--final .button--cta {
background: #ffffff !important;
color: var(--color-primary-dark) !important;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: calc(var(--radius-xl) + 4px);
padding: 1.5rem 2.75rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.archive-service .cta-section--final .button--cta:hover,
.archive-city .cta-section--final .button--cta:hover,
.taxonomy-service .cta-section--final .button--cta:hover,
.taxonomy-city .cta-section--final .button--cta:hover,
.single-service_city .cta-section--final .button--cta:hover {
transform: translateY(-3px);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}
.archive-service .cta-section--final .cta-guarantee,
.archive-city .cta-section--final .cta-guarantee,
.taxonomy-service .cta-section--final .cta-guarantee,
.taxonomy-city .cta-section--final .cta-guarantee,
.single-service_city .cta-section--final .cta-guarantee {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.95);
}
/* ===================================
Content Sections
=================================== */
.service-info-section,
.city-info-section,
.entry-content-section {
padding: 4rem 0;
background: #fff;
}
.service-info-content,
.city-info-content {
max-width: 900px;
margin: 0 auto;
}
.service-info-content h2,
.city-info-content h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: 1.5rem;
color: var(--color-text);
}
.service-info-content h3,
.city-info-content h3 {
font-size: clamp(1.35rem, 2.5vw, 1.65rem);
margin-top: 2.5rem;
margin-bottom: 1.25rem;
color: var(--color-primary);
}
.service-info-content h4,
.city-info-content h4 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.service-info-content ul,
.city-info-content ul {
margin: 1.5rem 0;
padding-left: 0;
list-style: none;
}
.service-info-content ul li,
.city-info-content ul li {
padding-left: 2rem;
position: relative;
margin-bottom: 1rem;
line-height: 1.8;
}
.service-info-content ul li::before,
.city-info-content ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 1.5rem;
height: 1.5rem;
background: var(--color-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.service-info-content ol,
.city-info-content ol {
margin: 1.5rem 0;
padding-left: 2rem;
counter-reset: custom-counter;
list-style: none;
}
.service-info-content ol li,
.city-info-content ol li {
counter-increment: custom-counter;
position: relative;
padding-left: 2.5rem;
margin-bottom: 1.25rem;
line-height: 1.8;
}
.service-info-content ol li::before,
.city-info-content ol li::before {
content: counter(custom-counter);
position: absolute;
left: 0;
top: 0;
width: 2rem;
height: 2rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
}
/* Info Box Styling */
.info-box {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(59, 130, 246, 0.05));
padding: 2rem;
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-lg);
margin: 2.5rem 0;
box-shadow: var(--shadow-sm);
}
.info-box h4 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-primary);
font-size: 1.2rem;
font-weight: 700;
}
.info-box p {
margin-bottom: 0.5rem;
line-height: 1.8;
}
.info-box strong {
color: var(--color-primary);
font-weight: 700;
}
.entry-content {
font-size: 1.0625rem;
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
padding: 0 1rem;
}
.entry-content h2 {
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--color-border);
}
.entry-content h3 {
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--color-primary);
}
.entry-content ul {
list-style: none;
padding-left: 0;
}
.entry-content ul li {
padding-left: 2rem;
position: relative;
margin-bottom: 1rem;
line-height: 1.8;
}
.entry-content ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 1.5rem;
height: 1.5rem;
background: var(--color-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.entry-content ol {
counter-reset: custom-counter;
list-style: none;
padding-left: 0;
}
.entry-content ol li {
counter-increment: custom-counter;
position: relative;
padding-left: 2.5rem;
margin-bottom: 1.25rem;
line-height: 1.8;
}
.entry-content ol li::before {
content: counter(custom-counter);
position: absolute;
left: 0;
top: 0;
width: 2rem;
height: 2rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
}
.entry-header {
text-align: center;
padding: 3rem 1rem 2rem;
background: var(--color-bg-light);
margin-bottom: 0;
}
.entry-header h1 {
margin-bottom: 0;
}
/* ===================================
USP Section
=================================== */
.usp-section {
padding: 4rem 0;
background: var(--color-bg-light);
}
.usp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.usp-item {
background: #fff;
padding: 2rem;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: var(--transition);
text-align: center;
position: relative;
overflow: hidden;
}
.single-service_city .usp-item__icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(59, 130, 246, 0.08));
border: 1px solid rgba(37, 99, 235, 0.18);
color: var(--color-primary);
display: grid;
place-items: center;
margin: 0 auto 1rem;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.single-service_city .usp-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
opacity: 0.65;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.usp-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.single-service_city .usp-item:hover::before {
transform: scaleX(1);
}
.single-service_city .usp-item:hover .usp-item__icon {
transform: translateY(-2px) rotate(2deg);
transition: transform 0.25s ease;
}
.usp-item h3 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.15rem;
color: var(--color-text);
}
.usp-item p {
margin: 0;
color: var(--color-text-light);
font-size: 0.95rem;
}
/* ===================================
Guarantees Section
=================================== */
.guarantees-section {
padding: 4rem 0;
background: #fff;
}
.guarantees-content {
max-width: 900px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 3rem;
border-radius: calc(var(--radius-xl) + 4px);
border: 2px solid rgba(37, 99, 235, 0.1);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
position: relative;
z-index: 1;
}
.guarantees-content h2 {
text-align: center;
font-size: clamp(2rem, 4vw, 2.5rem);
margin-bottom: 2.5rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.guarantees-content ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
@media (max-width: 900px) {
.single-service_city .guarantees-content ul {
grid-template-columns: 1fr;
}
}
.guarantees-content li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
background: rgba(37, 99, 235, 0.03);
border-radius: var(--radius-lg);
border-left: 4px solid var(--color-primary);
transition: all 0.3s ease;
}
.guarantees-content li::before {
content: '✓';
font-size: 1.5rem;
font-weight: 900;
color: var(--color-primary);
flex-shrink: 0;
width: 32px;
height: 32px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.guarantees-content li:hover {
transform: translateX(4px);
background: rgba(37, 99, 235, 0.06);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}
/* ===================================
Related Sections - Altri Servizi e Comuni Vicini
=================================== */
.related-sections-wrapper {
background: var(--color-bg-light);
padding: 0;
}
.block-services-same-city,
.block-nearby-cities {
padding: 3.5rem 0;
background: var(--color-bg-light);
}
.block-services-same-city {
background: #fff;
}
.block-services-same-city h2,
.block-nearby-cities h2 {
margin-bottom: 0.75rem;
font-size: clamp(1.5rem, 3vw, 2rem);
}
.section-intro {
text-align: center;
color: var(--color-text-light);
margin-bottom: 2.5rem;
font-size: 1.05rem;
}
/* Related Services List */
.related-services-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.related-service-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
transition: var(--transition);
}
.related-service-item:hover {
border-color: var(--color-primary);
background: var(--color-bg-light);
transform: translateX(5px);
box-shadow: var(--shadow-md);
}
.related-service-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-primary);
transition: var(--transition);
}
.related-service-item:hover .related-service-icon {
background: var(--color-primary);
color: #fff;
transform: scale(1.1);
}
.related-service-icon svg {
width: 24px;
height: 24px;
}
.related-service-content {
flex-grow: 1;
}
.related-service-full {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
display: block;
}
.related-service-arrow {
color: var(--color-primary);
transition: var(--transition);
}
.related-service-item:hover .related-service-arrow {
transform: translateX(5px);
}
.related-service-arrow svg {
width: 20px;
height: 20px;
}
/* Related Cities List */
.related-cities-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.related-city-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
transition: var(--transition);
}
.related-city-item:hover {
border-color: var(--color-success);
background: rgba(16, 185, 129, 0.05);
transform: translateX(5px);
box-shadow: var(--shadow-md);
}
.related-city-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-success);
transition: var(--transition);
}
.related-city-item:hover .related-city-icon {
background: var(--color-success);
color: #fff;
transform: scale(1.1);
}
.related-city-icon svg {
width: 24px;
height: 24px;
}
.related-city-content {
flex-grow: 1;
}
.related-city-full {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
display: block;
}
.related-city-arrow {
color: var(--color-success);
transition: var(--transition);
}
.related-city-item:hover .related-city-arrow {
transform: translateX(5px);
}
.related-city-arrow svg {
width: 20px;
height: 20px;
}
.service-locations,
.city-services,
.all-services-section {
padding: 4rem 0;
background: #fff;
}
/* ===================================
Internal Links - Silo Structure
=================================== */
.internal-links-section {
padding: 3rem 0;
background: #111827 !important;
color: #ffffff !important;
}
.internal-links-section *,
.internal-links-section h2,
.internal-links-section h3,
.internal-links-section p,
.internal-links-section a,
.internal-links-section span,
.internal-links-section strong,
.internal-links-section li {
color: #ffffff !important;
}
.internal-links-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.silo-block {
background: rgba(255, 255, 255, 0.05) !important;
padding: 2rem;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.silo-block *,
.silo-block h3,
.silo-block a,
.silo-block strong {
color: #ffffff !important;
}
.silo-block--combined {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15)) !important;
border-color: #3b82f6;
}
.silo-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1.5rem 0;
font-size: 1.25rem;
font-weight: 700;
color: #ffffff !important;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.silo-title svg {
width: 20px;
height: 20px;
color: #3b82f6 !important;
}
.silo-title a {
color: #ffffff !important;
text-decoration: none;
transition: var(--transition);
}
.silo-title a:hover {
color: #3b82f6 !important;
}
.silo-links {
list-style: none;
padding: 0;
margin: 0;
}
.silo-links li {
margin-bottom: 0.75rem;
}
.silo-links a {
color: #ffffff !important;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: var(--transition);
display: inline-block;
}
.silo-links a:hover {
color: #3b82f6 !important;
padding-left: 0.5rem;
text-decoration: none;
}
.silo-links--keywords {
color: #ffffff !important;
}
.silo-links--keywords * {
color: #ffffff !important;
}
.silo-links--keywords a {
font-size: 1rem;
color: #ffffff !important;
font-weight: 600;
}
.silo-links--keywords a:hover {
color: #3b82f6 !important;
}
@media (max-width: 1024px) {
.internal-links-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ===================================
Coverage Section
=================================== */
.coverage-section {
padding: 4rem 0;
background: var(--color-bg-light);
}
.coverage-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2.5rem;
margin-bottom: 2rem;
}
.coverage-stat {
text-align: center;
padding: 2rem;
background: #fff;
border-radius: var(--radius-xl);
border: 2px solid var(--color-primary);
transition: var(--transition);
}
.coverage-stat:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(59, 130, 246, 0.05));
}
.coverage-stat__number {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.75rem;
}
.coverage-stat__label {
font-size: 1.05rem;
color: var(--color-text-light);
font-weight: 600;
}
/* ===================================
Breadcrumbs
=================================== */
.breadcrumbs {
background: transparent;
padding: 0.45rem 0;
border-bottom: 0;
}
.breadcrumbs .container {
display: flex;
justify-content: center;
}
.breadcrumbs__inner {
width: fit-content;
max-width: 100%;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
padding: 0.35rem 0.5rem;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(10px);
}
.breadcrumbs__list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: center;
padding: 0;
margin: 0;
}
.breadcrumbs__item {
display: flex;
align-items: center;
gap: 0.35rem;
color: rgba(15, 23, 42, 0.62);
font-size: 0.9rem;
line-height: 1.2;
}
.breadcrumbs__item:not(:last-child)::after {
content: "›";
margin-left: 0.35rem;
color: rgba(15, 23, 42, 0.35);
font-size: 1rem;
}
.breadcrumbs__link {
color: rgba(15, 23, 42, 0.72);
transition: background 0.18s ease, color 0.18s ease;
font-weight: 700;
text-decoration: none;
padding: 0.18rem 0.42rem;
border-radius: 10px;
white-space: nowrap;
}
.breadcrumbs__link:hover {
color: var(--color-primary);
background: rgba(37, 99, 235, 0.08);
}
.breadcrumbs__link:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.35);
outline-offset: 2px;
}
.breadcrumbs__item.is-current {
color: rgba(15, 23, 42, 0.92);
font-weight: 800;
}
.breadcrumbs__current {
color: rgba(15, 23, 42, 0.92);
font-weight: 800;
white-space: nowrap;
}
/* Home marker (subtle, not emoji-style) */
.breadcrumbs__item:first-child .breadcrumbs__link::before {
content: "⌂";
display: inline-block;
margin-right: 0.3rem;
color: rgba(15, 23, 42, 0.55);
font-weight: 800;
}
@media (max-width: 768px) {
.breadcrumbs {
padding: 0.35rem 0;
}
.breadcrumbs__list {
/* Mobile: one-line compact with smooth horizontal scroll */
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
gap: 0.3rem;
mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.breadcrumbs__item {
font-size: 0.84rem;
}
.breadcrumbs__link {
padding: 0.14rem 0.36rem;
}
.breadcrumbs__list::-webkit-scrollbar {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.breadcrumbs__link {
transition: none;
}
}
/* ===================================
Contact Page
=================================== */
.contact-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #2563eb 100%);
color: #fff;
padding: 5rem 1rem;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 70%);
}
.contact-hero > * {
position: relative;
z-index: 1;
}
.contact-phone-large {
margin-top: 2.5rem;
}
.phone-link {
display: inline-block;
background: #fff;
color: var(--color-primary);
padding: 2.5rem 3.5rem;
border-radius: var(--radius-xl);
text-decoration: none;
font-weight: 700;
box-shadow: var(--shadow-xl);
transition: var(--transition);
}
.phone-link:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}
.phone-number {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: 0.75rem;
font-weight: 800;
color: var(--color-primary);
letter-spacing: 0.05em;
}
.phone-number::before {
content: "📞";
font-size: 0.9em;
line-height: 1;
opacity: 0.95;
}
.phone-label {
display: block;
font-size: 1.15rem;
color: var(--color-text-light);
font-weight: 500;
}
.why-list {
list-style: none;
padding: 0;
margin: 2rem 0;
}
.why-list li {
padding: 1.5rem;
background: #fff;
margin-bottom: 1rem;
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
align-items: center;
gap: 1rem;
}
.why-list li::before {
content: '✓';
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: var(--color-primary);
color: #fff;
border-radius: 50%;
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}
.why-list li:hover {
transform: translateX(8px);
box-shadow: var(--shadow-md);
}
.map-container {
margin-top: 2rem;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
.map-container iframe {
display: block;
width: 100%;
height: 450px;
border: none;
}
/* ===================================
Footer
=================================== */
.site-footer {
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
padding: 4rem 1rem 2rem;
margin-top: 0;
position: relative;
}
.site-footer * {
color: #ffffff;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-primary-light), transparent);
}
.footer__container {
max-width: 1280px;
margin: 0 auto;
}
.footer__content {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 4rem;
margin-bottom: 3rem;
}
.footer__section--main {
border-right: 1px solid rgba(255, 255, 255, 0.1);
padding-right: 2rem;
}
.footer__contact {
margin-top: 1.5rem;
}
.footer__contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer__contact-item svg {
flex-shrink: 0;
}
.footer__section h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #ffffff !important;
font-size: 1.3rem;
font-weight: 700;
position: relative;
padding-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer__section h3 a {
color: #ffffff !important;
text-decoration: none;
}
.footer__section h3 a:hover {
color: var(--color-primary) !important;
padding-left: 0 !important;
}
.footer__section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
border-radius: 2px;
}
.footer__section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer__section ul li {
margin-bottom: 0.65rem;
line-height: 1.6;
}
.footer__section a {
color: rgba(255, 255, 255, 0.85) !important;
transition: var(--transition);
font-weight: 500;
text-decoration: none;
font-size: 0.95rem;
}
.footer__section a:hover {
color: var(--color-primary-light) !important;
padding-left: 0.5rem;
text-decoration: none;
}
.footer__bottom {
text-align: center;
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.footer__bottom p {
margin-bottom: 0.75rem;
}
@media (max-width: 1024px) {
.footer__content {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer__section--main {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-right: 0;
padding-bottom: 2rem;
}
}
/* ===================================
Responsive Design
=================================== */
@media (max-width: 1024px) {
.services-grid,
.cities-grid,
.locations-grid,
.trust-grid,
.usp-grid,
.stats-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.home .trust-section .trust-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
.home .how-it-works-section .steps-simple {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.home .how-it-works-section .step-simple__number {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
}
@media (max-width: 768px) {
section {
padding: 3rem 0;
}
.related-services-list,
.related-cities-list {
grid-template-columns: 1fr;
}
.page-hero {
padding: 4rem 1rem;
min-height: auto;
}
.coverage-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.quick-info-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.services-grid--enhanced,
.services-grid--simple {
grid-template-columns: 1fr;
gap: 2rem;
}
.service-card__header {
flex-direction: column;
align-items: center;
text-align: center;
}
.service-card__badge {
align-self: center;
}
.service-card--enhanced h3 {
text-align: center;
}
.service-card__locations-list {
justify-content: center;
}
.service-card__body {
text-align: center;
}
.service-card__stats {
justify-content: center;
}
.service-card__cta-group {
flex-direction: column;
}
.button--card-main,
.button--card-secondary {
width: 100%;
flex: 1;
}
.cities-grid--enhanced,
.cities-grid--simple {
grid-template-columns: 1fr;
gap: 2rem;
}
.city-card__featured-badge {
top: 1rem;
right: 1rem;
}
.city-card__services-list {
justify-content: center;
}
.page-hero__title {
font-size: 2rem;
}
.page-hero__subtitle {
font-size: 1.05rem;
}
.page-hero__cta-group {
flex-direction: column;
}
.button--hero-primary {
width: 100%;
justify-content: center;
}
.quick-benefits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.quick-benefit {
padding: 1rem;
}
.quick-benefit svg {
width: 32px;
height: 32px;
}
.header__container {
padding: 1rem;
}
.services-grid,
.cities-grid,
.locations-grid,
.trust-grid,
.usp-grid,
.stats-grid,
.steps-grid,
.testimonials-grid,
.faq-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.cta-sticky {
bottom: 16px;
right: 16px;
}
.cta-sticky__link {
padding: 0.875rem 1.25rem;
font-size: 0.9rem;
}
.cta-sticky__text {
display: none;
}
.cta-section {
padding: 3rem 1rem;
}
.footer__content {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ===================================
Mobile hardening (layout safety)
=================================== */
@media (max-width: 768px) {
html,
body {
overflow-x: hidden;
}
}
/* Header phone CTA: allow shrink on very small screens */
@media (max-width: 420px) {
.site-header .header__cta .button--phone {
padding: 0.65rem 0.9rem;
font-size: 0.9rem;
max-width: 100%;
}
.site-header .header__cta .button--phone__text {
font-size: 0.95em;
letter-spacing: 0.04em;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.quick-benefits-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.page-hero__badge {
font-size: 0.8rem;
padding: 0.4rem 1rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.stat-item {
padding: 1rem;
}
.cta-sticky {
bottom: 12px;
right: 12px;
}
.cta-sticky__link {
padding: 0.75rem;
border-radius: 50%;
width: 56px;
height: 56px;
justify-content: center;
}
.cta-sticky__icon {
font-size: 1.5rem;
}
}
/* ===================================
Accessibility
=================================== */
.skip-link:focus {
clip: auto;
height: auto;
width: auto;
position: absolute;
left: 6px;
top: 7px;
z-index: 100000;
background: var(--color-primary);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-md);
font-weight: 600;
box-shadow: var(--shadow-lg);
}
button:focus,
a:focus {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* ===================================
Menu Design (Desktop + Mobile)
=================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: #ffffff;
border-bottom: 1px solid var(--color-border);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
min-height: 72px;
}
.header__container {
max-width: 1280px;
margin: 0 auto;
padding: 1rem 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
}
.header__logo a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 800;
font-size: 1.75rem;
letter-spacing: 0.1em;
color: var(--color-text);
}
.header__nav ul,
.header__nav li {
list-style: none;
margin: 0;
padding: 0;
}
.header__nav > ul {
display: flex;
align-items: center;
gap: 2rem;
}
.header__nav a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
height: 52px;
padding: 0 0.25rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--color-text);
position: relative;
}
.header__nav a::after {
content: '';
position: absolute;
left: 0;
bottom: 6px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.header__nav a:hover,
.header__nav .current-menu-item > a,
.header__nav .current-menu-ancestor > a {
color: var(--color-primary-dark);
}
.header__nav a:hover::after,
.header__nav .current-menu-item > a::after,
.header__nav .current-menu-ancestor > a::after {
transform: scaleX(1);
}
.header__nav .menu-item-has-children > a::after {
content: '▾';
position: static;
width: auto;
height: auto;
background: none;
transform: none;
margin-left: 0.3rem;
opacity: 0.7;
}
.header__nav .menu-item-has-children > a::after,
.header__nav .menu-item-has-children > a::before {
transition: none;
}
.header__nav li {
position: relative;
}
.header__nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
padding: 0.75rem;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--radius-lg);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
display: none;
z-index: 9999;
}
.header__nav li:hover > .sub-menu,
.header__nav li:focus-within > .sub-menu {
display: block;
}
.header__nav .sub-menu a {
display: block;
height: auto;
padding: 0.6rem 0.9rem;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none !important;
}
/* Submenu: evita doppie linee (underline + pseudo-element) */
.header__nav .sub-menu a::after,
.header__nav .sub-menu a::before {
content: none !important;
display: none !important;
}
.header__nav .sub-menu a:hover {
background: rgba(37, 99, 235, 0.08);
color: var(--color-primary);
text-decoration: none !important;
}
.site-header .header__cta .button--phone {
padding: 1.15rem 2.6rem;
border-radius: calc(var(--radius-xl) + 4px);
font-weight: 800;
font-size: 1.15rem;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #60a5fa 100%);
border: 1px solid rgba(37, 99, 235, 0.25);
box-shadow: 0 18px 40px rgba(37, 99, 235, 0.25);
text-transform: uppercase;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
line-height: 1;
flex-wrap: nowrap;
white-space: nowrap;
transition: all 0.3s ease;
}
.site-header .header__cta .button--phone::before {
content: none;
display: none;
}
.site-header .header__cta .button--phone__icon {
flex: 0 0 auto;
display: block;
}
.site-header .header__cta .button--phone__text {
display: block;
}
.site-header .header__cta .button--phone:hover {
transform: translateY(-2px);
box-shadow: 0 22px 48px rgba(37, 99, 235, 0.35);
}
.site-header .header__cta .button--phone:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.4);
outline-offset: 4px;
}
.header__menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
width: 32px;
height: 32px;
justify-content: center;
}
.header__menu-toggle span {
width: 24px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: var(--transition);
display: block;
}
.header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 1024px) {
.header__menu-toggle {
display: flex;
}
.header__nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-xl);
padding: 1rem 0;
}
.header__nav.is-open {
display: block;
}
.header__nav > ul {
flex-direction: column;
gap: 0;
}
.header__nav li {
border-bottom: 1px solid var(--color-border);
}
.header__nav a {
width: 100%;
height: auto;
padding: 1rem 1.5rem;
}
.header__nav a::after {
display: none;
}
.header__nav .sub-menu {
position: static;
display: none;
box-shadow: none;
border: none;
padding: 0.5rem 0 0.75rem 1.5rem;
}
.header__nav .menu-item-has-children.open > .sub-menu {
display: block;
}
}
/* ===================================
Print
=================================== */
@media print {
.cta-sticky,
.header__cta,
.site-header {
display: none;
}
}
/* ===================================
Utility Classes
=================================== */
.text-center {
text-align: center;
}
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
/* ===================================
Site-wide Design Enhancements
=================================== */
body {
text-rendering: optimizeLegibility;
}
@media (min-width: 1280px) {
.container {
max-width: 1240px;
}
}
section {
scroll-margin-top: 96px;
}
.section-header h2 {
letter-spacing: -0.01em;
}
.section-header h2::after {
content: '';
display: block;
width: 56px;
height: 3px;
margin: 0.85rem auto 0;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
border-radius: 999px;
opacity: 0.85;
}
.section-header p {
max-width: 62ch;
margin-left: auto;
margin-right: auto;
}
.section-footer .button {
min-width: 220px;
}
.button {
letter-spacing: 0.02em;
color: #ffffff !important;
}
.button:hover {
color: #ffffff !important;
}
.button:active {
transform: translateY(1px);
}
.button--primary {
color: #ffffff !important;
}
.button--primary:hover {
color: #ffffff !important;
}
.button--full {
color: #ffffff !important;
}
.button--full:hover {
color: #ffffff !important;
}
.button--outline {
background: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
box-shadow: none;
}
.button--outline:hover {
background: var(--color-primary);
color: #fff;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
padding: 0.75rem 0.9rem;
font-size: 1rem;
box-shadow: var(--shadow-sm);
}
input::placeholder,
textarea::placeholder {
color: rgba(107, 114, 128, 0.8);
}
input:focus,
textarea:focus {
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.services-grid--simple {
gap: 2.25rem;
}
.service-card--simple {
border: 1px solid rgba(37, 99, 235, 0.12);
border-radius: calc(var(--radius-lg) + 4px);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: var(--shadow-sm);
}
.service-card--simple:hover {
box-shadow: var(--shadow-lg);
}
.service-card--simple h3 {
letter-spacing: 0.02em;
}
.service-card--simple p {
min-height: 72px;
}
.service-card__icon {
background: rgba(37, 99, 235, 0.12);
}
.testimonials-grid {
gap: 2rem;
}
.testimonial-card {
border: 1px solid rgba(37, 99, 235, 0.12);
border-radius: calc(var(--radius-lg) + 2px);
background: #fff;
}
.testimonial-text {
line-height: 1.7;
}
.testimonial-rating svg {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}
.faq-grid {
gap: 2rem;
}
.faq-item {
border-left: 4px solid rgba(37, 99, 235, 0.2);
border-radius: calc(var(--radius-lg) + 2px);
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}
.faq-item:hover {
border-left-color: var(--color-primary);
}
.faq-item h3 {
letter-spacing: 0.01em;
}
.cities-grid--simple {
gap: 1.5rem;
}
.city-link-simple {
border-radius: 999px;
padding: 0.8rem 1.3rem;
background: #fff;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.city-link-simple:hover {
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.45);
}
.steps-simple {
gap: 2rem;
}
.step-simple {
border: 1px solid rgba(37, 99, 235, 0.12);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.step-simple__number {
box-shadow: var(--shadow-md);
}
.trust-grid {
gap: 2.25rem;
}
.trust-item {
border-radius: calc(var(--radius-lg) + 2px);
box-shadow: var(--shadow-sm);
}
.internal-links-section .silo-block {
border-radius: calc(var(--radius-lg) + 2px);
box-shadow: var(--shadow-lg);
}
.cta-section {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.quick-benefit__title {
display: block;
font-weight: 700;
font-size: 1rem;
color: var(--color-text);
}
.cta-section .cta-content {
max-width: 780px;
margin: 0 auto;
}
.cta-section .cta-guarantee {
letter-spacing: 0.03em;
}
.emergency-box {
border-radius: calc(var(--radius-lg) + 2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15);
}
.emergency-box__phone {
letter-spacing: 0.03em;
}
.site-footer a {
transition: color 0.2s ease, transform 0.2s ease;
}
.site-footer a:hover {
transform: translateX(2px);
}
/* ===================================
Site-wide Enhancements - Pass 2
=================================== */
body {
letter-spacing: 0.005em;
}
img {
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
section {
border-top: 1px solid rgba(15, 23, 42, 0.03);
}
section:first-of-type {
border-top: none;
}
.container {
padding-left: clamp(1rem, 3vw, 2rem);
padding-right: clamp(1rem, 3vw, 2rem);
}
.section-header h2 {
font-weight: 800;
}
.section-header p {
line-height: 1.7;
}
.section-footer {
border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.button--large {
border-radius: calc(var(--radius-lg) + 4px);
}
.button--cta {
letter-spacing: 0.06em;
}
.button--cta svg {
transform: translateY(-1px);
}
.services-grid,
.testimonials-grid,
.faq-grid,
.cities-grid {
row-gap: 2rem;
}
.service-card__icon,
.trust-icon,
.step-simple__number {
border: 1px solid rgba(37, 99, 235, 0.12);
}
.service-card__icon svg,
.trust-icon svg,
.step-simple__number svg {
transform: translateZ(0);
}
.testimonial-card {
padding: 2.5rem;
}
.testimonial-author span {
opacity: 0.8;
}
.faq-item {
padding: 2rem;
}
.faq-item p {
margin-top: 0.5rem;
}
.cities-section .section-footer {
border-top: none;
}
.city-link-simple svg {
opacity: 0.85;
}
.city-link-simple strong {
letter-spacing: 0.01em;
}
.steps-simple {
align-items: stretch;
}
.step-simple h3 {
margin-bottom: 0.5rem;
}
.trust-item p {
margin-bottom: 0;
}
.cta-section .cta-content h2 {
line-height: 1.2;
}
.cta-section .cta-content p {
margin-top: 0.75rem;
}
.cta-section .button--cta {
padding: 1.2rem 2.4rem;
}
.internal-links-section .silo-title {
padding-bottom: 0.5rem;
}
.internal-links-section .silo-links a {
padding: 0.2rem 0;
}
.about-section p {
max-width: 70ch;
}
.intro-text-section p {
max-width: 75ch;
}
.services-section .section-header p,
.testimonials-section .section-header p,
.faq-section .section-header p,
.cities-section .section-header p {
max-width: 60ch;
}
.emergency-box {
gap: 1.25rem;
}
.emergency-box__title {
letter-spacing: 0.04em;
}
.emergency-box__features span {
background: rgba(239, 68, 68, 0.08);
padding: 0.25rem 0.5rem;
border-radius: 999px;
}
.site-footer h3 {
letter-spacing: 0.02em;
}
.footer__bottom p {
max-width: 70ch;
margin-left: auto;
margin-right: auto;
}
.header__logo img {
max-height: 52px;
}
.header__cta .button--phone {
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.3);
}
@media (max-width: 1024px) {
.section-header {
margin-bottom: 2rem;
}
.button--large {
padding: 1.1rem 2.2rem;
}
.testimonial-card {
padding: 2rem;
}
}
@media (max-width: 768px) {
.section-header h2::after {
width: 42px;
}
.faq-item {
padding: 1.5rem;
}
.emergency-box {
padding: 1.25rem;
}
}
/* ===================================
Home Page Design Enhancements
=================================== */
.home section {
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.home .section-header {
max-width: 760px;
}
.home .section-header p {
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
.home .hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 55%),
radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.06), transparent 50%);
pointer-events: none;
}
.home .hero__title {
letter-spacing: -0.03em;
text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.home .hero__subtitle {
font-weight: 500;
opacity: 0.95;
}
.home .hero__cta {
border-radius: 1.25rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.home .hero__cta:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
}
.home .hero__cta-number {
letter-spacing: 0.04em;
}
.home .hero__features {
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(12px);
}
.home .hero__feature {
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 0.95rem;
}
/* Hero improvements (home) */
.home .hero {
padding: clamp(3.5rem, 6vw, 5rem) 0;
min-height: clamp(520px, 70vh, 680px);
}
.home .hero__content {
max-width: 900px;
}
.home .hero__badge {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.home .hero__title {
line-height: 1.05;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
.home .hero__subtitle {
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
.home .hero__cta {
border: 1px solid rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
}
.home .hero__cta-icon {
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
}
.home .hero__features {
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}
.home .hero__feature svg {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}
@media (max-width: 768px) {
.home .hero {
min-height: auto;
padding: 4rem 0;
}
.home .hero__cta {
padding: 1.25rem 2rem;
width: 100%;
justify-content: center;
}
.home .hero__features {
padding: 1.25rem 1.25rem;
}
}
/* Hero refinements (home) */
.home .hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.25) 100%);
pointer-events: none;
}
.home .hero__badge {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home .hero__badge:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}
.home .hero__cta {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home .hero__cta:active {
transform: translateY(-1px);
}
.home .hero__cta:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.85);
outline-offset: 4px;
}
.home .hero__cta-label {
letter-spacing: 0.08em;
}
.home .hero__cta-number {
text-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.home .hero__features {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
gap: 2rem;
}
.home .hero__feature {
padding: 0.35rem 0.6rem;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.08);
}
.home .hero__feature:hover {
background: rgba(255, 255, 255, 0.16);
}
/* Hero refinements - pass 2 (home) */
.home .hero__content {
gap: 1.5rem;
}
.home .hero__title::after {
content: '';
display: block;
width: 64px;
height: 3px;
margin: 1rem auto 0;
background: linear-gradient(90deg, var(--color-accent), rgba(255, 255, 255, 0.6));
border-radius: 999px;
}
.home .hero__subtitle {
letter-spacing: 0.01em;
}
.home .hero__cta-box {
margin-bottom: 2.5rem;
}
.home .hero__cta-icon {
width: 52px;
height: 52px;
}
.home .hero__cta-text {
gap: 0.15rem;
}
.home .hero__feature {
font-weight: 600;
}
.home .hero__feature svg {
opacity: 0.95;
}
.home .hero__features {
border-radius: calc(var(--radius-lg) + 4px);
}
/* Hero refinements - pass 3 (home) */
.home .hero {
isolation: isolate;
}
.home .hero__content {
position: relative;
z-index: 2;
}
.home .hero__background {
opacity: 0.55;
}
.home .hero__title {
font-weight: 900;
text-wrap: balance;
}
/* ZAGLIA brand - crisp, no animation */
.home .hero__brand {
display: inline-block;
color: #ffffff;
text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.home .hero__title span {
display: inline-block;
}
.home .hero__subtitle {
line-height: 1.7;
}
.home .hero__badge {
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.06em;
}
.home .hero__badge svg {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}
.home .hero__cta {
background: rgba(255, 255, 255, 0.98);
}
.home .hero__cta:hover {
transform: translateY(-3px);
}
.home .hero__cta-label {
font-size: 0.85rem;
}
.home .hero__cta-number {
font-size: clamp(1.6rem, 2.5vw, 1.9rem);
}
.home .hero__cta-icon svg {
transform: translateZ(0);
}
.home .hero__features {
border: 1px solid rgba(255, 255, 255, 0.28);
}
.home .hero__feature {
backdrop-filter: blur(4px);
}
.home .hero__feature svg {
width: 18px;
height: 18px;
}
.home .hero__feature span {
opacity: 0.95;
}
.home .hero__cta-box {
gap: 1rem;
}
.home .hero__cta-text {
align-items: flex-start;
}
.home .hero__cta-number {
letter-spacing: 0.05em;
}
.home .hero__cta:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.6);
outline-offset: 4px;
}
.home .hero__features {
margin-top: 2.5rem;
}
.home .hero__feature {
transition: transform 0.2s ease, background 0.2s ease;
}
.home .hero__feature:hover {
transform: translateY(-2px);
}
.home .hero__badge {
margin-bottom: 2rem;
}
.home .hero__subtitle {
margin-bottom: 2.75rem;
}
@media (max-width: 1024px) {
.home .hero__title {
max-width: 20ch;
}
}
@media (max-width: 768px) {
.home .hero__cta-text {
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.home .hero__feature,
.home .hero__cta,
.home .hero__badge {
transition: none;
}
}
/* Hero refinements - pass 4 (home) */
.home .hero {
background: linear-gradient(135deg, #0f2a6b 0%, #1e40af 55%, #2563eb 100%);
}
.home .hero::before {
opacity: 0.7;
}
.home .hero::after {
height: 140px;
}
.home .hero__content {
padding: 0 1rem;
}
.home .hero__title {
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.home .hero__subtitle {
color: rgba(255, 255, 255, 0.92);
}
.home .hero__cta {
gap: 1rem;
padding: 1.5rem 2.75rem;
}
.home .hero__cta:hover {
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}
.home .hero__cta-icon {
background: linear-gradient(135deg, #1d4ed8, #60a5fa);
}
.home .hero__cta-label {
color: var(--color-primary-dark) !important;
}
.home .hero__features {
border: 1px solid rgba(255, 255, 255, 0.22);
}
.home .hero__feature {
font-size: 0.9rem;
text-transform: none;
}
.home .hero__feature svg {
color: #22c55e !important;
}
@media (max-width: 1024px) {
.home .hero__cta {
padding: 1.25rem 2.25rem;
}
}
@media (max-width: 768px) {
.home .hero__content {
padding: 0;
}
.home .hero__features {
gap: 1.25rem;
}
}
/* Hero refinements - pass 5 (home) */
.home .hero {
background-size: 140% 140%;
background-position: 50% 30%;
}
.home .hero::before {
background-blend-mode: screen;
}
.home .hero__background {
mix-blend-mode: soft-light;
}
.home .hero__content {
text-align: center;
}
.home .hero__badge {
border-radius: 999px;
}
.home .hero__badge span {
opacity: 0.95;
}
.home .hero__title {
margin-bottom: 1.25rem;
}
.home .hero__title::after {
margin-top: 0.85rem;
}
.home .hero__subtitle {
font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.home .hero__cta-box {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1rem;
position: relative;
}
.home .hero__cta-box::before {
content: '';
position: absolute;
inset: -20px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.home .hero__cta {
border-radius: calc(var(--radius-xl) + 4px);
position: relative;
z-index: 1;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 2px 0 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: pulse-cta 3s ease-in-out infinite;
}
@keyframes pulse-cta {
0%, 100% {
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 0 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 0 8px rgba(255, 255, 255, 0.2);
}
}
.home .hero__cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: calc(var(--radius-xl) + 4px);
z-index: -1;
}
.home .hero__cta::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: -1;
pointer-events: none;
}
.home .hero__cta:hover::after {
width: 400px;
height: 400px;
}
.home .hero__cta:hover {
animation: none;
}
.home .hero__cta:active {
transform: translateY(-1px) scale(0.98);
}
.home .hero__cta-icon {
width: 64px;
height: 64px;
border: 3px solid rgba(255, 255, 255, 0.95);
box-shadow:
0 8px 20px rgba(37, 99, 235, 0.4),
0 0 0 4px rgba(37, 99, 235, 0.1);
position: relative;
overflow: visible;
}
.home .hero__cta-icon::after {
content: '';
position: absolute;
inset: -6px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
animation: pulse-ring-1 2s ease-in-out infinite;
}
.home .hero__cta-icon::before {
content: '';
position: absolute;
inset: -12px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
animation: pulse-ring-2 2s ease-in-out infinite 0.3s;
z-index: -1;
}
@keyframes pulse-ring-1 {
0%, 100% {
transform: scale(1);
opacity: 0.6;
}
50% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes pulse-ring-2 {
0%, 100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.3);
opacity: 0;
}
}
.home .hero__cta:hover .hero__cta-icon {
transform: scale(1.1) rotate(-8deg);
box-shadow:
0 12px 30px rgba(37, 99, 235, 0.5),
0 0 0 6px rgba(37, 99, 235, 0.15);
animation: icon-spin-hover 0.6s ease-in-out;
}
@keyframes icon-spin-hover {
0%, 100% {
transform: scale(1.1) rotate(-8deg);
}
50% {
transform: scale(1.12) rotate(-12deg);
}
}
.home .hero__cta:active .hero__cta-icon {
transform: scale(1.05) rotate(0deg);
animation: icon-click-spin 0.4s ease-out;
}
@keyframes icon-click-spin {
0% {
transform: scale(1.05) rotate(0deg);
}
50% {
transform: scale(1.08) rotate(180deg);
}
100% {
transform: scale(1.05) rotate(360deg);
}
}
.home .hero__cta-number {
line-height: 1.05;
font-weight: 900;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.home .hero__badge {
backdrop-filter: blur(8px);
}
.home .hero__cta {
backdrop-filter: blur(8px);
}
.home .hero__content {
padding-top: 0.5rem;
}
.home .hero__cta-number {
font-weight: 800;
}
.home .hero__cta-label {
font-weight: 700;
}
.home .hero__subtitle {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.home .hero__content {
gap: 1.15rem;
}
.home .hero__badge {
margin: 0 0 0.75rem;
}
.home .hero__title {
margin-bottom: 0.4rem;
}
.home .hero__title::after {
margin: 0.6rem auto 0;
}
/* Hero H2 Keywords styling - Clean inline with strong emphasis */
.home .hero__subtitle--keywords {
margin: 0.35rem auto 0;
max-width: 60ch;
display: block;
text-align: center;
font-size: clamp(1.12rem, 2.4vw, 1.55rem);
font-weight: 700;
line-height: 1.55;
color: #ffffff;
letter-spacing: 0.01em;
padding: 0.65rem 1rem;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.15));
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
position: relative;
}
.home .hero__subtitle--keywords strong {
color: inherit;
font-weight: inherit;
text-shadow: none;
position: static;
padding: 0;
white-space: normal;
}
.home .hero__subtitle--keywords strong::after {
content: none;
}
.home .hero__subtitle--keywords::after {
content: '';
display: block;
width: clamp(140px, 30%, 220px);
height: 3px;
margin: 0.6rem auto 0;
border-radius: 999px;
background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.9), rgba(96, 165, 250, 0));
}
@media (max-width: 768px) {
.home .hero__subtitle--keywords {
font-size: 1.08rem;
line-height: 1.6;
padding: 0.6rem 0.85rem;
}
}
/* Hero description redesign (optional subtitle) */
.home .hero__subtitle:not(.hero__subtitle--keywords) {
margin: 0.6rem auto 1.7rem;
max-width: 640px;
padding: 1rem 1.4rem 1.1rem;
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
color: rgba(255, 255, 255, 0.94);
font-size: clamp(1rem, 2vw, 1.15rem);
line-height: 1.6;
letter-spacing: 0.01em;
text-wrap: pretty;
position: relative;
}
.home .hero__subtitle:not(.hero__subtitle--keywords)::before {
content: '';
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(147, 197, 253, 0.9), rgba(255, 255, 255, 0.6));
opacity: 0.8;
}
@media (max-width: 768px) {
.home .hero__subtitle:not(.hero__subtitle--keywords) {
padding: 0.9rem 1rem 1rem;
border-radius: 14px;
font-size: 1rem;
}
}
.home .hero__cta-box {
margin-bottom: 1.6rem;
}
.home .hero__features {
margin-bottom: 0.5rem;
}
.home .hero__badge {
margin-top: 0.5rem;
}
@media (max-width: 1024px) {
.header__container {
padding: 0.85rem 1.5rem;
gap: 1.5rem;
}
.header__logo a {
font-size: 1.2rem;
}
.header__nav a {
height: 48px;
font-size: 0.95rem;
}
.site-header .header__cta .button--phone {
padding: 0.75rem 1.4rem;
font-size: 0.92rem;
}
.home .hero__features {
padding: 1.25rem 1.25rem;
}
.home .hero__cta-number {
font-size: clamp(1.4rem, 4vw, 1.65rem);
}
}
@media (max-width: 480px) {
.home .hero__badge {
font-size: 0.78rem;
}
.home .hero__cta {
padding: 1.1rem 1.5rem;
}
}
/* Hero features copy + layout */
.home .hero__features {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 132px;
gap: 1rem;
margin-top: 2.5rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 1.5rem;
align-items: stretch;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(18px) saturate(180%);
border-radius: calc(var(--radius-xl) + 2px);
border: 2px solid rgba(255, 255, 255, 0.25);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.15),
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 0 60px rgba(255, 255, 255, 0.05);
position: relative;
animation: features-reveal 1s ease-out 0.6s backwards;
}
@keyframes features-reveal {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.home .hero__features::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(45deg,
rgba(255, 255, 255, 0.3),
transparent 30%,
transparent 70%,
rgba(255, 255, 255, 0.3));
background-size: 200% 200%;
border-radius: calc(var(--radius-xl) + 2px);
opacity: 0;
animation: border-glow-sweep 6s ease-in-out infinite;
z-index: -1;
}
@keyframes border-glow-sweep {
0%, 100% {
opacity: 0;
background-position: 0% 50%;
}
50% {
opacity: 0.5;
background-position: 100% 50%;
}
}
.home .hero__feature {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
align-content: center;
gap: 0.85rem;
padding: 1.25rem 1rem;
height: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.home .hero__feature::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--color-success), var(--color-accent));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.home .hero__feature:hover::before {
opacity: 1;
}
.home .hero__feature:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.home .hero__feature svg {
width: 32px;
height: 32px;
color: var(--color-success);
filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.5));
transition: all 0.3s ease;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.home .hero__feature:hover svg {
transform: scale(1.15) rotate(-5deg);
filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.7));
}
.home .hero__feature-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
justify-content: center;
text-align: left;
position: relative;
z-index: 1;
min-width: 0;
}
.home .hero__feature-value {
font-weight: 800;
font-size: 1.08rem;
letter-spacing: 0.02em;
line-height: 1.2;
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home .hero__feature-label {
font-size: 0.84rem;
opacity: 0.92;
line-height: 1.35;
font-weight: 500;
color: rgba(255, 255, 255, 0.88) !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Responsive hero features */
@media (max-width: 1200px) {
.home .hero__features {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 128px;
gap: 1rem;
padding: 1.25rem;
}
.home .hero__feature {
padding: 1.15rem 0.85rem;
}
}
@media (max-width: 768px) {
.home .hero__features {
grid-template-columns: 1fr;
gap: 0.85rem;
margin-top: 2rem;
padding: 1.25rem 1rem;
}
.home .hero__feature {
padding: 1.15rem 0.85rem;
gap: 0.75rem;
}
.home .hero__feature svg {
width: 28px;
height: 28px;
}
.home .hero__feature-value {
font-size: 0.98rem;
}
.home .hero__feature-label {
font-size: 0.78rem;
}
}
@media (max-width: 1200px) {
.home .hero__features {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.home .hero__feature {
padding: 1.5rem 1rem;
}
}
@media (max-width: 768px) {
.home .hero__features {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 2rem;
}
.home .hero__feature {
padding: 1.5rem 1rem;
}
.home .hero__feature svg {
width: 32px;
height: 32px;
}
.home .hero__feature-value {
font-size: 1.05rem;
}
.home .hero__feature-label {
font-size: 0.82rem;
}
}
@media (max-width: 480px) {
.home .hero__features {
grid-template-columns: 1fr;
gap: 1rem;
}
.home .hero__feature {
padding: 1.5rem 1.25rem;
}
.home .hero__feature-label {
font-size: 0.8rem;
}
}
/* Hero spacing & typography fine-tuning */
.home .hero {
padding-top: clamp(4rem, 7vw, 6rem);
padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.home .hero__content {
gap: 0.9rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
}
.home .hero__badge {
margin-bottom: 1.75rem;
padding: 0.7rem 1.85rem 0.7rem 1.65rem;
font-size: 0.92rem;
gap: 0.65rem;
letter-spacing: 0.05em;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home .hero__badge::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
pointer-events: none;
}
.home .hero__title {
font-size: clamp(2.6rem, 6vw, 4.4rem);
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1.1;
margin-bottom: 0.35rem;
}
.home .hero__subtitle {
font-size: clamp(1.05rem, 2.2vw, 1.3rem);
line-height: 1.8;
}
.home .hero__cta-box {
margin-top: 0.2rem;
margin-bottom: 1.6rem;
}
.home .hero__cta-box::before {
inset: -25px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 65%);
}
.home .hero__cta {
padding: 1.35rem 2.5rem;
}
.home .hero__cta-text {
gap: 0.3rem;
}
.home .hero__cta-label {
font-size: 0.88rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.95;
}
.home .hero__cta-number {
font-size: clamp(1.5rem, 2.6vw, 1.85rem);
}
.home .hero__features {
padding: 1.75rem 1.75rem;
gap: 1rem;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
border: 2px solid rgba(255, 255, 255, 0.28);
}
.home .hero__feature {
padding: 0.75rem 0.9rem;
}
.home .hero__feature-value {
font-size: 0.98rem;
}
.home .hero__feature-label {
font-size: 0.8rem;
}
@media (max-width: 768px) {
.header__container {
padding: 0.75rem 1.25rem;
}
.site-header {
min-height: 64px;
}
.home .hero__title {
font-size: clamp(2.1rem, 7vw, 3rem);
}
.home .hero__subtitle {
font-size: 1.02rem;
}
.home .hero__cta {
padding: 1.15rem 1.75rem;
}
.home .hero__features {
padding: 1rem;
}
}
.home .services-section {
background-image: radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px);
background-size: 20px 20px;
}
.home .services-section .services-grid--simple {
gap: 2.5rem;
align-items: stretch;
}
.home .services-section .service-card--simple {
border-radius: calc(var(--radius-lg) + 4px);
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home .services-section .service-card--simple:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.home .services-section .service-card--simple h3 {
letter-spacing: 0.03em;
text-transform: uppercase;
}
.home .services-section .service-card--simple .button {
width: 100%;
justify-content: center;
}
.home .services-section .service-card__icon {
width: 56px;
height: 56px;
background: rgba(37, 99, 235, 0.12);
border-radius: 50%;
}
.home .services-section .service-card__icon svg {
opacity: 0.9;
}
.home .how-it-works-section .steps-simple {
gap: 2rem;
}
.home .how-it-works-section .step-simple {
border: 1px solid rgba(37, 99, 235, 0.12);
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home .how-it-works-section .step-simple:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.home .how-it-works-section .step-simple__number {
box-shadow: var(--shadow-md);
}
.home .testimonials-section .testimonial-card {
border: 1px solid rgba(37, 99, 235, 0.12);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.home .testimonials-section .testimonial-card::before {
content: '“';
position: absolute;
top: 0.5rem;
left: 1rem;
font-size: 6rem;
color: rgba(37, 99, 235, 0.08);
line-height: 1;
pointer-events: none;
}
.home .testimonials-section .testimonial-rating svg {
color: var(--color-accent);
}
.home .testimonials-section .testimonial-author {
border-top: 1px solid var(--color-border);
padding-top: 1rem;
}
.home .faq-section .faq-item {
border-left: 4px solid rgba(37, 99, 235, 0.2);
border-radius: calc(var(--radius-lg) + 2px);
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}
.home .faq-section .faq-item:hover {
border-left-color: var(--color-primary);
background: #fff;
}
.home .faq-section .faq-item h3::after {
content: '↗';
margin-left: 0.4rem;
font-size: 0.9rem;
opacity: 0.5;
}
/* ===================================
Design Enhancements - Pass 6
=================================== */
html {
scroll-behavior: smooth;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
::selection {
background: rgba(37, 99, 235, 0.2);
color: var(--color-text);
}
a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 2px;
}
a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 4px;
}
.section-header h2 {
position: relative;
display: inline-block;
}
.section-header h2::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.4rem;
width: 56px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
border-radius: 999px;
opacity: 0.9;
}
.section-header p {
max-width: 640px;
margin: 0.5rem auto 0;
}
.page-hero__subtitle {
max-width: 720px;
margin: 1rem auto 0;
}
.page-hero__badge {
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}
.button {
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.button:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
.button--outline:hover {
background: var(--color-primary);
color: #ffffff;
}
.service-card,
.service-card--simple {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover,
.service-card--simple:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(37, 99, 235, 0.25);
}
.service-card h3,
.service-card--simple h3 {
letter-spacing: -0.01em;
}
.service-card p,
.service-card--simple p {
color: var(--color-text-light);
}
.testimonial-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.faq-item h3 {
transition: color 0.2s ease;
}
.faq-item:hover h3 {
color: var(--color-primary);
}
.emergency-box {
border: 1px solid rgba(37, 99, 235, 0.15);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
.emergency-box__phone {
font-weight: 700;
}
.cities-grid .city-link-simple {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cities-grid .city-link-simple:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(37, 99, 235, 0.25);
}
.city-link-simple svg {
background: rgba(37, 99, 235, 0.12);
border-radius: 50%;
padding: 0.25rem;
}
.entry-content h2,
.entry-content h3 {
margin-top: 2.5rem;
}
.entry-content h2:first-child,
.entry-content h3:first-child {
margin-top: 0;
}
.entry-content ul li::marker,
.entry-content ol li::marker {
color: var(--color-primary);
font-weight: 700;
}
.breadcrumbs {
color: var(--color-text-light);
}
.breadcrumbs a {
color: var(--color-primary);
}
.breadcrumbs a:hover {
color: var(--color-primary-dark);
}
.footer__section h3 a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.footer__contact-item a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.cta-section .cta-content h2 {
text-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
/* ===================================
Design Enhancements - Pass 7
=================================== */
.container {
scroll-margin-top: 96px;
}
img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
figure {
margin: 1.5rem 0;
}
figcaption {
font-size: 0.95rem;
color: var(--color-text-light);
text-align: center;
margin-top: 0.5rem;
}
hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
margin: 2rem 0;
}
.page-hero {
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}
.page-hero__badge svg {
filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.25));
}
.page-hero__cta-group .button {
min-width: 220px;
}
.section-footer .button {
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.services-grid {
gap: 2rem;
}
.service-card__icon {
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}
.service-card__icon svg {
filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.2));
}
.service-card__meta {
font-weight: 600;
color: var(--color-text);
}
.step-simple__number {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: #ffffff;
}
.quick-benefit {
border: 1px solid rgba(37, 99, 235, 0.12);
border-radius: var(--radius-lg);
}
.quick-benefit svg {
filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.2));
}
.testimonial-text {
font-style: italic;
}
.testimonial-author strong {
letter-spacing: 0.02em;
}
.faq-item {
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.faq-item p {
color: var(--color-text-light);
}
.cta-section .button--cta {
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.3);
}
.cta-section .button--cta:hover {
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.35);
}
.cta-guarantee {
background: rgba(255, 255, 255, 0.12);
padding: 0.5rem 1rem;
border-radius: 999px;
display: inline-block;
}
.page-hero__background {
mix-blend-mode: soft-light;
}
.entry-content blockquote {
margin: 2rem 0;
padding: 1.5rem 1.75rem;
background: var(--color-bg-light);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-lg);
color: var(--color-text);
}
.entry-content blockquote p {
color: var(--color-text);
font-style: italic;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.entry-content table th,
.entry-content table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.entry-content table th {
background: var(--color-bg-light);
color: var(--color-text);
font-weight: 700;
}
.entry-content table tr:nth-child(even) td {
background: rgba(248, 250, 252, 0.6);
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
background: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
outline: none;
}
input::placeholder,
textarea::placeholder {
color: rgba(15, 23, 42, 0.5);
}
/* ===================================
Design Enhancements - Pass 8
=================================== */
.site-header {
backdrop-filter: blur(12px);
}
.header__logo a {
text-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
}
.header__nav a {
position: relative;
}
.header__nav a::after {
content: '';
position: absolute;
left: 0;
bottom: -0.35rem;
width: 100%;
height: 2px;
background: currentColor;
opacity: 0;
transform: scaleX(0.6);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.header__nav a:hover::after {
opacity: 0.6;
transform: scaleX(1);
}
.site-header .header__cta .button--phone {
box-shadow: 0 18px 40px rgba(37, 99, 235, 0.25);
}
.site-header .header__cta .button--phone:hover {
transform: translateY(-2px);
box-shadow: 0 22px 48px rgba(37, 99, 235, 0.35);
}
.hero__title {
text-wrap: balance;
}
.hero__subtitle {
text-wrap: pretty;
}
.hero__cta-box {
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
}
.hero__features {
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}
.hero__feature {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero__feature:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.services-section .section-header {
margin-bottom: 3rem;
}
.services-section .button--full {
font-weight: 700;
letter-spacing: 0.01em;
}
.testimonials-section .section-header p {
max-width: 680px;
margin: 0.75rem auto 0;
}
.testimonial-card .testimonial-text {
font-size: 1.05rem;
}
.testimonial-rating svg {
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.12));
}
.faq-section .section-header {
margin-bottom: 3rem;
}
.home .faq-section .section-header {
position: relative;
padding: 2.5rem 2rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
backdrop-filter: blur(12px);
border-radius: var(--radius-xl);
border: 2px solid rgba(37, 99, 235, 0.12);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
margin-bottom: 3.5rem;
}
.home .faq-section .section-header::before {
content: '❓' !important;
position: absolute;
top: 50%;
left: 2rem;
transform: translateY(-50%);
font-size: 3.5rem;
opacity: 0.15;
z-index: 0;
height: auto !important;
background: none !important;
border-radius: 0 !important;
}
.home .faq-section .section-header::after {
content: '💡' !important;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 3rem;
opacity: 0.15 !important;
z-index: 0;
}
.home .faq-section .section-header h2 {
position: relative;
z-index: 1;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: clamp(2rem, 4vw, 2.5rem);
margin-bottom: 1rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.home .faq-section .section-header h2::after {
content: '';
display: block;
width: 100px;
height: 4px;
margin: 1rem auto 0;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
border-radius: 999px;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
animation: line-pulse 2s ease-in-out infinite;
}
@keyframes line-pulse {
0%, 100% {
width: 100px;
opacity: 1;
}
50% {
width: 120px;
opacity: 0.8;
}
}
.home .faq-section .section-header p {
position: relative;
z-index: 1;
font-size: 1.15rem;
color: rgba(15, 23, 42, 0.75);
font-weight: 500;
max-width: 640px;
margin: 1rem auto 0;
line-height: 1.6;
}
.faq-item h3 {
letter-spacing: -0.01em;
}
.faq-item p {
margin-top: 0.75rem;
}
.cities-section .section-header p {
max-width: 680px;
margin: 0.75rem auto 0;
}
.city-link-simple {
background: #ffffff;
}
.cta-section {
position: relative;
overflow: hidden;
}
.cta-section::after {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 60%;
height: 80%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.cta-section .cta-content {
position: relative;
z-index: 1;
}
.cta-section .button--cta {
letter-spacing: 0.02em;
}
.footer__section ul li a {
transition: color 0.2s ease, transform 0.2s ease;
}
.footer__section ul li a:hover {
transform: translateX(2px);
}
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.page-hero__content h1 {
text-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}
.page-hero__badge {
border: 1px solid rgba(255, 255, 255, 0.3);
}
.page-hero__cta-group {
gap: 1rem;
}
@media (max-width: 768px) {
.header__nav a::after {
display: none;
}
.site-header .header__cta .button--phone {
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.3);
}
.hero__features {
box-shadow: var(--shadow-sm);
}
.cta-section::after {
display: none;
}
}
/* ===================================
Home Section Separation Enhancements
=================================== */
.home {
--color-surface-strong: #f7f9fd;
--color-surface-alt: #eef3f9;
}
.home .site-main > section {
position: relative;
padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}
.home .site-main > section:not(.hero):not(.page-hero):not(.cta-section)::before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: min(900px, 85%);
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-divider), transparent);
}
.home .site-main > section:not(.hero):not(.page-hero):not(.cta-section)::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(900px, 85%);
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-divider-soft), transparent);
}
.home .site-main > section:nth-child(even):not(.hero):not(.page-hero):not(.cta-section):not(.intro-text-section):not(.trust-section):not(.services-section):not(.how-it-works-section):not(.cities-section):not(.testimonials-section):not(.faq-section) {
background: linear-gradient(180deg, var(--color-surface-strong) 0%, var(--color-surface-alt) 100%);
}
.home .site-main > section:nth-child(odd):not(.hero):not(.page-hero):not(.cta-section):not(.intro-text-section):not(.trust-section):not(.services-section):not(.how-it-works-section):not(.cities-section):not(.testimonials-section):not(.faq-section) {
background: var(--color-surface-strong);
}
.home .site-main > section .section-header {
margin-bottom: clamp(2rem, 3vw, 3rem);
}
.home .site-main > section .section-header h2 {
padding-bottom: 0.75rem;
}
.home .site-main > section .section-header h2::after {
width: 64px;
height: 4px;
}
.home .site-main > section .section-header p {
max-width: 720px;
}
.home .trust-section {
box-shadow: inset 0 -40px 80px rgba(15, 23, 42, 0.04);
}
.home .cta-section {
background: linear-gradient(135deg, var(--color-cta-bg), var(--color-cta-bg-alt));
}
@media (max-width: 768px) {
.home .site-main > section {
padding: 3rem 0;
}
.home .site-main > section:not(.hero):not(.page-hero)::before,
.home .site-main > section:not(.hero):not(.page-hero)::after {
width: 92%;
}
}
/* ===================================
Home Section Separation - Visual Bands
=================================== */
.home .intro-text-section,
.home .trust-section,
.home .services-section,
.home .how-it-works-section,
.home .cities-section,
.home .testimonials-section,
.home .faq-section {
position: relative;
overflow: hidden;
}
.home .intro-text-section::before,
.home .trust-section::before,
.home .services-section::before,
.home .how-it-works-section::before,
.home .cities-section::before,
.home .testimonials-section::before,
.home .faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
.home .intro-text-section {
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.08), transparent 70%),
#ffffff;
}
.home .trust-section {
background:
radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.06), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.05), transparent 50%),
linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 30%),
linear-gradient(180deg, #f8fafb 0%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
.home .trust-section::before {
content: '✓';
position: absolute;
left: 5%;
top: 15%;
font-size: 180px;
font-weight: 900;
color: rgba(16, 185, 129, 0.04);
z-index: 0;
line-height: 1;
pointer-events: none;
}
.home .trust-section .container {
position: relative;
z-index: 1;
}
.home .services-section {
background:
radial-gradient(circle at 15% 25%, rgba(37, 99, 235, 0.08), transparent 45%),
linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.home .how-it-works-section {
background:
radial-gradient(circle at 50% 20%, rgba(37, 99, 235, 0.04), transparent 60%),
linear-gradient(180deg, #fefefe 0%, #f9fafb 100%);
position: relative;
overflow: hidden;
}
.home .how-it-works-section::before {
content: '';
position: absolute;
top: 50%;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(37, 99, 235, 0.2) 10%,
rgba(37, 99, 235, 0.4) 25%,
rgba(37, 99, 235, 0.4) 50%,
rgba(37, 99, 235, 0.4) 75%,
rgba(37, 99, 235, 0.2) 90%,
transparent 100%);
z-index: 0;
transform: translateY(-50%);
}
.home .how-it-works-section .container {
position: relative;
z-index: 1;
}
.home .cities-section {
background:
radial-gradient(circle at 10% 15%, rgba(37, 99, 235, 0.06), transparent 50%),
radial-gradient(circle at 90% 85%, rgba(14, 165, 233, 0.06), transparent 50%),
linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
position: relative;
overflow: hidden;
}
.home .cities-section::after {
content: '';
position: absolute;
right: -50px;
bottom: -50px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.home .cities-section .container {
position: relative;
z-index: 1;
}
.home .testimonials-section {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 30%),
linear-gradient(180deg, #f8fafb 0%, #f1f5f9 100%);
}
.home .faq-section {
background:
radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.05), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(251, 191, 36, 0.05), transparent 45%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
position: relative;
}
.home .faq-section::before {
content: '?';
position: absolute;
right: 5%;
top: 10%;
font-size: 200px;
font-weight: 900;
color: rgba(37, 99, 235, 0.03);
z-index: 0;
line-height: 1;
pointer-events: none;
}
.home .faq-section .container {
position: relative;
z-index: 1;
}
.home .about-section {
background:
radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.04), transparent 50%),
linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
position: relative;
}
.home .about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), transparent);
}
.home .about-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.15), transparent);
}
.home .about-section .about-content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
border-radius: var(--radius-xl);
border: 1px solid rgba(37, 99, 235, 0.08);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.home .intro-text-section::after,
.home .trust-section::after,
.home .services-section::after,
.home .how-it-works-section::after,
.home .cities-section::after,
.home .testimonials-section::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(1000px, 88%);
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(37, 99, 235, 0.1) 15%,
var(--color-primary) 50%,
rgba(37, 99, 235, 0.1) 85%,
transparent 100%);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.home .faq-section::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(1000px, 88%);
height: 3px;
background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.35), transparent);
}
.home .services-section::before,
.home .cities-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 12px;
background: repeating-linear-gradient(
90deg,
var(--color-accent-soft) 0,
var(--color-accent-soft) 16px,
transparent 16px,
transparent 32px
);
opacity: 0.7;
}
.home .testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(900px, 85%);
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-divider), transparent);
}
.home .section-header {
position: relative;
}
.home .section-header::before {
content: '';
position: absolute;
left: 50%;
top: -1.25rem;
transform: translateX(-50%);
width: 44px;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
opacity: 0.9;
}
@media (max-width: 768px) {
.home .intro-text-section::after,
.home .trust-section::after,
.home .services-section::after,
.home .how-it-works-section::after,
.home .cities-section::after,
.home .testimonials-section::after,
.home .faq-section::after {
width: 92%;
}
.home .section-header::before {
top: -1rem;
}
}
/* Ensure readable text colors on varied backgrounds */
.home .intro-text-section,
.home .trust-section,
.home .services-section,
.home .how-it-works-section,
.home .cities-section,
.home .testimonials-section,
.home .faq-section {
color: var(--color-text);
}
.home .intro-text-section h2,
.home .trust-section h2,
.home .services-section h2,
.home .how-it-works-section h2,
.home .cities-section h2,
.home .testimonials-section h2,
.home .faq-section h2,
.home .intro-text-section h3,
.home .trust-section h3,
.home .services-section h3,
.home .how-it-works-section h3,
.home .cities-section h3,
.home .testimonials-section h3,
.home .faq-section h3 {
color: var(--color-text);
}
.home .intro-text-section p,
.home .trust-section p,
.home .services-section p,
.home .how-it-works-section p,
.home .cities-section p,
.home .testimonials-section p,
.home .faq-section p {
color: var(--color-text-light);
}
.home .intro-text-section a:not(.button):not(.button--primary):not(.button--full),
.home .trust-section a:not(.button):not(.button--primary):not(.button--full),
.home .services-section a:not(.button):not(.button--primary):not(.button--full),
.home .how-it-works-section a:not(.button):not(.button--primary):not(.button--full),
.home .cities-section a:not(.button):not(.button--primary):not(.button--full),
.home .testimonials-section a:not(.button):not(.button--primary):not(.button--full),
.home .faq-section a:not(.button):not(.button--primary):not(.button--full) {
color: var(--color-primary);
transition: all 0.25s ease;
position: relative;
}
.home .intro-text-section a:not(.button):hover,
.home .trust-section a:not(.button):hover,
.home .services-section a:not(.button):hover,
.home .how-it-works-section a:not(.button):hover,
.home .cities-section a:not(.button):hover,
.home .testimonials-section a:not(.button):hover,
.home .faq-section a:not(.button):hover {
color: var(--color-primary-dark);
transform: translateX(2px);
}
.home .intro-text-section .button,
.home .trust-section .button,
.home .services-section .button,
.home .how-it-works-section .button,
.home .cities-section .button,
.home .testimonials-section .button,
.home .faq-section .button {
color: #ffffff !important;
}
.home .intro-text-section .button:focus-visible,
.home .trust-section .button:focus-visible,
.home .services-section .button:focus-visible,
.home .how-it-works-section .button:focus-visible,
.home .cities-section .button:focus-visible,
.home .testimonials-section .button:focus-visible,
.home .faq-section .button:focus-visible,
.home .hero__cta:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 4px;
box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.2);
}
.home .intro-text-section .button:hover,
.home .trust-section .button:hover,
.home .services-section .button:hover,
.home .how-it-works-section .button:hover,
.home .cities-section .button:hover,
.home .testimonials-section .button:hover,
.home .faq-section .button:hover {
color: #ffffff !important;
}
.home .section-footer .button--outline {
background: var(--color-primary) !important;
color: #ffffff !important;
border-color: var(--color-primary) !important;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
.home .section-footer .button--outline:hover {
background: var(--color-primary-dark) !important;
color: #ffffff !important;
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.4);
}
.home .section-footer .button--outline svg {
color: #ffffff !important;
}
.home .cta-section,
.home .cta-section p,
.home .cta-section h2,
.home .cta-section h3 {
color: var(--color-cta-text);
}
/* ===================================
Home Design Enhancements - Pass 9
=================================== */
.home .hero {
background:
radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.4), transparent 35%),
radial-gradient(circle at 70% 80%, rgba(37, 99, 235, 0.3), transparent 35%),
radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.15), transparent 60%),
radial-gradient(ellipse at 10% 60%, rgba(30, 64, 175, 0.2), transparent 50%),
linear-gradient(135deg, #1e3a8a 0%, #1e40af 35%, #1d4ed8 65%, #2563eb 100%);
position: relative;
min-height: clamp(600px, 75vh, 750px);
display: flex;
align-items: flex-start;
padding-top: clamp(2rem, 4vw, 3.5rem);
padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
overflow: hidden;
}
.home .hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background:
linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%),
radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.15), transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Mesh animation removed for better performance */
.home .hero__badge {
box-shadow:
0 8px 20px rgba(15, 23, 42, 0.2),
0 2px 8px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
background: rgba(255, 255, 255, 0.28);
backdrop-filter: blur(14px) saturate(180%);
border: 2px solid rgba(255, 255, 255, 0.45);
animation: badge-float 4s ease-in-out infinite;
}
@keyframes badge-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.home .hero__badge:hover {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.25),
0 4px 12px rgba(15, 23, 42, 0.15),
0 0 30px rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.5);
}
.home .hero__badge::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), transparent, rgba(255, 255, 255, 0.4));
background-size: 200% 200%;
border-radius: 50px;
z-index: -1;
opacity: 0;
animation: badge-shimmer 4s ease-in-out infinite;
}
@keyframes badge-shimmer {
0%, 100% {
opacity: 0;
background-position: 0% 50%;
}
50% {
opacity: 0.5;
background-position: 100% 50%;
}
}
.home .hero__title {
color: #ffffff;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
0 4px 8px rgba(0, 0, 0, 0.2),
0 8px 16px rgba(0, 0, 0, 0.15);
position: relative;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-spacing: 0.02em;
hyphens: none;
text-wrap: balance;
will-change: auto;
}
/* Title glow removed for performance */
.home .hero__subtitle {
color: rgba(255, 255, 255, 0.96) !important;
line-height: 1.75;
max-width: 700px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.01em;
text-wrap: pretty;
animation: subtitle-fade 1s ease-out 0.3s backwards;
-webkit-font-smoothing: antialiased;
}
@keyframes subtitle-fade {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.home .hero__cta-box {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.home .hero__cta-icon {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.home .hero__cta-number {
letter-spacing: 0.04em;
}
.home .hero__feature-value {
color: #ffffff !important;
}
.home .hero__feature-label {
color: rgba(255, 255, 255, 0.9) !important;
}
.home .intro-text-section .intro-text-content {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border: 2px solid rgba(37, 99, 235, 0.12);
border-radius: calc(var(--radius-xl) + 4px);
padding: clamp(2.5rem, 5vw, 3.5rem);
box-shadow:
0 8px 24px rgba(37, 99, 235, 0.12),
0 2px 8px rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
}
.home .intro-text-section .intro-text-content:hover {
box-shadow:
0 12px 32px rgba(37, 99, 235, 0.16),
0 4px 12px rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.18);
}
.home .intro-text-section h2 {
text-wrap: balance;
font-size: clamp(1.85rem, 3.5vw, 2.35rem);
line-height: 1.3;
margin-bottom: 1.5rem;
color: var(--color-text);
font-weight: 700;
}
.home .intro-text-section p {
font-size: 1.1rem;
line-height: 1.85;
color: rgba(15, 23, 42, 0.8);
position: relative;
padding-left: 1rem;
}
.home .intro-text-section p::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 4px;
height: 0;
background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
border-radius: 999px;
transition: height 0.8s ease;
}
.home .intro-text-section .intro-text-content:hover p::before {
height: calc(100% - 1em);
}
.home .intro-text-section p strong {
color: var(--color-primary);
font-weight: 700;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
padding: 0.1em 0.4em;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}
.home .emergency-box {
background:
radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1), transparent 40%),
linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #7f1d1d 100%);
border: 3px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 12px 40px rgba(220, 38, 38, 0.5),
0 0 0 0 rgba(220, 38, 38, 0),
inset 0 2px 0 rgba(255, 255, 255, 0.25),
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
animation: emergency-glow 3s ease-in-out infinite;
position: relative;
border-radius: calc(var(--radius-xl) + 4px);
padding: 2.5rem;
margin-top: 2rem;
}
@keyframes emergency-glow {
0%, 100% {
box-shadow:
0 12px 40px rgba(220, 38, 38, 0.5),
0 0 0 0 rgba(220, 38, 38, 0),
inset 0 2px 0 rgba(255, 255, 255, 0.25),
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
50% {
box-shadow:
0 12px 40px rgba(220, 38, 38, 0.6),
0 0 30px 8px rgba(220, 38, 38, 0.6),
inset 0 2px 0 rgba(255, 255, 255, 0.25),
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
}
.home .emergency-box::after {
content: '⚡';
position: absolute;
top: -10px;
right: -10px;
font-size: 4rem;
opacity: 0.15;
animation: pulse-lightning 2s ease-in-out infinite;
z-index: 0;
}
@keyframes pulse-lightning {
0%, 100% {
transform: scale(1) rotate(15deg);
opacity: 0.15;
}
50% {
transform: scale(1.1) rotate(10deg);
opacity: 0.25;
}
}
.home .emergency-box__icon {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.2));
backdrop-filter: blur(12px);
border: 3px solid rgba(255, 255, 255, 0.5);
width: 72px;
height: 72px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.home .emergency-box__icon svg {
width: 36px;
height: 36px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.home .emergency-box__title {
font-weight: 900;
letter-spacing: 0.01em;
color: #ffffff;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 255, 255, 0.3);
font-size: 1.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.home .emergency-box__title::before {
content: '🚨';
font-size: 2rem;
animation: shake 1.5s ease-in-out infinite, urgent-glow 2s ease-in-out infinite;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
@keyframes urgent-glow {
0%, 100% {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
50% {
filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.6)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
}
.home .emergency-box::before {
border-left: 6px solid rgba(255, 255, 0, 0.6);
border-right: 6px solid rgba(255, 255, 0, 0.6);
animation: blink-border 1s ease-in-out infinite;
}
@keyframes blink-border {
0%, 100% {
border-color: transparent;
}
50% {
border-color: rgba(255, 255, 0, 0.6);
}
}
@keyframes shake {
0%, 100% {
transform: rotate(0deg);
}
20% {
transform: rotate(-8deg);
}
40% {
transform: rotate(8deg);
}
60% {
transform: rotate(-8deg);
}
80% {
transform: rotate(8deg);
}
}
.home .emergency-box__text {
color: rgba(255, 255, 255, 0.98);
font-size: 1.15rem;
line-height: 1.7;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.home .emergency-box__phone {
background: #ffffff;
color: #dc2626 !important;
font-weight: 900;
padding: 0.75rem 1.75rem;
border-radius: 50px;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.3),
0 0 0 3px rgba(255, 255, 255, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.6rem;
letter-spacing: 0.05em;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: phone-pulse 2s ease-in-out infinite;
position: relative;
z-index: 1;
}
.home .emergency-box__phone::before {
content: '📞';
font-size: 1.3rem;
}
@keyframes phone-pulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.3),
0 0 0 3px rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.03);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 0 6px rgba(255, 255, 255, 0.5);
}
}
.home .emergency-box__phone:hover {
transform: scale(1.08) translateY(-3px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.5),
0 0 0 6px rgba(255, 255, 255, 0.6);
color: #991b1b !important;
animation: none;
}
.home .emergency-box__features {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1.5rem;
justify-content: flex-start;
}
.home .emergency-box__features span {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border-radius: 50px;
padding: 0.65rem 1.25rem;
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: fade-in-badges 1s ease-out backwards;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.home .emergency-box__features span::before {
content: '✓';
font-weight: 900;
font-size: 1rem;
color: #10b981;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.home .emergency-box__features span:hover {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-2px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.home .trust-section .trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.75rem;
margin-top: 2.5rem;
}
.home .trust-section .trust-item {
background: #ffffff;
border: 2px solid rgba(37, 99, 235, 0.12);
padding: 2.5rem 2rem;
border-radius: calc(var(--radius-xl) + 2px);
box-shadow:
0 2px 12px rgba(15, 23, 42, 0.08),
0 1px 3px rgba(15, 23, 42, 0.05);
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.home .trust-section .trust-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.02), rgba(37, 99, 235, 0.02));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.home .trust-section .trust-item:hover::before {
opacity: 1;
}
.home .trust-section .trust-item:hover {
transform: translateY(-10px) scale(1.03);
box-shadow:
0 20px 48px rgba(37, 99, 235, 0.22),
0 8px 16px rgba(37, 99, 235, 0.12);
background-image: linear-gradient(white, white),
linear-gradient(135deg, var(--color-success), var(--color-primary));
}
.home .trust-section .trust-icon {
width: 68px;
height: 68px;
margin: 0 auto 1.5rem;
padding: 14px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
border-radius: 50%;
color: var(--color-primary);
transition: all 0.25s ease;
position: relative;
z-index: 1;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}
.home .trust-section .trust-icon::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 2px solid rgba(37, 99, 235, 0.15);
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
}
.home .trust-section .trust-item:hover .trust-icon {
transform: scale(1.1);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #ffffff;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
@keyframes icon-rotate-sequence {
0%, 100% {
transform: scale(1.15) rotate(5deg);
}
25% {
transform: scale(1.18) rotate(-3deg);
}
50% {
transform: scale(1.2) rotate(8deg);
}
75% {
transform: scale(1.18) rotate(-2deg);
}
}
.home .trust-section .trust-grid:hover .trust-item:not(:hover) {
opacity: 0.7;
transform: scale(0.98);
}
.home .trust-section .trust-item:hover .trust-icon::after {
opacity: 1;
transform: scale(1.1);
}
.home .trust-section .trust-icon svg {
width: 100%;
height: 100%;
display: block;
transition: all 0.4s ease;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.2));
}
.home .trust-section .trust-item:hover .trust-icon svg {
filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.8));
}
.home .trust-section .trust-item h3 {
font-size: 1.25rem;
margin-bottom: 0.85rem;
color: var(--color-text);
font-weight: 700;
position: relative;
z-index: 1;
transition: color 0.3s ease;
}
.home .trust-section .trust-item:hover h3 {
color: var(--color-primary);
}
.home .trust-section .trust-item p {
font-size: 0.98rem;
line-height: 1.7;
color: var(--color-text-light);
margin: 0;
position: relative;
z-index: 1;
}
.home .services-section .service-card {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)),
radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.03), transparent 60%);
backdrop-filter: blur(10px) saturate(180%);
border: 2px solid rgba(37, 99, 235, 0.15);
border-radius: calc(var(--radius-xl) + 2px);
box-shadow:
0 2px 12px rgba(37, 99, 235, 0.1),
0 1px 3px rgba(37, 99, 235, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: visible;
}
.home .services-section .service-card::after {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
clip-path: polygon(100% 0, 0 0, 100% 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.home .services-section .service-card:hover::after {
opacity: 0.8;
}
.home .services-section .service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--color-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
z-index: 1;
}
.home .services-section .service-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
transparent 30%,
transparent 70%,
rgba(255, 255, 255, 0.4) 100%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 10;
}
.home .services-section .service-card:hover::after {
opacity: 0.3;
}
.home .services-section .service-card:hover {
border-color: rgba(37, 99, 235, 0.35);
box-shadow:
0 16px 40px rgba(37, 99, 235, 0.22),
0 8px 16px rgba(37, 99, 235, 0.12);
transform: translateY(-8px) scale(1.02);
}
.home .services-section .service-card:hover::before {
transform: scaleX(1);
}
.home .services-section .service-card:hover .service-card__icon {
transform: scale(1.15) rotate(8deg);
}
.home .services-section .service-card__icon {
box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.1);
transition: all 0.4s ease;
position: relative;
}
.home .services-section .service-card__icon::before {
content: '';
position: absolute;
inset: -4px;
border: 2px solid rgba(37, 99, 235, 0.2);
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
}
.home .services-section .service-card:hover .service-card__icon::before {
opacity: 1;
inset: -8px;
}
.home .services-section .service-card h3 {
font-weight: 700;
position: relative;
}
.home .services-section .service-card h3::before {
content: '';
position: absolute;
left: 0;
bottom: -0.5rem;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
border-radius: 999px;
transition: width 0.4s ease;
}
.home .services-section .service-card:hover h3::before {
width: 60px;
}
.home .services-section .button--full {
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
color: #ffffff !important;
}
.home .services-section .button--full:hover {
color: #ffffff !important;
}
.home .services-section .button,
.home .services-section .button--primary {
color: #ffffff !important;
}
.home .services-section .button:hover,
.home .services-section .button--primary:hover {
color: #ffffff !important;
}
/* Services cards - blue background + aligned typography (home) */
.home .services-section .service-card--simple {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 55%, #2563eb 100%);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.3);
}
.home .services-section .service-card--simple::before,
.home .services-section .service-card--simple::after {
content: none;
}
.home .services-section .service-card--simple h3 {
color: #ffffff;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}
.home .services-section .service-card--simple p {
color: rgba(255, 255, 255, 0.92);
}
.home .services-section .service-card--simple .service-card__icon {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.home .services-section .service-card--simple .service-card__icon svg {
color: #ffffff;
opacity: 0.95;
}
.home .services-section .service-card--simple .button {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #60a5fa 100%);
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}
.home .services-section .service-card--simple .button:hover {
background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 60%, #3b82f6 100%);
color: #ffffff !important;
}
/* Force blue cards + readable button text in home services */
.home .services-section .services-grid--simple .service-card--simple {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 55%, #2563eb 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.3) !important;
-webkit-text-fill-color: #ffffff;
}
.home .services-section .services-grid--simple .service-card--simple h3,
.home .services-section .services-grid--simple .service-card--simple p,
.home .services-section .services-grid--simple .service-card--simple span,
.home .services-section .services-grid--simple .service-card--simple strong {
color: #ffffff !important;
}
.home .services-section .services-grid--simple .service-card--simple p *,
.home .services-section .services-grid--simple .service-card--simple p strong {
color: #ffffff !important;
}
.home .services-section .services-grid--simple .service-card--simple * {
color: #ffffff !important;
}
.home .services-section .services-grid--simple .service-card--simple p::first-line {
color: #ffffff !important;
}
.home .services-section .services-grid--simple .service-card--simple .button {
background: #ffffff !important;
color: #0f2a6b !important;
-webkit-text-fill-color: #0f2a6b;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
}
.home .services-section .services-grid--simple .service-card--simple a.button,
.home .services-section .services-grid--simple .service-card--simple .button.button--primary,
.home .services-section .services-grid--simple .service-card--simple .button.button--full {
color: #0f2a6b !important;
-webkit-text-fill-color: #0f2a6b !important;
}
.home .services-section .services-grid--simple .service-card--simple .button:hover {
background: #e0f2fe !important;
color: #0f2a6b !important;
-webkit-text-fill-color: #0f2a6b;
}
.home .services-section .services-grid--simple .service-card--simple .button *,
.home .services-section .services-grid--simple .service-card--simple .button:hover * {
color: #0f2a6b !important;
-webkit-text-fill-color: #0f2a6b;
}
.home .how-it-works-section .steps-simple {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 2.5rem;
position: relative;
}
.home .how-it-works-section .step-simple {
background: #ffffff;
border-radius: var(--radius-xl);
border: 2px solid transparent;
background-image: linear-gradient(white, white),
linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 2.5rem 1.5rem;
box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.home .how-it-works-section .step-simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02), rgba(59, 130, 246, 0.02));
border-radius: var(--radius-xl);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.home .how-it-works-section .step-simple:hover::before {
opacity: 1;
}
.home .how-it-works-section .step-simple:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 16px 40px rgba(37, 99, 235, 0.2);
background-image: linear-gradient(white, white),
linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.home .how-it-works-section .step-simple__number {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 2rem;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
border: 4px solid rgba(255, 255, 255, 0.95);
position: relative;
z-index: 2;
transition: all 0.4s ease;
}
.home .how-it-works-section .step-simple__number::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
padding: 2px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
}
.home .how-it-works-section .step-simple:hover .step-simple__number::before {
opacity: 0.6;
}
.home .how-it-works-section .step-simple__number::after {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border: 3px solid rgba(37, 99, 235, 0.3);
border-radius: 50%;
border-top-color: var(--color-success);
border-right-color: var(--color-accent);
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
progress-spin 8s linear infinite;
}
@keyframes progress-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse-ring {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.home .how-it-works-section .step-simple:hover .step-simple__number {
transform: rotate(360deg) scale(1.1);
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5);
}
.home .how-it-works-section .step-simple h3 {
letter-spacing: -0.01em;
font-size: 1.3rem;
color: var(--color-text);
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
transition: color 0.3s ease;
}
.home .how-it-works-section .step-simple:hover h3 {
color: var(--color-primary);
}
.home .how-it-works-section .step-simple p {
position: relative;
z-index: 1;
line-height: 1.6;
color: var(--color-text-light);
}
.home .cities-section .city-link-simple {
background: #ffffff;
border: 2px solid transparent;
background-image: linear-gradient(white, white),
linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(14, 165, 233, 0.2));
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.home .cities-section .city-link-simple:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
}
.home .cities-section .city-link-simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(14, 165, 233, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.home .cities-section .city-link-simple:hover::before {
opacity: 1;
}
.home .cities-section .city-link-simple:hover {
transform: translateY(-6px) scale(1.03) rotate(-0.5deg);
box-shadow:
0 16px 32px rgba(37, 99, 235, 0.22),
0 8px 16px rgba(37, 99, 235, 0.12);
background-image: linear-gradient(white, white),
linear-gradient(135deg, var(--color-primary), rgba(14, 165, 233, 0.8));
}
.home .cities-section .city-link-simple::after {
content: '→';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
color: var(--color-primary);
opacity: 0;
transition: all 0.3s ease;
font-weight: 900;
}
.home .cities-section .city-link-simple:hover::after {
opacity: 1;
right: 0.75rem;
}
.home .cities-section .city-link-simple svg {
width: 28px;
height: 28px;
color: var(--color-primary);
flex-shrink: 0;
transition: all 0.3s ease;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.2));
}
.home .cities-section .city-link-simple:hover svg {
transform: scale(1.2) rotate(-5deg);
color: var(--color-primary);
}
.home .cities-section .city-link-simple span {
font-weight: 600;
position: relative;
z-index: 1;
transition: color 0.3s ease;
}
.home .cities-section .city-link-simple strong {
color: var(--color-primary);
position: relative;
transition: color 0.3s ease;
}
.home .cities-section .city-link-simple:hover strong {
color: var(--color-primary-dark);
}
.home .testimonials-section .testimonial-card {
background: #ffffff;
border: 2px solid rgba(37, 99, 235, 0.12);
border-radius: calc(var(--radius-xl) + 2px);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
transition: all 0.25s ease;
position: relative;
}
.home .testimonials-section .testimonial-card::after {
content: '"';
position: absolute;
bottom: 1rem;
right: 1.5rem;
font-size: 5rem;
font-family: inherit;
color: rgba(245, 158, 11, 0.08);
z-index: 0;
line-height: 1;
}
.home .testimonials-section .testimonial-card {
perspective: 1000px;
}
.home .testimonials-section .testimonial-card:hover {
box-shadow:
0 16px 40px rgba(245, 158, 11, 0.18),
0 8px 16px rgba(245, 158, 11, 0.1);
transform: translateY(-8px) scale(1.02) rotateX(2deg);
border-color: rgba(245, 158, 11, 0.3);
}
.home .testimonials-section .testimonial-card > * {
transition: transform 0.3s ease;
}
.home .testimonials-section .testimonial-card:hover > * {
transform: translateZ(10px);
}
.home .testimonials-section .testimonial-text {
line-height: 1.75;
}
.home .testimonials-section .testimonial-author {
position: relative;
padding-left: 3.5rem;
}
.home .testimonials-section .testimonial-author::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
background: var(--color-primary);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.home .testimonials-section .testimonial-author::after {
content: '👤';
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 1.3rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.home .testimonials-section .testimonial-author strong {
color: var(--color-text);
font-size: 1.08rem;
}
.home .faq-section .faq-item {
background: #ffffff;
border: 2px solid transparent;
border-left: 4px solid var(--color-primary);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
position: relative;
padding: 2rem 2rem 2rem 2.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.home .faq-section .faq-item:active {
transform: translateX(2px);
}
.home .faq-section .faq-item::before {
content: 'Q';
position: absolute;
left: -2px;
top: 1.5rem;
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1rem;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
z-index: 2;
}
.home .faq-section .faq-item:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
border-left-color: var(--color-primary);
transform: translateX(2px);
}
.home .faq-section .faq-item:hover::before {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
transform: scale(1.05);
}
.home .faq-section .faq-item h3 {
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
padding-left: 3rem;
line-height: 1.4;
position: relative;
}
.home .faq-section .faq-item h3::after {
content: '▼';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: var(--color-primary);
opacity: 0.4;
transition: all 0.3s ease;
}
.home .faq-section .faq-item:hover h3::after {
opacity: 1;
transform: translateY(-50%) translateX(3px);
}
.home .faq-section .faq-item p {
font-size: 1.05rem;
line-height: 1.75;
color: var(--color-text-light);
padding-left: 3rem;
}
.home .cta-section .cta-content {
max-width: 820px;
}
.home .cta-section .button--cta {
border: 1px solid rgba(255, 255, 255, 0.2);
background: #ffffff !important;
color: var(--color-primary) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.home .cta-section .button--cta:hover {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--color-primary-dark) !important;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.home .cta-section .button--cta svg {
color: var(--color-primary) !important;
}
.home .cta-section .cta-guarantee {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
padding: 0.85rem 2rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.3);
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: inline-block;
}
.home .section-header {
position: relative;
padding: 1.75rem 2rem 2rem;
margin-bottom: 2.5rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
backdrop-filter: blur(12px);
border-radius: var(--radius-xl);
border: 2px solid rgba(37, 99, 235, 0.1);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
transition: all 0.3s ease;
overflow: hidden;
}
.home .section-header:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
border-color: rgba(37, 99, 235, 0.15);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
}
.home .section-header::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.7s ease;
pointer-events: none;
z-index: 2;
}
.home .section-header:hover::after {
left: 100%;
}
.home .section-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--color-primary);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.home .section-header:hover::before {
opacity: 1;
}
.home .section-header h2 {
letter-spacing: -0.02em;
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 800;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
margin-bottom: 1rem;
}
.home .section-header h2::before {
content: '';
position: absolute;
left: -2.5rem;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 60%;
background: var(--color-primary);
border-radius: 999px;
opacity: 0.5;
}
.home .section-header h2::after {
content: '';
display: block;
width: 100px;
height: 4px;
margin: 0.75rem auto 0;
background: var(--color-primary);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes section-line-pulse {
0%, 100% {
width: 100px;
opacity: 1;
}
50% {
width: 120px;
opacity: 0.75;
}
}
.home .section-header p {
color: rgba(15, 23, 42, 0.75);
font-size: 1.1rem;
line-height: 1.7;
max-width: 640px;
margin: 0.75rem auto 0;
font-weight: 500;
position: relative;
z-index: 1;
}
/* Icone decorative per ogni sezione */
.home .intro-text-section .section-header::after {
content: '📝';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .trust-section .section-header::after {
content: '⭐';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .services-section .section-header::after {
content: '🔧';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .how-it-works-section .section-header::after {
content: '📋';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .cities-section .section-header::after {
content: '🗺️';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .testimonials-section .section-header::after {
content: '💬';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .about-section .section-header::after {
content: '🏢';
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
font-size: 2.5rem;
opacity: 0.12;
z-index: 0;
}
.home .section-footer {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
backdrop-filter: blur(10px);
border-radius: calc(var(--radius-xl) + 2px);
padding: 1.75rem 2rem;
border: 2px solid rgba(37, 99, 235, 0.08);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
margin-top: 2.5rem;
transition: all 0.3s ease;
}
.home .section-footer:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
border-color: rgba(37, 99, 235, 0.12);
}
.home .section-footer .button {
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.home .services-section .services-grid {
gap: 2.5rem;
}
/* Service cards - Remove stagger for better performance */
.home .testimonials-section .testimonials-grid {
gap: 2.5rem;
}
.home .faq-section .faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
gap: 1.75rem;
margin-top: 2.5rem;
}
.home .cities-section .cities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.home .cities-section .section-footer {
margin-top: 4rem;
padding: 3rem 2.5rem;
background:
radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.08), transparent 70%),
radial-gradient(circle at 70% 50%, rgba(14, 165, 233, 0.06), transparent 70%),
linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
backdrop-filter: blur(12px);
border-radius: calc(var(--radius-xl) + 4px);
border: 3px solid transparent;
background-image:
radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.08), transparent 70%),
radial-gradient(circle at 70% 50%, rgba(14, 165, 233, 0.06), transparent 70%),
linear-gradient(135deg, #ffffff 0%, #f8fafc 100%),
linear-gradient(135deg, var(--color-primary), rgba(14, 165, 233, 0.8));
background-origin: border-box;
background-clip: padding-box, padding-box, padding-box, border-box;
box-shadow:
0 8px 24px rgba(37, 99, 235, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
position: relative;
overflow: hidden;
}
.home .cities-section .section-footer::before {
content: '🗺️';
position: absolute;
top: 50%;
left: 1.5rem;
transform: translateY(-50%);
font-size: 3rem;
opacity: 0.2;
z-index: 0;
}
.home .cities-section .section-footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02), rgba(14, 165, 233, 0.02));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.home .cities-section .section-footer:hover::after {
opacity: 1;
}
.home .cities-section .section-footer__content {
position: relative;
z-index: 1;
}
.home .cities-section .section-footer__content p {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 1.75rem;
line-height: 1.5;
text-align: center;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.home .cities-section .section-footer .button {
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
font-size: 1.1rem;
padding: 1.25rem 2.5rem;
position: relative;
}
.home .cities-section .section-footer .button::after {
content: '→';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
opacity: 0;
transition: all 0.3s ease;
}
.home .cities-section .section-footer .button:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 16px 36px rgba(37, 99, 235, 0.4);
padding-right: 3.5rem;
}
.home .cities-section .section-footer .button:hover::after {
opacity: 1;
right: 1.25rem;
}
.home .hero__cta {
backdrop-filter: blur(10px);
}
.home .services-section .section-header p,
.home .cities-section .section-header p,
.home .testimonials-section .section-header p {
line-height: 1.7;
}
.home .intro-text-section .emergency-box__phone {
text-decoration: none;
}
@media (max-width: 768px) {
.home .intro-text-section .intro-text-content {
padding: 1.5rem;
}
.home .hero__cta-number {
font-size: 1.2rem;
}
.home .section-footer {
padding: 1rem;
}
}
/* ===================================
Home Mobile Refinements
=================================== */
@media (max-width: 768px) {
.home .hero {
padding-top: 1.5rem;
}
.home .hero__title {
font-size: clamp(1.9rem, 6vw, 2.5rem);
}
.home .hero__subtitle {
font-size: 1.02rem;
}
.home .hero__cta-box::before {
inset: -10px;
}
.home .hero__cta-box {
padding: 0;
}
.home .hero__cta {
width: 100%;
justify-content: center;
padding: 1.5rem 2rem;
}
.home .hero__cta-icon {
width: 56px;
height: 56px;
}
.home .hero__features {
padding: 1.5rem 1rem;
gap: 1rem;
margin-top: 2rem;
}
.home .hero__feature {
padding: 1.25rem 1rem;
height: auto;
}
.home .hero__feature svg {
width: 28px;
height: 28px;
}
.home .hero__feature-value {
font-size: 1rem;
}
.home .section-header {
text-align: center;
padding: 1.75rem 1.25rem 2rem;
}
.home .intro-text-section .section-header::after,
.home .trust-section .section-header::after,
.home .services-section .section-header::after,
.home .how-it-works-section .section-header::after,
.home .cities-section .section-header::after,
.home .testimonials-section .section-header::after,
.home .about-section .section-header::after {
font-size: 2rem !important;
right: 1rem !important;
}
.home .section-header h2 {
font-size: clamp(1.6rem, 5vw, 2rem);
}
.home .section-header h2::after {
width: 80px;
animation: none;
}
.home .section-header p {
font-size: 1rem;
}
.home .intro-text-section .intro-text-content {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.home .emergency-box {
padding: 2rem 1.5rem;
text-align: center;
}
.home .emergency-box::after {
font-size: 3rem;
top: -5px;
right: -5px;
}
.home .emergency-box__icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
}
.home .emergency-box__icon svg {
width: 32px;
height: 32px;
}
.home .emergency-box__title {
font-size: 1.3rem;
justify-content: center;
}
.home .emergency-box__title::before {
font-size: 1.5rem;
}
.home .emergency-box__text {
font-size: 1.05rem;
}
.home .emergency-box__phone {
font-size: 1.4rem;
padding: 0.65rem 1.5rem;
display: flex;
margin: 1.25rem auto;
}
.home .emergency-box__phone::before {
font-size: 1.2rem;
}
.home .emergency-box__features {
gap: 0.75rem;
justify-content: center;
}
.home .emergency-box__features span {
padding: 0.5rem 1rem;
font-size: 0.88rem;
}
.home .emergency-box__features span::before {
font-size: 0.9rem;
}
/* Emergency box redesign (home) */
.home .emergency-box {
display: grid;
grid-template-columns: 48px 1fr;
align-items: start;
gap: 0.85rem;
padding: 1rem 1.25rem;
margin-top: 1.25rem;
text-align: left;
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%);
border-radius: calc(var(--radius-lg) + 6px);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 14px 34px rgba(185, 28, 28, 0.35);
animation: none;
}
.home .emergency-box::before,
.home .emergency-box::after {
content: none;
display: none;
}
.home .emergency-box__icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
animation: none;
}
.home .emergency-box__icon svg {
width: 22px;
height: 22px;
filter: none;
}
.home .emergency-box__content {
align-items: flex-start;
text-align: left;
gap: 0.35rem;
}
.home .emergency-box__title {
display: block;
margin: 0;
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
text-shadow: none;
}
.home .emergency-box__title::before {
content: none;
}
.home .emergency-box__text {
margin: 0;
font-size: clamp(0.95rem, 1.9vw, 1.02rem);
line-height: 1.45;
max-width: 60ch;
}
.home .emergency-box__phone {
margin: 0.35rem 0 0;
padding: 0.45rem 0.9rem;
font-size: clamp(1.02rem, 2.1vw, 1.18rem);
letter-spacing: 0.03em;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
animation: none;
}
.home .emergency-box__phone::before {
content: none;
}
.home .emergency-box__features {
margin-top: 0.4rem;
gap: 0.35rem;
justify-content: flex-start;
}
.home .emergency-box__features span {
padding: 0.3rem 0.7rem;
font-size: 0.78rem;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
}
@media (max-width: 768px) {
.home .emergency-box {
grid-template-columns: 1fr;
text-align: center;
padding: 1rem 1rem;
gap: 0.75rem;
}
.home .emergency-box__content {
align-items: center;
text-align: center;
}
.home .emergency-box__features {
justify-content: center;
}
}
.home .services-section .service-card,
.home .how-it-works-section .step-simple,
.home .testimonials-section .testimonial-card,
.home .faq-section .faq-item,
.home .cities-section .city-link-simple {
box-shadow: var(--shadow-sm);
}
.home .how-it-works-section::before {
display: none;
}
.home .how-it-works-section .steps-simple {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.home .how-it-works-section .step-simple {
padding: 2rem 1.5rem;
}
.home .how-it-works-section .step-simple__number {
width: 64px;
height: 64px;
font-size: 1.6rem;
margin-bottom: 1.25rem;
}
.home .how-it-works-section .step-simple h3 {
font-size: 1.2rem;
}
.home .how-it-works-section .step-simple p {
font-size: 0.95rem;
}
.home .cities-section .city-link-simple {
padding: 0.85rem 1.25rem;
}
.home .cities-section .city-link-simple svg {
width: 24px;
height: 24px;
}
.home .cities-section .section-footer {
padding: 2rem 1.5rem;
margin-top: 3rem;
}
.home .cities-section .section-footer::before {
font-size: 2rem;
left: 50%;
top: -2.5rem;
transform: translateX(-50%);
}
.home .cities-section .section-footer__content p {
font-size: 1.05rem;
margin-bottom: 1.25rem;
}
.home .cities-section .section-footer .button {
width: 100%;
font-size: 1rem;
padding: 1rem 2rem;
}
.home .cities-section .section-footer .button:hover {
padding-right: 2rem;
}
.home .cities-section .section-footer .button::after {
display: none;
}
.home .cities-section .cities-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.home .trust-section::before {
font-size: 120px;
left: -5%;
}
.home .trust-section .trust-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.home .trust-section .trust-item {
padding: 2rem 1.5rem;
}
.home .trust-section .trust-icon {
width: 64px;
height: 64px;
}
.home .services-section .button--full {
width: 100%;
justify-content: center;
}
.home .testimonials-section .testimonial-text {
font-size: 1rem;
}
.home .faq-section .faq-item {
padding: 1.5rem 1.5rem 1.5rem 2rem;
}
.home .faq-section .faq-item::before {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.home .faq-section .faq-item h3 {
font-size: 1.1rem;
padding-left: 2.5rem;
}
.home .faq-section .faq-item p {
font-size: 1rem;
padding-left: 2.5rem;
}
.home .faq-section::before {
font-size: 120px;
right: -5%;
}
.home .faq-section .section-header {
padding: 2rem 1.5rem;
}
.home .faq-section .section-header::before {
font-size: 2.5rem !important;
left: 1rem !important;
right: auto !important;
}
.home .faq-section .section-header::after {
font-size: 2.5rem !important;
left: auto !important;
right: 1rem !important;
}
.home .cta-section {
padding: 3rem 1rem;
}
.home .cta-section .button--cta {
width: 100%;
justify-content: center;
}
.home .cta-section .cta-guarantee {
display: block;
}
}
/* Hero features - clean ordered grid (home) */
.home .hero__features {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 1.1rem !important;
width: min(1200px, 100%) !important;
margin: 1.8rem auto 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
align-items: stretch !important;
justify-items: stretch !important;
box-sizing: border-box !important;
}
.home .hero__feature {
display: grid !important;
grid-template-columns: 36px 1fr !important;
align-items: center !important;
column-gap: 0.9rem !important;
height: 120px !important;
padding: 1rem 1.1rem !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18) !important;
box-sizing: border-box !important;
width: 100% !important;
}
.home .hero__feature svg {
width: 28px !important;
height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
align-self: center !important;
margin: 0 auto !important;
}
.home .hero__feature-text {
display: grid !important;
grid-template-rows: 1.2em 2.6em !important;
align-content: center !important;
row-gap: 0.3rem !important;
min-width: 0 !important;
text-align: left !important;
}
.home .hero__feature-value {
margin: 0 !important;
line-height: 1.2 !important;
min-height: 1.2em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.home .hero__feature-label {
margin: 0 !important;
line-height: 1.3 !important;
min-height: 2.6em !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
@media (max-width: 1200px) {
.home .hero__features {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 1rem !important;
}
.home .hero__feature {
height: 116px !important;
}
}
@media (max-width: 768px) {
.home .hero__features {
grid-template-columns: 1fr !important;
gap: 0.9rem !important;
margin-top: 1.4rem !important;
padding: 0 1rem !important;
}
.home .hero__feature {
height: 112px !important;
padding: 0.9rem 1rem !important;
}
}
/* ===================================
Global UI Polish Pack — 50 improvements (site-wide)
Scope: frontend only (main.css)
=================================== */
/* GP-01) UI tokens: radius, border, shadows, focus */
:root {
--ui-radius: 18px;
--ui-radius-sm: 14px;
--ui-border: rgba(15, 23, 42, 0.10);
--ui-border-strong: rgba(37, 99, 235, 0.22);
--ui-surface: rgba(255, 255, 255, 0.96);
--ui-surface-soft: rgba(15, 23, 42, 0.02);
--ui-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
--ui-shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.10);
--ui-focus: rgba(37, 99, 235, 0.35);
--ui-focus-offset: 4px;
}
/* GP-02) Consistent focus ring for interactive elements */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
outline: 3px solid var(--ui-focus);
outline-offset: var(--ui-focus-offset);
}
/* GP-03) Reduce accidental focus rings on mouse click */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
outline: none;
}
/* GP-04) Better text wrapping for headings (supported browsers) */
:where(h1, h2, h3, h4) {
text-wrap: balance;
}
/* GP-05) Avoid ugly breaks in long words (Italian) */
:where(p, li) {
overflow-wrap: anywhere;
hyphens: auto;
}
/* GP-06) More consistent paragraph rhythm in content areas */
:where(.entry-content, .intro-text-content, .service-info-content, .city-info-content, .svc-prose) p {
margin-bottom: 0.95rem;
}
/* GP-07) Content links: underline by default (except buttons/nav) */
:where(.entry-content, .intro-text-content, .service-info-content, .city-info-content, .svc-prose) a:not(.button):not(.svc-cta):not(.zsx-tools__cta):not(.zsx-fab-call) {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.22em;
}
/* GP-08) Content links hover: clearer */
:where(.entry-content, .intro-text-content, .service-info-content, .city-info-content, .svc-prose) a:not(.button):not(.svc-cta):hover {
text-decoration-thickness: 3px;
}
/* GP-09) List markers: cleaner color */
:where(.entry-content, .intro-text-content, .service-info-content, .city-info-content, .svc-prose) ::marker {
color: rgba(37, 99, 235, 0.75);
}
/* GP-10) Inline strong: slightly higher contrast */
:where(.entry-content, .intro-text-content, .service-info-content, .city-info-content, .svc-prose) strong {
color: rgba(15, 23, 42, 0.96);
font-weight: var(--font-weight-strong, 700);
}
/* GP-11) Small text: avoid looking “too light” */
small,
.small {
color: rgba(15, 23, 42, 0.68);
}
/* GP-12) Code blocks: consistent surface */
pre,
code,
kbd {
border-radius: 12px;
}
pre {
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.08);
padding: 0.9rem 1rem;
overflow: auto;
}
code {
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.12);
padding: 0.12rem 0.35rem;
}
/* GP-13) HR: nicer separators */
hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, rgba(15, 23, 42, 0.00), rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0.00));
margin: 1.25rem 0;
}
/* GP-14) Blockquote: premium callout */
blockquote {
margin: 1.25rem 0;
padding: 1rem 1.05rem;
border-left: 4px solid rgba(37, 99, 235, 0.92);
border-radius: 14px;
background: rgba(37, 99, 235, 0.06);
color: rgba(15, 23, 42, 0.82);
}
blockquote p:last-child {
margin-bottom: 0;
}
/* GP-15) Tables: readable by default */
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 0.75rem 0.75rem;
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
text-align: left;
vertical-align: top;
}
th {
font-weight: 900;
color: rgba(15, 23, 42, 0.92);
}
/* GP-16) Media: smoother images across the site */
img,
video {
max-width: 100%;
height: auto;
}
/* GP-17) Rounded media in “card contexts” */
:where(.service-card, .testimonial-card, .faq-item, .trust-item, .location-card, .cta-content) img {
border-radius: 14px;
}
/* GP-18) Buttons: more consistent alignment and icon sizing */
.button,
.svc-cta,
.zsx-tools__cta,
.zsx-fab-call {
align-items: center;
gap: 0.65rem;
}
.button svg,
.svc-cta svg,
.zsx-tools__cta svg,
.zsx-fab-call svg {
flex: 0 0 auto;
}
/* GP-19) Buttons: disabled look (safety) */
.button[disabled],
button.button:disabled,
button:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: grayscale(0.15);
}
/* GP-20) Buttons: tap highlight + smoother active */
.button:active,
.svc-cta:active,
.zsx-tools__cta:active,
.zsx-fab-call:active {
transform: translateY(1px);
}
/* GP-21) Forms: consistent surfaces and focus */
:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.14);
background: rgba(255, 255, 255, 0.98);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
color: rgba(15, 23, 42, 0.94);
}
/* GP-22) Forms: nicer placeholder */
::placeholder {
color: rgba(15, 23, 42, 0.48);
}
/* GP-23) Forms: focus ring inside controls (extra clarity) */
:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
border-color: rgba(37, 99, 235, 0.40);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
/* GP-24) Textareas: avoid breaking layouts */
textarea {
resize: vertical;
min-height: 120px;
}
/* GP-25) Checkboxes/radios: consistent accent */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--color-primary);
}
/* GP-26) Phone links: numeric alignment + no awkward wraps */
a[href^="tel:"] {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* GP-27) Breadcrumbs: improve readability on scroll */
.breadcrumbs__list {
scrollbar-gutter: stable both-edges;
}
/* GP-28) Breadcrumb current: stronger */
.breadcrumbs__item.is-current .breadcrumbs__current {
font-weight: 900;
}
/* GP-29) Cards: subtle universal surface improvement (low risk) */
:where(.service-card, .testimonial-card, .faq-item, .trust-item, .location-card, .info-box) {
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: var(--ui-shadow);
}
/* GP-30) Cards hover: calm lift */
@media (hover: hover) {
:where(.service-card, .testimonial-card, .faq-item, .trust-item, .location-card):hover {
box-shadow: var(--ui-shadow-hover);
}
}
/* GP-31) Cards: consistent border radius */
:where(.service-card, .testimonial-card, .faq-item, .trust-item, .location-card, .info-box) {
border-radius: var(--ui-radius);
}
/* GP-32) Section headers: improve subtitle line-height */
.section-header p {
line-height: 1.7;
}
/* GP-33) Section headers: avoid overly large underline opacity */
.section-header h2::after {
opacity: 0.82;
}
/* GP-34) Emergency box: tighten text readability */
.emergency-box__text {
text-wrap: pretty;
}
/* GP-35) CTA sections: keep copy width comfortable */
.cta-content p {
max-width: 70ch;
margin-left: auto;
margin-right: auto;
}
/* GP-36) Reduce motion for people who prefer it */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
/* GP-37) Higher contrast preference: boost borders and outlines */
@media (prefers-contrast: more) {
:root {
--ui-border: rgba(15, 23, 42, 0.22);
--ui-focus: rgba(37, 99, 235, 0.65);
}
:where(.service-card, .testimonial-card, .faq-item, .trust-item, .location-card, .info-box) {
border-color: var(--ui-border);
}
}
/* GP-38) Better selection (consistent with palette) */
::selection {
background: rgba(37, 99, 235, 0.22);
color: rgba(15, 23, 42, 0.98);
}
/* GP-39) Improve tap target on small links in footer */
.site-footer a {
text-underline-offset: 0.2em;
}
/* GP-40) Footer: prevent cramped lines */
.site-footer p {
line-height: 1.75;
}
/* GP-41) Make long section jumps nicer under sticky header */
section {
scroll-margin-top: 110px;
}
/* GP-42) Container: smoother padding on very small screens */
@media (max-width: 360px) {
.container {
padding-left: 0.95rem;
padding-right: 0.95rem;
}
}
/* GP-43) Headings: slightly better letter-spacing on big screens */
@media (min-width: 1024px) {
:where(h1, h2) {
letter-spacing: -0.025em;
}
}
/* GP-44) Paragraphs: slightly tighter on mobile for scanning */
@media (max-width: 520px) {
p {
line-height: 1.72;
}
}
/* GP-45) Buttons: ensure text stays crisp */
.button,
.svc-cta {
-webkit-font-smoothing: antialiased;
}
/* GP-46) Make anchors within cards feel more clickable */
:where(.service-card, .location-card) a.button {
letter-spacing: 0.02em;
}
/* GP-47) Improve readability of numbers in stat blocks */
:where(.stat-value, .coverage-stat__number, .hero__feature-value) {
font-variant-numeric: tabular-nums;
}
/* GP-48) Reduce harsh borders on separators inside cards */
:where(.testimonial-author, .svc-callout__note) {
border-color: rgba(15, 23, 42, 0.10);
}
/* GP-49) Improve keyboard navigation for “skip to content” if present */
.skip-link:focus-visible {
position: fixed;
top: 12px;
left: 12px;
z-index: 2000;
padding: 0.75rem 0.95rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}
/* GP-50) Slightly more consistent page background depth */
body {
background:
radial-gradient(1400px 520px at 18% 0%, rgba(37, 99, 235, 0.02), rgba(37, 99, 235, 0) 62%),
radial-gradient(1400px 640px at 82% 0%, rgba(96, 165, 250, 0.025), rgba(96, 165, 250, 0) 60%),
var(--color-bg);
}
/* ===================================
Mobile Safety Pack (no desktop regressions)
- Prevent horizontal overflow
- Ensure tables/CTAs remain usable
=================================== */
@media (max-width: 768px) {
/* Contact page: big phone CTA can overflow on small screens */
.phone-link {
display: block;
padding: 1.25rem 1.25rem;
max-width: 100%;
box-sizing: border-box;
}
.phone-number {
font-size: clamp(1.6rem, 7vw, 2.2rem);
letter-spacing: 0.03em;
}
/* Content tables: allow horizontal scroll instead of breaking layout */
.entry-content table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.entry-content table th,
.entry-content table td {
white-space: nowrap;
}
/* Home hero CTA glow: avoid huge overflow on touch "hover" */
.home .hero__cta {
overflow: hidden;
}
.home .hero__cta:hover::after {
width: min(280px, 90vw);
height: min(280px, 90vw);
}
/* Sticky CTA: respect safe-area on modern phones */
@supports (padding: max(0px)) {
.cta-sticky {
bottom: max(12px, env(safe-area-inset-bottom));
right: max(12px, env(safe-area-inset-right));
}
}
}