body {
font-family: var(--sp-font-family);
font-size: var(--sp-font-size-body);
line-height: var(--sp-line-height-base);
color: var(--sp-text-main);
background-color: var(--sp-surface-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
color: var(--sp-text-main);
line-height: var(--sp-line-height-tight);
font-weight: var(--sp-font-weight-bold);
margin-top: 0;
margin-bottom: var(--sp-spacing-4);
}
h1 { font-size: var(--sp-font-size-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--sp-font-size-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--sp-font-size-h3); }
h4 { font-size: var(--sp-font-size-h4); }
h5 { font-size: var(--sp-font-size-body); font-weight: var(--sp-font-weight-semibold); }
h6 { font-size: var(--sp-font-size-sm); font-weight: var(--sp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
p {
margin-top: 0;
margin-bottom: var(--sp-spacing-4);
}
a {
color: var(--sp-color-primary);
text-decoration: none;
transition: color var(--sp-transition-fast), border-color var(--sp-transition-fast);
}
a:hover {
color: var(--sp-color-primary-light);
}
ul, ol {
margin-top: 0;
margin-bottom: var(--sp-spacing-4);
padding-left: var(--sp-spacing-5);
}
li {
margin-bottom: var(--sp-spacing-2);
}
dt { font-weight: var(--sp-font-weight-bold); }
dd { margin-left: 0; margin-bottom: var(--sp-spacing-3); }
blockquote {
margin: var(--sp-spacing-6) 0;
padding: var(--sp-spacing-4) var(--sp-spacing-5);
border-left: 4px solid var(--sp-color-primary);
background-color: var(--sp-surface-subtle);
font-style: italic;
color: var(--sp-text-muted);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--sp-spacing-5);
font-size: var(--sp-font-size-sm);
}
th, td {
padding: var(--sp-spacing-3);
border: 1px solid var(--sp-border-color);
text-align: left;
}
th {
background-color: var(--sp-surface-subtle);
font-weight: var(--sp-font-weight-bold);
color: var(--sp-text-main);
}
/* Specific Content Titles */
.sp-product-title {
font-size: var(--sp-font-size-h4);
font-weight: var(--sp-font-weight-bold);
line-height: var(--sp-line-height-tight);
color: var(--sp-color-primary-dark);
margin-bottom: var(--sp-spacing-2);
display: block;
}
.sp-blog-title {
font-size: var(--sp-font-size-h3);
font-weight: var(--sp-font-weight-bold);
line-height: 1.3;
color: var(--sp-text-main);
margin-bottom: var(--sp-spacing-3);
display: block;
}
.sp-question-title {
font-size: var(--sp-font-size-body);
font-weight: var(--sp-font-weight-semibold);
line-height: 1.4;
color: var(--sp-text-main);
margin-bottom: var(--sp-spacing-2);
display: block;
}
/* Utility Typography Classes */
.sp-text-center { text-align: center !important; }
.sp-text-right { text-align: right !important; }
.sp-text-left { text-align: left !important; }
.sp-text-main { color: var(--sp-text-main) !important; }
.sp-text-muted { color: var(--sp-text-muted) !important; }
.sp-text-light { color: var(--sp-text-light) !important; }
.sp-text-primary { color: var(--sp-color-primary) !important; }
.sp-text-accent { color: var(--sp-color-accent) !important; }
.sp-text-success { color: var(--sp-color-success) !important; }
.sp-text-danger { color: var(--sp-color-danger) !important; }
.sp-text-inverse,
.sp-text-inverse h1,
.sp-text-inverse h2,
.sp-text-inverse h3,
.sp-text-inverse h4,
.sp-text-inverse h5,
.sp-text-inverse h6 {
color: var(--sp-text-inverse) !important;
}
.sp-text-inverse .sp-text-muted {
color: rgba(255, 255, 255, 0.75) !important;
}
.sp-fw-regular { font-weight: var(--sp-font-weight-regular) !important; }
.sp-fw-medium { font-weight: var(--sp-font-weight-medium) !important; }
.sp-fw-semibold { font-weight: var(--sp-font-weight-semibold) !important; }
.sp-fw-bold { font-weight: var(--sp-font-weight-bold) !important; }
.sp-fw-black { font-weight: var(--sp-font-weight-black) !important; }
.sp-fs-h1 { font-size: var(--sp-font-size-h1) !important; }
.sp-fs-h2 { font-size: var(--sp-font-size-h2) !important; }
.sp-fs-h3 { font-size: var(--sp-font-size-h3) !important; }
.sp-fs-h4 { font-size: var(--sp-font-size-h4) !important; }
.sp-fs-body { font-size: var(--sp-font-size-body) !important; }
.sp-fs-sm { font-size: var(--sp-font-size-sm) !important; }
.sp-fs-xs { font-size: var(--sp-font-size-xs) !important; }
.sp-lh-tight { line-height: var(--sp-line-height-tight) !important; }
.sp-lh-base { line-height: var(--sp-line-height-base) !important; }
.sp-lh-loose { line-height: var(--sp-line-height-loose) !important; }
.sp-text-uppercase { text-transform: uppercase !important; }
.sp-text-lowercase { text-transform: lowercase !important; }
.sp-text-capitalize { text-transform: capitalize !important; }
.sp-font-mono { font-family: var(--sp-font-mono) !important; }
.sp-ls-tight { letter-spacing: -0.02em !important; }
.sp-ls-wide { letter-spacing: 0.05em !important; }
.sp-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sp-line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sp-line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* ==================================================
   CONTACT HERO
================================================== */

.contact-hero{

    background:
    linear-gradient(
        135deg,
        var(--sp-color-primary),
        var(--sp-color-primary-light)
    );

    color:var(--sp-text-inverse);

    padding:64px 0;

}

.contact-hero h1{

    margin-bottom:16px;

}

.contact-hero .lead{

    max-width:850px;

    margin:0 auto 32px auto;

    opacity:.9;

}

.contact-hero .btn{

    min-height:54px;

    font-weight:700;

}

@media (max-width:767px){

    .contact-hero{

        padding:40px 0;

    }

}