:root { --bg-base: #080809;
--bg-surface: #121214;
--bg-surface-card: #18181b;
--bg-surface-glow: rgba(255, 107, 0, 0.03);
--primary: #FF6B00;
--primary-hover: #FF8A00;
--primary-glow: rgba(255, 107, 0, 0.4);
--secondary-glow: rgba(255, 255, 255, 0.1);
--text-primary: #FFFFFF;
--text-secondary: #B5B5C0;
--text-muted: #6C6C75;
--border-color: rgba(255, 255, 255, 0.08);
--border-color-active: rgba(255, 107, 0, 0.5);
--gradient-primary: linear-gradient(135deg, #FF6B00 0%, #FF3E00 100%);
--gradient-dark: linear-gradient(180deg, rgba(8, 8, 9, 0.7) 0%, rgba(8, 8, 9, 0.95) 100%);
--gradient-card: linear-gradient(180deg, rgba(24, 24, 27, 0.5) 0%, rgba(18, 18, 20, 0.9) 100%); --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --header-height: 80px;
--header-height-scrolled: 70px;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background-color: var(--bg-base) !important;
color: var(--text-secondary);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
} html,
#page,
.site,
#content,
.site-content,
.content-area,
main,
.article-body-section,
.category-main-section {
background-color: var(--bg-base) !important;
background: var(--bg-base) !important;
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: #27272a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
} h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--text-primary);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
a {
color: inherit;
text-decoration: none;
transition: all var(--transition-fast);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.container-small {
max-width: 800px;
}
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
} .scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--text-primary);
border: none;
box-shadow: 0 4px 20px rgba(255, 107, 0, 0.25);
}
.btn-primary:hover {
box-shadow: 0 4px 30px var(--primary-glow);
transform: translateY(-2px);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
} .main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
z-index: 1000;
border-bottom: 1px solid transparent;
transition: all var(--transition-normal);
display: flex;
align-items: center;
}
.main-header.header-scrolled {
height: var(--header-height-scrolled);
background: rgba(8, 8, 9, 0.85);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.header-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
} .logo-group {
display: flex;
flex-direction: column;
}
.logo-text {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.01em;
line-height: 1;
}
.logo-sub {
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--primary);
margin-top: 2px;
} .nav-menu {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
list-style: none;
gap: 32px;
}
.nav-link {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-secondary);
padding: 8px 0;
position: relative;
}
.nav-link:hover {
color: var(--text-primary);
} .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: width var(--transition-normal);
}
.nav-link.active {
color: var(--text-primary);
}
.nav-link.active::after,
.nav-link:hover::after {
width: 100%;
} .header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.search-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all var(--transition-fast);
}
.search-btn:hover {
color: var(--primary);
background: rgba(255, 255, 255, 0.05);
}
.cta-btn {
padding: 10px 22px;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: var(--border-radius-sm);
transition: all var(--transition-normal);
}
.primary-cta-header {
background: var(--gradient-primary);
color: var(--text-primary);
box-shadow: 0 4px 15px rgba(255, 107, 0, 0.2);
}
.primary-cta-header:hover {
box-shadow: 0 4px 25px var(--primary-glow);
transform: translateY(-1px);
} .mobile-nav-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
background: none;
border: none;
cursor: pointer;
z-index: 1100;
}
.hamburger-bar {
width: 100%;
height: 2px;
background-color: var(--text-primary);
border-radius: 2px;
transition: all var(--transition-normal);
} .mobile-nav-toggle.active .hamburger-bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.mobile-nav-toggle.active .hamburger-bar:nth-child(2) {
opacity: 0;
transform: translateX(-20px);
}
.mobile-nav-toggle.active .hamburger-bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
} .search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(8, 8, 9, 0.95);
backdrop-filter: blur(20px);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
}
.search-overlay.active {
opacity: 1;
pointer-events: auto;
}
.search-box {
position: relative;
width: 100%;
max-width: 600px;
padding: 0 24px;
}
.search-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding: 16px 40px 16px 0;
font-size: 1.5rem;
font-family: var(--font-heading);
color: var(--text-primary);
outline: none;
transition: border-color var(--transition-normal);
}
.search-input:focus {
border-color: var(--primary);
}
.search-close {
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-secondary);
font-size: 2rem;
cursor: pointer;
line-height: 1;
}
.search-close:hover {
color: var(--primary);
} .hero-section {
position: relative;
height: 100vh;
min-height: 650px;
display: flex;
align-items: center;
padding-top: var(--header-height);
overflow: hidden;
}
.hero-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.5) 50%, rgba(8, 8, 9, 0.95) 100%);
z-index: 2;
}
.hero-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.65);
z-index: 1;
transform: scale(1.02);
animation: slowZoom 20s infinite alternate linear;
}
@keyframes slowZoom {
0% { transform: scale(1); }
100% { transform: scale(1.08); }
}
.hero-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.65);
z-index: 1;
background: #080809;
transform: none;
animation: none;
}
.hero-bg-video::-webkit-media-controls,
.hero-bg-video::-webkit-media-controls-panel,
.hero-bg-video::-webkit-media-controls-play-button,
.hero-bg-video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
.hero-container {
position: relative;
z-index: 3;
width: 100%;
}
.hero-content {
max-width: 750px;
}
.hero-tagline {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 0.25em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
position: relative;
padding-left: 30px;
}
.hero-tagline::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: var(--primary);
}
.hero-title {
font-size: 3.8rem;
font-weight: 800;
margin-bottom: 24px;
line-height: 1.15;
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 40px;
max-width: 620px;
font-weight: 400;
}
.hero-actions {
display: flex;
gap: 20px;
} .scroll-down-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
animation: floatingArrow 2s infinite ease-in-out;
}
.scroll-link {
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.scroll-link:hover {
color: var(--text-primary);
}
.scroll-arrow {
font-size: 1.2rem;
margin-top: 8px;
color: var(--primary);
}
@keyframes floatingArrow {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 8px); }
} section {
padding: 120px 0;
position: relative;
}
.section-header {
max-width: 600px;
margin-bottom: 60px;
}
.section-tag {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 0.15em;
text-transform: uppercase;
display: block;
margin-bottom: 12px;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 16px;
font-weight: 800;
}
.section-desc {
color: var(--text-secondary);
font-size: 1.05rem;
} .solutions-section {
background-color: var(--bg-base);
}
.solutions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.solution-card {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
overflow: hidden;
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
position: relative;
}
.solution-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(255, 107, 0, 0.08) 0%, transparent 60%);
opacity: 0;
transition: opacity var(--transition-normal);
z-index: 3;
pointer-events: none;
}
.solution-img-wrapper {
height: 240px;
position: relative;
overflow: hidden;
}
.solution-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(18, 18, 20, 0) 50%, rgba(18, 18, 20, 0.95) 100%);
z-index: 2;
}
.solution-content {
padding: 30px;
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
z-index: 4;
background: var(--bg-surface);
}
.solution-category {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--primary);
margin-bottom: 12px;
}
.solution-card .solution-title {
font-size: 1.25rem;
margin-bottom: 12px;
font-weight: 700;
line-height: 1.3;
}
.solution-description {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 24px;
flex-grow: 1;
line-height: 1.5;
}
.solution-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--text-primary);
transition: color var(--transition-fast);
}
.cta-arrow {
transition: transform var(--transition-fast);
} .solution-card:hover {
transform: translateY(-8px);
border-color: var(--border-color-active);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 107, 0, 0.05);
}
.solution-card:hover::before {
opacity: 1;
}
.solution-card:hover .solution-img {
transform: scale(1.1);
}
.solution-card:hover .solution-cta {
color: var(--primary);
}
.solution-card:hover .cta-arrow {
transform: translateX(6px);
} .solution-card {
cursor: default;
}
.solution-card .solution-cta:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 4px;
border-radius: 999px;
} .stats-section {
padding: 80px 0;
background: var(--bg-surface);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.stat-item {
position: relative;
}
.stat-item:not(:last-child)::after {
content: '';
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 50px;
background: var(--border-color);
}
.stat-num {
font-family: var(--font-heading);
font-size: 3.5rem;
font-weight: 800;
color: var(--text-primary);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 10px;
}
.stat-label {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: 0.02em;
} .projects-section {
background-color: var(--bg-base);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.project-card {
background: var(--bg-surface-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
overflow: hidden;
transition: all var(--transition-normal);
}
.project-img-container {
height: 250px;
position: relative;
overflow: hidden;
}
.project-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.project-badge {
position: absolute;
top: 20px;
left: 20px;
background: rgba(8, 8, 9, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
color: var(--text-primary);
padding: 6px 14px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 40px;
z-index: 3;
}
.project-body {
padding: 30px;
}
.project-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.project-tag-tech {
background: rgba(255, 107, 0, 0.08);
border: 1px solid rgba(255, 107, 0, 0.15);
color: var(--primary);
padding: 4px 10px;
font-size: 0.7rem;
font-weight: 600;
border-radius: 4px;
letter-spacing: 0.02em;
}
.project-title-name {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.4;
}
.project-desc-short {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 24px;
line-height: 1.5;
}
.project-link {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--text-primary);
border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
padding-bottom: 2px;
}
.project-link:hover {
color: var(--primary);
border-color: var(--primary);
} .project-card:hover {
transform: translateY(-8px);
border-color: rgba(255, 107, 0, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.project-card:hover .project-img {
transform: scale(1.08);
} .consultation-section {
background-color: var(--bg-base);
position: relative;
overflow: hidden;
} .section-glow-left {
position: absolute;
width: 400px;
height: 400px;
left: -200px;
top: 20%;
background: radial-gradient(circle, rgba(255, 107, 0, 0.05) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
.section-glow-right {
position: absolute;
width: 500px;
height: 500px;
right: -250px;
bottom: 10%;
background: radial-gradient(circle, rgba(255, 62, 0, 0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
.form-card {
background: rgba(18, 18, 20, 0.55);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 60px;
backdrop-filter: blur(12px);
position: relative;
z-index: 2;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.form-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.form-header {
text-align: center;
margin-bottom: 48px;
}
.form-tag {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 12px;
display: block;
}
.form-title {
font-size: 2.3rem;
font-weight: 800;
margin-bottom: 16px;
}
.form-subtitle {
color: var(--text-secondary);
font-size: 1rem;
max-width: 550px;
margin: 0 auto;
}
.consultation-form {
display: flex;
flex-direction: column;
gap: 30px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.group-title {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.01em;
} .checkbox-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 4px;
}
.checkbox-container {
display: flex;
align-items: center;
position: relative;
padding-left: 36px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
user-select: none;
height: 40px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
}
.checkbox-container:hover {
border-color: rgba(255, 107, 0, 0.3);
background: rgba(255, 107, 0, 0.02);
color: var(--text-primary);
} .checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
} .checkmark {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
height: 18px;
width: 18px;
background-color: transparent;
border: 2px solid var(--text-muted);
border-radius: 4px;
transition: all var(--transition-fast);
} .checkbox-container input:checked ~ .checkmark {
border-color: var(--primary);
background-color: var(--primary);
}
.checkbox-container input:checked ~ .checkmark::after {
display: block;
}
.checkbox-container input:checked {
border-color: var(--primary);
}
.checkbox-container:has(input:checked) {
border-color: var(--primary);
background: rgba(255, 107, 0, 0.05);
color: var(--text-primary);
} .checkmark::after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 2px;
width: 5px;
height: 9px;
border: solid var(--text-primary);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
} .input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.input-label {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-input,
.form-textarea {
width: 100%;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
padding: 14px 20px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.95rem;
outline: none;
transition: all var(--transition-normal);
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--primary);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 15px rgba(255, 107, 0, 0.1);
}
.form-textarea {
resize: vertical;
} .submit-btn {
margin-top: 10px;
background: var(--gradient-primary);
border: none;
color: var(--text-primary);
padding: 16px 32px;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: var(--border-radius-sm);
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(255, 107, 0, 0.3);
transition: all var(--transition-normal);
}
.submit-btn:hover {
box-shadow: 0 8px 35px var(--primary-glow);
transform: translateY(-2px);
}
.submit-btn .btn-text {
position: relative;
z-index: 2;
}
.submit-btn .btn-glow-line {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: all var(--transition-slow);
z-index: 1;
}
.submit-btn:hover .btn-glow-line {
left: 100%;
transition: all 0.9s ease-in-out;
}
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: var(--text-primary);
animation: spin 0.8s ease-in-out infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .main-footer {
background-color: #0c0c0e;
border-top: 1px solid var(--border-color);
color: var(--text-secondary);
}
.footer-top {
padding: 80px 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1.2fr 1.2fr 1.6fr;
gap: 40px;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-logo {
display: flex;
flex-direction: column;
}
.brand-desc {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-secondary);
}
.social-links {
display: flex;
gap: 12px;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
color: var(--text-secondary);
transition: all var(--transition-fast);
}
.social-icon:hover {
background: var(--gradient-primary);
color: var(--text-primary);
border-color: transparent;
transform: translateY(-3px);
}
.footer-title {
font-size: 1.1rem;
margin-bottom: 24px;
font-weight: 600;
position: relative;
padding-bottom: 12px;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--primary);
}
.footer-links ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
font-size: 0.9rem;
color: var(--text-secondary);
}
.footer-links a:hover {
color: var(--primary);
padding-left: 5px;
}
.contact-info {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-info li {
display: flex;
gap: 12px;
font-size: 0.9rem;
line-height: 1.5;
}
.contact-icon {
flex-shrink: 0;
margin-top: 4px;
color: var(--primary);
} .footer-bottom {
padding: 30px 0;
border-top: 1px solid var(--border-color);
}
.footer-bottom-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-legal {
display: flex;
gap: 15px;
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-legal a:hover {
color: var(--primary);
}
.footer-legal .divider {
color: rgba(255, 255, 255, 0.05);
} .back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 44px;
height: 44px;
background: var(--gradient-primary);
color: var(--text-primary);
border: none;
border-radius: 50%;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
opacity: 0;
visibility: hidden;
z-index: 99;
transition: all var(--transition-normal);
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 4px 25px var(--primary-glow);
} .toast-container {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast-box {
background: var(--bg-surface);
border-left: 4px solid var(--primary);
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
padding: 16px 24px;
border-radius: var(--border-radius-sm);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
font-weight: 500;
animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
min-width: 320px;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toast-box.fade-out {
animation: fadeOutToast 0.5s ease forwards;
}
@keyframes fadeOutToast {
to {
opacity: 0;
transform: translateY(15px);
}
}
.toast-icon {
color: var(--primary);
font-weight: bold;
font-size: 1.2rem;
}  @media (max-width: 1200px) {
.container {
padding: 0 32px;
}
.hero-title {
font-size: 3.4rem;
}
} @media (max-width: 1024px) {
:root {
--header-height: 70px;
} .mobile-nav-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 320px;
height: 100vh;
background: rgba(18, 18, 20, 0.98);
backdrop-filter: blur(20px);
border-left: 1px solid var(--border-color);
padding: 100px 40px 40px 40px;
transition: right var(--transition-normal);
z-index: 1000;
box-shadow: -10px 0 40px rgba(0,0,0,0.6);
align-items: flex-start;
}
.nav-menu.active {
right: 0;
}
.nav-list {
flex-direction: column;
gap: 24px;
width: 100%;
}
.nav-link {
font-size: 1.15rem;
display: block;
width: 100%;
}
.header-actions {
margin-right: 40px;
} .hero-title {
font-size: 3rem;
} .solutions-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
} .projects-grid {
grid-template-columns: 1fr;
gap: 30px;
max-width: 600px;
margin: 0 auto;
} .footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
} @media (max-width: 768px) {
section {
padding: 80px 0;
}
.hero-title {
font-size: 2.3rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 30px;
}
.hero-actions {
flex-direction: column;
gap: 12px;
}
.hero-actions .btn {
width: 100%;
} .solutions-grid {
grid-template-columns: 1fr;
gap: 24px;
max-width: 420px;
margin: 0 auto;
} .stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-item:nth-child(2)::after {
display: none;
}
.stat-item:nth-child(even)::after {
display: none;
}
.stat-num {
font-size: 2.8rem;
} .form-card {
padding: 30px 20px;
}
.form-title {
font-size: 1.8rem;
}
.checkbox-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.input-grid {
grid-template-columns: 1fr;
gap: 16px;
} .footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-bottom-flex {
flex-direction: column;
gap: 15px;
text-align: center;
}
} @media (max-width: 480px) {
.logo-text {
font-size: 1.5rem;
}
.logo-sub {
font-size: 0.5rem;
}
.header-actions {
gap: 12px;
}
.cta-btn {
padding: 8px 14px;
font-size: 0.75rem;
}
.search-btn {
padding: 6px;
}
.checkbox-grid {
grid-template-columns: 1fr;
}
}  .logo-group .custom-logo-link,
.footer-logo .custom-logo-link {
display: block;
}
.logo-group .custom-logo,
.footer-logo .custom-logo {
max-height: 44px;
width: auto;
} .nav-list .menu-item a {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-secondary);
padding: 8px 0;
position: relative;
}
.nav-list .menu-item a:hover,
.nav-list .menu-item.current-menu-item > a,
.nav-list .menu-item.current_page_item > a,
.nav-list .menu-item a.active {
color: var(--text-primary);
}
.nav-list .menu-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: width var(--transition-normal);
}
.nav-list .menu-item a:hover::after,
.nav-list .menu-item.current-menu-item > a::after,
.nav-list .menu-item.current_page_item > a::after,
.nav-list .menu-item a.active::after {
width: 100%;
} .footer-links .menu,
.footer-legal .menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-legal .menu {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.footer-legal .menu a {
color: var(--text-muted);
font-size: 0.85rem;
}
.footer-legal .menu a:hover {
color: var(--primary);
} .site-page,
.site-single,
.site-archive,
.site-search,
.site-404 {
padding-top: calc(var(--header-height) + 80px);
padding-bottom: 100px;
min-height: 70vh;
background: var(--bg-base);
} .logo-group {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
flex-shrink: 0;
min-width: max-content;
}
.logo-group .custom-logo {
display: block;
max-height: 42px;
width: auto;
margin-bottom: 4px;
}
.logo-text,
.logo-sub {
display: block;
white-space: nowrap;
}
.logo-sub {
line-height: 1.2;
}
body.admin-bar #wpadminbar {
position: fixed !important;
z-index: 999999 !important;
}
body.admin-bar #main-header,
body.admin-bar .main-header {
z-index: 9999 !important;
} .sthh-single-main,
.sthh-archive-main {
background:
radial-gradient(circle at 15% 10%, rgba(255, 107, 0, 0.09), transparent 32%),
radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.06), transparent 30%),
var(--bg-base);
min-height: 70vh;
}
.sthh-article-hero,
.sthh-archive-hero {
padding: calc(var(--header-height) + 90px) 0 70px;
border-bottom: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.sthh-article-hero::before,
.sthh-archive-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(8, 8, 9, 0.35), rgba(255, 107, 0, 0.035));
pointer-events: none;
}
.sthh-article-hero .container,
.sthh-archive-hero .container {
position: relative;
z-index: 2;
}
.sthh-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 26px;
color: var(--text-muted);
font-size: 0.86rem;
}
.sthh-breadcrumb-item {
display: inline-flex;
align-items: center;
gap: 10px;
}
.sthh-breadcrumb-item:not(:last-child)::after {
content: '/';
color: rgba(255, 255, 255, 0.18);
}
.sthh-breadcrumb a {
color: var(--text-secondary);
}
.sthh-breadcrumb a:hover {
color: var(--primary);
}
.sthh-post-category {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
padding: 7px 13px;
background: rgba(255, 107, 0, 0.08);
border: 1px solid rgba(255, 107, 0, 0.2);
color: var(--primary);
border-radius: 999px;
font-family: var(--font-heading);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sthh-post-category:hover {
background: rgba(255, 107, 0, 0.15);
color: var(--text-primary);
}
.sthh-article-title,
.sthh-archive-title {
max-width: 940px;
margin: 22px 0 22px;
font-size: clamp(2.4rem, 5vw, 4.7rem);
line-height: 1.05;
letter-spacing: -0.055em;
}
.sthh-archive-title {
margin-top: 14px;
}
.sthh-article-meta,
.sthh-post-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
color: var(--text-muted);
font-size: 0.92rem;
}
.sthh-article-meta span,
.sthh-post-card-meta span,
.sthh-post-card-meta time {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sthh-article-meta > span:not(:last-child)::after,
.sthh-post-card-meta > *:not(:last-child)::after {
content: '';
width: 4px;
height: 4px;
margin-left: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
}
.sthh-article-featured {
margin-top: -34px;
position: relative;
z-index: 3;
}
.sthh-article-featured-img {
width: 100%;
max-height: 620px;
object-fit: cover;
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.sthh-article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 54px;
padding-top: 70px;
padding-bottom: 70px;
}
.sthh-article-content {
max-width: 780px;
color: var(--text-secondary);
font-size: 1.06rem;
line-height: 1.85;
}
.sthh-article-content > *:first-child {
margin-top: 0;
}
.sthh-article-content p,
.sthh-article-content ul,
.sthh-article-content ol,
.sthh-article-content blockquote,
.sthh-article-content figure,
.sthh-article-content table {
margin-bottom: 1.45em;
}
.sthh-article-content h2,
.sthh-article-content h3,
.sthh-article-content h4 {
margin-top: 1.45em;
margin-bottom: 0.65em;
scroll-margin-top: calc(var(--header-height) + 30px);
}
.sthh-article-content h2 {
font-size: clamp(1.75rem, 3vw, 2.35rem);
}
.sthh-article-content h3 {
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.sthh-article-content a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 4px;
}
.sthh-article-content a:hover {
color: var(--primary-hover);
}
.sthh-article-content blockquote {
padding: 26px 30px;
border-left: 4px solid var(--primary);
background: rgba(255, 255, 255, 0.035);
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 1.14rem;
}
.sthh-article-content img {
border-radius: var(--border-radius-md);
}
.sthh-article-content table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
}
.sthh-article-content th,
.sthh-article-content td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-color);
}
.sthh-article-content th {
background: rgba(255, 107, 0, 0.08);
color: var(--text-primary);
}
.sthh-article-sidebar {
position: relative;
}
.sthh-sidebar-card {
background: rgba(18, 18, 20, 0.72);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
padding: 26px;
margin-bottom: 22px;
backdrop-filter: blur(12px);
}
.sthh-sidebar-card h2 {
font-size: 1.05rem;
margin-bottom: 16px;
}
.sthh-tax-list,
.sthh-tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sthh-tax-list a,
.sthh-tag-list a {
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: rgba(255, 255, 255, 0.03);
color: var(--text-secondary);
font-size: 0.85rem;
}
.sthh-tax-list a:hover,
.sthh-tag-list a:hover {
color: var(--primary);
border-color: rgba(255, 107, 0, 0.35);
}
.sthh-cta-card {
position: sticky;
top: calc(var(--header-height) + 28px);
overflow: hidden;
}
.sthh-cta-card::before {
content: '';
position: absolute;
width: 170px;
height: 170px;
right: -90px;
top: -90px;
border-radius: 50%;
background: rgba(255, 107, 0, 0.14);
filter: blur(4px);
}
.sthh-cta-card > * {
position: relative;
z-index: 2;
}
.sthh-cta-card p {
margin-bottom: 20px;
color: var(--text-secondary);
font-size: 0.95rem;
}
.sthh-article-footer {
padding-bottom: 90px;
}
.sthh-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
border-top: 1px solid var(--border-color);
padding-top: 34px;
}
.sthh-post-nav-item {
min-height: 120px;
padding: 24px;
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
background: var(--bg-surface);
}
.sthh-post-nav-item span {
display: block;
margin-bottom: 10px;
color: var(--text-muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sthh-post-nav-item a {
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
}
.sthh-post-nav-item a:hover {
color: var(--primary);
}
.sthh-post-nav-next {
text-align: right;
}
.sthh-page-links {
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid var(--border-color);
}
.sthh-archive-description {
max-width: 760px;
color: var(--text-secondary);
font-size: 1.08rem;
}
.sthh-post-list-section {
padding: 80px 0 110px;
}
.sthh-post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}
.sthh-post-card {
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
background: var(--bg-surface-card);
transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.sthh-post-card:hover {
transform: translateY(-8px);
border-color: rgba(255, 107, 0, 0.3);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.48);
}
.sthh-post-card-thumb {
display: block;
position: relative;
height: 238px;
overflow: hidden;
background: #111;
}
.sthh-post-card-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 38%, rgba(8, 8, 9, 0.62));
pointer-events: none;
}
.sthh-post-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.sthh-post-card:hover .sthh-post-card-thumb img {
transform: scale(1.08);
}
.sthh-post-card-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:
radial-gradient(circle at top right, rgba(255, 107, 0, 0.22), transparent 42%),
linear-gradient(135deg, #151515, #0a0a0b);
}
.sthh-post-card-placeholder span {
font-family: var(--font-heading);
font-size: 2.6rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.12);
letter-spacing: 0.12em;
}
.sthh-post-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 28px;
}
.sthh-post-card-title {
margin: 16px 0 12px;
font-size: 1.35rem;
line-height: 1.35;
}
.sthh-post-card-title a {
color: var(--text-primary);
}
.sthh-post-card-title a:hover {
color: var(--primary);
}
.sthh-post-card-excerpt {
margin-top: 14px;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.65;
flex-grow: 1;
}
.sthh-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin-top: 22px;
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sthh-read-more span {
transition: transform var(--transition-fast);
}
.sthh-read-more:hover {
color: var(--primary);
}
.sthh-read-more:hover span {
transform: translateX(5px);
}
.sthh-pagination {
margin-top: 56px;
}
.sthh-pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sthh-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: rgba(255, 255, 255, 0.03);
color: var(--text-secondary);
font-family: var(--font-heading);
font-weight: 700;
}
.sthh-pagination .page-numbers.current,
.sthh-pagination .page-numbers:hover {
background: var(--gradient-primary);
border-color: transparent;
color: var(--text-primary);
}
.sthh-empty-state {
max-width: 680px;
margin: 0 auto;
padding: 70px 30px;
text-align: center;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
background: var(--bg-surface);
}
.sthh-empty-state h2 {
margin-bottom: 12px;
}
@media (max-width: 1100px) {
.sthh-article-layout {
grid-template-columns: 1fr;
}
.sthh-article-content {
max-width: 100%;
}
.sthh-cta-card {
position: relative;
top: auto;
}
.sthh-post-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.sthh-article-hero,
.sthh-archive-hero {
padding: calc(var(--header-height) + 62px) 0 48px;
}
.sthh-article-layout {
padding-top: 46px;
gap: 32px;
}
.sthh-post-grid,
.sthh-post-nav {
grid-template-columns: 1fr;
}
.sthh-post-nav-next {
text-align: left;
}
.sthh-post-card-thumb {
height: 220px;
}
.sthh-article-content {
font-size: 1rem;
}
} .main-header {
align-items: center !important;
}
.header-container {
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.logo-group {
height: 100% !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
.nav-menu {
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.nav-list,
.nav-list.menu {
height: 100% !important;
display: flex !important;
align-items: center !important;
gap: 32px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nav-list > li,
.nav-list.menu > li,
.nav-list .menu-item {
height: 100% !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.nav-list > li > a,
.nav-list.menu > li > a,
.nav-list .menu-item > a,
.nav-link {
height: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1 !important;
}
.header-actions {
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.search-btn,
.cta-btn,
.primary-cta-header {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
@media (max-width: 1024px) {
.nav-menu {
height: 100vh !important;
align-items: flex-start !important;
}
.nav-list,
.nav-list.menu {
height: auto !important;
align-items: flex-start !important;
}
.nav-list > li,
.nav-list.menu > li,
.nav-list .menu-item {
height: auto !important;
width: 100% !important;
align-items: flex-start !important;
}
.nav-list > li > a,
.nav-list.menu > li > a,
.nav-list .menu-item > a,
.nav-link {
height: auto !important;
width: 100% !important;
justify-content: flex-start !important;
padding: 10px 0 !important;
line-height: 1.2 !important;
}
} .footer-widget-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
align-items: start;
}
.footer-widget-column {
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-widget {
margin: 0;
}
.footer-widget > *:first-child {
margin-top: 0;
}
.footer-widget > *:last-child {
margin-bottom: 0;
}
.footer-widget-column .footer-title,
.footer-widget-column .widget-title,
.footer-widget-column .wp-block-heading,
.footer-widget-column h2,
.footer-widget-column h3,
.footer-widget-column h4 {
font-size: 1.1rem;
margin: 0 0 24px;
font-weight: 600;
position: relative;
padding-bottom: 12px;
color: var(--text-primary);
font-family: var(--font-heading);
}
.footer-widget-column .footer-title::after,
.footer-widget-column .widget-title::after,
.footer-widget-column .wp-block-heading::after,
.footer-widget-column h2::after,
.footer-widget-column h3::after,
.footer-widget-column h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--primary);
}
.footer-widget-column p,
.footer-widget-column .brand-desc,
.footer-widget-column .wp-block-paragraph {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 16px;
}
.footer-widget-column ul,
.footer-widget-column ol,
.footer-widget-column .wp-block-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-widget-column li {
font-size: 0.9rem;
color: var(--text-secondary);
}
.footer-widget-column a,
.footer-bottom-widgets a {
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-fast);
}
.footer-widget-column a:hover,
.footer-bottom-widgets a:hover {
color: var(--primary);
}
.footer-widget-column ul a:hover,
.footer-widget-column ol a:hover {
padding-left: 5px;
}
.footer-widget-column .wp-block-image,
.footer-widget-column figure {
margin: 0 0 18px;
}
.footer-widget-column .wp-block-social-links {
display: flex;
flex-direction: row;
gap: 12px;
margin-top: 18px;
}
.footer-bottom-widgets {
justify-content: center;
gap: 20px;
flex-wrap: wrap;
color: var(--text-muted);
font-size: 0.85rem;
text-align: center;
}
.footer-bottom-widgets .footer-widget,
.footer-bottom-widgets p {
margin: 0;
}
.footer-bottom-widgets ul,
.footer-bottom-widgets ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 768px) {
.footer-widget-grid {
grid-template-columns: 1fr;
}
.footer-widget-column .footer-title,
.footer-widget-column .widget-title,
.footer-widget-column .wp-block-heading,
.footer-widget-column h2,
.footer-widget-column h3,
.footer-widget-column h4 {
margin-bottom: 18px;
}
} .footer-builder-top {
padding: 80px 0;
}
.footer-builder-container {
width: 100%;
}
.footer-builder-container .footer-widget,
.footer-builder-widget {
margin: 0;
}
.footer-builder-container .wp-block-columns {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 40px !important;
align-items: flex-start !important;
margin: 0 !important;
}
.footer-builder-container .wp-block-column {
flex-basis: auto !important;
flex-grow: 0 !important;
min-width: 0 !important;
}
.footer-builder-container .wp-block-group,
.footer-builder-container .wp-block-column,
.footer-builder-container .footer-widget {
color: var(--text-secondary);
}
.footer-builder-container h1,
.footer-builder-container h2,
.footer-builder-container h3,
.footer-builder-container h4,
.footer-builder-container h5,
.footer-builder-container h6,
.footer-builder-container .wp-block-heading,
.footer-builder-container .footer-title {
font-size: 1.1rem;
margin: 0 0 24px;
font-weight: 600;
position: relative;
padding-bottom: 12px;
color: var(--text-primary);
font-family: var(--font-heading);
}
.footer-builder-container h1::after,
.footer-builder-container h2::after,
.footer-builder-container h3::after,
.footer-builder-container h4::after,
.footer-builder-container h5::after,
.footer-builder-container h6::after,
.footer-builder-container .wp-block-heading::after,
.footer-builder-container .footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--primary);
}
.footer-builder-container p,
.footer-builder-container .wp-block-paragraph {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 16px;
}
.footer-builder-container ul,
.footer-builder-container ol,
.footer-builder-container .wp-block-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-builder-container li {
font-size: 0.9rem;
color: var(--text-secondary);
}
.footer-builder-container a,
.footer-bottom-widgets a {
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-fast);
}
.footer-builder-container a:hover,
.footer-bottom-widgets a:hover {
color: var(--primary);
}
.footer-builder-container ul a:hover,
.footer-builder-container ol a:hover {
padding-left: 5px;
}
.footer-builder-container .wp-block-image,
.footer-builder-container figure {
margin: 0 0 18px;
}
.footer-builder-container .wp-block-social-links {
display: flex;
flex-direction: row;
gap: 12px;
margin-top: 18px;
}
.footer-builder-container .wp-block-social-links .wp-social-link a:hover {
padding-left: 0;
}
.footer-bottom-widgets {
justify-content: center;
gap: 20px;
flex-wrap: wrap;
color: var(--text-muted);
font-size: 0.85rem;
text-align: center;
}
.footer-bottom-widgets .footer-widget,
.footer-bottom-widgets p {
margin: 0;
}
.footer-bottom-widgets ul,
.footer-bottom-widgets ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 768px) {
.footer-builder-top {
padding: 56px 0;
}
.footer-builder-container .wp-block-columns {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.footer-builder-container h1,
.footer-builder-container h2,
.footer-builder-container h3,
.footer-builder-container h4,
.footer-builder-container h5,
.footer-builder-container h6,
.footer-builder-container .wp-block-heading,
.footer-builder-container .footer-title {
margin-bottom: 18px;
}
} .footer-builder-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 40px !important;
align-items: start !important;
justify-items: stretch !important;
text-align: left !important;
}
.footer-builder-container > .footer-widget,
.footer-builder-container > .footer-builder-widget,
.footer-builder-container > section,
.footer-builder-container > div {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
align-self: start !important;
justify-self: stretch !important;
text-align: left !important;
}
.footer-builder-container .footer-widget:has(.wp-block-columns),
.footer-builder-container .footer-builder-widget:has(.wp-block-columns) {
grid-column: 1 / -1 !important;
}
.footer-builder-container .wp-block-columns {
width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 40px !important;
margin: 0 !important;
}
.footer-builder-container .wp-block-column {
min-width: 0 !important;
flex: 1 1 0 !important;
align-self: flex-start !important;
text-align: left !important;
}
.footer-builder-container .footer-brand,
.footer-builder-container .footer-links,
.footer-builder-container .footer-contact,
.footer-builder-container .wp-block-group,
.footer-builder-container .widget,
.footer-builder-container .textwidget,
.footer-builder-container .wp-block-html,
.footer-builder-container .custom-html-widget {
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
width: 100% !important;
}
.footer-builder-container .footer-brand {
display: flex !important;
flex-direction: column !important;
}
.footer-builder-container .footer-title,
.footer-builder-container .wp-block-heading,
.footer-builder-container h1,
.footer-builder-container h2,
.footer-builder-container h3,
.footer-builder-container h4,
.footer-builder-container h5,
.footer-builder-container h6 {
text-align: left !important;
}
.footer-builder-container .footer-title::after,
.footer-builder-container .wp-block-heading::after,
.footer-builder-container h1::after,
.footer-builder-container h2::after,
.footer-builder-container h3::after,
.footer-builder-container h4::after,
.footer-builder-container h5::after,
.footer-builder-container h6::after {
left: 0 !important;
right: auto !important;
transform: none !important;
}
.footer-builder-container ul,
.footer-builder-container ol,
.footer-builder-container .wp-block-list,
.footer-builder-container .contact-info,
.footer-builder-container .social-links {
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
}
.footer-builder-container .social-links {
flex-direction: row !important;
}
@media (max-width: 900px) {
.footer-builder-container {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 32px !important;
}
.footer-builder-container .wp-block-columns {
flex-wrap: wrap !important;
}
.footer-builder-container .wp-block-column {
flex: 1 1 calc(50% - 16px) !important;
}
}
@media (max-width: 600px) {
.footer-builder-container {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.footer-builder-container .wp-block-columns {
flex-direction: column !important;
gap: 28px !important;
}
.footer-builder-container .wp-block-column {
flex: 1 1 100% !important;
width: 100% !important;
}
} .footer-builder-top {
padding: 48px 0 34px !important;
}
.footer-builder-container {
gap: 24px !important;
}
.footer-builder-container > .footer-widget,
.footer-builder-container > .footer-builder-widget,
.footer-builder-container > section,
.footer-builder-container > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.footer-builder-container .widget,
.footer-builder-container .wp-block-group,
.footer-builder-container .wp-block-html,
.footer-builder-container .custom-html-widget,
.footer-builder-container .textwidget,
.footer-builder-container .footer-brand,
.footer-builder-container .footer-links,
.footer-builder-container .footer-contact {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.footer-builder-container .wp-block-columns {
gap: 24px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.footer-builder-container .wp-block-column {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.footer-builder-container .footer-title,
.footer-builder-container .wp-block-heading,
.footer-builder-container h1,
.footer-builder-container h2,
.footer-builder-container h3,
.footer-builder-container h4,
.footer-builder-container h5,
.footer-builder-container h6 {
margin-top: 0 !important;
margin-bottom: 14px !important;
padding-bottom: 8px !important;
line-height: 1.25 !important;
}
.footer-builder-container p,
.footer-builder-container .wp-block-paragraph,
.footer-builder-container .brand-desc {
margin-top: 0 !important;
margin-bottom: 10px !important;
line-height: 1.55 !important;
}
.footer-builder-container ul,
.footer-builder-container ol,
.footer-builder-container .wp-block-list,
.footer-builder-container .contact-info {
gap: 8px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.footer-builder-container li {
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1.45 !important;
}
.footer-builder-container .footer-logo,
.footer-builder-container .logo-group {
margin-bottom: 10px !important;
}
.footer-builder-container .social-links,
.footer-builder-container .wp-block-social-links {
margin-top: 12px !important;
gap: 10px !important;
}
.footer-builder-container .wp-block-image,
.footer-builder-container figure {
margin-top: 0 !important;
margin-bottom: 10px !important;
}
.footer-bottom {
padding: 18px 0 !important;
}
.footer-bottom-widgets {
gap: 12px !important;
}
.footer-bottom-widgets .footer-widget,
.footer-bottom-widgets p,
.footer-bottom-widgets .wp-block-group,
.footer-bottom-widgets .wp-block-html,
.footer-bottom-widgets .custom-html-widget {
margin: 0 !important;
padding: 0 !important;
}
.footer-bottom-widgets ul,
.footer-bottom-widgets ol,
.footer-bottom-widgets .footer-legal {
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 900px) {
.footer-builder-top {
padding: 42px 0 30px !important;
}
.footer-builder-container {
gap: 22px !important;
}
.footer-builder-container .wp-block-columns {
gap: 22px !important;
}
}
@media (max-width: 600px) {
.footer-builder-top {
padding: 36px 0 26px !important;
}
.footer-builder-container {
gap: 20px !important;
}
.footer-builder-container .wp-block-columns {
gap: 20px !important;
}
.footer-builder-container .footer-title,
.footer-builder-container .wp-block-heading,
.footer-builder-container h1,
.footer-builder-container h2,
.footer-builder-container h3,
.footer-builder-container h4,
.footer-builder-container h5,
.footer-builder-container h6 {
margin-bottom: 12px !important;
}
} body .main-header,
body .main-header * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body .main-header .logo-text {
font-family: var(--font-heading, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
font-size: 1.8rem !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--text-primary, #FFFFFF) !important;
}
body .main-header .logo-sub {
display: block !important;
font-family: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
font-size: 0.55rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--primary, #FF6B00) !important;
margin-top: 2px !important;
white-space: nowrap !important;
}
body .main-header .nav-link,
body .main-header .nav-list > li > a,
body .main-header .nav-list.menu > li > a,
body .main-header .nav-list .menu-item > a {
font-family: var(--font-heading, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
color: var(--text-secondary, #B5B5C0) !important;
text-decoration: none !important;
}
body .main-header .nav-link:hover,
body .main-header .nav-link.active,
body .main-header .nav-list .current-menu-item > a,
body .main-header .nav-list .current_page_item > a,
body .main-header .nav-list .menu-item > a:hover {
color: var(--text-primary, #FFFFFF) !important;
}
body .main-header .cta-btn,
body .main-header .primary-cta-header {
font-family: var(--font-heading, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}  .consultation-section.sthh-ff-balanced-section {
padding: 86px 0;
background:
radial-gradient(circle at 15% 10%, rgba(255, 107, 0, 0.08), transparent 34%),
radial-gradient(circle at 85% 90%, rgba(255, 62, 0, 0.07), transparent 36%),
var(--bg-base, #080809);
position: relative;
overflow: hidden;
}
.sthh-ff-balanced-shell {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 34px;
align-items: center;
}
.sthh-ff-balanced-copy {
padding: 28px 0;
}
.sthh-ff-balanced-copy .section-tag {
margin-bottom: 14px;
}
.sthh-ff-balanced-copy .section-title {
margin-bottom: 18px;
max-width: 520px;
}
.sthh-ff-balanced-copy .section-desc {
max-width: 520px;
margin-bottom: 26px;
}
.sthh-ff-balanced-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.sthh-ff-balanced-list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--text-secondary, #B5B5C0);
font-size: 0.95rem;
}
.sthh-ff-balanced-list li::before {
content: '✓';
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
border-radius: 50%;
background: rgba(255, 107, 0, 0.13);
color: var(--primary, #FF6B00);
font-weight: 800;
margin-top: 1px;
}
.sthh-ff-balanced-form-card {
position: relative;
padding: 26px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(24, 24, 27, 0.88), rgba(12, 12, 14, 0.92));
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(16px);
}
.sthh-ff-balanced-form-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 107, 0, 0.38), transparent 30%, rgba(255,255,255,0.08));
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.sthh-ff-balanced-form-card > * {
position: relative;
z-index: 1;
} .sthh-ff-balanced-form-card .fluentform,
.sthh-ff-balanced-form-card .frm-fluent-form {
margin: 0;
}
.sthh-ff-balanced-intro {
margin-bottom: 18px;
}
.sthh-ff-balanced-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(255, 107, 0, 0.12);
border: 1px solid rgba(255, 107, 0, 0.22);
color: var(--primary, #FF6B00);
font-family: var(--font-heading, Outfit, sans-serif);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sthh-ff-balanced-intro h2 {
margin: 0 0 8px;
font-size: clamp(1.55rem, 2.6vw, 2.1rem);
line-height: 1.18;
}
.sthh-ff-balanced-intro p {
margin: 0;
color: var(--text-secondary, #B5B5C0);
font-size: 0.95rem;
line-height: 1.55;
}
.sthh-ff-balanced-points {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px;
}
.sthh-ff-balanced-points span {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
font-size: 0.78rem;
font-weight: 600;
} .sthh-ff-balanced-form-card .ff-el-group,
.sthh-ff-balanced-form-card .ff-t-container,
.sthh-ff-balanced-form-card .sthh-balanced-intro-field,
.sthh-ff-balanced-form-card .sthh-balanced-note-field {
margin-bottom: 15px !important;
}
.sthh-ff-balanced-form-card .ff-el-input--label label,
.sthh-ff-balanced-form-card .ff-el-form-control-label {
color: var(--text-primary, #fff) !important;
font-family: var(--font-heading, Outfit, sans-serif);
font-size: 0.88rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
}
.sthh-ff-balanced-form-card .ff-el-help-message,
.sthh-ff-balanced-form-card .ff-el-input--content .ff-el-help-message {
margin-top: 6px !important;
color: rgba(255, 255, 255, 0.48) !important;
font-size: 0.78rem !important;
} .sthh-ff-balanced-form-card input[type='text'],
.sthh-ff-balanced-form-card input[type='tel'],
.sthh-ff-balanced-form-card input[type='email'],
.sthh-ff-balanced-form-card select,
.sthh-ff-balanced-form-card textarea,
.sthh-ff-balanced-form-card .ff-el-form-control {
width: 100% !important;
min-height: 48px;
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 12px !important;
color: #ffffff !important;
box-shadow: none !important;
outline: none !important;
font-family: var(--font-body, Inter, sans-serif) !important;
font-size: 0.94rem !important;
padding: 12px 14px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sthh-ff-balanced-form-card textarea,
.sthh-ff-balanced-form-card textarea.ff-el-form-control {
min-height: 92px !important;
resize: vertical;
}
.sthh-ff-balanced-form-card input::placeholder,
.sthh-ff-balanced-form-card textarea::placeholder {
color: rgba(255, 255, 255, 0.38) !important;
}
.sthh-ff-balanced-form-card input:focus,
.sthh-ff-balanced-form-card select:focus,
.sthh-ff-balanced-form-card textarea:focus,
.sthh-ff-balanced-form-card .ff-el-form-control:focus {
background: rgba(255, 255, 255, 0.065) !important;
border-color: rgba(255, 107, 0, 0.62) !important;
box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12) !important;
}
.sthh-ff-balanced-form-card select option {
background: #121214;
color: #fff;
} .sthh-balanced-solutions .ff-el-input--content {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.sthh-balanced-solutions .ff-el-form-check {
margin: 0 !important;
}
.sthh-balanced-solutions .ff-el-form-check-label {
display: flex !important;
align-items: center !important;
gap: 9px;
min-height: 44px;
padding: 11px 12px !important;
border-radius: 12px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.80) !important;
font-size: 0.88rem !important;
font-weight: 650 !important;
cursor: pointer;
transition: all 0.2s ease;
}
.sthh-balanced-solutions .ff-el-form-check-label:hover {
border-color: rgba(255, 107, 0, 0.38);
background: rgba(255, 107, 0, 0.055);
color: #fff !important;
}
.sthh-balanced-solutions input[type='checkbox'] {
width: 16px !important;
height: 16px !important;
min-height: 16px !important;
accent-color: var(--primary, #FF6B00);
flex: 0 0 16px;
}
.sthh-balanced-solutions input[type='checkbox']:checked + span,
.sthh-balanced-solutions input[type='checkbox']:checked ~ span {
color: #ffffff !important;
} .sthh-balanced-submit-wrap,
.sthh-ff-balanced-form-card .ff_submit_btn_wrapper {
margin: 4px 0 0 !important;
}
.sthh-ff-balanced-submit,
.sthh-ff-balanced-form-card button[type='submit'],
.sthh-ff-balanced-form-card .ff-btn-submit {
width: 100% !important;
min-height: 50px !important;
border: none !important;
border-radius: 13px !important;
background: linear-gradient(135deg, #FF6B00 0%, #FF3E00 100%) !important;
color: #ffffff !important;
font-family: var(--font-heading, Outfit, sans-serif) !important;
font-size: 0.94rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 12px 28px rgba(255, 107, 0, 0.27) !important;
transition: all 0.25s ease !important;
}
.sthh-ff-balanced-submit:hover,
.sthh-ff-balanced-form-card button[type='submit']:hover,
.sthh-ff-balanced-form-card .ff-btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(255, 107, 0, 0.38) !important;
}
.sthh-ff-balanced-note {
margin: -4px 0 0;
color: rgba(255, 255, 255, 0.48);
font-size: 0.78rem;
line-height: 1.45;
}
.sthh-ff-balanced-success {
padding: 15px 16px;
border-radius: 14px;
border: 1px solid rgba(255, 107, 0, 0.25);
background: rgba(255, 107, 0, 0.10);
color: #ffffff;
line-height: 1.5;
}
.sthh-ff-balanced-form-card .ff-el-is-error .ff-el-form-control {
border-color: rgba(255, 85, 85, 0.82) !important;
}
.sthh-ff-balanced-form-card .error,
.sthh-ff-balanced-form-card .ff-el-is-error .text-danger {
color: #ff9a9a !important;
font-size: 0.78rem !important;
margin-top: 6px !important;
}
@media (max-width: 1024px) {
.sthh-ff-balanced-shell {
grid-template-columns: 1fr;
gap: 24px;
}
.sthh-ff-balanced-copy {
padding: 0;
text-align: center;
}
.sthh-ff-balanced-copy .section-title,
.sthh-ff-balanced-copy .section-desc {
margin-left: auto;
margin-right: auto;
}
.sthh-ff-balanced-list {
max-width: 560px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
}
@media (max-width: 640px) {
.consultation-section.sthh-ff-balanced-section {
padding: 64px 0;
}
.sthh-ff-balanced-form-card {
padding: 20px;
border-radius: 18px;
}
.sthh-balanced-solutions .ff-el-input--content,
.sthh-balanced-row.sthh-balanced-row-2,
.sthh-balanced-row.sthh-balanced-row-2 .ff-t-cell {
display: block !important;
width: 100% !important;
}
.sthh-balanced-solutions .ff-el-form-check,
.sthh-balanced-row.sthh-balanced-row-2 .ff-t-cell {
margin-bottom: 10px !important;
}
.sthh-ff-balanced-points {
gap: 7px;
}
.sthh-ff-balanced-points span {
font-size: 0.74rem;
}
} .sthh-ff-balanced-form-card .sthh-balanced-row-2,
.sthh-ff-balanced-form-card .ff-t-container.sthh-balanced-row-2 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
align-items: start !important;
width: 100% !important;
}
.sthh-ff-balanced-form-card .sthh-balanced-row-2 .ff-t-cell,
.sthh-ff-balanced-form-card .ff-t-container.sthh-balanced-row-2 .ff-t-cell {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: none !important;
padding: 0 !important;
}
.sthh-ff-balanced-form-card .sthh-balanced-phone-field,
.sthh-ff-balanced-form-card .sthh-balanced-phone-field .ff-el-input--content,
.sthh-ff-balanced-form-card .sthh-balanced-phone-field .ff-el-form-control,
.sthh-ff-balanced-form-card input[name="phone"],
.sthh-ff-balanced-form-card input.sthh-phone-input {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
} .sthh-ff-balanced-form-card .iti,
.sthh-ff-balanced-form-card .ff-el-phone-wrapper {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
}
.sthh-ff-balanced-form-card .iti input[type="tel"],
.sthh-ff-balanced-form-card .ff-el-phone-wrapper input[type="tel"] {
display: block !important;
width: 100% !important;
}
@media (max-width: 640px) {
.sthh-ff-balanced-form-card .sthh-balanced-row-2,
.sthh-ff-balanced-form-card .ff-t-container.sthh-balanced-row-2 {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
} .sthh-ff-balanced-section .ff-el-group,
.sthh-ff-balanced-section .ff-el-input--content,
.sthh-ff-balanced-section input[name="phone"],
.sthh-ff-balanced-section input[type="tel"] {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
} @media (max-width: 1024px) {
.main-header .header-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}
.main-header .logo-group {
flex: 1 1 auto !important;
min-width: 0 !important;
margin-right: auto !important;
}
.main-header .header-actions {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.main-header .mobile-nav-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
margin-left: auto !important;
padding: 0 !important;
position: relative !important;
z-index: 1201 !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.04) !important;
cursor: pointer !important;
gap: 5px !important;
}
.main-header .mobile-nav-toggle .hamburger-bar {
display: block !important;
width: 20px !important;
height: 2px !important;
background-color: var(--text-primary) !important;
border-radius: 999px !important;
margin: 0 !important;
transition: all var(--transition-normal) !important;
}
.main-header .mobile-nav-toggle.active .hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
.main-header .mobile-nav-toggle.active .hamburger-bar:nth-child(2) {
opacity: 0 !important;
transform: translateX(-12px) !important;
}
.main-header .mobile-nav-toggle.active .hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
.main-header .nav-menu {
display: flex !important;
z-index: 1100 !important;
}
.main-header .nav-menu.active {
right: 0 !important;
}
}
@media (min-width: 1025px) {
.main-header .mobile-nav-toggle {
display: none !important;
}
.main-header .header-actions {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: 100% !important;
overflow: visible !important;
}
} .error404,
.error404 body,
.error404 #page,
.error404 .site,
.error404 #content,
.error404 .site-content {
background: var(--bg-base) !important;
color: var(--text-secondary) !important;
}
.error-404-page {
background:
radial-gradient(circle at 15% 15%, rgba(255, 107, 0, 0.12), transparent 34%),
radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.06), transparent 32%),
linear-gradient(180deg, #080809 0%, #0c0c0e 58%, #080809 100%);
min-height: 100vh;
overflow: hidden;
}
.error-404-hero {
position: relative;
padding: calc(var(--header-height) + 92px) 0 96px;
}
body.admin-bar .error-404-hero {
padding-top: calc(var(--header-height) + var(--sthh-admin-bar-height, 32px) + 72px);
}
.error-404-glow {
position: absolute;
pointer-events: none;
border-radius: 999px;
filter: blur(10px);
opacity: 0.9;
}
.error-404-glow-left {
width: 360px;
height: 360px;
left: -140px;
top: 120px;
background: radial-gradient(circle, rgba(255, 107, 0, 0.13), transparent 68%);
}
.error-404-glow-right {
width: 460px;
height: 460px;
right: -190px;
top: 280px;
background: radial-gradient(circle, rgba(255, 62, 0, 0.1), transparent 70%);
}
.error-404-card {
position: relative;
z-index: 2;
max-width: 920px;
margin: 0 auto;
padding: 58px;
text-align: center;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
background:
linear-gradient(180deg, rgba(24, 24, 27, 0.74), rgba(18, 18, 20, 0.84)),
radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.1), transparent 48%);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(16px);
}
.error-404-card::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 4px;
background: var(--gradient-primary);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.error-404-eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 18px;
padding: 7px 14px;
border: 1px solid rgba(255, 107, 0, 0.24);
border-radius: 999px;
background: rgba(255, 107, 0, 0.06);
color: var(--primary);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.error-404-eyebrow span {
color: var(--text-primary);
}
.error-404-code {
font-family: var(--font-heading);
font-size: clamp(5.4rem, 15vw, 13rem);
font-weight: 800;
line-height: 0.86;
letter-spacing: -0.08em;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 107, 0, 0.72));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 20px 70px rgba(255, 107, 0, 0.18);
margin-bottom: 22px;
}
.error-404-title {
max-width: 740px;
margin: 0 auto 18px;
font-size: clamp(2.1rem, 5vw, 4rem);
font-weight: 800;
letter-spacing: -0.04em;
}
.error-404-desc {
max-width: 700px;
margin: 0 auto 34px;
color: var(--text-secondary);
font-size: 1.05rem;
}
.error-404-search {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
max-width: 700px;
margin: 0 auto 28px;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.035);
}
.error-404-search input[type="search"] {
width: 100%;
min-height: 52px;
border: none;
outline: none;
padding: 0 16px;
border-radius: 12px;
background: transparent;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.96rem;
}
.error-404-search input[type="search"]::placeholder {
color: var(--text-muted);
}
.error-404-search input[type="search"]:focus {
box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.28);
background: rgba(255, 255, 255, 0.03);
}
.error-404-search button {
min-height: 52px;
border: none;
padding: 0 24px;
border-radius: 12px;
background: var(--gradient-primary);
color: var(--text-primary);
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow: 0 10px 24px rgba(255, 107, 0, 0.22);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.error-404-search button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(255, 107, 0, 0.32);
}
.error-404-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
}
.error-404-quick-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 28px;
}
.error-404-quick-card {
display: block;
min-height: 168px;
padding: 26px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
background: rgba(18, 18, 20, 0.68);
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}
.error-404-quick-card:hover {
transform: translateY(-6px);
border-color: rgba(255, 107, 0, 0.34);
background: rgba(24, 24, 27, 0.86);
}
.error-404-card-index {
display: block;
margin-bottom: 16px;
color: var(--primary);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.14em;
}
.error-404-quick-card strong {
display: block;
margin-bottom: 10px;
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 1.12rem;
line-height: 1.25;
}
.error-404-quick-card small {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.55;
}
.error-404-latest {
position: relative;
z-index: 2;
margin-top: 72px;
}
.error-404-latest .section-header {
margin-bottom: 26px;
}
.error-404-post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.error-404-post-card {
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
background: var(--bg-surface-card);
transition: transform var(--transition-normal), border-color var(--transition-normal);
}
.error-404-post-card:hover {
transform: translateY(-6px);
border-color: rgba(255, 107, 0, 0.32);
}
.error-404-post-thumb {
display: flex;
align-items: center;
justify-content: center;
height: 190px;
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 107, 0, 0.18), rgba(255, 255, 255, 0.04));
color: rgba(255, 255, 255, 0.18);
font-family: var(--font-heading);
font-size: 2.6rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.error-404-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.error-404-post-card:hover .error-404-post-thumb img {
transform: scale(1.06);
}
.error-404-post-body {
padding: 22px;
}
.error-404-post-body time {
display: block;
margin-bottom: 10px;
color: var(--primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.error-404-post-body h3 {
margin: 0;
font-size: 1.1rem;
line-height: 1.35;
}
.error-404-post-body h3 a:hover {
color: var(--primary);
}
@media (max-width: 1024px) {
.error-404-card {
padding: 44px 28px;
}
.error-404-quick-grid,
.error-404-post-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.error-404-hero {
padding: calc(var(--header-height) + 54px) 0 66px;
}
body.admin-bar .error-404-hero {
padding-top: calc(var(--header-height) + var(--sthh-admin-bar-height, 46px) + 44px);
}
.error-404-card {
padding: 34px 18px;
border-radius: 20px;
}
.error-404-desc {
font-size: 0.98rem;
}
.error-404-search {
grid-template-columns: 1fr;
padding: 10px;
}
.error-404-search button {
width: 100%;
}
.error-404-actions .btn {
width: 100%;
}
.error-404-quick-card {
min-height: auto;
padding: 22px;
}
} @media (max-width: 768px) {
.products-toolbar {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding: 14px !important;
overflow: visible !important;
}
.results-count {
width: 100% !important;
text-align: left !important;
font-size: 0.84rem !important;
line-height: 1.45 !important;
}
.toolbar-actions {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
align-items: stretch !important;
min-width: 0 !important;
}
.mobile-filter-trigger {
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 14px !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
line-height: 1 !important;
border-radius: 12px !important;
background: rgba(255, 107, 0, 0.08) !important;
border-color: rgba(255, 107, 0, 0.26) !important;
color: var(--text-primary) !important;
}
.mobile-filter-trigger span {
display: inline-block !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
line-height: 1 !important;
}
.mobile-filter-trigger svg {
flex: 0 0 auto !important;
}
.sort-selector-wrapper {
width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 12px !important;
border: 1px solid var(--border-color) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.03) !important;
}
.sort-label {
white-space: nowrap !important;
font-size: 0.78rem !important;
line-height: 1 !important;
color: var(--text-muted) !important;
}
.sort-select {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 8px 30px 8px 10px !important;
font-size: 0.84rem !important;
line-height: 1.25 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
border-radius: 10px !important;
}
.active-filters-badges {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
padding-bottom: 2px !important;
-webkit-overflow-scrolling: touch;
}
.filter-badge {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
}
@media (max-width: 420px) {
.products-toolbar {
padding: 12px !important;
gap: 10px !important;
}
.sort-selector-wrapper {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
.sort-label {
font-size: 0.74rem !important;
}
} @media (max-width: 640px) {
.sthh-breadcrumb,
.breadcrumb-list,
.breadcrumb {
max-width: 100% !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
font-size: 0.74rem !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.sthh-breadcrumb-item,
.breadcrumb-item {
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.sthh-breadcrumb-item + .sthh-breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
margin-right: 6px !important;
font-size: 0.68rem !important;
flex: 0 0 auto !important;
}
.article-hero .sthh-breadcrumb,
.article-hero .breadcrumb {
margin-bottom: 12px !important;
} .single-post .article-hero .sthh-breadcrumb-item:last-child,
.single-post .article-hero .breadcrumb-item:last-child {
display: none !important;
}
}   .sthh-breadcrumb-item:not(:last-child)::after {
content: none !important;
display: none !important;
}
.sthh-breadcrumb-item + .sthh-breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
content: '/' !important;
display: inline-block !important;
margin: 0 8px 0 0 !important;
color: rgba(255, 255, 255, 0.32) !important;
}
@media (max-width: 768px) {
.sthh-breadcrumb-item + .sthh-breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
margin-right: 6px !important;
}
}   .sthh-breadcrumb,
.breadcrumb-list,
.breadcrumb {
gap: 0 !important;
}
.sthh-breadcrumb-item,
.breadcrumb-item {
display: inline-flex !important;
align-items: center !important;
min-width: 0;
}
.sthh-breadcrumb-item:not(:last-child)::after,
.breadcrumb-item:not(:last-child)::after {
content: none !important;
display: none !important;
}
.sthh-breadcrumb-item + .sthh-breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
content: '/' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 9px !important;
width: auto !important;
color: rgba(255, 255, 255, 0.36) !important;
line-height: 1 !important;
flex: 0 0 auto !important;
}
@media (max-width: 640px) {
.sthh-breadcrumb,
.breadcrumb-list,
.breadcrumb {
gap: 0 !important;
}
.sthh-breadcrumb-item + .sthh-breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
margin: 0 6px !important;
}
}   .category-main-section {
padding-bottom: 36px !important;
}
.products-grid {
margin-bottom: 0 !important;
}
.sthh-pagination {
margin-top: 34px !important;
margin-bottom: 0 !important;
}
.category-cta-section {
padding-top: 56px !important;
padding-bottom: 68px !important;
}
@media (max-width: 768px) {
.category-main-section {
padding-bottom: 26px !important;
}
.sthh-pagination {
margin-top: 24px !important;
}
.category-cta-section {
padding-top: 42px !important;
padding-bottom: 54px !important;
}
}   .single-post .article-content,
.single-post .article-content.scroll-reveal,
.single-post .article-content .entry-content {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.single-post .article-content img,
.single-post .article-content iframe,
.single-post .article-content video {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}   @media (max-width: 1024px) {
body .main-header #nav-menu,
body .main-header .nav-menu,
body #nav-menu.nav-menu,
body .nav-menu {
left: auto !important;
right: -100% !important;
transform: none !important;
transition-property: right, opacity, visibility !important;
transition-duration: var(--transition-normal, 0.35s) !important;
border-left: 1px solid var(--border-color, rgba(255,255,255,0.08)) !important;
border-right: 0 !important;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important;
}
body .main-header #nav-menu.active,
body .main-header .nav-menu.active,
body #nav-menu.nav-menu.active,
body .nav-menu.active {
left: auto !important;
right: 0 !important;
}
}
.single-post .article-hero .hero-content,
.single-post .article-body-section,
.single-post .article-layout,
.single-post .article-content,
.single-post .article-content .entry-content,
.single-post .article-content .entry-content > * {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
.single-post .article-content .entry-content img,
.single-post .article-content .entry-content iframe,
.single-post .article-content .entry-content video,
.single-post .article-content .entry-content source {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
animation: none !important;
} .article-content ul,
.article-content ol,
.article-content .wp-block-list {
margin: 0 0 22px 0 !important;
padding-left: 1.15rem !important;
list-style-position: outside !important;
display: block !important;
}
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul {
margin: 8px 0 8px 0 !important;
padding-left: 1rem !important;
}
.article-content li {
margin: 0 0 8px 0 !important;
padding-left: 0.15rem !important;
line-height: 1.75;
}
.article-content li::marker {
color: var(--primary);
}
@media (max-width: 768px) {
.article-content ul,
.article-content ol,
.article-content .wp-block-list {
padding-left: 1rem !important;
}
.article-content li {
padding-left: 0.05rem !important;
}
} .error-404-hero {
padding-top: calc(var(--header-height) + 42px) !important;
padding-bottom: 72px !important;
}
body.admin-bar .error-404-hero {
padding-top: calc(var(--header-height) + var(--sthh-admin-bar-height, 32px) + 34px) !important;
}
.error-404-card {
padding-top: 46px !important;
padding-bottom: 46px !important;
}
.error-404-code {
margin-bottom: 16px !important;
}
.error-404-latest {
margin-top: 48px !important;
}
.archive-search-form,
body.search .search-form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
width: 100%;
max-width: 720px;
margin: 28px 0 0;
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.045);
box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.04), 0 18px 42px rgba(0, 0, 0, 0.18);
}
.archive-search-form input[type="search"],
body.search .search-form input[type="search"],
body.search .search-form .search-field {
display: block !important;
width: 100% !important;
min-height: 52px;
padding: 0 16px !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 12px !important;
outline: none !important;
background: rgba(8, 8, 9, 0.72) !important;
color: var(--text-primary) !important;
font-family: var(--font-body);
font-size: 0.96rem;
box-shadow: none !important;
}
.archive-search-form input[type="search"]::placeholder,
body.search .search-form input[type="search"]::placeholder,
body.search .search-form .search-field::placeholder {
color: var(--text-muted) !important;
}
.archive-search-form input[type="search"]:focus,
body.search .search-form input[type="search"]:focus,
body.search .search-form .search-field:focus {
border-color: rgba(255, 107, 0, 0.58) !important;
background: rgba(18, 18, 20, 0.92) !important;
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12) !important;
}
.archive-search-form button,
body.search .search-form .search-submit,
body.search .search-form button[type="submit"] {
min-height: 52px;
padding: 0 24px !important;
border: 0 !important;
border-radius: 12px !important;
background: var(--gradient-primary) !important;
color: var(--text-primary) !important;
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
white-space: nowrap;
}
@media (max-width: 640px) {
.error-404-hero {
padding-top: calc(var(--header-height) + 24px) !important;
padding-bottom: 48px !important;
}
body.admin-bar .error-404-hero {
padding-top: calc(var(--header-height) + var(--sthh-admin-bar-height, 46px) + 20px) !important;
}
.error-404-card {
padding-top: 26px !important;
padding-bottom: 28px !important;
}
.error-404-code {
font-size: clamp(4.2rem, 27vw, 7.2rem) !important;
}
.archive-search-form,
body.search .search-form {
grid-template-columns: 1fr;
margin-top: 20px;
padding: 10px;
}
.archive-search-form button,
body.search .search-form .search-submit,
body.search .search-form button[type="submit"] {
width: 100%;
}
} body .sthh-demo-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
body .sthh-demo-page > section:first-child {
margin-top: 0 !important;
}    .logo-text,
.sthh-footer-brand-name {
text-transform: none !important;
} .main-header .nav-list > .menu-item {
position: relative !important;
}
.main-header .nav-list > .menu-item-has-children {
gap: 5px;
}
.submenu-toggle {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.submenu-toggle:hover,
.submenu-toggle:focus-visible,
.menu-item-has-children:hover > .submenu-toggle,
.menu-item-has-children:focus-within > .submenu-toggle {
color: var(--primary);
background: rgba(255, 107, 0, 0.1);
}
.submenu-toggle-icon {
width: 7px;
height: 7px;
display: block;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--transition-fast);
}
.main-header .nav-list .sub-menu {
position: absolute;
z-index: 1200;
top: calc(100% - 10px);
left: 0;
width: max-content;
min-width: 260px;
max-width: 330px;
margin: 0 !important;
padding: 10px !important;
list-style: none !important;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 14px;
background: rgba(15, 15, 18, 0.98);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(18px);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.main-header .nav-list .sub-menu .sub-menu {
top: -10px;
left: calc(100% + 10px);
}
.main-header .nav-list .menu-item:hover > .sub-menu,
.main-header .nav-list .menu-item:focus-within > .sub-menu,
.main-header .nav-list .menu-item.submenu-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.main-header .nav-list .sub-menu .menu-item,
.main-header .nav-list.menu .sub-menu .menu-item {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.main-header .nav-list .sub-menu .menu-item + .menu-item {
margin-top: 2px !important;
}
.main-header .nav-list .sub-menu .menu-item > a,
.main-header .nav-list.menu .sub-menu .menu-item > a {
width: 100% !important;
height: auto !important;
min-height: 42px;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 10px 38px 10px 12px !important;
border-radius: 9px;
color: var(--text-secondary) !important;
font-size: 0.9rem !important;
line-height: 1.35 !important;
white-space: normal;
}
.main-header .nav-list .sub-menu .menu-item > a::after {
display: none !important;
}
.main-header .nav-list .sub-menu .menu-item > a:hover,
.main-header .nav-list .sub-menu .current-menu-item > a {
color: #fff !important;
background: rgba(255, 107, 0, 0.12);
}
.main-header .nav-list .sub-menu .submenu-toggle {
position: absolute;
top: 7px;
right: 6px;
}
.main-header .nav-list .sub-menu .submenu-toggle-icon {
transform: translateX(-2px) rotate(-45deg);
} .sthh-about-section {
position: relative;
padding: 110px 0;
overflow: hidden;
background:
radial-gradient(circle at 82% 20%, rgba(255, 107, 0, 0.09), transparent 34%),
var(--bg-base);
border-bottom: 1px solid var(--border-color);
}
.sthh-about-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
gap: 72px;
align-items: start;
}
.sthh-about-copy {
position: sticky;
top: calc(var(--header-height-scrolled) + 28px);
}
.sthh-about-copy .section-title {
max-width: 660px;
margin-bottom: 26px;
text-transform: none;
}
.sthh-about-copy p {
max-width: 720px;
color: var(--text-secondary);
font-size: 1.02rem;
line-height: 1.82;
}
.sthh-about-copy p + p {
margin-top: 20px;
}
.sthh-about-lead {
color: var(--text-primary) !important;
font-size: 1.12rem !important;
}
.sthh-about-values {
display: grid;
gap: 20px;
}
.sthh-value-card {
position: relative;
padding: 34px;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
}
.sthh-value-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--gradient-primary);
}
.sthh-value-number {
margin-bottom: 14px;
color: var(--primary);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
}
.sthh-value-card h3 {
margin-bottom: 14px;
font-size: 1.45rem;
text-transform: none;
}
.sthh-value-card p,
.sthh-mission-list li {
color: var(--text-secondary);
line-height: 1.72;
}
.sthh-mission-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.sthh-mission-list li {
position: relative;
padding-left: 24px;
}
.sthh-mission-list li::before {
content: '•';
position: absolute;
top: 0;
left: 5px;
color: var(--primary);
font-size: 1.25rem;
} .sthh-products-section {
position: relative;
padding: 112px 0;
overflow: hidden;
background:
radial-gradient(circle at 12% 0%, rgba(255, 107, 0, 0.10), transparent 34%),
radial-gradient(circle at 86% 92%, rgba(255, 107, 0, 0.07), transparent 32%),
linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(8, 8, 9, 1));
border-top: 1px solid rgba(255, 255, 255, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sthh-products-section::before {
content: '';
position: absolute;
inset: 24px;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
pointer-events: none;
}
.sthh-product-directory-modern {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
z-index: 1;
}
.sthh-product-group {
position: relative;
min-width: 0;
min-height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
padding: 26px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22);
transition: border-color var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}
.sthh-product-group::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg, rgba(255, 107, 0, 0.28), transparent 34%, rgba(255, 255, 255, 0.06));
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
}
.sthh-product-group > * {
position: relative;
z-index: 1;
}
.sthh-product-group:hover {
transform: translateY(-6px);
border-color: rgba(255, 107, 0, 0.40);
background:
linear-gradient(180deg, rgba(255, 107, 0, 0.08), rgba(255, 255, 255, 0.025));
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}
.sthh-product-group:hover::before {
opacity: 1;
}
.sthh-product-card-link {
display: block;
color: inherit;
text-decoration: none;
}
.sthh-product-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.sthh-product-index {
color: rgba(255, 107, 0, 0.92);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
}
.sthh-product-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
color: var(--primary);
background: rgba(255, 107, 0, 0.10);
border: 1px solid rgba(255, 107, 0, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sthh-product-group h3 {
min-height: 0;
margin: 0 0 14px;
color: var(--text-primary);
font-family: var(--font-heading);
font-size: clamp(1.18rem, 1.6vw, 1.45rem);
line-height: 1.22;
letter-spacing: -0.01em;
text-transform: none;
}
.sthh-product-card-link:hover h3,
.sthh-product-group h3 a:hover {
color: var(--primary);
}
.sthh-product-group p {
margin: 0;
color: var(--text-secondary);
font-size: 0.94rem;
line-height: 1.65;
}
.sthh-product-pills {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.sthh-product-pills li,
.sthh-product-pills span {
margin: 0;
}
.sthh-product-pills a,
.sthh-product-pills span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.085);
border-radius: 999px;
background: rgba(255, 255, 255, 0.035);
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.2;
text-decoration: none;
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.sthh-product-pills a:hover {
transform: translateY(-1px);
color: var(--text-primary);
border-color: rgba(255, 107, 0, 0.42);
background: rgba(255, 107, 0, 0.11);
}
.sthh-product-pills-muted span {
color: var(--text-muted);
}
.sthh-product-main-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 42px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.075);
color: var(--primary);
font-family: var(--font-heading);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.sthh-product-main-cta span {
transition: transform var(--transition-fast);
}
.sthh-product-main-cta:hover {
color: var(--text-primary);
}
.sthh-product-main-cta:hover span {
transform: translateX(4px);
}
@media (min-width: 1025px) {
.sthh-product-group-featured {
grid-column: span 1;
}
}
@media (max-width: 1180px) {
.sthh-product-directory-modern {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.sthh-products-section {
padding: 74px 0;
}
.sthh-products-section::before {
inset: 12px;
border-radius: 20px;
}
.sthh-product-directory-modern {
grid-template-columns: 1fr;
gap: 14px;
}
.sthh-product-group {
padding: 22px;
border-radius: 20px;
}
.sthh-product-card-top {
margin-bottom: 18px;
}
.sthh-product-icon {
width: 44px;
height: 44px;
border-radius: 14px;
}
.sthh-product-pills {
gap: 8px;
}
.sthh-product-pills a,
.sthh-product-pills span {
min-height: 32px;
padding: 7px 11px;
font-size: 0.82rem;
}
} .sthh-footer-contact-band {
padding: 64px 0;
border-bottom: 1px solid var(--border-color);
background:
radial-gradient(circle at 10% 20%, rgba(255, 107, 0, 0.08), transparent 34%),
#0d0d0f;
}
.sthh-footer-contact-grid {
display: grid;
grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
gap: 70px;
align-items: start;
}
.sthh-footer-brand-name {
color: var(--text-primary);
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
}
.sthh-footer-brand-tagline {
margin-top: 6px;
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.sthh-footer-brand-block p {
max-width: 460px;
margin-top: 20px;
color: var(--text-secondary);
line-height: 1.7;
}
.sthh-footer-contact-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.sthh-footer-contact-item {
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
padding: 18px 20px;
border: 1px solid var(--border-color);
border-radius: 13px;
background: rgba(255, 255, 255, 0.02);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sthh-footer-contact-item[href]:hover {
border-color: rgba(255, 107, 0, 0.38);
background: rgba(255, 107, 0, 0.05);
}
.sthh-footer-contact-label {
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sthh-footer-contact-item strong {
overflow-wrap: anywhere;
color: var(--text-primary);
font-size: 0.94rem;
font-weight: 600;
line-height: 1.55;
}
.footer-bottom:not(.footer-bottom-widgets) .footer-bottom-flex {
justify-content: center;
padding-top: 18px;
padding-bottom: 18px;
color: var(--text-muted);
font-size: 0.82rem;
}
@media (max-width: 1180px) and (min-width: 1025px) {
.main-header .nav-list,
.main-header .nav-list.menu {
gap: 18px !important;
}
.main-header .nav-link {
font-size: 0.88rem !important;
}
.main-header .primary-cta-header {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
@media (max-width: 1024px) {
.main-header .nav-list,
.main-header .nav-list.menu {
gap: 7px !important;
}
.main-header .nav-list > .menu-item,
.main-header .nav-list.menu > .menu-item {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
}
.main-header .nav-list > .menu-item-has-children > a,
.main-header .nav-list.menu > .menu-item-has-children > a {
width: calc(100% - 46px) !important;
}
.main-header .nav-list > .menu-item-has-children > .submenu-toggle,
.main-header .nav-list.menu > .menu-item-has-children > .submenu-toggle {
width: 44px;
height: 44px;
margin-left: auto;
}
.main-header .nav-list .sub-menu,
.main-header .nav-list .sub-menu .sub-menu {
position: static !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
max-height: 0;
margin: 0 !important;
padding: 0 0 0 14px !important;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 0;
visibility: hidden;
transform: none;
pointer-events: none;
transition: max-height 0.32s ease, opacity 0.22s ease, visibility 0.22s ease;
}
.main-header .nav-list .menu-item.submenu-open > .sub-menu {
max-height: 900px;
padding-top: 5px !important;
padding-bottom: 7px !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.main-header .nav-list .sub-menu .menu-item {
flex-wrap: wrap;
}
.main-header .nav-list .sub-menu .menu-item > a {
width: calc(100% - 42px) !important;
min-height: 38px;
padding: 8px 10px !important;
font-size: 0.93rem !important;
}
.main-header .nav-list .sub-menu .menu-item:not(.menu-item-has-children) > a {
width: 100% !important;
}
.main-header .nav-list .sub-menu .submenu-toggle {
position: static;
width: 40px;
height: 40px;
margin-left: auto;
}
.main-header .nav-list .sub-menu .submenu-toggle-icon {
transform: translateY(-2px) rotate(45deg);
}
.menu-item.submenu-open > .submenu-toggle .submenu-toggle-icon {
transform: translateY(2px) rotate(225deg) !important;
}
.sthh-about-grid,
.sthh-footer-contact-grid {
grid-template-columns: 1fr;
gap: 38px;
}
.sthh-about-copy {
position: static;
}
.sthh-product-directory {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.sthh-about-section,
.sthh-products-section {
padding: 72px 0;
}
.sthh-value-card,
.sthh-product-group {
padding: 24px;
}
.sthh-product-directory,
.sthh-footer-contact-list {
grid-template-columns: 1fr;
}
.sthh-product-group h3 {
min-height: 0;
}
.sthh-footer-contact-band {
padding: 48px 0;
}
}   .sthh-footer-contact-band {
display: none !important;
}
@media (min-width: 1025px) {
.main-header .nav-list .menu-item > .sub-menu {
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
pointer-events: none !important;
}
.main-header .nav-list .menu-item:hover > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.main-header .nav-list .menu-item:focus-within:not(:hover) > .sub-menu,
.main-header .nav-list .menu-item.submenu-open:not(:hover) > .sub-menu {
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
pointer-events: none !important;
}
.main-header .nav-list > .menu-item-has-children:focus-within:not(:hover) > .submenu-toggle,
.main-header .nav-list > .menu-item-has-children.submenu-open:not(:hover) > .submenu-toggle {
color: var(--text-muted) !important;
background: transparent !important;
}
}
body.home .main-header .nav-list > .menu-item > a.active,
body.front-page .main-header .nav-list > .menu-item > a.active,
body.home .main-header .nav-list > .menu-item.current-menu-item > a,
body.front-page .main-header .nav-list > .menu-item.current-menu-item > a,
body.home .main-header .nav-list > .menu-item.current_page_item > a,
body.front-page .main-header .nav-list > .menu-item.current_page_item > a {
color: var(--text-secondary, #B5B5C0) !important;
}
body.home .main-header .nav-list > .menu-item > a.active::after,
body.front-page .main-header .nav-list > .menu-item > a.active::after,
body.home .main-header .nav-list > .menu-item.current-menu-item > a::after,
body.front-page .main-header .nav-list > .menu-item.current-menu-item > a::after,
body.home .main-header .nav-list > .menu-item.current_page_item > a::after,
body.front-page .main-header .nav-list > .menu-item.current_page_item > a::after {
width: 0 !important;
}
body.home .main-header .nav-list > .menu-item:hover > a,
body.front-page .main-header .nav-list > .menu-item:hover > a {
color: var(--text-primary, #FFFFFF) !important;
}
body.home .main-header .nav-list > .menu-item:hover > a::after,
body.front-page .main-header .nav-list > .menu-item:hover > a::after {
width: 100% !important;
} .sthh-products-section {
border-bottom: 0 !important;
} body.home .projects-section,
body.home #du-an,
body.home .implemented-projects-section,
body.home .sthh-projects-section {
display: none !important;
}
.sthh-form-admin-notice {
margin: 0;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid rgba(255, 107, 0, 0.22);
background: rgba(255, 107, 0, 0.08);
color: var(--text-secondary, #B5B5C0);
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.consultation-section.sthh-ff-balanced-section {
padding-top: 64px;
padding-bottom: 64px;
}
} .entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol,
.article-content ul,
.article-content ol,
.sthh-article-content ul,
.sthh-article-content ol,
.sthh-demo-page .container ul:not(.nav-list):not(.breadcrumb-list):not(.showcase-tabs-nav):not(.packages-tabs-nav):not(.sthh-product-pills),
.sthh-demo-page .container ol:not(.breadcrumb-list),
.sthh-intro-content ul,
.sthh-intro-content ol,
.sthh-value-card ul,
.sthh-value-card ol,
.overview-content ul,
.overview-content ol,
.package-features ul,
.package-benefits ul,
.room-benefits ul,
.sync-features-list,
.device-checklist,
.feature-list,
.benefits-list {
margin-left: 0 !important;
padding-left: 1.05rem !important;
list-style-position: outside !important;
}
.entry-content li,
.page-content li,
.article-content li,
.sthh-article-content li,
.sthh-demo-page .container li:not(.menu-item):not(.breadcrumb-item),
.sthh-intro-content li,
.sthh-value-card li,
.overview-content li,
.package-features li,
.package-benefits li,
.room-benefits li,
.device-checklist li,
.feature-list li,
.benefits-list li {
margin-left: 0 !important;
padding-left: 0.1rem !important;
}
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul,
.page-content ul ul,
.page-content ol ol,
.page-content ul ol,
.page-content ol ul,
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul,
.sthh-article-content ul ul,
.sthh-article-content ol ol,
.sthh-demo-page .container ul ul,
.sthh-demo-page .container ol ol,
.sthh-demo-page .container ul ol,
.sthh-demo-page .container ol ul {
padding-left: 0.9rem !important;
}
.entry-content li::marker,
.page-content li::marker,
.article-content li::marker,
.sthh-article-content li::marker,
.sthh-demo-page .container li::marker {
color: var(--primary, #FF6B00);
} .sthh-mission-list {
padding-left: 0 !important;
}
.sthh-mission-list li {
padding-left: 18px !important;
}
.sthh-mission-list li::before {
left: 0 !important;
}
@media (max-width: 768px) {
.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol,
.article-content ul,
.article-content ol,
.sthh-article-content ul,
.sthh-article-content ol,
.sthh-demo-page .container ul:not(.nav-list):not(.breadcrumb-list):not(.showcase-tabs-nav):not(.packages-tabs-nav):not(.sthh-product-pills),
.sthh-demo-page .container ol:not(.breadcrumb-list),
.room-benefits ul,
.device-checklist,
.feature-list,
.benefits-list {
padding-left: 0.85rem !important;
}
.entry-content ul ul,
.entry-content ol ol,
.article-content ul ul,
.article-content ol ol,
.sthh-demo-page .container ul ul,
.sthh-demo-page .container ol ol {
padding-left: 0.75rem !important;
}
} .nav-list-empty .menu-item-menu-setup > a {
border: 1px dashed rgba(255, 107, 0, 0.45);
border-radius: 999px;
padding: 10px 14px !important;
color: var(--primary, #FF6B00) !important;
} .sthh-product-pills,
.sthh-product-pills li,
.sthh-product-pills a,
.showcase-tabs-nav,
.showcase-tabs-nav li,
.packages-tabs-nav,
.packages-tabs-nav li,
.breadcrumb-list,
.breadcrumb-list li {
margin-left: 0 !important;
padding-left: 0 !important;
} .sthh-demo-page .sthh-vision-banner {
padding: 80px 0;
background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
border-top: 1px solid var(--border-color);
}
.sthh-demo-page .vision-title {
font-family: var(--font-heading);
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 800;
color: var(--text-primary);
margin-bottom: 18px;
letter-spacing: 0.01em;
}
.sthh-demo-page .vision-text {
max-width: 920px;
margin: 0 auto;
color: var(--text-secondary);
line-height: 1.7;
font-size: 1rem;
}
.sthh-demo-page .section-tag,
.sthh-demo-page .hero-tagline {
display: none !important;
}
.sthh-demo-page .why-card h3,
.sthh-demo-page .solution-feature-card h3,
.sthh-demo-page .timeline-step h3 {
margin-top: 0;
}
.sthh-demo-page .solution-feature-card ul,
.sthh-demo-page .why-card ul {
padding-left: 1.15rem;
}
@media (max-width: 768px) {
.sthh-demo-page .sthh-vision-banner {
padding: 56px 0;
}
}
.sthh-demo-page .why-card h3 {
font-size: 1.1rem;
color: var(--text-primary);
line-height: 1.35;
}
.sthh-demo-page .why-icon-wrapper {
font-family: var(--font-heading);
font-weight: 800;
}
.sthh-demo-page .text-center {
text-align: center;
} body .back-to-top {
z-index: 1200;
}
@media (max-width: 1024px) {
body .main-header .nav-menu {
width: min(88vw, 360px) !important;
padding: calc(var(--header-height, 70px) + 24px) 18px 28px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
align-items: stretch !important;
}
body .main-header .nav-list,
body .main-header .nav-list.menu {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body .main-header .nav-list > .menu-item,
body .main-header .nav-list.menu > .menu-item {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
body .main-header .nav-list .menu-item > a,
body .main-header .nav-list.menu .menu-item > a,
body .main-header .nav-list .nav-link {
min-height: 40px !important;
padding: 9px 10px !important;
display: flex !important;
align-items: center !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
body .main-header .nav-list > .menu-item-has-children > a,
body .main-header .nav-list.menu > .menu-item-has-children > a {
width: calc(100% - 42px) !important;
}
body .main-header .submenu-toggle,
body .main-header .nav-list > .menu-item-has-children > .submenu-toggle,
body .main-header .nav-list.menu > .menu-item-has-children > .submenu-toggle {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
margin-left: auto !important;
flex: 0 0 40px !important;
}
body .main-header .nav-list .sub-menu,
body .main-header .nav-list .sub-menu .sub-menu {
padding-left: 12px !important;
}
body .main-header .nav-list .menu-item.submenu-open > .sub-menu {
padding-top: 3px !important;
padding-bottom: 5px !important;
}
body .main-header .nav-list .sub-menu .menu-item > a {
min-height: 36px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
font-size: 0.92rem !important;
}
}
@media (max-width: 480px) {
body .main-header .nav-menu {
width: 92vw !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
body .back-to-top {
right: 18px;
bottom: 20px;
width: 42px;
height: 42px;
}
} .logo-group {
justify-content: center;
}
.logo-group .logo-sub {
display: none !important;
}
.logo-group .custom-logo {
display: block;
} .sthh-home-news-section {
position: relative;
padding: 96px 0 108px;
background:
radial-gradient(circle at top right, rgba(255, 107, 0, 0.055), transparent 36%),
linear-gradient(180deg, var(--bg-base), #0b0b0d 58%, var(--bg-base));
border-top: 1px solid var(--border-color);
}
.sthh-home-news-section .section-header {
margin-bottom: 52px;
}
.sthh-home-news-grid {
align-items: stretch;
}
.sthh-home-news-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}
.sthh-home-news-card .sthh-post-card-thumb {
height: 230px;
}
.sthh-home-news-card .sthh-post-card-meta a {
color: var(--primary);
font-weight: 700;
}
.sthh-home-news-actions {
display: flex;
justify-content: center;
margin-top: 44px;
}
.sthh-home-news-empty {
max-width: 760px;
}
@media (max-width: 768px) {
.sthh-home-news-section {
padding: 72px 0 84px;
}
.sthh-home-news-card .sthh-post-card-thumb {
height: 210px;
}
.sthh-home-news-actions {
margin-top: 34px;
}
} @media (max-width: 1024px) {
body .main-header #nav-menu,
body .main-header .nav-menu,
body #nav-menu.nav-menu,
body .nav-menu {
top: calc(var(--sthh-admin-bar-height, 0px) + var(--header-height, 70px)) !important;
height: calc(100vh - var(--sthh-admin-bar-height, 0px) - var(--header-height, 70px)) !important;
height: calc(100dvh - var(--sthh-admin-bar-height, 0px) - var(--header-height, 70px)) !important;
padding: 14px 18px 24px !important;
width: min(88vw, 360px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
align-items: stretch !important;
border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}
body .main-header .nav-list,
body .main-header .nav-list.menu {
margin-top: 0 !important;
padding-top: 0 !important;
gap: 2px !important;
}
body .main-header .nav-list > .menu-item,
body .main-header .nav-list.menu > .menu-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body .main-header .nav-list .menu-item > a,
body .main-header .nav-list.menu .menu-item > a,
body .main-header .nav-list .nav-link {
min-height: 38px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
body .main-header .submenu-toggle,
body .main-header .nav-list > .menu-item-has-children > .submenu-toggle,
body .main-header .nav-list.menu > .menu-item-has-children > .submenu-toggle {
height: 38px !important;
min-height: 38px !important;
flex-basis: 38px !important;
}
}
@media (max-width: 480px) {
body .main-header #nav-menu,
body .main-header .nav-menu,
body #nav-menu.nav-menu,
body .nav-menu {
width: 92vw !important;
padding: 12px 14px 22px !important;
}
} @media (max-width: 1024px) {
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > a::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > a:hover::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > a:focus::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > a:focus-visible::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .nav-link::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .nav-link:hover::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .nav-link:focus::after,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .nav-link:focus-visible::after {
width: 0 !important;
}
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .submenu-toggle,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .submenu-toggle:hover,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .submenu-toggle:focus,
body .main-header .nav-list .menu-item-has-children:not(.submenu-open) > .submenu-toggle:focus-visible {
color: var(--text-muted) !important;
background: transparent !important;
box-shadow: none !important;
}
body .main-header .nav-list .menu-item.submenu-open > a::after,
body .main-header .nav-list .menu-item.submenu-open > .nav-link::after {
width: 100% !important;
}
}
body .back-to-top,
html body button.back-to-top#back-to-top {
position: fixed !important;
right: 30px !important;
bottom: 30px !important;
left: auto !important;
top: auto !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255, 107, 0, 0.45) !important;
border-radius: 50% !important;
background: var(--gradient-primary) !important;
color: #fff !important;
font-size: 1.25rem !important;
line-height: 1 !important;
font-weight: 800 !important;
cursor: pointer !important;
box-shadow: 0 10px 28px rgba(255, 107, 0, 0.28) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(12px) !important;
z-index: 9999 !important;
transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}
body .back-to-top.active,
html body button.back-to-top#back-to-top.active {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
body .back-to-top:hover,
html body button.back-to-top#back-to-top:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 34px rgba(255, 107, 0, 0.36) !important;
}
@media (max-width: 480px) {
body .back-to-top,
html body button.back-to-top#back-to-top {
right: 18px !important;
bottom: 20px !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
}
} @media (max-width: 1024px) {
:root {
--sthh-mobile-menu-top: calc(var(--sthh-admin-bar-height, 0px) + var(--header-height, 70px));
--sthh-mobile-menu-height: calc(100dvh - var(--sthh-mobile-menu-top));
}
body .main-header #nav-menu,
body .main-header .nav-menu,
body #nav-menu.nav-menu,
body .nav-menu {
top: var(--sthh-mobile-menu-top) !important;
height: var(--sthh-mobile-menu-height) !important;
max-height: var(--sthh-mobile-menu-height) !important;
min-height: 0 !important;
transform: none !important;
overscroll-behavior: contain !important;
}
body .main-header.header-scrolled #nav-menu,
body .main-header.header-scrolled .nav-menu {
top: var(--sthh-mobile-menu-top) !important;
height: var(--sthh-mobile-menu-height) !important;
max-height: var(--sthh-mobile-menu-height) !important;
}
body.sthh-mobile-menu-open .main-header {
transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal) !important;
}
} @media (max-width: 1024px) {
body .main-header,
body.admin-bar .main-header,
body #main-header,
body.admin-bar #main-header {
overflow: visible !important;
}
body .main-header .header-container {
position: static !important;
overflow: visible !important;
}
body .main-header #nav-menu,
body .main-header .nav-menu,
body #nav-menu.nav-menu,
body .nav-menu {
position: absolute !important;
top: 100% !important;
margin-top: 0 !important;
right: -100vw !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
height: var(--sthh-mobile-menu-height, calc(100dvh - var(--header-height-scrolled, 70px))) !important;
max-height: var(--sthh-mobile-menu-height, calc(100dvh - var(--header-height-scrolled, 70px))) !important;
min-height: 0 !important;
border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
border-radius: 0 0 0 18px !important;
}
body .main-header #nav-menu.active,
body .main-header .nav-menu.active,
body #nav-menu.nav-menu.active,
body .nav-menu.active,
body.sthh-mobile-menu-open .main-header #nav-menu,
body.sthh-mobile-menu-open .main-header .nav-menu {
right: 0 !important;
top: 100% !important;
margin-top: 0 !important;
}
body.admin-bar #nav-menu,
body.admin-bar .nav-menu,
body.admin-bar .main-header #nav-menu,
body.admin-bar .main-header .nav-menu {
top: 100% !important;
height: var(--sthh-mobile-menu-height, calc(100dvh - var(--sthh-admin-bar-height, 46px) - var(--header-height-scrolled, 70px))) !important;
max-height: var(--sthh-mobile-menu-height, calc(100dvh - var(--sthh-admin-bar-height, 46px) - var(--header-height-scrolled, 70px))) !important;
}
} html body #sthh-global-back-to-top.sthh-global-back-to-top,
html body .sthh-global-back-to-top {
position: fixed !important;
right: 26px !important;
bottom: 28px !important;
left: auto !important;
top: auto !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255, 107, 0, 0.55) !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #ff6b00 0%, #ff8a1f 100%) !important;
color: #fff !important;
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1 !important;
box-shadow: 0 12px 34px rgba(255, 107, 0, 0.36) !important;
cursor: pointer !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate3d(0, 14px, 0) !important;
z-index: 2147483646 !important;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease, box-shadow .2s ease !important;
-webkit-appearance: none !important;
appearance: none !important;
}
html body #sthh-global-back-to-top.sthh-global-back-to-top.active,
html body #sthh-global-back-to-top.sthh-global-back-to-top.is-visible,
html body .sthh-global-back-to-top.active,
html body .sthh-global-back-to-top.is-visible {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
}
html body #sthh-global-back-to-top.sthh-global-back-to-top:hover,
html body .sthh-global-back-to-top:hover {
transform: translate3d(0, -4px, 0) !important;
box-shadow: 0 16px 42px rgba(255, 107, 0, 0.44) !important;
}
html body #sthh-global-back-to-top.sthh-global-back-to-top span,
html body .sthh-global-back-to-top span {
display: block !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
@media (max-width: 768px) {
html body #sthh-global-back-to-top.sthh-global-back-to-top,
html body .sthh-global-back-to-top {
right: 18px !important;
bottom: 20px !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
font-size: 20px !important;
}
} .sthh-product-pills a,
.sthh-product-pills span {
justify-content: center;
text-align: center;
padding: 8px 12px !important;
}
@media (max-width: 768px) {
.sthh-product-pills a,
.sthh-product-pills span {
padding: 7px 11px !important;
}
} @media (max-width: 1024px) { body:not(.sthh-mobile-menu-open) .main-header #nav-menu:not(.active),
body:not(.sthh-mobile-menu-open) .main-header .nav-menu:not(.active) {
right: 0 !important;
transform: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.sthh-mobile-menu-open .main-header #nav-menu,
body.sthh-mobile-menu-open .main-header .nav-menu,
body .main-header #nav-menu.active,
body .main-header .nav-menu.active {
right: 0 !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-template-page-about,
body.page-template-page-about-php,
body:has(.sthh-demo-about) {
overflow-x: clip !important;
max-width: 100% !important;
}
.sthh-demo-about {
width: 100% !important;
max-width: 100% !important;
overflow-x: clip !important;
}
.sthh-demo-about .container,
.sthh-demo-about .hero-split-grid,
.sthh-demo-about .hero-content,
.sthh-demo-about .hero-visual-panel,
.sthh-demo-about .hero-visual-card,
.sthh-demo-about .values-grid,
.sthh-demo-about .brand-solutions-grid,
.sthh-demo-about .timeline-section,
.sthh-demo-about .cta-box {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.sthh-demo-about .hero-visual-card,
.sthh-demo-about .hero-visual-img {
width: 100% !important;
}
.sthh-demo-about .floating-badge {
max-width: calc(100% - 28px) !important;
box-sizing: border-box !important;
}
.sthh-demo-about .section-glow-left,
.sthh-demo-about .section-glow-right {
max-width: 100vw !important;
pointer-events: none !important;
}
}
@supports not (overflow: clip) {
@media (max-width: 1024px) {
body.page-template-page-about,
body.page-template-page-about-php,
.sthh-demo-about {
overflow-x: hidden !important;
}
}
} .sthh-footer-policies {
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: #070708;
}
.sthh-footer-policies-inner {
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 12px;
padding-bottom: 12px;
}
.sthh-footer-policies-label {
color: rgba(255, 255, 255, 0.48);
font-size: 0.78rem;
white-space: nowrap;
}
.sthh-footer-policy-links {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px 22px;
}
.sthh-footer-policy-links a {
color: rgba(255, 255, 255, 0.66);
font-size: 0.8rem;
line-height: 1.4;
text-decoration: none;
transition: color 0.2s ease;
}
.sthh-footer-policy-links a:hover,
.sthh-footer-policy-links a:focus-visible {
color: #ff7a1a;
}
@media (max-width: 768px) {
.sthh-footer-policies-inner {
min-height: 0;
align-items: flex-start;
flex-direction: column;
gap: 10px;
padding-top: 18px;
padding-bottom: 20px;
}
.sthh-footer-policy-links {
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
.sthh-footer-policy-links a {
font-size: 0.84rem;
}
} .sthh-footer-copyright {
margin: 0;
color: rgba(255, 255, 255, 0.55);
font-size: 0.8rem;
line-height: 1.5;
white-space: nowrap;
}
.sthh-footer-policy-group {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px 22px;
min-width: 0;
}
@media (max-width: 768px) {
.sthh-footer-copyright {
white-space: normal;
}
.sthh-footer-policy-group {
width: 100%;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 10px;
}
}