Homepage

/* Clarity360 – paste into Appearance > Customize > Additional CSS */

:root {
–c360-ink: #0f1b2d;
–c360-muted: #4a5a70;
–c360-accent: #1f6feb;
–c360-accent-dark: #1757bd;
–c360-soft: #f3f6fb;
–c360-line: #dde4ef;
}

body { color: var(–c360-ink); }

.c360-hero {
padding: 96px 24px 72px;
text-align: center;
background: linear-gradient(180deg, var(–c360-soft) 0%, #ffffff 100%);
}
.c360-hero h1 {
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0.4em 0;
}
.c360-lead {
font-size: 1.2rem;
color: var(–c360-muted);
max-width: 640px;
margin: 0 auto 1.6em;
}
.c360-eyebrow {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(–c360-accent);
margin-bottom: 0.4em;
}
.c360-hero .wp-block-buttons { justify-content: center; }
.c360-shot img {
border-radius: 14px;
border: 1px solid var(–c360-line);
box-shadow: 0 24px 60px rgba(15, 27, 45, 0.15);
margin-top: 48px;
}

.c360-section { padding: 72px 24px; }
.c360-section > h2 {
text-align: center;
font-size: clamp(1.6rem, 3vw, 2.2rem);
letter-spacing: -0.01em;
margin-bottom: 1.4em;
}
.c360-alt { background: var(–c360-soft); }

.c360-cards .wp-block-column {
background: #fff;
border: 1px solid var(–c360-line);
border-radius: 12px;
padding: 24px;
}
.c360-cards h3 { margin-top: 0; font-size: 1.1rem; }
.c360-cards p { color: var(–c360-muted); margin-bottom: 0; }

.wp-block-button__link {
background: var(–c360-accent);
border-radius: 8px;
padding: 14px 28px;
font-weight: 600;
transition: background 0.15s ease;
}
.wp-block-button__link:hover { background: var(–c360-accent-dark); }
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
color: var(–c360-accent);
border: 2px solid var(–c360-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(–c360-accent);
color: #fff;
}

.c360-cta {
text-align: center;
padding: 88px 24px;
background: var(–c360-ink);
color: #fff;
}
.c360-cta h2, .c360-cta p { color: #fff; }
.c360-cta .wp-block-button.is-style-outline .wp-block-button__link {
color: #fff;
border-color: #fff;
}
.c360-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: #fff;
color: var(–c360-ink);
}

@media (max-width: 781px) {
.c360-hero { padding: 64px 20px 48px; }
.c360-section { padding: 48px 20px; }
}