/* style.css */
:root {
--primary-color: #0ea5e9;
--secondary-color: #14b8a6;
--primary-light: #e0f2fe;
--primary-lighter: #bae6fd;
--accent-color: #f59e0b;
--white: #ffffff;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1f2937;
--gray-900: #0f172a;
--ink: #0b1220;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--radius-sm: 8px;
--radius: 12px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-full: 999px;
--shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
--shadow-md: 0 16px 30px rgba(15, 23, 42, 0.10);
--shadow-lg: 0 28px 60px rgba(15, 23, 42, 0.14);
--transition-fast: 0.2s ease;
--transition: 0.3s ease;
--gradient-hero: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 55%, #f59e0b 120%);
--gradient-dark: linear-gradient(135deg, #0b1220 0%, #0f172a 50%, #0f766e 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
color: var(--gray-900);
background: var(--gray-50);
line-height: 1.6;
min-height: 100vh;
}
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 10% 10%, rgba(14, 165, 233, 0.08), transparent 40%),
radial-gradient(circle at 90% 20%, rgba(20, 184, 166, 0.06), transparent 45%),
radial-gradient(circle at 60% 90%, rgba(245, 158, 11, 0.08), transparent 40%);
pointer-events: none;
z-index: -1;
}
h1, h2, h3, h4, h5 {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: -0.02em;
color: var(--gray-900);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
::selection { background: rgba(14, 165, 233, 0.25); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 24px;
border-radius: var(--radius-full);
border: none;
font-weight: 600;
transition: var(--transition);
cursor: pointer;
}
.btn-primary {
background: var(--primary-color);
color: var(--white);
box-shadow: 0 12px 24px rgba(14, 165, 233, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); background: #0284c7; }
.btn-outline {
border: 1px solid var(--gray-300);
color: var(--gray-800);
background: var(--white);
}
.btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); }
.btn-ghost {
background: transparent;
color: var(--gray-800);
}
.btn-ghost:hover { color: var(--primary-color); }
.btn-lg { padding: 14px 30px; font-size: var(--font-size-lg); }
.btn-sm { padding: 8px 16px; font-size: var(--font-size-sm); }
.btn-block { width: 100%; }
.top-bar {
background: var(--gray-900);
color: var(--gray-100);
padding: 8px 0;
font-size: 0.85rem;
}
.top-bar-inner {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
.top-bar-left, .top-bar-right {
display: flex;
align-items: center;
gap: 16px;
}
.topbar-notice {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary-lighter);
font-size: 0.85rem;
}
.topbar-selectors {
display: inline-flex;
align-items: center;
gap: 8px;
}
.selector {
position: relative;
}
.selector-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--gray-100);
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
font-size: 0.8rem;
}
.selector-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--white);
border-radius: var(--radius);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-md);
padding: 6px;
min-width: 120px;
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition: var(--transition);
z-index: 30;
}
.selector.active .selector-menu,
.selector:hover .selector-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.selector-menu a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-radius: var(--radius-sm);
color: var(--gray-700);
font-size: 0.85rem;
}
.selector-menu a:hover,
.selector-menu a.is-active {
background: var(--gray-100);
color: var(--primary-color);
}
.top-bar-left a, .top-bar-right a { color: var(--gray-200); }
.top-bar-left i { color: var(--primary-lighter); margin-right: 6px; }
.top-bar-divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.2);
}
.top-bar-social a {
color: var(--gray-300);
margin-left: 6px;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 1.3rem;
font-weight: 700;
}
.brand-mark {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--gradient-hero);
color: var(--white);
box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
}
.brand-text { letter-spacing: -0.04em; }
.site-nav {
display: flex;
align-items: center;
gap: 20px;
}
.nav-item { position: relative; }
.nav-link {
color: var(--gray-700);
font-weight: 600;
position: relative;
}
.nav-link-button {
background: transparent;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font: inherit;
color: inherit;
padding: 0;
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 0%;
height: 2px;
background: var(--primary-color);
transition: width var(--transition);
}
.nav-link:hover { color: var(--primary-color); }
.nav-link:hover::after { width: 100%; }
.nav-item .nav-link::after,
.nav-item .nav-link-button::after { display: none; }
.nav-dropdown,
.mega-menu {
position: absolute;
top: calc(100% + 14px);
left: 0;
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: var(--transition);
z-index: 20;
}
.nav-dropdown {
min-width: 200px;
padding: 10px;
display: grid;
gap: 6px;
}
.nav-dropdown a {
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--gray-700);
}
.nav-dropdown a:hover {
background: var(--gray-100);
color: var(--primary-color);
}
.nav-item:hover .nav-dropdown,
.nav-item:hover .mega-menu,
.nav-item.active .nav-dropdown,
.nav-item.active .mega-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.mega-menu {
left: 50%;
transform: translate(-50%, 12px);
width: min(980px, 92vw);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) 1.1fr;
gap: 22px;
padding: 24px;
}
.nav-item:hover .mega-menu,
.nav-item.active .mega-menu {
transform: translate(-50%, 0);
}
.mega-column h4 {
font-size: 0.95rem;
color: var(--gray-500);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mega-link {
display: flex;
gap: 12px;
padding: 10px;
border-radius: var(--radius);
transition: var(--transition);
color: var(--gray-700);
}
.mega-link strong { display: block; }
.mega-link span { font-size: 0.85rem; color: var(--gray-500); }
.mega-link:hover {
background: var(--gray-100);
color: var(--primary-color);
}
.mega-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--primary-light);
color: var(--primary-color);
}
.mega-list {
display: grid;
gap: 10px;
}
.mega-list a {
color: var(--gray-700);
}
.mega-cta-link {
margin-top: 12px;
display: inline-flex;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
}
.mega-card {
background: var(--gradient-dark);
color: var(--white);
border-radius: var(--radius-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mega-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mega-card p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 6px;
background: transparent;
border: none;
cursor: pointer;
}
.nav-toggle span {
width: 26px;
height: 2px;
background: var(--gray-900);
border-radius: 4px;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.cart-button {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--radius-full);
background: var(--gray-100);
color: var(--gray-800);
}
.cart-count {
background: var(--primary-color);
color: var(--white);
border-radius: 999px;
font-size: 0.75rem;
padding: 2px 7px;
}
.user-menu { position: relative; }
.user-trigger {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--gray-200);
background: var(--white);
padding: 8px 12px;
border-radius: var(--radius-full);
cursor: pointer;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--primary-light);
color: var(--primary-color);
font-weight: 700;
}
.user-dropdown {
position: absolute;
right: 0;
top: calc(100% + 10px);
min-width: 220px;
background: var(--white);
border-radius: var(--radius);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-md);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: var(--transition);
}
.user-menu.active .user-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--gray-700);
}
.user-dropdown a:hover { background: var(--gray-100); color: var(--primary-color); }
.user-dropdown .danger { color: var(--danger-color); }
.user-meta { padding: 10px 12px; border-bottom: 1px solid var(--gray-200); margin-bottom: 6px; }
.user-meta-name { font-weight: 700; }
.user-meta-email { font-size: 0.85rem; color: var(--gray-500); }
.hero-section, .hero {
position: relative;
padding: 90px 0 70px;
overflow: hidden;
background: var(--gradient-hero);
color: var(--white);
}
.hero-section::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0h1v60h-1zM0 30h60v1H0z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 36px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content h1 { color: var(--white); font-size: 3rem; margin-bottom: 16px; }
.hero-content p { color: rgba(255,255,255,0.85); margin-bottom: 24px; font-size: 1.1rem; }
.hero-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.badge-top {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.15);
color: var(--white);
font-size: 0.85rem;
margin-bottom: 16px;
}
.hero-card {
background: rgba(255,255,255,0.95);
color: var(--gray-900);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-lg);
}
.hero-card-title {
font-weight: 700;
font-size: 1.2rem;
color: var(--primary-color);
}
.hero-card-url {
color: var(--gray-600);
margin-top: 6px;
}
.hero-card-cta {
margin-top: 16px;
}
.hero-card ul { list-style: none; margin-top: 18px; }
.hero-card li { display: flex; gap: 10px; margin-bottom: 10px; color: var(--gray-700); }
.hero-card i { color: var(--success-color); }
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header h2 { font-size: 2rem; margin-bottom: 10px; }
.section-header p { color: var(--gray-500); }
.stats-section {
background: var(--white);
padding: 40px 0;
border-bottom: 1px solid var(--gray-200);
}
.stats-section .container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
text-align: center;
}
.stat-number { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); }
.stat-label { color: var(--gray-500); }
.products-section {
padding: 80px 0;
background: var(--gray-50);
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.product-item {
background: var(--white);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 1px solid var(--gray-200);
}
.product-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-badge {
display: inline-flex;
background: var(--accent-color);
color: var(--white);
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 0.75rem;
}
.product-icon {
width: 64px;
height: 64px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--primary-light);
color: var(--primary-color);
margin-bottom: 16px;
}
.product-price { font-size: 2rem; font-weight: 700; color: var(--primary-color); }
.product-price .price-period { font-size: 0.95rem; color: var(--gray-500); font-weight: 500; margin-left: 6px; }
.price-old { color: var(--gray-400); text-decoration: line-through; font-size: 1rem; margin-right: 8px; }
.product-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.product-brand { color: var(--gray-500); font-weight: 600; }
.product-subtitle { color: var(--gray-500); margin-bottom: 12px; }
.product-pricing { margin: 14px 0; }
.product-features { list-style: none; margin: 16px 0; }
.product-features li { display: flex; gap: 10px; margin-bottom: 8px; color: var(--gray-600); }
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 30px 0 50px;
}
.filter-pill {
padding: 10px 22px;
border-radius: var(--radius-full);
border: 1px solid var(--gray-200);
color: var(--gray-700);
background: var(--white);
font-weight: 600;
transition: var(--transition);
}
.filter-pill:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.filter-pill.is-active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
box-shadow: 0 10px 22px rgba(14, 165, 233, 0.25);
}
.product-actions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.product-actions .btn {
flex: 1;
}
.btn-product {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
border-radius: var(--radius-full);
background: var(--primary-color);
color: var(--white);
font-weight: 600;
}
.about-section { padding: 80px 0; background: var(--white); }
.about-content { max-width: 900px; margin: 0 auto; }
.about-description {
text-align: center;
color: var(--gray-600);
max-width: 760px;
margin: 0 auto 32px;
}
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.value-card {
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: 22px;
border: 1px solid var(--gray-200);
text-align: center;
}
.about-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 40px;
}
.feature-box {
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: 24px;
text-align: center;
border: 1px solid var(--gray-200);
transition: var(--transition);
}
.feature-box:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.feature-box i { font-size: 2rem; color: var(--primary-color); margin-bottom: 12px; }
.contact-section { padding: 80px 0; background: var(--gray-50); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.contact-form, .contact-info {
background: var(--white);
padding: 32px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.contact-map {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: 16px; }
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 12px 14px;
border-radius: var(--radius);
border: 1px solid var(--gray-300);
transition: var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.info-item { display: flex; gap: 14px; margin-bottom: 18px; color: var(--gray-600); }
.info-item i { color: var(--primary-color); font-size: 1.2rem; margin-top: 2px; }
.process-section {
padding: 70px 0;
background: var(--white);
}
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.process-step {
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: 24px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
}
.step-number {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--primary-light);
color: var(--primary-color);
font-weight: 700;
margin-bottom: 12px;
}
.trust-section {
padding: 60px 0 20px;
background: var(--gray-50);
}
.trust-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
text-align: center;
}
.trust-badges div {
background: var(--white);
border-radius: var(--radius);
padding: 16px;
border: 1px solid var(--gray-200);
}
.trust-badges i {
color: var(--primary-color);
font-size: 1.4rem;
margin-bottom: 8px;
}
.page-header {
background: var(--gradient-dark);
color: var(--white);
padding: 70px 0;
position: relative;
overflow: hidden;
}
.page-header.compact { padding: 45px 0; }
.page-header h1 { color: var(--white); font-size: 2.4rem; margin-bottom: 10px; }
.page-header p { color: rgba(255,255,255,0.8); max-width: 700px; }
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
margin-bottom: 12px;
}
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb span { color: var(--primary-lighter); }
.faq-item {
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
background: var(--white);
margin-bottom: 16px;
overflow: hidden;
}
.faq-question {
width: 100%;
background: none;
border: none;
display: flex;
justify-content: space-between;
padding: 16px 18px;
font-weight: 700;
color: var(--gray-800);
cursor: pointer;
}
.faq-answer { display: none; padding: 0 18px 16px; color: var(--gray-600); }
.faq-item.active .faq-answer { display: block; }
.cta-section {
padding: 70px 0;
background: var(--white);
}
.cta-content {
background: var(--gradient-hero);
color: var(--white);
border-radius: var(--radius-lg);
padding: 40px;
text-align: center;
box-shadow: var(--shadow-md);
}
.cta-content h2 { color: var(--white); margin-bottom: 10px; }
.cta-content p { margin-bottom: 20px; color: rgba(255,255,255,0.85); }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.site-footer {
background: var(--gray-900);
color: var(--gray-200);
padding: 60px 0 0;
margin-top: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
}
.footer-brand p { margin: 16px 0; color: var(--gray-400); }
.footer-social a { margin-right: 10px; color: var(--gray-300); }
.footer-links h4, .footer-contact h4 { margin-bottom: 12px; color: var(--white); }
.footer-links a { display: block; margin-bottom: 8px; color: var(--gray-400); }
.footer-links a:hover { color: var(--primary-lighter); }
.footer-item { margin-bottom: 8px; color: var(--gray-400); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 40px;
padding: 16px 0;
}
.footer-bottom .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 0.9rem;
color: var(--gray-500);
}
.footer-mini { color: var(--gray-500); }
.card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 24px;
}
.cart-section, .checkout-section {
padding: 60px 0;
}
.cart-layout, .checkout-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.cart-item, .checkout-card {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
padding: 18px;
margin-bottom: 16px;
}
.item-remove {
background: var(--gray-100);
border: none;
border-radius: 50%;
width: 34px;
height: 34px;
cursor: pointer;
}
.empty-cart {
text-align: center;
padding: 40px;
border: 1px dashed var(--gray-300);
border-radius: var(--radius-lg);
background: var(--white);
}
.empty-state {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.empty-state .empty-icon {
font-size: 42px;
color: var(--gray-300);
margin-bottom: 6px;
}
.empty-state h3 {
color: var(--gray-600);
font-size: 1.2rem;
}
.support-categories { padding: 60px 0; background: var(--gray-50); }
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.category-card {
display: block;
background: var(--white);
border-radius: var(--radius-lg);
padding: 24px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.category-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--primary-light); display: grid; place-items: center; margin-bottom: 14px; }
.support-contact { padding: 60px 0; }
.support-contact .contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.support-contact .contact-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 24px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 10px;
}
.support-contact .contact-card i {
font-size: 1.4rem;
color: var(--primary-color);
}
.support-contact .contact-meta {
margin-top: auto;
font-weight: 600;
color: var(--gray-700);
}
.faq-section { padding: 60px 0; background: var(--white); }
.faq-list { display: grid; gap: 12px; }
.faq-item {
border-radius: var(--radius);
border: 1px solid var(--gray-200);
overflow: hidden;
background: var(--white);
}
.faq-question {
width: 100%;
border: none;
background: var(--gray-50);
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: var(--gray-800);
cursor: pointer;
}
.faq-answer {
display: none;
padding: 16px 18px;
color: var(--gray-600);
}
.faq-item.active .faq-answer { display: block; }
.reseller-hero {
background: var(--gradient-hero);
color: var(--white);
}
.reseller-hero h1,
.reseller-hero p,
.reseller-hero .breadcrumb a,
.reseller-hero .breadcrumb span {
color: var(--white);
}
.reseller-hero .breadcrumb i { color: rgba(255, 255, 255, 0.7); }
.reseller-intro { padding: 60px 0; }
.intro-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-md);
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 24px;
}
.intro-text .lead { font-size: var(--font-size-lg); font-weight: 600; color: var(--gray-800); margin-bottom: 12px; }
.intro-text p { color: var(--gray-600); margin-bottom: 12px; }
.intro-metrics {
display: grid;
gap: 16px;
}
.intro-metrics .metric {
background: var(--gray-50);
border-radius: var(--radius);
padding: 16px;
text-align: center;
}
.intro-metrics .metric strong { font-size: 1.4rem; color: var(--primary-color); display: block; }
.intro-metrics .metric span { color: var(--gray-500); font-size: 0.9rem; }
.benefits-section { padding: 60px 0; background: var(--gray-50); }
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.benefit-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 24px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
}
.benefit-icon {
width: 54px;
height: 54px;
border-radius: 16px;
background: var(--primary-light);
display: grid;
place-items: center;
margin-bottom: 14px;
color: var(--primary-color);
}
.reseller-tiers { padding: 60px 0; }
.tier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.tier-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 28px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
text-align: center;
position: relative;
}
.tier-card.is-featured {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.tier-badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--primary-color);
color: var(--white);
font-size: 0.7rem;
padding: 4px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.08em;
}
.tier-rate {
font-size: 2.4rem;
font-weight: 700;
color: var(--primary-color);
margin: 12px 0;
}
.tier-caption { color: var(--gray-500); margin-bottom: 18px; }
.tier-features { list-style: none; padding: 0; text-align: left; margin-bottom: 22px; }
.tier-features li { padding: 6px 0; color: var(--gray-600); display: flex; gap: 8px; }
.tier-features i { color: var(--success-color); margin-top: 3px; }
.reseller-cta { padding: 60px 0; }
.reseller-cta .cta-card {
background: var(--gradient-hero);
color: var(--white);
border-radius: var(--radius-lg);
padding: 36px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
box-shadow: var(--shadow-lg);
}
.reseller-cta .cta-card p { color: rgba(255, 255, 255, 0.85); }
.reseller-cta .btn-outline { border-color: rgba(255, 255, 255, 0.7); color: var(--white); background: transparent; }
.reseller-cta .btn-outline:hover { border-color: var(--white); color: var(--white); }
@media (max-width: 980px) {
.site-nav {
position: absolute;
top: 100%;
right: 20px;
background: var(--white);
flex-direction: column;
padding: 16px;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
}
.site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-toggle { display: flex; }
.header-actions { gap: 8px; }
.cart-layout, .checkout-layout { grid-template-columns: 1fr; }
.intro-card { grid-template-columns: 1fr; }
.reseller-cta .cta-card { flex-direction: column; align-items: flex-start; }
.site-nav .nav-item { width: 100%; }
.site-nav .nav-link,
.site-nav .nav-link-button {
width: 100%;
justify-content: space-between;
}
.site-nav .nav-dropdown,
.site-nav .mega-menu {
position: static;
opacity: 1;
pointer-events: auto;
transform: none;
box-shadow: none;
border: none;
padding: 12px 0 0;
background: transparent;
display: none;
}
.site-nav .nav-item.active .nav-dropdown,
.site-nav .nav-item.active .mega-menu {
display: grid;
}
.site-nav .mega-menu {
grid-template-columns: 1fr;
}
.products-section, .about-section, .contact-section, .process-section { padding: 50px 0; }
.section-header h2 { font-size: 1.6rem; }
.section-header { margin-bottom: 30px; }
.tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.top-bar-inner { flex-direction: column; align-items: flex-start; }
.hero-content h1 { font-size: 2.4rem; }
.page-header h1 { font-size: 2rem; }
.footer-bottom .container { flex-direction: column; }
.hero-section, .hero { padding: 50px 0 40px; }
.hero-grid { gap: 24px; grid-template-columns: 1fr; }
.hero-content h1 { font-size: 1.8rem; line-height: 1.3; }
.hero-content p { font-size: 0.95rem; margin-bottom: 18px; }
.hero-card { padding: 20px; }
.hero-buttons { flex-direction: column; gap: 10px; }
.hero-buttons .btn { width: 100%; text-align: center; justify-content: center; }
.badge-top { font-size: 0.75rem; padding: 5px 12px; }
.container { padding: 0 16px; }
.product-grid { grid-template-columns: 1fr; gap: 16px; }
.product-item { padding: 20px; }
.product-price { font-size: 1.6rem; }
.product-icon { width: 48px; height: 48px; border-radius: 14px; }
.product-actions { flex-direction: column; }
.product-actions .btn { width: 100%; }
.filter-bar { gap: 8px; margin: 20px 0 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 6px; }
.filter-pill { padding: 8px 16px; font-size: 0.8rem; flex-shrink: 0; white-space: nowrap; }
.stats-section .container { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat-number { font-size: 1.6rem; }
.trust-badges { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trust-badges div { padding: 14px 10px; }
.trust-badges i { font-size: 1.2rem; }
.trust-badges span { font-size: 0.8rem; }
.products-section, .about-section, .contact-section, .process-section { padding: 40px 0; }
.trust-section { padding: 30px 0 15px; }
.section-header h2 { font-size: 1.4rem; }
.section-header p { font-size: 0.85rem; }
.section-header { margin-bottom: 24px; }
.about-values { grid-template-columns: 1fr; gap: 14px; }
.about-features { grid-template-columns: 1fr; gap: 14px; }
.value-card, .feature-box { padding: 18px; }
.contact-grid { grid-template-columns: 1fr; gap: 20px; }
.contact-form, .contact-info { padding: 20px; }
.process-steps { grid-template-columns: 1fr; gap: 14px; }
.process-step { padding: 18px; }
.page-header { padding: 40px 0; }
.page-header.compact { padding: 30px 0; }
.page-header h1 { font-size: 1.5rem; }
.page-header p { font-size: 0.85rem; }
.site-footer { margin-top: 40px; }
.cta-section { padding: 40px 0; }
.cta-section h2 { font-size: 1.4rem; }
.cta-buttons { flex-direction: column; align-items: center; }
.cta-buttons .btn { width: 100%; max-width: 300px; }
.reseller-cta { padding: 40px 0; }
.reseller-cta .cta-card { padding: 24px; }
.tier-grid { grid-template-columns: 1fr; gap: 16px; }
.tier-card { padding: 22px; }
.tier-rate { font-size: 2rem; }
.form-group input, .form-group textarea, .form-group select,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="search"],
textarea, select { font-size: 16px !important; }
.form-group input, .form-group textarea, .form-group select { padding: 12px 14px; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table:not(.comparison-table) { width: 100%; }
.comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
.comparison-table table { min-width: 600px; }
.table-scroll-wrapper { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll-wrapper::after {
content: '→';
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0.6;
pointer-events: none;
animation: fadeOut 3s forwards 2s;
}
@keyframes fadeOut { to { opacity: 0; } }
.card { border-radius: var(--radius); }
.card-
body { overflow-x: hidden; }
.container { max-width: 100%; }
img { max-width: 100%; height: auto; }
.accordion-button { font-size: 0.9rem; padding: 14px 16px; }
.accordion-
.btn-lg { padding: 12px 24px; font-size: 0.95rem; }
.btn-group { flex-direction: column; gap: 8px; }
.btn-group .btn { width: 100%; }
.brand-logo-card { padding: 16px 12px; }
.brand-logo-card img { max-height: 30px; }
.modal-dialog { margin: 10px; }
.modal-content { border-radius: 14px; }
.modal-
}
@media (max-width: 480px) {
.hero-content h1 { font-size: 1.5rem; }
.hero-content p { font-size: 0.88rem; }
.stats-section .container { grid-template-columns: 1fr; }
.stat-number { font-size: 1.4rem; }
.trust-badges { grid-template-columns: 1fr; }
.section-header h2 { font-size: 1.25rem; }
.product-item { padding: 16px; }
.product-price { font-size: 1.4rem; }
.container { padding: 0 12px; }
.hero-section, .hero { padding: 35px 0 30px; }
.page-header { padding: 30px 0; }
.page-header h1 { font-size: 1.3rem; }
.reseller-cta .cta-card { padding: 20px; }
.reseller-cta .cta-card h3 { font-size: 1.2rem; }
.intro-card { padding: 20px; border-radius: 14px; }
}
*, *::before, *::after { max-width: 100vw; box-sizing: border-box; }
html { overflow-x: hidden; }
.product-tabs {
display: flex;
justify-content: center;
gap: 0;
margin-bottom: 36px;
}
.product-tab {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
font-size: 15px;
font-weight: 700;
border: 2px solid #3b82f6;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
}
.product-tab:first-child {
border-radius: 12px 0 0 12px;
}
.product-tab:last-child {
border-radius: 0 12px 12px 0;
}
.product-tab:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.product-tab-content {
animation: fadeInTab 0.4s ease;
}
@keyframes fadeInTab {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.product-tabs {
flex-direction: column;
gap: 0;
padding: 0 16px;
}
.product-tab {
justify-content: center;
padding: 12px 20px;
font-size: 14px;
border-radius: 0 !important;
}
.product-tab:first-child {
border-radius: 12px 12px 0 0 !important;
}
.product-tab:last-child {
border-radius: 0 0 12px 12px !important;
}
}
/* modern-upgrade-2026.css */
.main-header .container {
max-width: 1320px;
margin: 0 auto;
justify-content: center;
}
:root {
--modern-radius: 16px;
--modern-radius-sm: 10px;
--modern-radius-lg: 24px;
--modern-radius-xl: 32px;
--modern-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
--modern-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
--modern-shadow-md: 0 8px 25px -5px rgba(0,0,0,0.08), 0 4px 10px -6px rgba(0,0,0,0.04);
--modern-shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.12);
--modern-shadow-xl: 0 25px 60px -15px rgba(0,0,0,0.15);
--modern-shadow-glow: 0 0 40px rgba(99,102,241,0.15);
--modern-transition: cubic-bezier(0.4, 0, 0.2, 1);
--modern-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--modern-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--glass-bg: rgba(255,255,255,0.72);
--glass-border: rgba(255,255,255,0.2);
--glass-blur: 20px;
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
--gradient-accent: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
--gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
--gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
--gradient-mesh: radial-gradient(at 40% 20%, rgba(99,102,241,0.04) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(139,92,246,0.03) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(59,130,246,0.03) 0px, transparent 50%);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--surface: #ffffff;
--surface-raised: #f8fafc;
--border-subtle: rgba(0,0,0,0.06);
--border-hover: rgba(99,102,241,0.3);
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
scroll-behavior: smooth;
text-rendering: optimizeLegibility;
}
body {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
letter-spacing: -0.01em;
background: var(--surface-raised);
color: var(--text-primary);
overflow-x: hidden;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #94a3b8, #64748b);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #6366f1; }
::selection {
background: rgba(99, 102, 241, 0.15);
color: #312e81;
}
h1, h2, h3, h4, h5, h6,
.section-title, .cert-type-title {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
letter-spacing: -0.025em;
font-weight: 700;
}
h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { letter-spacing: -0.02em; }
.section-title {
font-weight: 800 !important;
letter-spacing: -0.03em !important;
background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
color: var(--text-secondary) !important;
font-weight: 400 !important;
letter-spacing: -0.005em;
line-height: 1.7;
}
.section-badge {
font-weight: 600 !important;
letter-spacing: 0.02em !important;
border-radius: 50px !important;
padding: 6px 18px !important;
font-size: 13px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)) !important;
color: #6366f1 !important;
border: 1px solid rgba(99,102,241,0.15) !important;
backdrop-filter: blur(8px);
transition: all 0.3s var(--modern-transition);
}
.section-badge:hover {
background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12)) !important;
transform: translateY(-1px);
}
section {
position: relative;
}
.features-section,
.steps-section,
.faq-section {
background: var(--gradient-mesh), var(--surface-raised) !important;
}
.brand-products-section,
.cta-section,
.trust-section {
background: var(--surface) !important;
}
.btn {
border-radius: var(--modern-radius-sm) !important;
font-weight: 600 !important;
letter-spacing: -0.005em;
transition: all 0.3s var(--modern-transition) !important;
position: relative;
overflow: hidden;
}
.btn:not(.btn-cta-primary):not(.btn-outline-light):not(.carousel-control-prev):not(.carousel-control-next)::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.btn:not(.btn-cta-primary):not(.btn-outline-light):hover::after { opacity: 1; }
.btn-primary:not(.hero-slider-section .btn-primary),
.btn-primary:not(.hero-slider-section .btn-primary):hover,
.btn-primary:not(.hero-slider-section .btn-primary):focus {
background: var(--gradient-accent) !important;
border: none !important;
box-shadow: 0 4px 15px rgba(99,102,241,0.3) !important;
}
.btn-primary:not(.hero-slider-section .btn-primary):hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(99,102,241,0.4) !important;
}
.btn-outline-primary {
border-color: #6366f1 !important;
color: #6366f1 !important;
}
.btn-outline-primary:hover {
background: var(--gradient-accent) !important;
border-color: transparent !important;
color: #fff !important;
transform: translateY(-2px) !important;
}
.card, [class*="ssl-card"], [class*="pt-card"],
.cert-type-card, .feature-card, .brand-card {
border-radius: var(--modern-radius) !important;
border: 1px solid var(--border-subtle) !important;
transition: all 0.4s var(--modern-transition) !important;
background: var(--surface) !important;
}
.card:hover, [class*="ssl-card"]:hover, [class*="pt-card"]:hover,
.cert-type-card:hover, .feature-card:hover, .brand-card:hover {
border-color: var(--border-hover) !important;
box-shadow: var(--modern-shadow-lg) !important;
transform: translateY(-4px) !important;
}
.main-header {
transition: all 0.4s var(--modern-transition) !important;
}
.main-nav,
.main-header {
backdrop-filter: blur(var(--glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--glass-blur)) !important;
background: rgba(255,255,255,0.88) !important;
border-bottom: 1px solid rgba(0,0,0,0.04) !important;
transition: all 0.3s var(--modern-transition) !important;
}
.main-nav.scrolled,
.main-header.scrolled {
box-shadow: 0 4px 30px rgba(0,0,0,0.06) !important;
background: rgba(255,255,255,0.96) !important;
}
.site-logo .logo-name {
font-weight: 800 !important;
letter-spacing: -0.02em !important;
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s var(--modern-transition);
}
.site-logo .logo-desc {
letter-spacing: 0.01em !important;
opacity: 0.85;
}
.site-logo:hover .logo-name {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.main-nav .nav-link,
.main-header .nav-link {
font-weight: 500 !important;
letter-spacing: -0.005em !important;
border-radius: var(--modern-radius-sm) !important;
transition: all 0.25s var(--modern-transition) !important;
position: relative;
padding: 8px 14px !important;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-header .nav-link:hover,
.main-header .nav-link.active {
color: #6366f1 !important;
background: rgba(99,102,241,0.06) !important;
}
.main-nav .nav-link.active::after,
.main-header .nav-link.active::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: var(--gradient-accent);
border-radius: 10px;
}
.nav-link .arrow,
.nav-link .fa-chevron-down {
transition: transform 0.3s var(--modern-transition) !important;
font-size: 10px !important;
}
.nav-item:hover .nav-link .arrow,
.nav-item:hover .nav-link .fa-chevron-down {
transform: rotate(180deg) !important;
}
.nav-item .dropdown,
.nav-item .mega-menu {
border-radius: var(--modern-radius) !important;
border: 1px solid rgba(0,0,0,0.04) !important;
box-shadow: 0 25px 60px -15px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
animation: dropdownSlide 0.3s var(--modern-spring) !important;
padding: 8px !important;
}
@keyframes dropdownSlide {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item, .mega-card {
border-radius: var(--modern-radius-sm) !important;
transition: all 0.2s var(--modern-transition) !important;
padding: 10px 14px !important;
}
.dropdown-item:hover, .mega-card:hover {
background: rgba(99,102,241,0.06) !important;
transform: translateX(4px);
}
.dropdown-item i:first-child {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(99,102,241,0.08);
color: #6366f1;
font-size: 14px;
transition: all 0.3s var(--modern-transition);
}
.dropdown-item:hover i:first-child {
background: rgba(99,102,241,0.15);
transform: scale(1.1);
}
.top-bar {
background: linear-gradient(135deg, #0f172a 0%, #1a1e3a 50%, #1e293b 100%) !important;
font-size: 12.5px !important;
letter-spacing: 0.01em;
border-bottom: 1px solid rgba(255,255,255,0.04);
padding: 6px 0 !important;
}
.top-bar a {
transition: all 0.25s var(--modern-transition) !important;
}
.top-bar a:hover {
color: #818cf8 !important;
text-shadow: 0 0 20px rgba(129,140,248,0.3);
}
.announcement-bar {
font-size: 13px !important;
letter-spacing: 0.01em;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.announcement-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
animation: announceShimmer 4s ease-in-out infinite;
}
@keyframes announceShimmer {
0%, 100% { transform: translateX(-50%); }
50% { transform: translateX(50%); }
}
.brand-products-section {
position: relative;
overflow: hidden;
}
.brand-products-section::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(99,102,241,0.03) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.brand-products-section .section-header .section-badge {
animation: fadeInUp 0.6s var(--modern-transition);
}
.cs-tab-btn {
border-radius: 14px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
transition: all 0.35s var(--modern-spring) !important;
backdrop-filter: blur(8px);
position: relative;
overflow: hidden;
}
.cs-tab-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: opacity 0.3s;
border-radius: inherit;
}
.cs-tab-btn:hover::before { opacity: 1; }
.cs-tab-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
.cs-tab-btn.active {
box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}
.brand-products-section .col-lg-4 > div,
.brand-products-section .col-md-6 > div {
border: 2px solid transparent !important;
transition: all 0.4s var(--modern-spring) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
}
.brand-products-section .col-lg-4 > div:hover,
.brand-products-section .col-md-6 > div:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
}
.brand-products-section h3 a {
background-image: linear-gradient(135deg, #6366f1, #8b5cf6);
background-size: 0% 2px;
background-position: left bottom;
background-repeat: no-repeat;
transition: background-size 0.4s var(--modern-transition), color 0.3s !important;
padding-bottom: 2px;
}
.brand-products-section h3 a:hover {
background-size: 100% 2px;
color: #6366f1 !important;
}
.brand-products-section a[style*="gradient"] {
border-radius: 12px !important;
transition: all 0.35s var(--modern-spring) !important;
position: relative;
overflow: hidden;
letter-spacing: -0.01em;
}
.brand-products-section a[style*="gradient"]:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
filter: brightness(1.08);
}
.brand-products-section a[style*="gradient"]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
transition: left 0.5s var(--modern-transition);
}
.brand-products-section a[style*="gradient"]:hover::before {
left: 100%;
}
.brand-products-section .fa-check-circle {
transition: transform 0.3s var(--modern-spring);
}
.brand-products-section .col-lg-4:hover .fa-check-circle {
transform: scale(1.15);
}
.brand-products-section div[style*="font-size:2rem"],
.brand-products-section div[style*="font-size: 2rem"] {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
letter-spacing: -0.03em !important;
}
.features-section {
position: relative;
overflow: hidden;
}
.features-section::after {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 300px;
background: radial-gradient(ellipse, rgba(99,102,241,0.04) 0%, transparent 70%);
pointer-events: none;
}
.features-section .feature-card {
padding: 32px 28px !important;
border-radius: var(--modern-radius-lg) !important;
position: relative;
overflow: hidden;
}
.features-section .feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--modern-transition);
}
.features-section .feature-card:hover::before {
transform: scaleX(1);
}
.features-section .feature-icon {
transition: all 0.4s var(--modern-spring) !important;
}
.features-section .feature-card:hover .feature-icon {
transform: scale(1.12) !important;
}
.faq-section .accordion-button,
.faq-section [class*="faq-item"] {
border-radius: var(--modern-radius-sm) !important;
font-weight: 500 !important;
transition: all 0.3s var(--modern-transition) !important;
}
.faq-section .accordion-button:not(.collapsed) {
background: rgba(99,102,241,0.04) !important;
color: #6366f1 !important;
box-shadow: none !important;
}
.faq-section .accordion-item {
border-radius: var(--modern-radius) !important;
border: 1px solid var(--border-subtle) !important;
margin-bottom: 12px !important;
overflow: hidden;
transition: all 0.3s var(--modern-transition);
}
.faq-section .accordion-item:hover {
border-color: rgba(99,102,241,0.15) !important;
}
.steps-section {
position: relative;
overflow: hidden;
}
.steps-section .step-card {
position: relative;
background: var(--surface) !important;
border-radius: var(--modern-radius-lg) !important;
border: 1px solid var(--border-subtle) !important;
padding: 36px 24px 28px !important;
transition: all 0.4s var(--modern-spring) !important;
}
.steps-section .step-card:hover {
transform: translateY(-8px) !important;
box-shadow: var(--modern-shadow-lg) !important;
border-color: var(--border-hover) !important;
}
.steps-section .step-number {
width: 52px !important;
height: 52px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--gradient-accent) !important;
color: #fff !important;
border-radius: 16px !important;
font-size: 1.25rem !important;
font-weight: 800 !important;
margin-bottom: 20px !important;
box-shadow: 0 8px 20px rgba(59,130,246,0.25) !important;
transition: all 0.4s var(--modern-spring) !important;
letter-spacing: -0.02em;
}
.steps-section .step-card:hover .step-number {
transform: scale(1.1) rotate(-5deg) !important;
box-shadow: 0 12px 30px rgba(59,130,246,0.35) !important;
}
.steps-section .step-card h4,
.steps-section .step-card h5 {
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin-bottom: 8px !important;
}
.steps-section .step-card p {
color: var(--text-secondary) !important;
line-height: 1.6 !important;
}
@media (min-width: 768px) {
.steps-section .row > [class*="col"]:not(:last-child) .step-card::after {
content: '';
position: absolute;
top: 40px;
right: -24px;
width: 48px;
height: 2px;
background: linear-gradient(90deg, #6366f1, rgba(99,102,241,0.2));
z-index: 1;
}
}
.cta-section {
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: ctaFloat 8s ease-in-out infinite;
}
.cta-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: ctaFloat 8s ease-in-out infinite reverse;
}
@keyframes ctaFloat {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, -20px); }
}
.cta-section .btn {
border-radius: 14px !important;
padding: 14px 32px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
transition: all 0.35s var(--modern-spring) !important;
}
.cta-section .btn:hover {
transform: translateY(-3px) !important;
}
.cta-section .btn-light {
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.cta-section .btn-light:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}
.cta-section .btn-outline-light:hover {
background: rgba(255,255,255,0.15) !important;
backdrop-filter: blur(10px);
}
.cta-section h2,
.cta-section .display-6 {
font-weight: 800 !important;
letter-spacing: -0.03em !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.cta-section p {
text-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
.reviews-section [class*="review"],
.reviews-section [class*="testimonial"],
.testimonials-section [class*="testimonial"] {
border-radius: var(--modern-radius) !important;
transition: all 0.3s var(--modern-transition) !important;
border: 1px solid var(--border-subtle);
}
.reviews-section [class*="review"]:hover,
.reviews-section [class*="testimonial"]:hover,
.testimonials-section [class*="testimonial"]:hover {
transform: translateY(-4px) !important;
box-shadow: var(--modern-shadow-md) !important;
border-color: var(--border-hover);
}
.brands-section [class*="brand"] {
transition: all 0.4s var(--modern-transition) !important;
border-radius: var(--modern-radius) !important;
}
.brands-section [class*="brand"]:hover {
transform: scale(1.08) !important;
box-shadow: var(--modern-shadow-md) !important;
}
.brands-section img {
filter: grayscale(30%);
transition: filter 0.4s var(--modern-transition) !important;
}
.brands-section [class*="brand"]:hover img {
filter: grayscale(0);
}
.seo-info-section .info-card {
border-radius: var(--modern-radius) !important;
transition: all 0.3s var(--modern-transition) !important;
}
.seo-info-section .info-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--modern-shadow-md) !important;
}
.trust-section [class*="trust-card"] {
transition: all 0.4s var(--modern-spring) !important;
}
.trust-section [class*="trust-card"]:hover {
transform: translateY(-6px) !important;
}
.blog-section .card,
.blog-section [class*="blog-card"] {
border-radius: var(--modern-radius) !important;
overflow: hidden;
transition: all 0.4s var(--modern-transition) !important;
border: 1px solid var(--border-subtle) !important;
}
.blog-section .card:hover,
.blog-section [class*="blog-card"]:hover {
transform: translateY(-6px) !important;
box-shadow: var(--modern-shadow-lg) !important;
border-color: var(--border-hover) !important;
}
.blog-section img {
transition: transform 0.6s var(--modern-transition) !important;
}
.blog-section .card:hover img,
.blog-section [class*="blog-card"]:hover img {
transform: scale(1.05) !important;
}
.site-footer {
background: linear-gradient(180deg, #0a0e1a 0%, #0f172a 40%, #131b2e 100%) !important;
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), rgba(139,92,246,0.3), transparent);
}
.footer-social a {
transition: all 0.3s var(--modern-spring) !important;
}
.footer-social a:hover {
transform: translateY(-4px) scale(1.1) !important;
}
.footer-links a {
transition: all 0.25s var(--modern-transition) !important;
position: relative;
}
.footer-links a:hover {
transform: translateX(6px) !important;
color: #818cf8 !important;
}
.footer-column h4 {
position: relative;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.footer-links .link-icon {
transition: all 0.3s var(--modern-spring) !important;
}
.footer-links a:hover .link-icon {
transform: scale(1.1) !important;
background: rgba(99,102,241,0.2) !important;
color: #818cf8 !important;
}
.trust-item {
border-radius: 18px !important;
transition: all 0.4s var(--modern-spring) !important;
position: relative;
overflow: hidden;
}
.trust-item::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.trust-item:hover::before { opacity: 1; }
.trust-item:hover {
transform: translateY(-6px) scale(1.02) !important;
}
.footer-legal a {
transition: all 0.25s var(--modern-transition) !important;
position: relative;
}
.footer-legal a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: #818cf8;
transition: width 0.3s var(--modern-transition);
}
.footer-legal a:hover::after { width: 100%; }
.footer-legal a:hover { color: #818cf8 !important; }
.whatsapp-btn {
border-radius: 18px !important;
width: 58px !important;
height: 58px !important;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35) !important;
transition: all 0.4s var(--modern-spring) !important;
position: relative;
}
.whatsapp-btn:hover {
transform: scale(1.1) rotate(5deg) !important;
box-shadow: 0 12px 40px rgba(37, 211, 102, 0.5) !important;
border-radius: 22px !important;
}
.whatsapp-btn::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
border: 2px solid rgba(37, 211, 102, 0.3);
animation: whatsappPulse 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0; }
}
.back-to-top {
border-radius: 14px !important;
backdrop-filter: blur(20px) !important;
transition: all 0.4s var(--modern-spring) !important;
}
.back-to-top:hover {
transform: translateY(-5px) !important;
background: var(--gradient-accent) !important;
box-shadow: 0 8px 25px rgba(99,102,241,0.4) !important;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
section:not(.hero-slider-section) {
animation: fadeIn 0.6s var(--modern-transition);
}
.hero-slider-section .btn,
.hero-slide .btn {
border-radius: inherit !important;
}
.hero-slider-section .btn::after {
display: none !important;
}
.hero-slider-section .btn-cta-primary,
.hero-slide .btn-cta-primary {
background: inherit !important;
box-shadow: inherit !important;
}
.hero-slider-section .btn-cta-primary:hover,
.hero-slide .btn-cta-primary:hover {
transform: none !important;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="search"],
textarea, select, .form-control, .form-select {
border-radius: var(--modern-radius-sm) !important;
border: 1.5px solid #e2e8f0 !important;
transition: all 0.25s var(--modern-transition) !important;
font-family: inherit !important;
}
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
border-color: #6366f1 !important;
box-shadow: 0 0 0 4px rgba(99,102,241,0.1) !important;
outline: none !important;
}
.badge {
border-radius: 50px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
padding: 4px 10px !important;
}
.breadcrumb {
font-size: 13px !important;
letter-spacing: 0.01em;
padding: 10px 0 !important;
}
.breadcrumb-item a {
transition: color 0.2s !important;
color: var(--text-secondary) !important;
}
.breadcrumb-item a:hover {
color: #6366f1 !important;
}
[class*="product-card"] {
border-radius: var(--modern-radius) !important;
border: 1px solid var(--border-subtle) !important;
transition: all 0.4s var(--modern-spring) !important;
overflow: hidden;
}
[class*="product-card"]:hover {
transform: translateY(-6px) !important;
box-shadow: var(--modern-shadow-lg) !important;
border-color: var(--border-hover) !important;
}
.comparison-section table {
border-radius: var(--modern-radius) !important;
overflow: hidden;
}
.comparison-section th {
font-weight: 700 !important;
letter-spacing: -0.01em;
}
.comparison-section tr:hover td {
background: rgba(99,102,241,0.02);
}
.cert-types-section .cert-type-card {
position: relative;
overflow: hidden;
}
.cert-types-section .cert-type-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-accent);
opacity: 0;
transition: opacity 0.3s;
}
.cert-types-section .cert-type-card:hover::before { opacity: 1; }
[style*="font-size:2rem"][style*="font-weight:800"],
[style*="font-size: 2rem"][style*="font-weight: 800"] {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
letter-spacing: -0.03em !important;
}
.currency-selector .selector-menu {
border-radius: var(--modern-radius-sm) !important;
box-shadow: var(--modern-shadow-lg) !important;
border: 1px solid rgba(0,0,0,0.04) !important;
animation: dropdownSlide 0.3s var(--modern-spring) !important;
overflow: hidden;
}
.currency-selector .selector-menu a {
transition: all 0.2s var(--modern-transition) !important;
border-radius: 6px !important;
}
.currency-selector .selector-menu a:hover {
background: rgba(99,102,241,0.06) !important;
}
.currency-selector .selector-menu a.active {
background: rgba(99,102,241,0.08) !important;
color: #6366f1 !important;
font-weight: 600 !important;
}
.table {
border-radius: var(--modern-radius) !important;
overflow: hidden;
}
.table thead th {
border-bottom-width: 2px !important;
font-weight: 700 !important;
letter-spacing: -0.005em;
}
.table-hover tbody tr:hover {
background: rgba(99,102,241,0.02) !important;
}
.pagination .page-link {
border-radius: var(--modern-radius-sm) !important;
font-weight: 500 !important;
transition: all 0.25s var(--modern-transition) !important;
border: 1px solid var(--border-subtle) !important;
margin: 0 3px !important;
}
.pagination .page-link:hover {
background: rgba(99,102,241,0.06) !important;
border-color: var(--border-hover) !important;
color: #6366f1 !important;
transform: translateY(-2px);
}
.pagination .page-item.active .page-link {
background: var(--gradient-accent) !important;
border-color: transparent !important;
box-shadow: 0 4px 12px rgba(99,102,241,0.25) !important;
}
.modal-content {
border-radius: var(--modern-radius-lg) !important;
border: none !important;
box-shadow: var(--modern-shadow-xl) !important;
}
.modal-header { border-bottom: 1px solid var(--border-subtle) !important; }
.modal-footer { border-top: 1px solid var(--border-subtle) !important; }
.accordion-item {
border-radius: var(--modern-radius) !important;
border: 1px solid var(--border-subtle) !important;
margin-bottom: 10px !important;
overflow: hidden;
}
.accordion-button {
font-weight: 600 !important;
letter-spacing: -0.005em !important;
transition: all 0.3s var(--modern-transition) !important;
}
.accordion-button:not(.collapsed) {
background: rgba(99,102,241,0.04) !important;
color: #6366f1 !important;
box-shadow: none !important;
}
.accordion-button::after {
transition: transform 0.3s var(--modern-spring) !important;
}
.toast {
border-radius: var(--modern-radius) !important;
backdrop-filter: blur(20px) !important;
box-shadow: var(--modern-shadow-lg) !important;
}
a {
transition: color 0.25s var(--modern-transition);
}
:focus-visible {
outline: 2px solid #6366f1 !important;
outline-offset: 2px !important;
}
.btn:focus-visible,
.nav-link:focus-visible {
outline-offset: -2px !important;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--modern-radius-sm);
}
@media (max-width: 991px) {
.mobile-menu,
.mobile-nav-panel,
.offcanvas {
backdrop-filter: blur(25px) !important;
background: rgba(255,255,255,0.97) !important;
}
.mobile-menu .nav-link,
.mobile-nav-panel .nav-link {
padding: 12px 16px !important;
border-radius: var(--modern-radius-sm) !important;
font-weight: 500 !important;
transition: all 0.25s var(--modern-transition) !important;
}
.mobile-menu .nav-link:hover,
.mobile-nav-panel .nav-link:hover {
background: rgba(99,102,241,0.06) !important;
color: #6366f1 !important;
}
.hamburger-btn,
.mobile-menu-btn,
[class*="hamburger"] {
transition: all 0.3s var(--modern-transition) !important;
}
}
@media (max-width: 991px) {
.section-title {
font-size: 1.75rem !important;
letter-spacing: -0.02em !important;
}
.section-subtitle { font-size: 0.95rem !important; }
.steps-section .step-card::after { display: none !important; }
}
@media (max-width: 767px) {
.section-title { font-size: 1.5rem !important; }
.main-nav, .main-header {
backdrop-filter: blur(25px) !important;
background: rgba(255,255,255,0.95) !important;
}
.cs-tab-btn {
font-size: 13px !important;
padding: 10px 16px !important;
}
.brand-products-section .col-lg-4 > div,
.brand-products-section .col-md-6 > div {
padding: 20px !important;
}
.steps-section .step-card { padding: 24px 20px !important; }
.steps-section .step-number {
width: 44px !important;
height: 44px !important;
font-size: 1.1rem !important;
border-radius: 12px !important;
}
.cta-section .btn {
padding: 12px 24px !important;
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.section-title { font-size: 1.3rem !important; }
.whatsapp-btn {
width: 50px !important;
height: 50px !important;
border-radius: 16px !important;
font-size: 24px !important;
}
.brand-products-section .col-lg-4 > div,
.brand-products-section .col-md-6 > div {
padding: 18px !important;
border-radius: 14px !important;
}
.cs-tab-btn {
font-size: 12px !important;
padding: 8px 12px !important;
border-radius: 10px !important;
}
}
img { image-rendering: -webkit-optimize-contrast; }
.alert {
border-radius: var(--modern-radius-sm) !important;
border: none !important;
backdrop-filter: blur(8px);
}
[data-bs-toggle="tooltip"] { cursor: help; }
@media print {
.top-bar, .main-nav, .site-footer, .whatsapp-btn, .back-to-top {
display: none !important;
}
}
.product-card-enhanced {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-card-enhanced:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
border-color: var(--card-accent, #3b82f6) !important;
}
.product-card-enhanced::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--card-accent, #3b82f6), var(--theme-accent, #10B981));
border-radius: 16px 16px 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card-enhanced:hover::before {
opacity: 1;
}
.product-card-enhanced a[style*="linear-gradient"] {
position: relative;
overflow: hidden;
}
.product-card-enhanced a[style*="linear-gradient"]::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.product-card-enhanced:hover a[style*="linear-gradient"]::after {
left: 100%;
}
.trust-item {
position: relative;
overflow: hidden;
}
.trust-item::before {
content: "";
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 70%);
border-radius: 50%;
left: var(--glow-x, 50%);
top: var(--glow-y, 50%);
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.trust-item:hover::before {
opacity: 1;
}
.cs-tab-content {
transition: opacity 0.35s ease, transform 0.35s ease;
}
.cs-tab-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
}
.cs-tab-btn::before {
content: "";
position: absolute;
inset: 0;
background: currentColor;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: inherit;
}
.cs-tab-btn:hover::before {
opacity: 0.04;
}
#scroll-progress {
box-shadow: 0 0 10px rgba(0, 102, 255, 0.3);
}
.feature-card,
.step-card {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
will-change: transform;
}
.faq-answer {
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.3s ease,
opacity 0.3s ease;
}
.faq-item .faq-question i,
.faq-item .faq-question .faq-icon {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.active .faq-question {
color: var(--theme-primary, #0066FF);
}
.faq-item.active .faq-question i,
.faq-item.active .faq-question .faq-icon {
transform: rotate(180deg);
color: var(--theme-primary, #0066FF);
}
.features-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%) !important;
position: relative;
overflow: hidden;
}
.features-section::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.features-section .feature-card {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 20px !important;
padding: 36px 28px 32px !important;
text-align: center;
height: 100%;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
.features-section .feature-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4) !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
opacity: 1 !important;
border-radius: 0 !important;
width: auto !important;
}
.features-section .feature-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
border-color: rgba(99, 102, 241, 0.15) !important;
}
.features-section .feature-card:hover::before {
transform: scaleX(1) !important;
}
.features-section .feature-icon {
width: 72px !important;
height: 72px !important;
border-radius: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 20px !important;
font-size: 28px !important;
position: relative;
transition: transform 0.4s ease !important;
}
.features-section .feature-card:hover .feature-icon {
transform: scale(1.1) rotate(-3deg) !important;
}
.features-section .feature-icon.icon-1 { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.2)) !important; color: #6366f1 !important; }
.features-section .feature-icon.icon-2 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2)) !important; color: #10b981 !important; }
.features-section .feature-icon.icon-3 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2)) !important; color: #f59e0b !important; }
.features-section .feature-icon.icon-4 { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2)) !important; color: #ef4444 !important; }
.features-section .feature-icon.icon-5 { background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.2)) !important; color: #06b6d4 !important; }
.features-section .feature-icon.icon-6 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.2)) !important; color: #a855f7 !important; }
.features-section .feature-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin-bottom: 10px !important;
}
.features-section .feature-description {
font-size: 14.5px !important;
color: #64748b !important;
line-height: 1.7 !important;
margin-bottom: 0 !important;
}
.features-section .feature-link {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin-top: 14px !important;
color: #6366f1 !important;
font-weight: 600 !important;
font-size: 13.5px !important;
text-decoration: none !important;
transition: gap 0.3s ease, color 0.3s !important;
}
.features-section .feature-link:hover {
gap: 8px !important;
color: #4f46e5 !important;
}
.steps-section {
padding: 90px 0 !important;
background: #fff !important;
}
.steps-section .step-card {
background: #fff !important;
border-radius: 20px !important;
padding: 36px 24px 32px !important;
text-align: center;
position: relative;
border: 1px solid #e8ecf1 !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
height: 100%;
}
.steps-section .step-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
}
.steps-section .step-number {
width: 64px !important;
height: 64px !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: #fff !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
font-weight: 800 !important;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3) !important;
transition: transform 0.4s ease !important;
}
.steps-section .step-card:hover .step-number {
transform: scale(1.1) rotate(-5deg) !important;
}
.steps-section .step-card h4,
.steps-section .step-card .h5 {
font-size: 17px !important;
font-weight: 700 !important;
color: #0f172a !important;
}
.steps-section .step-card p {
font-size: 14px !important;
color: #64748b !important;
line-height: 1.65 !important;
}
.trust-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
}
.trust-section h2 {
font-size: 2rem !important;
font-weight: 800 !important;
color: #0f172a !important;
}
.trust-section .trust-list li {
padding: 14px 16px !important;
border-radius: 14px !important;
transition: background 0.3s ease !important;
list-style: none !important;
}
.trust-section .trust-list li:hover {
background: rgba(99, 102, 241, 0.04) !important;
}
.trust-section .trust-list {
list-style: none !important;
padding: 0 !important;
}
.trust-section .trust-icon {
min-width: 42px !important;
min-height: 42px !important;
width: 42px !important;
height: 42px !important;
border-radius: 12px !important;
font-size: 16px !important;
}
.trust-section .trust-stats {
background: #fff !important;
border-radius: 24px !important;
padding: 36px !important;
border: 1px solid #e8ecf1 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}
.trust-section .stat-number {
font-size: 2.8rem !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1 !important;
}
.trust-section .stat-label {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.reviews-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f0f0ff 0%, #f8f8ff 50%, #f0f0ff 100%) !important;
position: relative;
overflow: hidden;
}
.reviews-section h2 {
font-size: 2.2rem !important;
font-weight: 800 !important;
color: #0f172a !important;
}
.reviews-section .review-card {
background: #fff !important;
border-radius: 20px !important;
padding: 32px !important;
border: 1px solid rgba(99, 102, 241, 0.08) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative;
}
.reviews-section .review-card::before {
content: '\201C' !important;
position: absolute !important;
top: 20px !important;
right: 24px !important;
font-size: 64px !important;
font-family: Georgia, serif !important;
color: rgba(99, 102, 241, 0.08) !important;
line-height: 1 !important;
pointer-events: none;
}
.reviews-section .review-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 48px rgba(99, 102, 241, 0.1) !important;
border-color: rgba(99, 102, 241, 0.15) !important;
}
.reviews-section .review-text {
font-size: 15px !important;
color: #334155 !important;
line-height: 1.75 !important;
font-style: italic !important;
}
.faq-section {
padding: 90px 0 !important;
background: #fff !important;
}
.faq-section .faq-item {
background: #f8fafc !important;
border: 1px solid #e8ecf1 !important;
border-radius: 16px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
margin-bottom: 12px !important;
}
.faq-section .faq-item:hover {
border-color: #c7d2fe !important;
}
.faq-section .faq-item.active {
background: #fff !important;
border-color: #818cf8 !important;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08) !important;
}
.faq-section .faq-question {
padding: 20px 24px !important;
font-weight: 600 !important;
font-size: 15px !important;
color: #1e293b !important;
background: transparent !important;
}
.faq-section .faq-question:hover {
color: #4f46e5 !important;
}
.faq-section .faq-question i {
color: #6366f1 !important;
transition: transform 0.3s ease !important;
}
.faq-section .faq-item.active .faq-question i {
transform: rotate(180deg) !important;
}
.faq-section .faq-answer {
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s !important;
padding: 0 24px !important;
}
.faq-section .faq-item.active .faq-answer {
max-height: 500px !important;
padding: 0 24px 20px !important;
}
.faq-section .faq-answer div {
font-size: 14.5px !important;
color: #475569 !important;
line-height: 1.75 !important;
}
.faq-section .btn-primary {
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
border: none !important;
border-radius: 12px !important;
padding: 12px 28px !important;
font-weight: 600 !important;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25) !important;
}
.faq-section .btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35) !important;
}
.cta-section {
padding: 100px 0 !important;
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -20% !important;
width: 600px !important;
height: 600px !important;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%) !important;
border-radius: 50% !important;
animation: ctaOrb1 15s ease-in-out infinite !important;
pointer-events: none;
}
.cta-section::after {
content: '' !important;
position: absolute !important;
bottom: -40% !important;
right: -15% !important;
width: 500px !important;
height: 500px !important;
background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 60%) !important;
border-radius: 50% !important;
animation: ctaOrb2 18s ease-in-out infinite !important;
pointer-events: none;
}
@keyframes ctaOrb1 {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(60px, 40px); }
66% { transform: translate(-30px, 60px); }
}
@keyframes ctaOrb2 {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(-40px, -30px); }
66% { transform: translate(50px, -20px); }
}
.cta-section .cta-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 680px;
margin: 0 auto;
}
.cta-section .cta-title {
font-size: 2.5rem !important;
font-weight: 800 !important;
color: #fff !important;
letter-spacing: -0.02em !important;
margin-bottom: 16px !important;
line-height: 1.25 !important;
}
.cta-section .cta-description {
font-size: 17px !important;
color: rgba(255, 255, 255, 0.65) !important;
line-height: 1.7 !important;
margin-bottom: 32px !important;
}
.cta-section .cta-buttons {
display: flex !important;
gap: 16px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.cta-section .btn-cta {
padding: 16px 36px !important;
border-radius: 14px !important;
font-weight: 700 !important;
font-size: 15px !important;
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.cta-section .btn-cta-primary {
background: linear-gradient(135deg, #00D68F 0%, #00B377 100%) !important;
color: #fff !important;
box-shadow: 0 8px 32px rgba(0, 214, 143, 0.35) !important;
border: none !important;
}
.cta-section .btn-cta-primary:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 40px rgba(0, 214, 143, 0.45) !important;
}
.cta-section .btn-cta-outline {
background: rgba(255, 255, 255, 0.06) !important;
color: #fff !important;
border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(8px) !important;
}
.cta-section .btn-cta-outline:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
transform: translateY(-3px) !important;
color: #fff !important;
}
.seo-info-section {
padding: 90px 0 !important;
background: #fff !important;
}
.seo-info-section h2 {
font-size: 2rem !important;
font-weight: 800 !important;
color: #0f172a !important;
}
.seo-info-section .info-card {
background: #f8fafc !important;
border-radius: 16px !important;
border: 1px solid #e8ecf1 !important;
border-left: 4px solid #6366f1 !important;
padding: 24px !important;
transition: all 0.3s ease !important;
}
.seo-info-section .info-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
}
.seo-how-works-box {
background: linear-gradient(135deg, #f8fafc, #eef2ff) !important;
border: 1px solid #e0e7ff !important;
border-radius: 24px !important;
padding: 36px !important;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.06) !important;
}
.seo-hw-num {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}
.seo-types-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f8fafc 0%, #f0f0ff 100%) !important;
}
.seo-type-card {
background: #fff !important;
border-radius: 20px !important;
padding: 36px 28px !important;
border: 1px solid #e8ecf1 !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.seo-type-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
}
.seo-type-card.featured {
border-color: #818cf8 !important;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12) !important;
}
.seo-usecases-section {
padding: 90px 0 !important;
background: #fff !important;
}
.seo-usecase-card {
background: #fff !important;
border-radius: 18px !important;
padding: 28px 24px !important;
border: 1px solid #e8ecf1 !important;
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.seo-usecase-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 40px rgba(99, 102, 241, 0.08) !important;
border-color: #c7d2fe !important;
}
.seo-usecase-icon {
width: 60px !important;
height: 60px !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
}
.comparison-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f8fafc, #f0f0ff) !important;
}
.comparison-section .table-responsive {
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
border: 1px solid #e2e8f0 !important;
}
.comparison-section .comparison-table {
margin-bottom: 0 !important;
}
.comparison-section .comparison-table thead {
background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
}
.comparison-section .comparison-table thead th {
color: #fff !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 18px 20px !important;
border: none !important;
}
.comparison-section .comparison-table tbody td {
padding: 16px 20px !important;
font-size: 14px !important;
border-color: #f1f5f9 !important;
}
.comparison-section .comparison-table tbody tr:hover td {
background: #f8fafc !important;
}
.comparison-section .btn-primary.btn-lg {
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
border: none !important;
border-radius: 14px !important;
padding: 16px 36px !important;
font-weight: 700 !important;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25) !important;
}
.comparison-section .btn-primary.btn-lg:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 36px rgba(99, 102, 241, 0.35) !important;
}
.cert-types-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
}
.cert-types-section .cert-type-card {
background: #fff !important;
border-radius: 20px !important;
padding: 36px 28px !important;
border: 1px solid #e8ecf1 !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative;
overflow: hidden;
}
.cert-types-section .cert-type-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #6366f1, #06b6d4) !important;
opacity: 0 !important;
transition: opacity 0.3s !important;
}
.cert-types-section .cert-type-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1) !important;
}
.cert-types-section .cert-type-card:hover::before {
opacity: 1 !important;
}
.cert-types-section .cert-type-icon {
width: 64px !important;
height: 64px !important;
border-radius: 18px !important;
font-size: 28px !important;
}
.cert-types-section .cert-type-icon.dv {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.2)) !important;
color: #06b6d4 !important;
}
.cert-types-section .cert-type-icon.ev {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.2)) !important;
color: #8b5cf6 !important;
}
.cert-types-section .cert-type-price {
font-size: 22px !important;
font-weight: 800 !important;
color: #0f172a !important;
}
.cert-types-section .btn-outline-primary {
border-radius: 10px !important;
font-weight: 600 !important;
border-color: #6366f1 !important;
color: #6366f1 !important;
}
.cert-types-section .btn-outline-primary:hover {
background: #6366f1 !important;
color: #fff !important;
}
@media (max-width: 991px) {
.features-section,
.steps-section,
.trust-section,
.reviews-section,
.faq-section,
.seo-info-section,
.seo-types-section,
.seo-usecases-section,
.comparison-section,
.cert-types-section {
padding: 60px 0 !important;
}
.cta-section {
padding: 70px 0 !important;
}
.cta-section .cta-title {
font-size: 2rem !important;
}
}
@media (max-width: 767px) {
.features-section,
.steps-section,
.trust-section,
.reviews-section,
.faq-section,
.seo-info-section,
.seo-types-section,
.seo-usecases-section,
.comparison-section,
.cert-types-section {
padding: 50px 0 !important;
}
.cta-section {
padding: 60px 0 !important;
}
.cta-section .cta-title { font-size: 1.6rem !important; }
.cta-section .cta-description { font-size: 15px !important; }
.cta-section .cta-buttons { flex-direction: column !important; align-items: center !important; }
.cta-section .btn-cta { width: 100% !important; max-width: 320px !important; justify-content: center !important; }
.features-section .feature-card { padding: 28px 22px 24px !important; }
.trust-section .stat-number { font-size: 2.2rem !important; }
.reviews-section .review-card { padding: 24px !important; }
.faq-section .faq-question { padding: 16px 20px !important; font-size: 14px !important; }
.steps-section .step-card { padding: 28px 20px 24px !important; }
.steps-section .step-number { width: 52px !important; height: 52px !important; font-size: 20px !important; border-radius: 14px !important; }
}
@media (hover: none) and (pointer: coarse) {
.features-section .feature-card:hover,
.steps-section .step-card:hover,
.seo-type-card:hover,
.seo-usecase-card:hover,
.cert-types-section .cert-type-card:hover,
.reviews-section .review-card:hover {
transform: none !important;
}
}
@media (max-width: 991px) {
.cs-tab-content .row > [class*="col-md-6"],
.cs-tab-content .row > [class*="col-lg-3"],
.cs-tab-content .row > [class*="col-lg-4"],
.price-table-section .row > [class*="col-md-6"],
.price-table-section .row > [class*="col-lg-3"],
.price-table-section .row > [class*="col-lg-4"] {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
}
.cloud-product-card {
background: #fff !important;
border-radius: 20px !important;
padding: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.cloud-product-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
z-index: 3 !important;
}
.cloud-product-card:hover {
border-color: #bae6fd !important;
box-shadow: 0 20px 50px rgba(6, 182, 212, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
transform: translateY(-6px) !important;
}
.cloud-product-card:hover::before {
opacity: 1 !important;
}
.cloud-premium {
border-color: #e9d5ff !important;
}
.cloud-premium::before {
background: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9) !important;
}
.cloud-premium:hover {
border-color: #c4b5fd !important;
box-shadow: 0 20px 50px rgba(139, 92, 246, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
.cloud-p-badge {
position: absolute !important;
top: 20px !important;
right: 20px !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
padding: 5px 14px !important;
border-radius: 50px !important;
z-index: 4 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
}
.premium-badge {
background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}
.os-badge {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.best-badge {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}
.ev-badge {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}
.cs-card-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 28px 28px 0 !important;
margin-bottom: 0 !important;
}
.cloud-type-badge {
font-size: 0.7rem !important;
font-weight: 700 !important;
padding: 4px 12px !important;
border-radius: 8px !important;
letter-spacing: 0.3px !important;
}
.ctb-ov {
background: #ecfeff !important;
color: #0e7490 !important;
border: 1px solid #cffafe !important;
}
.ctb-ev {
background: #f5f3ff !important;
color: #7c3aed !important;
border: 1px solid #ede9fe !important;
}
.cloud-product-card .cs-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin-bottom: 0 !important;
padding: 16px 28px 0 !important;
line-height: 1.4 !important;
}
.cloud-product-card .cs-title a {
color: inherit !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.cloud-product-card .cs-title a:hover {
color: #0891b2 !important;
}
.cloud-premium .cs-title a:hover {
color: #7c3aed !important;
}
.cloud-product-card .cs-price {
margin: 16px 28px !important;
padding: 18px 20px !important;
background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
border: 1px solid #e2e8f0 !important;
border-radius: 16px !important;
text-align: center !important;
position: relative;
}
.cloud-premium .cs-price {
background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;
border-color: #e9d5ff !important;
}
.cloud-product-card .cs-price-old {
text-decoration: line-through !important;
color: #94a3b8 !important;
font-size: 13px !important;
font-weight: 500 !important;
margin-bottom: 4px !important;
}
.cloud-product-card .cs-price-row {
display: flex !important;
align-items: baseline !important;
justify-content: center !important;
gap: 3px !important;
}
.cloud-product-card .cs-price-current {
font-size: 28px !important;
font-weight: 800 !important;
color: #0f172a !important;
letter-spacing: -0.5px !important;
line-height: 1.2 !important;
}
.cloud-product-card .cs-price-period {
font-size: 14px !important;
color: #64748b !important;
font-weight: 500 !important;
}
.cloud-product-card .cs-price-discount {
display: none !important;
}
.cloud-product-card .cs-price-tax {
font-size: 0.7rem !important;
color: #94a3b8 !important;
margin-top: 4px !important;
}
.cloud-product-card .cs-meta {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding: 0 28px !important;
margin-bottom: 16px !important;
}
.cloud-product-card .cs-meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
color: #64748b !important;
background: #f8fafc !important;
padding: 6px 14px !important;
border-radius: 10px !important;
border: 1px solid #f1f5f9 !important;
}
.cloud-product-card .cs-meta-item i {
color: #06b6d4 !important;
font-size: 11px !important;
}
.cloud-product-card .cloud-highlights {
margin: 0 28px 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 0 !important;
}
.cloud-product-card .cloud-hl {
font-size: 0.78rem !important;
font-weight: 600 !important;
color: #0e7490 !important;
padding: 7px 12px !important;
background: linear-gradient(135deg, #f0fdfa, #ecfeff) !important;
border-radius: 10px !important;
border: 1px solid #ccfbf1 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.2s ease !important;
}
.cloud-product-card .cloud-hl i {
margin-right: 0 !important;
font-size: 12px !important;
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(14, 116, 144, 0.1) !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
}
.cloud-product-card .cloud-hl-ev {
color: #7c3aed !important;
background: linear-gradient(135deg, #faf5ff, #f5f3ff) !important;
border-color: #ede9fe !important;
}
.cloud-product-card .cloud-hl-ev i {
background: rgba(124, 58, 237, 0.1) !important;
}
.cloud-product-card .cs-features {
list-style: none !important;
padding: 0 28px !important;
margin: 0 0 20px !important;
flex-grow: 1 !important;
}
.cloud-product-card .cs-features li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 9px 0 !important;
font-size: 13.5px !important;
color: #475569 !important;
border-bottom: 1px solid #f1f5f9 !important;
line-height: 1.5 !important;
}
.cloud-product-card .cs-features li:last-child {
border-bottom: none !important;
}
.cloud-product-card .cs-features li i {
color: #10b981 !important;
font-size: 11px !important;
min-width: 20px !important;
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(16, 185, 129, 0.1) !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
.cloud-product-card .cloud-cs-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 28px !important;
margin: 0 !important;
background: linear-gradient(135deg, #0891b2, #0e7490) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
border-radius: 0 0 20px 20px !important;
transition: all 0.3s ease !important;
letter-spacing: 0.3px !important;
margin-top: auto !important;
}
.cloud-product-card .cloud-cs-btn:hover {
background: linear-gradient(135deg, #0e7490, #155e75) !important;
color: #fff !important;
transform: none !important;
}
.cloud-product-card .cloud-btn-ev {
background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
}
.cloud-product-card .cloud-btn-ev:hover {
background: linear-gradient(135deg, #6d28d9, #5b21b6) !important;
}
.brand-products-section {
background: linear-gradient(180deg, #f8fafc 0%, #fff 50%, #f8fafc 100%) !important;
}
.cs-tabs {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.cs-tab-btn {
border-radius: 12px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.cs-tab-btn.active {
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2) !important;
}
@media (max-width: 991px) {
.cs-card-header {
padding: 24px 24px 0 !important;
}
.cloud-product-card .cs-title {
padding: 14px 24px 0 !important;
}
.cloud-product-card .cs-price {
margin: 14px 24px !important;
}
.cloud-product-card .cs-meta {
padding: 0 24px !important;
}
.cloud-product-card .cloud-highlights {
margin: 0 24px 14px !important;
}
.cloud-product-card .cs-features {
padding: 0 24px !important;
}
}
@media (max-width: 767px) {
.cs-card-header {
padding: 22px 20px 0 !important;
}
.cloud-product-card .cs-title {
padding: 12px 20px 0 !important;
font-size: 15px !important;
}
.cloud-product-card .cs-price {
margin: 12px 20px !important;
padding: 14px 16px !important;
}
.cloud-product-card .cs-price-current {
font-size: 24px !important;
}
.cloud-product-card .cs-meta {
padding: 0 20px !important;
}
.cloud-product-card .cloud-highlights {
margin: 0 20px 12px !important;
}
.cloud-product-card .cs-features {
padding: 0 20px !important;
}
.cloud-product-card .cs-features li {
font-size: 13px !important;
}
.cloud-product-card .cloud-cs-btn {
padding: 14px 20px !important;
}
.cloud-p-badge {
top: 14px !important;
right: 14px !important;
font-size: 0.62rem !important;
padding: 4px 10px !important;
}
}
@media (hover: none) and (pointer: coarse) {
.cloud-product-card:hover,
.code-signing-card:hover {
transform: none !important;
}
}
.code-signing-card {
background: #fff !important;
border-radius: 20px !important;
padding: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.code-signing-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
z-index: 3 !important;
}
.code-signing-card:hover {
border-color: #bae6fd !important;
box-shadow: 0 20px 50px rgba(6, 182, 212, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
transform: translateY(-6px) !important;
}
.code-signing-card:hover::before {
opacity: 1 !important;
}
.code-signing-card .cs-badge {
position: absolute !important;
top: 20px !important;
right: 20px !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
padding: 5px 14px !important;
border-radius: 50px !important;
z-index: 4 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.code-signing-card .cs-card-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 28px 28px 0 !important;
margin-bottom: 0 !important;
}
.code-signing-card .cs-brand-logo {
height: 26px !important;
}
.code-signing-card .cs-type-badge {
padding: 4px 12px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
margin-left: auto !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.code-signing-card .cs-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin-bottom: 0 !important;
padding: 16px 28px 0 !important;
line-height: 1.4 !important;
}
.code-signing-card .cs-title a {
color: inherit !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.code-signing-card .cs-title a:hover {
color: #0891b2 !important;
}
.code-signing-card .cs-price {
margin: 16px 28px !important;
padding: 18px 20px !important;
background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
border: 1px solid #e2e8f0 !important;
border-radius: 16px !important;
text-align: center !important;
}
.code-signing-card .cs-price-current {
font-size: 28px !important;
font-weight: 800 !important;
color: #0f172a !important;
letter-spacing: -0.5px !important;
}
.code-signing-card .cs-price-period {
font-size: 14px !important;
color: #64748b !important;
font-weight: 500 !important;
}
.code-signing-card .cs-price-discount {
display: none !important;
}
.code-signing-card .cs-meta {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding: 0 28px !important;
margin-bottom: 16px !important;
}
.code-signing-card .cs-meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
color: #64748b !important;
background: #f8fafc !important;
padding: 6px 14px !important;
border-radius: 10px !important;
border: 1px solid #f1f5f9 !important;
}
.code-signing-card .cs-meta-item i {
color: #06b6d4 !important;
font-size: 11px !important;
}
.code-signing-card .cs-features {
list-style: none !important;
padding: 0 28px !important;
margin: 0 0 20px !important;
flex-grow: 1 !important;
}
.code-signing-card .cs-features li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 9px 0 !important;
font-size: 13.5px !important;
color: #475569 !important;
border-bottom: 1px solid #f1f5f9 !important;
line-height: 1.5 !important;
}
.code-signing-card .cs-features li:last-child {
border-bottom: none !important;
}
.code-signing-card .cs-features li i {
color: #10b981 !important;
font-size: 11px !important;
min-width: 20px !important;
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(16, 185, 129, 0.1) !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
.code-signing-card .cs-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 28px !important;
margin: 0 !important;
background: linear-gradient(135deg, #0891b2, #0e7490) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
border-radius: 0 0 20px 20px !important;
transition: all 0.3s ease !important;
letter-spacing: 0.3px !important;
margin-top: auto !important;
width: 100% !important;
border: none !important;
}
.code-signing-card .cs-btn:hover {
background: linear-gradient(135deg, #0e7490, #155e75) !important;
color: #fff !important;
transform: none !important;
box-shadow: none !important;
}
@media (max-width: 991px) {
.code-signing-card .cs-card-header {
padding: 24px 24px 0 !important;
}
.code-signing-card .cs-title {
padding: 14px 24px 0 !important;
}
.code-signing-card .cs-price {
margin: 14px 24px !important;
}
.code-signing-card .cs-meta {
padding: 0 24px !important;
}
.code-signing-card .cs-features {
padding: 0 24px !important;
}
}
@media (max-width: 767px) {
.code-signing-card .cs-card-header {
padding: 22px 20px 0 !important;
}
.code-signing-card .cs-title {
padding: 12px 20px 0 !important;
font-size: 15px !important;
}
.code-signing-card .cs-price {
margin: 12px 20px !important;
padding: 14px 16px !important;
}
.code-signing-card .cs-price-current {
font-size: 24px !important;
}
.code-signing-card .cs-meta {
padding: 0 20px !important;
}
.code-signing-card .cs-features {
padding: 0 20px !important;
}
.code-signing-card .cs-features li {
font-size: 13px !important;
}
.code-signing-card .cs-btn {
padding: 14px 20px !important;
}
.code-signing-card .cs-badge {
top: 14px !important;
right: 14px !important;
font-size: 0.62rem !important;
padding: 4px 10px !important;
}
}
/* theme-pro.css */
:root {
--tp-ink: #0b1220;
--tp-ink-2: #111a2e;
--tp-text: #334155;
--tp-muted: #64748b;
--tp-line: #e5e9f0;
--tp-line-2: #eef1f6;
--tp-surface: #f7f9fc;
--tp-white: #ffffff;
--tp-brand: #2563eb;
--tp-brand-600: #1d4ed8;
--tp-brand-50: #eff4ff;
--tp-brand-100: #dbe6fe;
--tp-ok: #059669;
--tp-radius-sm: 8px;
--tp-radius: 12px;
--tp-radius-lg: 16px;
--tp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
--tp-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
--tp-shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .06);
--tp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--tp-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--tp-ease: cubic-bezier(.2, .7, .2, 1);
}
html.tp section {
animation: none !important;
}
html.tp,
html.tp body {
overflow-x: clip !important;
}
html.tp body {
font-family: var(--tp-font);
color: var(--tp-text);
background: var(--tp-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html.tp h1,
html.tp h2,
html.tp h3,
html.tp h4,
html.tp h5,
html.tp .section-title {
font-family: var(--tp-font-head);
letter-spacing: -.02em;
}
html.tp .section-title {
color: var(--tp-ink);
}
html.tp h2,
html.tp .section-title {
font-weight: 700;
}
html.tp .section-title {
font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.35rem);
line-height: 1.2;
}
html.tp .section-subtitle,
html.tp .text-muted {
color: var(--tp-muted) !important;
}
html.tp a {
text-underline-offset: 3px;
}
html.tp ::selection {
background: var(--tp-brand-100);
color: var(--tp-ink);
}
html.tp :focus-visible {
outline: 2px solid var(--tp-brand);
outline-offset: 2px;
}
html.tp .section-badge {
background: var(--tp-brand-50) !important;
border: 1px solid var(--tp-brand-100) !important;
color: var(--tp-brand-600) !important;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
}
html.tp .btn {
font-weight: 600;
border-radius: 10px;
letter-spacing: -.005em;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
html.tp .btn-lg {
padding: 14px 26px;
font-size: 15px;
}
html.tp body .btn.btn-primary,
html.tp body .btn.btn-cta-primary,
html.tp .btn-primary,
html.tp .btn-cta-primary {
background: var(--tp-brand) !important;
background-image: none !important;
border: 1px solid var(--tp-brand) !important;
border-radius: 10px !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
html.tp .btn-primary:hover,
html.tp .btn-cta-primary:hover {
background: var(--tp-brand-600) !important;
border-color: var(--tp-brand-600) !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .45);
}
html.tp .btn-outline-light {
background: rgba(255, 255, 255, .06) !important;
border: 1px solid rgba(255, 255, 255, .22) !important;
color: #fff !important;
}
html.tp .btn-outline-light:hover {
background: rgba(255, 255, 255, .12) !important;
border-color: rgba(255, 255, 255, .4) !important;
}
html.tp .btn-outline-primary {
border-color: var(--tp-line) !important;
color: var(--tp-ink) !important;
background: #fff !important;
}
html.tp .btn-outline-primary:hover {
border-color: var(--tp-brand) !important;
color: var(--tp-brand) !important;
}
html.tp .announcement-bar {
background: var(--tp-ink) !important;
color: rgba(255, 255, 255, .86);
padding: 9px 0;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
html.tp .announcement-bar .container {
justify-content: center;
gap: 10px;
}
html.tp .announcement-bar-icon {
width: auto;
height: auto;
background: none !important;
color: #60a5fa;
font-size: 12px;
}
html.tp .announcement-bar-text strong {
color: #fff;
font-weight: 600;
}
html.tp .announcement-bar-close {
background: transparent !important;
color: rgba(255, 255, 255, .5);
}
html.tp .announcement-bar-close:hover {
color: #fff;
background: rgba(255, 255, 255, .08) !important;
}
html.tp .top-bar {
background: var(--tp-surface) !important;
border-bottom: 1px solid var(--tp-line);
padding: 0;
font-size: 12.5px;
}
html.tp .top-bar .container {
min-height: 36px;
}
html.tp .top-bar a {
color: var(--tp-muted);
font-weight: 500;
}
html.tp .top-bar a:hover {
color: var(--tp-ink);
}
html.tp .top-bar a i {
color: #94a3b8;
font-size: 11px;
}
html.tp .top-bar .divider {
background: var(--tp-line);
}
html.tp .top-bar .user-greeting,
html.tp .top-bar .user-greeting i {
color: var(--tp-ok);
}
html.tp .selector-btn {
background: #fff;
border: 1px solid var(--tp-line);
color: var(--tp-text);
font-weight: 600;
padding: 3px 10px;
}
html.tp .selector-btn:hover {
background: #fff;
border-color: #cbd5e1;
color: var(--tp-ink);
}
html.tp .selector-menu {
border: 1px solid var(--tp-line);
box-shadow: var(--tp-shadow-lg);
border-radius: 10px;
}
html.tp .main-header {
background: rgba(255, 255, 255, .92) !important;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--tp-line);
box-shadow: none !important;
transition: box-shadow .2s, background-color .2s;
}
html.tp .main-header,
html.tp .main-header.scrolled {
background-color: #fff !important;
border-bottom: 1px solid var(--tp-line) !important;
}
html.tp .main-header::before,
html.tp .main-header::after,
html.tp .main-header.scrolled::after {
display: none !important;
}
html.tp .main-header .main-nav .nav-list,
html.tp .main-header .main-nav.scrolled .nav-list {
background: transparent !important;
box-shadow: none !important;
}
html.tp .main-header.scrolled {
box-shadow: 0 1px 0 var(--tp-line), 0 8px 24px -12px rgba(16, 24, 40, .18) !important;
}
html.tp .main-header>.container {
min-height: 72px;
gap: 24px;
}
html.tp .site-logo {
gap: 11px;
flex-shrink: 0;
}
html.tp .site-logo .logo-icon,
html.tp .footer-brand .logo-icon,
html.tp .mobile-logo .m-logo-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--tp-ink) !important;
background-image: none !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(16, 24, 40, .15) !important;
color: #fff;
font-size: 17px;
animation: none !important;
}
html.tp .site-logo .logo-icon i {
color: #fff;
}
html.tp .site-logo .logo-icon::before,
html.tp .site-logo .logo-icon::after {
display: none !important;
}
html.tp .site-logo .logo-name {
font-family: var(--tp-font-head);
font-size: 17px;
font-weight: 700;
color: var(--tp-ink) !important;
letter-spacing: -.02em;
background: none !important;
-webkit-text-fill-color: currentColor !important;
}
html.tp .site-logo .logo-desc {
font-size: 11px;
color: var(--tp-muted);
font-weight: 500;
letter-spacing: 0;
}
html.tp .site-logo .logo-desc i {
color: var(--tp-ok);
font-size: 10px;
}
html.tp .main-header .main-nav,
html.tp .main-header .main-nav.scrolled {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
html.tp .main-nav .nav-list {
gap: 2px;
}
html.tp .main-nav .nav-link {
font-size: 14px;
font-weight: 500;
color: var(--tp-text);
padding: 8px 12px;
border-radius: 8px;
gap: 6px;
letter-spacing: -.005em;
background: transparent !important;
}
html.tp .main-nav .nav-link>i:not(.arrow) {
display: none;
}
html.tp .main-nav .nav-link .arrow {
font-size: 9px;
color: #94a3b8;
margin-left: 2px;
transition: transform .2s var(--tp-ease);
}
html.tp .main-nav .nav-item:hover>.nav-link,
html.tp .main-nav .nav-link:hover {
color: var(--tp-ink);
background: var(--tp-surface) !important;
}
html.tp .main-nav .nav-item:hover>.nav-link .arrow {
transform: rotate(180deg);
color: var(--tp-ink);
}
html.tp .main-nav .nav-link.active {
color: var(--tp-brand) !important;
font-weight: 600;
}
html.tp .main-nav .nav-link::after,
html.tp .main-nav .nav-link::before {
display: none !important;
}
html.tp .main-nav .nav-link .badge {
background: var(--tp-brand-50) !important;
color: var(--tp-brand-600) !important;
border: 1px solid var(--tp-brand-100);
font-size: 10px !important;
font-weight: 600;
padding: 2px 6px;
border-radius: 999px;
letter-spacing: .01em;
line-height: 1.2;
margin-left: 2px !important;
}
html.tp .main-header .dropdown,
html.tp .main-header .mega-menu {
background: #fff !important;
border: 1px solid var(--tp-line) !important;
border-top: 1px solid var(--tp-line) !important;
border-radius: 14px !important;
box-shadow: var(--tp-shadow-lg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 8px !important;
animation: none !important;
}
html.tp .main-header .dropdown {
min-width: 290px !important;
}
@media (min-width: 992px) {
html.tp .main-header .main-nav,
html.tp .main-header .nav-list {
align-self: stretch;
align-items: stretch !important;
}
html.tp .main-header .main-nav .nav-item {
display: flex !important;
align-items: center !important;
min-height: 72px;
}
html.tp .main-header .nav-item>.dropdown,
html.tp .main-header .nav-item>.mega-menu {
top: calc(100% - 6px) !important;
}
}
html.tp .main-header .dropdown::before,
html.tp .main-header .mega-menu::before {
display: none !important;
}
html.tp .main-header .dropdown-item {
border-radius: 10px !important;
padding: 10px 12px !important;
gap: 12px !important;
align-items: flex-start !important;
color: var(--tp-text) !important;
background: transparent !important;
border: 0 !important;
transform: none !important;
transition: background-color .12s !important;
}
html.tp .main-header .dropdown-item:hover {
background: var(--tp-surface) !important;
transform: none !important;
}
html.tp .main-header .dropdown-item>i,
html.tp .main-header .dropdown-item i:first-child {
width: 34px !important;
height: 34px !important;
flex: 0 0 34px !important;
border-radius: 9px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
background: var(--tp-brand-50) !important;
color: var(--tp-brand) !important;
border: 1px solid var(--tp-brand-100) !important;
transform: none !important;
box-shadow: none !important;
}
html.tp .main-header .dropdown-item strong {
display: block !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--tp-ink) !important;
-webkit-text-fill-color: currentColor !important;
}
html.tp .main-header .dropdown-item small {
display: block !important;
font-size: 12.5px !important;
color: var(--tp-muted) !important;
margin-top: 1px !important;
}
html.tp .main-header .mega-menu {
padding: 20px !important;
}
html.tp .main-header .mega-columns {
gap: 16px !important;
}
html.tp .main-header .mega-column {
gap: 2px !important;
}
html.tp .main-header .mega-title {
font-family: var(--tp-font) !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--tp-muted) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
padding: 0 10px 8px !important;
margin: 0 0 6px !important;
border-bottom: 1px solid var(--tp-line-2) !important;
}
html.tp .main-header .mega-card {
border-radius: 10px !important;
padding: 9px 10px !important;
gap: 12px !important;
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
transform: none !important;
}
html.tp .main-header .mega-card:hover {
background: var(--tp-surface) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
html.tp .main-header .mega-card-icon {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
flex: 0 0 34px !important;
border-radius: 9px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
background: var(--tp-surface) !important;
color: var(--tp-ink) !important;
border: 1px solid var(--tp-line) !important;
box-shadow: none !important;
}
html.tp .main-header .mega-card-icon i {
color: var(--tp-text) !important;
font-size: 14px !important;
}
html.tp .main-header .mega-card-icon.icon-ev {
background: var(--tp-ink) !important;
color: #fff !important;
border-color: var(--tp-ink) !important;
}
html.tp .main-header .mega-card-icon.icon-ov,
html.tp .main-header .mega-card-icon.icon-dv {
background: var(--tp-brand-50) !important;
color: var(--tp-brand-600) !important;
border-color: var(--tp-brand-100) !important;
}
html.tp .main-header .mega-card-icon.icon-cloud,
html.tp .main-header .mega-card-icon.icon-ucc {
font-size: 7.5px !important;
background: #ecfdf5 !important;
color: #047857 !important;
border-color: #d1fae5 !important;
}
html.tp .main-header .mega-card-text strong {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--tp-ink) !important;
-webkit-text-fill-color: var(--tp-ink) !important;
}
html.tp .main-header .mega-card-text small {
font-size: 12.5px !important;
color: var(--tp-muted) !important;
}
html.tp .main-header .mega-menu .mega-footer {
border-top: 1px solid var(--tp-line-2) !important;
margin-top: 14px !important;
padding-top: 12px !important;
background: none !important;
}
html.tp .main-header .mega-menu .mega-footer a {
color: var(--tp-brand) !important;
font-weight: 600 !important;
font-size: 13.5px !important;
}
html.tp .main-header .mega-menu .mega-footer a:hover {
color: var(--tp-brand-600) !important;
}
html.tp .header-actions {
gap: 8px;
}
html.tp .header-actions .action-btn {
width: 40px;
height: 40px;
border-radius: 10px;
background: #fff !important;
border: 1px solid var(--tp-line) !important;
color: var(--tp-text) !important;
box-shadow: none !important;
}
html.tp .header-actions .action-btn:hover {
border-color: #cbd5e1 !important;
color: var(--tp-ink) !important;
background: var(--tp-surface) !important;
}
html.tp .cart-badge {
background: var(--tp-brand) !important;
border: 2px solid #fff;
font-weight: 700;
}
html.tp .auth-buttons {
gap: 6px;
}
html.tp .btn-login,
html.tp .btn-register {
height: 40px;
padding: 0 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
display: inline-flex;
align-items: center;
gap: 7px;
}
html.tp .btn-login {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--tp-text) !important;
}
html.tp .btn-login:hover {
background: var(--tp-surface) !important;
color: var(--tp-ink) !important;
}
html.tp .btn-login i {
display: none;
}
html.tp .btn-register {
background: var(--tp-ink) !important;
background-image: none !important;
border: 1px solid var(--tp-ink) !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .15) !important;
}
html.tp .btn-register:hover {
background: var(--tp-brand) !important;
border-color: var(--tp-brand) !important;
transform: none;
}
html.tp .btn-register i {
font-size: 12px;
}
html.tp .user-btn {
height: 40px;
border-radius: 10px;
border: 1px solid var(--tp-line) !important;
background: #fff !important;
color: var(--tp-ink);
font-weight: 600;
}
html.tp .user-avatar {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff;
}
html.tp .user-menu {
border: 1px solid var(--tp-line);
border-radius: 14px;
box-shadow: var(--tp-shadow-lg);
}
html.tp .mobile-toggle {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--tp-line);
background: #fff;
}
html.tp .mobile-toggle span {
background: var(--tp-ink) !important;
height: 2px;
border-radius: 2px;
}
html.tp .mobile-menu {
background: #fff;
box-shadow: -24px 0 48px -12px rgba(16, 24, 40, .25);
}
html.tp .mobile-menu-header {
border-bottom: 1px solid var(--tp-line);
}
html.tp .mobile-link,
html.tp .mobile-menu-toggle {
color: var(--tp-ink);
font-weight: 500;
border-radius: 10px;
}
html.tp .mobile-link i,
html.tp .mobile-menu-toggle .toggle-left i {
color: var(--tp-muted);
}
html.tp .mobile-menu,
html.tp .mobile-menu-body {
background: #fff !important;
background-image: none !important;
}
html.tp .mobile-logo,
html.tp .mobile-logo span:not(.m-logo-icon) {
color: var(--tp-ink) !important;
background: none !important;
-webkit-text-fill-color: var(--tp-ink) !important;
font-family: var(--tp-font-head);
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: -.02em;
}
html.tp .mobile-logo .m-logo-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 38px;
}
html.tp .mobile-logo .m-logo-icon i {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 16px;
}
html.tp .mobile-link,
html.tp .mobile-menu-toggle,
html.tp .mobile-menu-toggle .toggle-left {
font-size: 15px !important;
font-weight: 500 !important;
color: var(--tp-ink) !important;
}
html.tp .mobile-submenu .mobile-link {
font-size: 14px !important;
color: var(--tp-text) !important;
}
html.tp .mobile-menu-toggle .toggle-arrow {
background: transparent !important;
color: var(--tp-muted) !important;
}
html.tp .mobile-menu .badge {
background: var(--tp-brand-50) !important;
color: var(--tp-brand-600) !important;
border: 1px solid var(--tp-brand-100);
font-weight: 600;
border-radius: 999px;
}
html.tp .mobile-close {
background: var(--tp-surface) !important;
color: var(--tp-ink) !important;
border: 1px solid var(--tp-line) !important;
border-radius: 10px !important;
}
html.tp .mobile-link:hover,
html.tp .mobile-menu-toggle:hover {
background: var(--tp-surface);
}
html.tp .mobile-btn.primary {
background: var(--tp-ink) !important;
background-image: none !important;
border-color: var(--tp-ink) !important;
color: #fff !important;
}
html.tp .mobile-btn.outline {
border: 1px solid var(--tp-line) !important;
color: var(--tp-ink) !important;
background: #fff !important;
}
html.tp .mobile-backdrop {
background: rgba(11, 18, 32, .45);
backdrop-filter: blur(2px);
}
@media (min-width: 1400px) {
html.tp .main-header>.container {
max-width: 1400px;
}
}
html.tp .main-nav {
min-width: 0;
}
html.tp .main-nav .nav-list {
justify-content: center;
flex-wrap: nowrap;
}
html.tp .main-nav .nav-link {
white-space: nowrap;
}
@media (max-width: 1599px) {
html.tp .main-nav .nav-link .badge {
font-size: 0 !important;
display: inline-block !important;
flex: 0 0 6px;
width: 6px !important;
height: 6px !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--tp-brand) !important;
align-self: flex-start;
margin: 4px 0 0 1px !important;
}
}
@media (max-width: 1360px) {
html.tp .main-nav .nav-link {
padding: 8px 9px;
font-size: 13.5px;
}
html.tp .main-header>.container {
gap: 14px;
}
html.tp .btn-login {
padding: 0 10px !important;
}
html.tp .btn-register i {
display: none;
}
}
@media (max-width: 1240px) {
html.tp .site-logo .logo-desc {
display: none;
}
html.tp .main-nav .nav-link {
padding: 8px 7px;
font-size: 13px;
}
html.tp .main-nav .nav-link .arrow {
display: none;
}
}
@media (max-width: 991px) {
html.tp .main-header>.container {
min-height: 64px;
}
html.tp .site-logo .logo-desc {
display: flex;
}
}
html.tp .hero-slider-section {
background: var(--tp-ink) !important;
}
html.tp .hero-slide {
background: radial-gradient(1200px 600px at 85% 10%, rgba(37, 99, 235, .22), transparent 60%),
radial-gradient(800px 500px at 0% 100%, rgba(37, 99, 235, .10), transparent 60%),
var(--tp-ink) !important;
}
html.tp .hero-slide-overlay {
background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important;
background-size: 56px 56px !important;
-webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
opacity: 1 !important;
}
html.tp .hero-badge {
background: rgba(255, 255, 255, .06) !important;
border: 1px solid rgba(255, 255, 255, .12) !important;
color: rgba(255, 255, 255, .85) !important;
font-size: 13px;
font-weight: 500;
border-radius: 999px;
padding: 6px 14px;
backdrop-filter: none;
}
html.tp .hero-badge i {
color: #60a5fa !important;
}
html.tp .hero-title {
font-family: var(--tp-font-head);
font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -.035em !important;
color: #fff !important;
}
html.tp .hero-title span {
background: linear-gradient(90deg, #93c5fd, #60a5fa) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
html.tp .hero-description {
color: rgba(226, 232, 240, .78) !important;
font-size: 17px;
line-height: 1.65;
max-width: 540px;
}
html.tp .hero-cs-widget .cs-widget-card {
background: rgba(17, 26, 46, .82) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
border-radius: 14px !important;
}
html.tp .hero-stats-bar {
background: rgba(255, 255, 255, .02) !important;
border-top: 1px solid rgba(255, 255, 255, .06) !important;
backdrop-filter: none !important;
}
html.tp .hero-stat-value {
font-family: var(--tp-font-head);
font-weight: 700 !important;
letter-spacing: -.03em;
color: #fff !important;
background: none !important;
-webkit-text-fill-color: #fff !important;
}
html.tp .hero-stat-label {
color: rgba(226, 232, 240, .6) !important;
font-size: 13px;
font-weight: 500;
}
html.tp .carousel-indicators [data-bs-target] {
background-color: rgba(255, 255, 255, .35);
height: 3px;
border-radius: 2px;
}
html.tp .carousel-indicators .active,
html.tp .carousel-indicators .active::after,
html.tp .carousel-indicators .active::before {
background-color: #fff !important;
background-image: none !important;
}
html.tp .page-hero-modern,
html.tp .category-hero,
html.tp .tools-hero,
html.tp .ref-hero,
html.tp .rd-hero,
html.tp .product-hero-v2,
html.tp .about-hero,
html.tp .ab-cta {
background: radial-gradient(1000px 520px at 85% 0%, rgba(37, 99, 235, .24), transparent 60%),
radial-gradient(700px 420px at 0% 100%, rgba(37, 99, 235, .10), transparent 60%),
var(--tp-ink) !important;
color: #fff;
}
html.tp .page-hero-modern::before,
html.tp .page-hero-modern::after {
display: none !important;
}
html.tp .page-hero-bg {
opacity: .5 !important;
background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) !important;
background-color: transparent !important;
background-size: 56px 56px !important;
}
html.tp .page-hero-title {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
line-height: 1.12 !important;
}
html.tp .page-hero-title span {
background: linear-gradient(90deg, #93c5fd, #60a5fa) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
html.tp .page-hero-desc {
color: rgba(226, 232, 240, .78) !important;
}
html.tp .page-hero-modern .breadcrumb-nav {
background: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html.tp .page-hero-modern .breadcrumb-nav a,
html.tp .page-hero-modern .breadcrumb-nav span,
html.tp .page-hero-modern .breadcrumb-nav i {
color: rgba(226, 232, 240, .7) !important;
}
html.tp .page-hero-modern .breadcrumb-nav [aria-current],
html.tp .page-hero-modern .breadcrumb-nav .active {
color: #fff !important;
background: rgba(255, 255, 255, .08) !important;
}
html.tp .features-section,
html.tp .seo-types-section,
html.tp .brand-products-section,
html.tp .trust-section {
background: var(--tp-surface) !important;
}
html.tp .seo-info-section,
html.tp .seo-usecases-section,
html.tp .steps-section,
html.tp .faq-section {
background: #fff !important;
}
html.tp .feature-card,
html.tp .step-card,
html.tp .seo-type-card,
html.tp .seo-usecase-card,
html.tp .cloud-product-card,
html.tp .product-card,
html.tp .info-card,
html.tp .pricing-card {
background: #fff !important;
border: 1px solid var(--tp-line) !important;
border-radius: var(--tp-radius-lg) !important;
box-shadow: var(--tp-shadow-sm) !important;
backdrop-filter: none !important;
transition: border-color .2s, box-shadow .2s, transform .2s var(--tp-ease);
}
html.tp .feature-card:hover,
html.tp .step-card:hover,
html.tp .seo-type-card:hover,
html.tp .seo-usecase-card:hover,
html.tp .cloud-product-card:hover,
html.tp .product-card:hover,
html.tp .pricing-card:hover {
border-color: #cfd8e6 !important;
box-shadow: var(--tp-shadow-lg) !important;
transform: translateY(-2px);
}
html.tp .feature-card::before,
html.tp .feature-card::after,
html.tp .step-card::before {
display: none !important;
}
html.tp .feature-icon {
width: 44px !important;
height: 44px !important;
border-radius: 11px !important;
background: var(--tp-brand-50) !important;
color: var(--tp-brand) !important;
border: 1px solid var(--tp-brand-100);
box-shadow: none !important;
font-size: 18px !important;
}
html.tp .feature-icon i {
color: var(--tp-brand) !important;
}
html.tp .feature-title {
font-size: 17px !important;
font-weight: 600 !important;
color: var(--tp-ink) !important;
}
html.tp .step-number {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
box-shadow: 0 0 0 6px var(--tp-surface) !important;
font-weight: 700;
}
html.tp .info-card {
background: var(--tp-surface) !important;
box-shadow: none !important;
}
html.tp .info-card .text-primary {
color: var(--tp-brand) !important;
}
html.tp .cloud-cs-btn {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
font-weight: 600;
transition: background-color .15s;
}
html.tp .cloud-cs-btn:hover {
background: var(--tp-brand) !important;
}
html.tp .cloud-product-card:hover .cloud-cs-btn {
background: var(--tp-brand) !important;
}
html.tp .cs-tab-btn {
background: #fff !important;
border: 1px solid var(--tp-line) !important;
color: var(--tp-text) !important;
border-radius: 10px !important;
box-shadow: var(--tp-shadow-sm) !important;
font-weight: 600;
}
html.tp .cs-tab-btn i {
color: var(--tp-muted) !important;
}
html.tp .cs-tab-btn.active,
html.tp .cs-tab-btn:hover {
background: var(--tp-ink) !important;
border-color: var(--tp-ink) !important;
color: #fff !important;
}
html.tp .cs-tab-btn.active i,
html.tp .cs-tab-btn:hover i {
color: #fff !important;
}
html.tp .cs-tab-btn .badge,
html.tp .cs-tab-btn span[class*="count"] {
background: rgba(255, 255, 255, .16) !important;
color: inherit !important;
}
html.tp .cloud-p-badge,
html.tp .premium-badge {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
font-weight: 600;
letter-spacing: .02em;
}
html.tp .cloud-type-badge {
background: var(--tp-surface) !important;
color: var(--tp-text) !important;
border: 1px solid var(--tp-line) !important;
font-weight: 600;
}
html.tp .cloud-product-card.cloud-premium {
border-color: var(--tp-line) !important;
}
html.tp .seo-how-works-box {
background: var(--tp-surface) !important;
background-image: none !important;
border: 1px solid var(--tp-line) !important;
box-shadow: none !important;
border-radius: var(--tp-radius-lg) !important;
}
html.tp .seo-how-works-box i,
html.tp .seo-how-works-box h3 i,
html.tp .seo-how-works-box h4 i {
color: var(--tp-brand) !important;
}
html.tp .seo-hw-num {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
border-radius: 8px !important;
}
html.tp .seo-type-badge {
background: var(--tp-brand-50) !important;
background-image: none !important;
color: var(--tp-brand-600) !important;
border: 1px solid var(--tp-brand-100) !important;
box-shadow: none !important;
}
html.tp .seo-type-badge.ev {
background: var(--tp-ink) !important;
color: #fff !important;
border-color: var(--tp-ink) !important;
}
html.tp .seo-usecase-icon {
background: var(--tp-brand-50) !important;
background-image: none !important;
color: var(--tp-brand) !important;
border: 1px solid var(--tp-brand-100);
box-shadow: none !important;
}
html.tp .seo-usecase-icon i {
color: var(--tp-brand) !important;
}
html.tp .stat-number {
background: none !important;
-webkit-text-fill-color: var(--tp-ink) !important;
color: var(--tp-ink) !important;
font-family: var(--tp-font-head);
font-weight: 700 !important;
letter-spacing: -.03em;
}
html.tp section .trust-icon {
background: var(--tp-brand-50) !important;
background-image: none !important;
color: var(--tp-brand) !important;
border: 1px solid var(--tp-brand-100);
}
html.tp section .trust-icon i {
color: var(--tp-brand) !important;
}
html.tp .cloud-hl {
background: var(--tp-surface) !important;
background-image: none !important;
color: var(--tp-text) !important;
border: 1px solid var(--tp-line-2);
}
html.tp .cloud-hl i {
color: var(--tp-ok) !important;
}
html.tp .cs-wfloat-icon {
background: rgba(255, 255, 255, .06) !important;
background-image: none !important;
color: #93c5fd !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
box-shadow: none !important;
}
html.tp .cs-widget-verified {
background: rgba(255, 255, 255, .03) !important;
background-image: none !important;
color: rgba(226, 232, 240, .8) !important;
border-color: rgba(255, 255, 255, .06) !important;
}
html.tp .cs-widget-features i,
html.tp .cs-widget-verified i {
color: #60a5fa !important;
}
html.tp .blog-v2-bg-glow {
display: none !important;
}
html.tp .blog-v2-badge,
html.tp .blog-v2-cat {
background: rgba(255, 255, 255, .06) !important;
background-image: none !important;
color: rgba(226, 232, 240, .85) !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
}
html.tp .blog-v2-badge-dot {
background: #60a5fa !important;
box-shadow: none !important;
}
html.tp .blog-v2-cta,
html.tp .blog-v2-read-link {
color: #93c5fd !important;
border-color: rgba(147, 197, 253, .3) !important;
}
html.tp .blog-v2-cta:hover,
html.tp .blog-v2-read-link:hover {
color: #fff !important;
border-color: rgba(255, 255, 255, .5) !important;
}
html.tp .blog-v2-title {
color: #fff !important;
font-weight: 700 !important;
}
html.tp .blog-v2-title span,
html.tp .blog-v2-title .highlight {
background: none !important;
-webkit-text-fill-color: #93c5fd !important;
color: #93c5fd !important;
}
html.tp .seo-type-card.featured {
border-color: var(--tp-ink) !important;
box-shadow: 0 0 0 1px var(--tp-ink), var(--tp-shadow-lg) !important;
}
html.tp .seo-type-card.featured::before,
html.tp .pt-popular-badge {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
font-weight: 600 !important;
letter-spacing: .02em;
}
html.tp .ev-section-badge,
html.tp .cloud-section-badge,
html.tp .ab-section-badge,
html.tp [class*="-section-badge"] {
background: var(--tp-brand-50) !important;
background-image: none !important;
border: 1px solid var(--tp-brand-100) !important;
color: var(--tp-brand-600) !important;
-webkit-text-fill-color: var(--tp-brand-600) !important;
box-shadow: none !important;
font-weight: 600 !important;
}
html.tp [class*="-section-badge"] i {
color: var(--tp-brand) !important;
}
html.tp .ev-uc-tag,
html.tp .cloud-uc-tag {
background: var(--tp-surface) !important;
background-image: none !important;
border: 1px solid var(--tp-line) !important;
color: var(--tp-text) !important;
}
html.tp .table thead,
html.tp .table thead th {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
border-color: var(--tp-ink) !important;
}
html.tp .accordion-button:not(.collapsed) {
color: var(--tp-ink) !important;
}
html.tp .accordion-button:focus {
border-color: var(--tp-line) !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
html.tp .faq-item {
border-color: var(--tp-line) !important;
}
html.tp .faq-item.active,
html.tp .faq-item:hover {
border-color: #cfd8e6 !important;
}
html.tp .btn-purchase,
html.tp .ab-cta-btn,
html.tp .ab-submit-btn,
html.tp .btn-guide,
html.tp .product-btn,
html.tp .cd-hero-btn.primary {
background: var(--tp-brand) !important;
background-image: none !important;
color: #fff !important;
border-color: var(--tp-brand) !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .1) !important;
}
html.tp .btn-purchase:hover,
html.tp .ab-cta-btn:hover,
html.tp .ab-submit-btn:hover,
html.tp .btn-guide:hover,
html.tp .product-btn:hover,
html.tp .cd-hero-btn.primary:hover {
background: var(--tp-brand-600) !important;
border-color: var(--tp-brand-600) !important;
}
html.tp .btn-cta {
color: var(--tp-ink) !important;
border-color: var(--tp-line) !important;
}
html.tp .seo-step-num {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
}
html.tp .seo-cta-box {
background: var(--tp-ink) !important;
background-image: radial-gradient(600px 300px at 90% 0%, rgba(37, 99, 235, .3), transparent 60%) !important;
border-radius: var(--tp-radius-lg) !important;
box-shadow: none !important;
}
html.tp .seo-cta-box .btn {
background: #fff !important;
color: var(--tp-ink) !important;
border-color: #fff !important;
}
html.tp .type-info-bar {
background: var(--tp-surface) !important;
background-image: none !important;
border-color: var(--tp-line) !important;
color: var(--tp-text) !important;
}
html.tp .type-info-bar i {
color: var(--tp-brand) !important;
}
html.tp .product-type {
background: var(--tp-surface) !important;
color: var(--tp-text) !important;
border: 1px solid var(--tp-line) !important;
}
html.tp .comparison-section {
background: var(--tp-surface) !important;
background-image: none !important;
}
html.tp .breadcrumb-current {
background: rgba(255, 255, 255, .08) !important;
background-image: none !important;
border-color: rgba(255, 255, 255, .12) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
html.tp .kb-category-count {
background: var(--tp-brand-50) !important;
background-image: none !important;
color: var(--tp-brand-600) !important;
}
html.tp .page-item.active .page-link,
html.tp .page-link.active {
background: var(--tp-ink) !important;
border-color: var(--tp-ink) !important;
color: #fff !important;
}
html.tp .page-link {
color: var(--tp-text);
border-color: var(--tp-line);
}
html.tp .sidebar-widget {
border-color: var(--tp-line) !important;
box-shadow: none !important;
}
html.tp .cs-title a {
color: var(--tp-ink) !important;
background-image: linear-gradient(var(--tp-brand), var(--tp-brand)) !important;
}
html.tp .cs-title a:hover {
color: var(--tp-brand) !important;
}
html.tp .cloud-hl.cloud-hl-ev {
background: var(--tp-surface) !important;
background-image: none !important;
color: var(--tp-text) !important;
border: 1px solid var(--tp-line-2) !important;
}
html.tp .cloud-hl.cloud-hl-ev i {
color: var(--tp-brand) !important;
}
html.tp .feature-card .feature-icon[class*="icon-"] {
background: var(--tp-brand-50) !important;
background-image: none !important;
color: var(--tp-brand) !important;
}
html.tp .cs-tab-content>div {
background-image: none !important;
}
html.tp .table td strong,
html.tp .table td a {
color: var(--tp-ink) !important;
}
html.tp .table td a:hover {
color: var(--tp-brand) !important;
}
html.tp .newsletter-widget {
background: var(--tp-ink) !important;
background-image: none !important;
border-color: var(--tp-ink) !important;
}
html.tp .comparison-card.featured {
border-color: var(--tp-ink) !important;
box-shadow: 0 0 0 1px var(--tp-ink), var(--tp-shadow-lg) !important;
}
html.tp .ref-stat-value span,
html.tp [class*="hero"] h1 span,
html.tp h1 span[style*="gradient"] {
background: linear-gradient(90deg, #93c5fd, #60a5fa) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
html.tp a.btn[style*="gradient"],
html.tp a[style*="#667eea"],
html.tp a[style*="#6366f1"],
html.tp a[style*="#8b5cf6"],
html.tp a[style*="#7c3aed"] {
background: var(--tp-brand) !important;
background-image: none !important;
border-color: var(--tp-brand) !important;
color: #fff !important;
}
html.tp span[style*="#818cf8"],
html.tp span[style*="#6366f1"],
html.tp span[style*="#8b5cf6"],
html.tp span[style*="#7c3aed"],
html.tp span[style*="#a78bfa"] {
color: var(--tp-brand) !important;
border-color: var(--tp-brand-100) !important;
}
html.tp .seo-guide-2026 .text-center>span,
html.tp .faq-section .text-center>span {
color: var(--tp-brand-600) !important;
background: var(--tp-brand-50) !important;
border-color: var(--tp-brand-100) !important;
}
html.tp .quick-stat .stat-icon,
html.tp .short-desc-icon,
html.tp .step-icon,
html.tp .type-icon.ev {
background: var(--tp-brand) !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
}
html.tp .short-desc-icon i,
html.tp .step-icon i {
color: #fff !important;
}
html.tp .hero-feature-item i {
background: rgba(255, 255, 255, .06) !important;
background-image: none !important;
color: #93c5fd !important;
border: 1px solid rgba(255, 255, 255, .08);
}
html.tp .hero-feature-item:hover {
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .14) !important;
transform: none !important;
}
html.tp .usecase-icon {
background: var(--tp-brand-50) !important;
background-image: none !important;
color: var(--tp-brand) !important;
border: 1px solid var(--tp-brand-100);
}
html.tp .usecase-icon i {
color: var(--tp-brand) !important;
}
html.tp .process-connector {
background: var(--tp-line) !important;
background-image: none !important;
}
html.tp .trust-item-v2 i,
html.tp .trust-bar-item i {
color: var(--tp-brand) !important;
}
html.tp .blog-link,
html.tp .blog-link i {
color: var(--tp-brand) !important;
}
html.tp .price-display>div[class=""],
html.tp .price-display>div:not([class]) {
background: var(--tp-surface) !important;
background-image: none !important;
color: var(--tp-text) !important;
border-color: var(--tp-line) !important;
}
html.tp .price-display>div:not([class]) i {
color: var(--tp-brand) !important;
}
html.tp .breadcrumb-nav .breadcrumb-link {
color: rgba(226, 232, 240, .75) !important;
}
html.tp .breadcrumb-nav .breadcrumb-link:hover {
color: #fff !important;
}
html.tp .ab-hero-visual {
background: rgba(255, 255, 255, .03) !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html.tp .ab-hv-icon {
background: var(--tp-brand) !important;
background-image: none !important;
box-shadow: none !important;
}
html.tp .about-hero i:not(.ab-hv-icon i) {
background-color: rgba(255, 255, 255, .06) !important;
color: #93c5fd !important;
}
html.tp .about-hero h1 span:not([class]) {
color: #93c5fd !important;
}
html.tp .auth-page {
background: var(--tp-surface) !important;
}
html.tp .auth-left {
background: radial-gradient(900px 500px at 90% 0%, rgba(37, 99, 235, .26), transparent 60%),
var(--tp-ink) !important;
}
html.tp .auth-left::before {
background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important;
background-size: 48px 48px !important;
}
html.tp .auth-logo i,
html.tp .auth-logo strong,
html.tp .auth-feature i {
color: #93c5fd !important;
}
html.tp .auth-hero h1 {
font-family: var(--tp-font-head);
font-weight: 700;
letter-spacing: -.03em;
color: #fff;
}
html.tp .auth-feature {
background: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: var(--tp-radius) !important;
}
html.tp .auth-right {
background: #fff !important;
}
html.tp .auth-form-header h2 {
font-family: var(--tp-font-head);
font-weight: 700;
letter-spacing: -.02em;
color: var(--tp-ink);
}
html.tp .input-icon input,
html.tp .auth-form input[type="text"],
html.tp .auth-form input[type="email"],
html.tp .auth-form input[type="password"],
html.tp .auth-form input[type="tel"],
html.tp .auth-form select {
border: 1px solid #d5dce7 !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: var(--tp-shadow-sm);
}
html.tp .input-icon input:focus,
html.tp .auth-form input:focus,
html.tp .auth-form select:focus {
border-color: var(--tp-brand) !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}
html.tp .checkbox-label input:checked+.checkmark {
background: var(--tp-brand) !important;
border-color: var(--tp-brand) !important;
}
html.tp .checkbox-label a,
html.tp .forgot-link,
html.tp .auth-footer a {
color: var(--tp-brand) !important;
font-weight: 600;
}
html.tp .social-btn,
html.tp .btn-social {
border: 1px solid var(--tp-line) !important;
background: #fff !important;
color: var(--tp-ink) !important;
border-radius: 10px !important;
}
html.tp .ev-uc-icon,
html.tp .use-case-icon,
html.tp .dl-icon,
html.tp .ev-intro-icon,
html.tp .ev-step-icon,
html.tp .intro-feature-icon,
html.tp .cloud-adv-icon,
html.tp .ev-adv-icon,
html.tp .kb-category-icon,
html.tp .ab-mv-icon,
html.tp .ab-feat-icon,
html.tp .ab-stat-icon,
html.tp .hero-card-icon,
html.tp .comparison-icon,
html.tp .support-card-icon,
html.tp .contact-card-icon {
background: var(--tp-brand-50) !important;
background-image: none !important;
border: 1px solid var(--tp-brand-100) !important;
color: var(--tp-brand) !important;
box-shadow: none !important;
}
html.tp .ev-uc-icon i,
html.tp .use-case-icon i,
html.tp .dl-icon i,
html.tp .ev-intro-icon i,
html.tp .ev-step-icon i,
html.tp .intro-feature-icon i,
html.tp .cloud-adv-icon i,
html.tp .ev-adv-icon i,
html.tp .kb-category-icon i,
html.tp .ab-mv-icon i,
html.tp .ab-feat-icon i,
html.tp .ab-stat-icon i,
html.tp .hero-card-icon i,
html.tp .comparison-icon i,
html.tp .support-card-icon i,
html.tp .contact-card-icon i,
html.tp .contact-item .icon i,
html.tp .cloud-hl i,
html.tp .type-info-bar i,
html.tp .faq-question i,
html.tp .download-section-title i {
color: var(--tp-brand) !important;
}
html.tp .ev-step-number,
html.tp .highlight-number {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
box-shadow: none !important;
}
html.tp .type-info-bar,
html.tp .type-info-bar div {
background: var(--tp-surface) !important;
background-image: none !important;
color: var(--tp-text) !important;
border-color: var(--tp-line) !important;
}
html.tp .ev-visual-badge,
html.tp .cloud-visual-badge {
background: var(--tp-ink) !important;
background-image: none !important;
color: #fff !important;
border-color: var(--tp-ink) !important;
}
html.tp .ev-visual-badge *,
html.tp .cloud-visual-badge * {
color: #fff !important;
}
html.tp .kb-read-more {
color: var(--tp-brand) !important;
}
html.tp .smartscreen-comparison h4 {
color: var(--tp-ink) !important;
}
html.tp body::before,
html.tp body::after {
display: none !important;
}
html.tp .accordion-item {
border: 1px solid var(--tp-line) !important;
border-radius: var(--tp-radius) !important;
overflow: hidden;
margin-bottom: 10px;
box-shadow: none !important;
}
html.tp .accordion-button {
font-weight: 600;
color: var(--tp-ink) !important;
background: #fff !important;
box-shadow: none !important;
}
html.tp .accordion-button:not(.collapsed) {
background: var(--tp-surface) !important;
}
html.tp .blog-section-v2 {
background: var(--tp-ink) !important;
}
html.tp .blog-v2-card {
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: var(--tp-radius-lg) !important;
background: var(--tp-ink-2) !important;
}
html.tp .form-control,
html.tp .form-select {
border: 1px solid #d5dce7;
border-radius: 10px;
color: var(--tp-ink);
box-shadow: var(--tp-shadow-sm);
}
html.tp .form-control:focus,
html.tp .form-select:focus {
border-color: var(--tp-brand);
box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
html.tp .site-footer {
background: var(--tp-ink) !important;
color: rgba(226, 232, 240, .66);
}
html.tp .site-footer::before,
html.tp .site-footer::after {
display: none !important;
}
html.tp .footer-brand .logo-name {
color: #fff !important;
font-family: var(--tp-font-head);
font-weight: 700;
-webkit-text-fill-color: #fff !important;
}
html.tp .footer-brand .logo-icon {
background: #fff !important;
color: var(--tp-ink) !important;
}
html.tp .footer-brand .logo-icon i {
color: var(--tp-ink) !important;
}
html.tp .footer-brand .brand-desc {
color: rgba(226, 232, 240, .6);
font-size: 14px;
line-height: 1.7;
}
html.tp .footer-column h4 {
font-family: var(--tp-font);
color: #fff !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .02em;
margin-bottom: 16px;
}
html.tp .footer-column h4::after {
display: none !important;
}
html.tp .footer-links a {
color: rgba(226, 232, 240, .62) !important;
font-size: 14px;
gap: 0 !important;
padding: 4px 0 !important;
transform: none !important;
}
html.tp .footer-links a:hover {
color: #fff !important;
}
html.tp .footer-links .link-icon {
display: none !important;
}
html.tp .footer-contact .icon {
background: rgba(255, 255, 255, .06) !important;
color: rgba(255, 255, 255, .8) !important;
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: none !important;
}
html.tp .footer-contact a {
color: #fff !important;
font-weight: 500;
}
html.tp .footer-trust-bar {
border-top: 1px solid rgba(255, 255, 255, .07) !important;
border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
background: transparent !important;
}
html.tp .footer-trust-item .trust-icon {
background: rgba(255, 255, 255, .06) !important;
color: #93c5fd !important;
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: none !important;
}
html.tp .footer-trust-item .trust-info strong {
color: #fff;
font-weight: 600;
}
html.tp .footer-trust-item .trust-info small {
color: rgba(226, 232, 240, .5);
}
html.tp .footer-bottom-bar {
background: transparent !important;
color: rgba(226, 232, 240, .5);
font-size: 13px;
}
html.tp #scroll-progress {
background: var(--tp-brand) !important;
height: 2px !important;
}
html.tp .back-to-top {
background: #fff !important;
color: var(--tp-ink) !important;
border: 1px solid var(--tp-line) !important;
box-shadow: var(--tp-shadow) !important;
border-radius: 12px !important;
}
html.tp .whatsapp-btn {
box-shadow: 0 8px 24px -6px rgba(37, 211, 102, .5) !important;
animation: none !important;
}
html.tp .whatsapp-btn::before,
html.tp .whatsapp-btn::after {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
html.tp *,
html.tp *::before,
html.tp *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
html.tp .top-bar {
background: #0b1220 !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
font-size: 13px;
}
html.tp .top-bar .container {
min-height: 40px;
flex-wrap: nowrap;
}
html.tp .top-bar a,
html.tp .top-bar .user-greeting {
color: rgba(226, 232, 240, .72) !important;
}
html.tp .top-bar a:hover {
color: #fff !important;
}
html.tp .top-bar a i {
color: #7dd3fc !important;
}
html.tp .top-bar .divider {
background: rgba(255, 255, 255, .12) !important;
}
html.tp .top-bar-left {
min-width: 0;
flex: 1 1 auto;
}
html.tp .tb-ann {
display: inline-flex !important;
align-items: center;
gap: 10px;
min-width: 0;
max-width: 100%;
color: rgba(226, 232, 240, .85) !important;
text-decoration: none !important;
}
html.tp .tb-ann__tag {
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
}
html.tp .tb-ann__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
html.tp .tb-ann__text strong {
color: #fff;
font-weight: 600;
}
html.tp .tb-ann__sub {
color: rgba(226, 232, 240, .6);
}
html.tp .tb-ann__arrow {
flex: 0 0 auto;
font-size: 10px !important;
transition: transform .15s;
}
html.tp .tb-ann:hover .tb-ann__arrow {
transform: translateX(3px);
}
html.tp .top-bar .selector-btn {
background: rgba(255, 255, 255, .06) !important;
border: 1px solid rgba(255, 255, 255, .12) !important;
color: #fff !important;
}
html.tp .top-bar .selector-btn:hover {
background: rgba(255, 255, 255, .12) !important;
}
@media (max-width: 991px) {
html.tp .top-bar .tb-phone span,
html.tp .top-bar-right>a:not(.tb-phone),
html.tp .top-bar-right .user-greeting,
html.tp .top-bar-right .divider {
display: none !important;
}
html.tp .tb-ann__sub {
display: none;
}
html.tp .top-bar {
display: block !important;
}
}
html.tp .main-header>.container {
min-height: 68px;
}
html.tp .site-logo .logo-icon,
html.tp .mobile-logo .m-logo-icon,
html.tp .footer-brand .logo-icon {
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
html.tp .footer-brand .logo-icon i {
color: #fff !important;
}
@media (min-width: 992px) {
html.tp .main-header .main-nav .nav-link {
position: relative;
background: transparent !important;
}
html.tp .main-header .main-nav .nav-link::after {
content: "" !important;
display: block !important;
position: absolute;
left: 12px;
right: 12px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #2563eb, #0ea5e9);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
html.tp .main-header .main-nav .nav-item:hover>.nav-link::after,
html.tp .main-header .main-nav .nav-link.active::after {
transform: scaleX(1);
}
html.tp .main-header .main-nav .nav-item:hover>.nav-link {
color: var(--tp-ink) !important;
}
}
html.tp .btn-register {
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
border: 0 !important;
box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .6) !important;
}
html.tp .btn-register:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%) !important;
}
html.tp .header-actions .action-btn {
border-radius: 12px !important;
}
html.tp .cart-badge {
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
}
html.tp .mobile-btn.primary {
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
border: 0 !important;
}
html.tp .main-header .dropdown-item>i,
html.tp .main-header .dropdown-item i:first-child {
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
color: #fff !important;
border: 0 !important;
}
html.tp .site-footer {
position: relative;
background:
radial-gradient(700px 260px at 10% 0%, rgba(37, 99, 235, .18), transparent 65%),
radial-gradient(600px 260px at 95% 100%, rgba(14, 165, 233, .10), transparent 65%),
#0b1220 !important;
}
html.tp .site-footer::before {
content: "" !important;
display: block !important;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .6), rgba(34, 211, 238, .6), transparent) !important;
}
html.tp .footer-main {
padding: 64px 0 40px !important;
}
@media (min-width: 1200px) {
html.tp .footer-grid {
grid-template-columns: minmax(250px, 1.5fr) repeat(4, minmax(0, 1fr)) minmax(210px, 1.25fr) !important;
gap: 40px !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
html.tp .footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 36px 32px !important;
}
}
@media (max-width: 767px) {
html.tp .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 28px 20px !important;
}
html.tp .footer-brand,
html.tp .footer-grid>.footer-column:last-child {
grid-column: 1 / -1;
}
}
html.tp .footer-column h4 {
font-family: var(--tp-font-head) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: -.01em !important;
color: #fff !important;
line-height: 1.35 !important;
margin-bottom: 14px !important;
}
html.tp .footer-links a {
font-size: 14px !important;
padding: 5px 0 !important;
transition: color .15s, transform .15s !important;
}
html.tp .footer-links a:hover {
color: #fff !important;
transform: translateX(3px) !important;
}
html.tp .footer-brand .brand-desc {
max-width: 320px;
}
html.tp .footer-contact .icon {
background: rgba(255, 255, 255, .05) !important;
border: 1px solid rgba(125, 211, 252, .18) !important;
color: #7dd3fc !important;
}
html.tp .footer-contact .icon i {
color: #7dd3fc !important;
}
html.tp .footer-contact small {
color: rgba(226, 232, 240, .5) !important;
}
html.tp .footer-trust-bar {
padding: 20px 0 !important;
}
html.tp .footer-trust-items {
justify-content: center !important;
gap: 12px !important;
flex-wrap: wrap;
}
html.tp .footer-trust-item {
padding: 10px 16px 10px 10px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .03) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
}
html.tp .footer-trust-item .trust-icon {
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
border: 0 !important;
color: #fff !important;
}
html.tp .footer-trust-item .trust-icon i {
color: #fff !important;
}
html.tp .footer-bottom-bar {
padding: 20px 0 !important;
}
html.tp .footer-legal {
gap: 6px 18px !important;
}
html.tp .footer-legal a {
background: none !important;
border: 0 !important;
padding: 0 !important;
color: rgba(226, 232, 240, .55) !important;
font-size: 13px !important;
box-shadow: none !important;
}
html.tp .footer-legal a:hover {
color: #fff !important;
}
html.tp .footer-copy {
color: rgba(226, 232, 240, .5) !important;
font-size: 13px !important;
}
html.tp .k-prose table {
display: block;
overflow-x: auto;
font-size: 14px;
border-radius: 12px;
border: 1px solid var(--tp-line);
border-collapse: separate;
border-spacing: 0;
}
html.tp .k-prose th {
white-space: nowrap;
font-size: 13px;
}
html.tp .k-prose th,
html.tp .k-prose td {
border: 0;
border-bottom: 1px solid var(--tp-line-2);
padding: 11px 14px;
vertical-align: top;
}
html.tp .k-prose tr:last-child td {
border-bottom: 0;
}
html.tp .footer-contact .contact-item .icon,
html.tp .footer-contact [class*="contact-icon-"] {
background: rgba(255, 255, 255, .05) !important;
background-image: none !important;
border: 1px solid rgba(125, 211, 252, .18) !important;
box-shadow: none !important;
}
html.tp .footer-contact .contact-item .icon i {
color: #7dd3fc !important;
}
/* tp-ui.css */
.k-page {
--k-header-h: 73px;
background: #fff;
color: var(--tp-text);
}
.k-page .container {
max-width: 1240px;
}
.k-section {
padding: 64px 0;
position: relative;
}
.k-section--tight {
padding: 40px 0;
}
.k-section--band {
padding: 22px 0;
border-bottom: 1px solid var(--tp-line-2);
}
.k-section--alt {
background: var(--tp-surface);
border-top: 1px solid var(--tp-line-2);
border-bottom: 1px solid var(--tp-line-2);
}
.k-section--dark {
background: var(--tp-ink);
color: rgba(226, 232, 240, .78);
}
.k-section--dark .k-h2,
.k-section--dark .k-h3 {
color: #fff;
}
.k-section--dark .k-lead {
color: rgba(226, 232, 240, .7);
}
@media (max-width: 767px) {
.k-section {
padding: 44px 0;
}
.k-section--tight {
padding: 32px 0;
}
.k-section--band {
padding: 18px 0;
}
}
.k-head {
max-width: 720px;
margin-bottom: 28px;
}
.k-head .k-lead {
max-width: 640px;
}
.k-head--split .k-h2,
.k-head--split .k-lead {
margin-bottom: 0;
}
.k-head--split .k-h2+.k-lead {
margin-top: 8px;
}
.k-head--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.k-head--split {
max-width: none;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.k-head--split>div {
max-width: 640px;
}
.k-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tp-brand);
margin-bottom: 10px;
}
.k-eyebrow::before {
content: "";
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.k-section--dark .k-eyebrow,
.k-hero .k-eyebrow {
color: #93c5fd;
}
.k-h1 {
font-family: var(--tp-font-head);
font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -.035em;
color: var(--tp-ink);
margin: 0 0 16px;
}
.k-h1--sm {
font-size: clamp(2rem, 1.45rem + 2vw, 3rem);
margin-bottom: 12px;
}
.k-h2 {
font-family: var(--tp-font-head);
font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.3rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.03em;
color: var(--tp-ink);
margin: 0 0 12px;
}
.k-h3 {
font-family: var(--tp-font-head);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.015em;
color: var(--tp-ink);
margin: 0 0 8px;
}
.k-lead {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--tp-muted);
margin: 0;
}
.k-muted {
color: var(--tp-muted);
}
.k-text-grad {
background: linear-gradient(90deg, #93c5fd, #60a5fa);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.k-prose {
font-size: 16px;
line-height: 1.75;
color: var(--tp-text);
}
.k-prose h2,
.k-prose h3,
.k-prose h4 {
font-family: var(--tp-font-head);
color: var(--tp-ink);
letter-spacing: -.02em;
margin: 1.6em 0 .55em;
line-height: 1.3;
}
.k-prose h2 {
font-size: 1.6rem;
}
.k-prose h3 {
font-size: 1.3rem;
}
.k-prose p {
margin: 0 0 1.1em;
}
.k-prose ul,
.k-prose ol {
padding-left: 1.2em;
margin: 0 0 1.2em;
}
.k-prose li {
margin-bottom: .4em;
}
.k-prose a {
color: var(--tp-brand);
font-weight: 500;
}
.k-prose img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.k-prose table {
width: 100%;
border-collapse: collapse;
margin: 1.4em 0;
font-size: 15px;
}
.k-prose th,
.k-prose td {
border: 1px solid var(--tp-line);
padding: 10px 14px;
text-align: left;
}
.k-prose th {
background: var(--tp-surface);
color: var(--tp-ink);
font-weight: 600;
}
.k-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 22px;
border-radius: 10px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 600;
letter-spacing: -.005em;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.k-btn i {
font-size: .9em;
}
.k-btn--primary {
background: var(--tp-brand);
border-color: var(--tp-brand);
color: #fff !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.k-btn--primary:hover {
background: var(--tp-brand-600);
border-color: var(--tp-brand-600);
box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .5);
transform: translateY(-1px);
}
.k-btn--dark {
background: var(--tp-ink);
border-color: var(--tp-ink);
color: #fff !important;
}
.k-btn--dark:hover {
background: #1b2640;
border-color: #1b2640;
}
.k-btn--light {
background: #fff;
border-color: #fff;
color: var(--tp-ink) !important;
}
.k-btn--light:hover {
background: #eef2f8;
border-color: #eef2f8;
}
.k-btn--ghost {
background: #fff;
border-color: var(--tp-line);
color: var(--tp-ink) !important;
}
.k-btn--ghost:hover {
border-color: #c7d1e0;
background: var(--tp-surface);
}
.k-btn--ghost-dark {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .2);
color: #fff !important;
}
.k-btn--ghost-dark:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .36);
}
.k-btn--lg {
height: 54px;
padding: 0 26px;
font-size: 16px;
}
.k-btn--sm {
height: 38px;
padding: 0 14px;
font-size: 14px;
}
.k-btn--block {
width: 100%;
}
.k-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tp-brand) !important;
font-weight: 600;
text-decoration: none !important;
}
.k-link i {
font-size: .8em;
transition: transform .15s;
}
.k-link:hover i {
transform: translateX(3px);
}
.k-badge {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
background: var(--tp-surface);
border: 1px solid var(--tp-line);
color: var(--tp-text);
white-space: nowrap;
}
.k-badge--brand {
background: var(--tp-brand-50);
border-color: var(--tp-brand-100);
color: var(--tp-brand-600);
}
.k-badge--dark {
background: var(--tp-ink);
border-color: var(--tp-ink);
color: #fff;
}
.k-badge--ok {
background: #ecfdf5;
border-color: #d1fae5;
color: #047857;
}
.k-badge--warn {
background: #fff7ed;
border-color: #fed7aa;
color: #c2410c;
}
.k-badge--glass {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .14);
color: rgba(255, 255, 255, .88);
}
.k-card {
background: #fff;
border: 1px solid var(--tp-line);
border-radius: 16px;
padding: 22px;
height: 100%;
}
.k-card--hover {
transition: border-color .2s, box-shadow .2s, transform .2s var(--tp-ease);
}
.k-card--hover:hover {
border-color: #cdd6e4;
box-shadow: var(--tp-shadow-lg);
transform: translateY(-2px);
}
.k-card p {
margin: 0;
color: var(--tp-muted);
font-size: 14.5px;
line-height: 1.6;
}
.k-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
background: var(--tp-brand-50);
border: 1px solid var(--tp-brand-100);
color: var(--tp-brand);
font-size: 17px;
margin-bottom: 14px;
}
.k-icon--dark {
background: var(--tp-ink);
border-color: var(--tp-ink);
color: #fff;
}
.k-section--dark .k-icon {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .1);
color: #93c5fd;
}
.k-section--dark .k-card {
background: rgba(255, 255, 255, .03);
border-color: rgba(255, 255, 255, .08);
}
.k-section--dark .k-card p {
color: rgba(226, 232, 240, .65);
}
.k-grid {
display: grid;
gap: 20px;
}
.k-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.k-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.k-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1099px) {
.k-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.k-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 639px) {
.k-grid--2,
.k-grid--3,
.k-grid--4 {
grid-template-columns: minmax(0, 1fr);
}
}
.k-checks {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.k-checks li {
position: relative;
padding-left: 30px;
line-height: 1.5;
color: var(--tp-text);
font-size: 15px;
}
.k-checks li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--tp-brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center/16px no-repeat;
border: 1px solid var(--tp-brand-100);
}
.k-checks li.is-off {
color: var(--tp-muted);
}
.k-checks li.is-off::before {
background: var(--tp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath d='m6 5 4 4 4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4z'/%3E%3C/svg%3E") center/14px no-repeat;
border-color: var(--tp-line);
}
.k-checks--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
}
@media (max-width: 639px) {
.k-checks--2col {
grid-template-columns: minmax(0, 1fr);
}
}
.k-section--dark .k-checks li,
.k-hero .k-checks li {
color: rgba(226, 232, 240, .85);
}
.k-section--dark .k-checks li::before,
.k-hero .k-checks li::before {
background-color: rgba(147, 197, 253, .12);
border-color: rgba(147, 197, 253, .25);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2393c5fd'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E");
}
.k-hero {
position: relative;
overflow: hidden;
background: var(--tp-ink);
color: rgba(226, 232, 240, .78);
padding: 64px 0 56px;
isolation: isolate;
}
.k-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(900px 520px at 80% -10%, rgba(37, 99, 235, .35), transparent 60%),
radial-gradient(700px 480px at -10% 110%, rgba(37, 99, 235, .14), transparent 60%);
}
.k-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 30%, transparent 80%);
}
.k-hero .k-h1 {
color: #fff;
}
.k-hero .k-lead {
color: rgba(226, 232, 240, .74);
max-width: 560px;
}
.k-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: 56px;
align-items: center;
}
.k-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 26px 0 22px;
}
.k-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
font-size: 14px;
color: rgba(226, 232, 240, .66);
}
.k-hero__meta span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.k-hero__meta i {
color: #34d399;
}
@media (max-width: 991px) {
.k-hero {
padding: 40px 0 36px;
}
.k-hero__grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
.k-term {
background: rgba(17, 26, 46, .9);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 16px;
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
overflow: hidden;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13.5px;
}
.k-term__bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, .06);
color: rgba(226, 232, 240, .5);
font-size: 12px;
}
.k-term__bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
}
.k-term__bar b {
margin-left: auto;
font-weight: 500;
}
.k-term__body {
padding: 20px 20px 22px;
line-height: 1.9;
color: rgba(226, 232, 240, .82);
overflow-x: auto;
white-space: nowrap;
}
.k-term__body .p {
color: #60a5fa;
}
.k-term__body .c {
color: rgba(226, 232, 240, .42);
}
.k-term__body .ok {
color: #34d399;
}
.k-term__foot {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-top: 1px solid rgba(255, 255, 255, .06);
background: rgba(255, 255, 255, .02);
font-family: var(--tp-font);
}
.k-term__foot .k-icon {
margin: 0;
width: 40px;
height: 40px;
flex-basis: 40px;
background: rgba(52, 211, 153, .12);
border-color: rgba(52, 211, 153, .25);
color: #34d399;
}
.k-term__foot strong {
display: block;
color: #fff;
font-size: 14px;
}
.k-term__foot small {
color: rgba(226, 232, 240, .55);
font-size: 12.5px;
}
.k-logos {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px 40px;
}
.k-logos__label {
font-size: 13px;
font-weight: 600;
color: var(--tp-muted);
letter-spacing: .02em;
}
.k-logos__items {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px 44px;
}
.k-logos__items img {
width: auto !important;
height: auto !important;
max-width: 150px;
max-height: 34px;
object-fit: contain;
filter: grayscale(1);
opacity: .6;
transition: opacity .2s, filter .2s;
}
.k-logos__items a:hover img,
.k-logos__items img:hover {
filter: none;
opacity: 1;
}
.k-logos__items .k-logo-text {
font-family: var(--tp-font-head);
font-weight: 700;
font-size: 19px;
color: #94a3b8;
letter-spacing: -.02em;
}
.k-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--tp-line);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.k-stat {
padding: 18px 22px;
border-right: 1px solid var(--tp-line);
}
.k-stat:last-child {
border-right: 0;
}
.k-stat strong {
display: block;
font-family: var(--tp-font-head);
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -.035em;
color: var(--tp-ink);
line-height: 1.1;
}
.k-stat span {
font-size: 14px;
color: var(--tp-muted);
}
@media (max-width: 767px) {
.k-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.k-stat:nth-child(2) {
border-right: 0;
}
.k-stat:nth-child(-n+2) {
border-bottom: 1px solid var(--tp-line);
}
}
.k-pcard {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--tp-line);
border-radius: 16px;
padding: 20px;
height: 100%;
transition: border-color .2s, box-shadow .2s, transform .2s var(--tp-ease);
}
.k-pcard:hover {
border-color: #cdd6e4;
box-shadow: var(--tp-shadow-lg);
transform: translateY(-2px);
}
.k-pcard--featured {
border-color: var(--tp-ink);
box-shadow: 0 0 0 1px var(--tp-ink);
}
.k-pcard--featured:hover {
border-color: var(--tp-ink);
box-shadow: 0 0 0 1px var(--tp-ink), var(--tp-shadow-lg);
}
.k-pcard__ribbon {
position: absolute;
top: -12px;
left: 20px;
}
.k-pcard__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 28px;
margin-bottom: 14px;
}
.k-pcard__brand {
display: inline-flex;
align-items: center;
width: 112px;
height: 28px;
}
.k-pcard__brand img {
width: auto !important;
height: auto !important;
max-width: 112px;
max-height: 28px;
object-fit: contain;
}
.k-pcard__brand .k-logo-text {
font-family: var(--tp-font-head);
font-weight: 700;
font-size: 16px;
color: var(--tp-ink);
}
.k-pcard__title {
font-family: var(--tp-font-head);
font-size: 16.5px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.015em;
margin: 0 0 6px;
min-height: 2.7em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.k-pcard__title a {
color: var(--tp-ink) !important;
text-decoration: none !important;
}
.k-pcard__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
}
.k-pcard__sub {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 13px;
color: var(--tp-muted);
margin: 0 0 14px;
}
.k-pcard__sub span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.k-pcard__sub i {
font-size: 12px;
color: #94a3b8;
}
.k-pcard .k-checks {
gap: 8px;
margin-bottom: 18px;
}
.k-pcard .k-checks li {
font-size: 13.5px;
padding-left: 26px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.k-pcard .k-checks li::before {
width: 18px;
height: 18px;
background-size: 14px;
}
.k-pcard__price {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--tp-line-2);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.k-price {
display: flex;
flex-direction: column;
}
.k-price__old {
font-size: 13px;
color: var(--tp-muted);
text-decoration: line-through;
}
.k-price__now {
font-family: var(--tp-font-head);
font-size: 26px;
font-weight: 700;
letter-spacing: -.03em;
color: var(--tp-ink);
line-height: 1.15;
}
.k-price__now small {
font-family: var(--tp-font);
font-size: 13px;
font-weight: 500;
color: var(--tp-muted);
letter-spacing: 0;
}
.k-pcard__cta {
position: relative;
z-index: 1;
}
.k-pcard__badges {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 639px) {
.k-pcard__title {
min-height: 0;
}
}
.k-pcard .k-price__now {
font-size: 24px;
}
.k-price__row {
display: flex;
align-items: center;
gap: 6px;
height: 20px;
line-height: 20px;
}
.k-off {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: #ecfdf5;
border: 1px solid #d1fae5;
color: #047857;
font-size: 11px;
font-weight: 700;
letter-spacing: .01em;
}
.k-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
background: var(--tp-surface);
border: 1px solid var(--tp-line);
border-radius: 12px;
flex-wrap: wrap;
}
.k-tabs button {
border: 0;
background: transparent;
color: var(--tp-text);
font-size: 14px;
font-weight: 600;
height: 38px;
padding: 0 16px;
border-radius: 9px;
cursor: pointer;
transition: background-color .15s, color .15s, box-shadow .15s;
}
.k-tabs button:hover {
color: var(--tp-ink);
}
.k-tabs button.is-active {
background: #fff;
color: var(--tp-ink);
box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--tp-line);
}
.k-tabs button span {
color: var(--tp-muted);
font-weight: 500;
margin-left: 4px;
}
.k-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
counter-reset: kstep;
position: relative;
}
.k-steps::before {
content: "";
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 1px;
background: var(--tp-line);
}
.k-step {
position: relative;
counter-increment: kstep;
}
.k-step::before {
content: counter(kstep);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--tp-line);
color: var(--tp-ink);
font-family: var(--tp-font-head);
font-weight: 700;
margin-bottom: 14px;
box-shadow: 0 0 0 6px #fff;
}
.k-section--alt .k-step::before {
box-shadow: 0 0 0 6px var(--tp-surface);
}
.k-step:first-child::before {
background: var(--tp-ink);
border-color: var(--tp-ink);
color: #fff;
}
.k-step p {
font-size: 14.5px;
line-height: 1.6;
color: var(--tp-muted);
margin: 0;
}
@media (max-width: 991px) {
.k-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 28px;
}
.k-steps::before {
display: none;
}
}
@media (max-width: 575px) {
.k-steps {
grid-template-columns: minmax(0, 1fr);
}
}
.k-compare {
border: 1px solid var(--tp-line);
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.k-compare table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
}
.k-compare th,
.k-compare td {
padding: 13px 18px;
border-bottom: 1px solid var(--tp-line-2);
text-align: left;
vertical-align: middle;
}
.k-compare thead th {
background: var(--tp-surface) !important;
color: var(--tp-ink) !important;
font-family: var(--tp-font-head);
font-size: 15px;
font-weight: 700;
border-bottom: 1px solid var(--tp-line) !important;
}
.k-compare thead th small {
display: block;
font-family: var(--tp-font);
font-size: 13px;
font-weight: 500;
color: var(--tp-muted);
}
.k-compare thead th.is-hl {
background: var(--tp-ink) !important;
color: #fff !important;
}
.k-compare thead th.is-hl small {
color: rgba(226, 232, 240, .7);
}
.k-compare td:first-child {
color: var(--tp-text);
font-weight: 500;
}
.k-compare td.is-hl {
background: #fbfcfe;
}
.k-compare tr:last-child td {
border-bottom: 0;
}
.k-yes,
.k-no {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.k-yes {
color: #047857;
}
.k-no {
color: #94a3b8;
}
@media (max-width: 767px) {
.k-compare {
overflow-x: auto;
}
.k-compare table {
min-width: 560px;
}
}
.k-faq {
border-top: 1px solid var(--tp-line);
}
.k-faq details {
border-bottom: 1px solid var(--tp-line);
}
.k-faq summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 17px 0;
font-family: var(--tp-font-head);
font-size: 16px;
font-weight: 600;
color: var(--tp-ink);
cursor: pointer;
letter-spacing: -.01em;
}
.k-faq summary::-webkit-details-marker {
display: none;
}
.k-faq summary::after {
content: "";
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--tp-line);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230b1220'%3E%3Cpath d='M9.25 4h1.5v5.25H16v1.5h-5.25V16h-1.5v-5.25H4v-1.5h5.25z'/%3E%3C/svg%3E") center/14px no-repeat;
transition: transform .2s var(--tp-ease), background-color .2s;
}
.k-faq details[open] summary::after {
transform: rotate(45deg);
background-color: var(--tp-surface);
}
.k-faq summary:hover {
color: var(--tp-brand);
}
.k-faq__a {
padding: 0 48px 18px 0;
color: var(--tp-muted);
font-size: 15px;
line-height: 1.7;
}
.k-faq__a p:last-child {
margin-bottom: 0;
}
.k-cta {
position: relative;
overflow: hidden;
border-radius: 24px;
background: var(--tp-ink);
color: rgba(226, 232, 240, .75);
padding: 40px 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
isolation: isolate;
}
.k-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(700px 360px at 100% 0%, rgba(37, 99, 235, .45), transparent 60%);
}
.k-cta .k-h2 {
color: #fff;
margin-bottom: 8px;
}
.k-cta p {
margin: 0;
font-size: 16px;
max-width: 560px;
}
.k-cta__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.k-cta {
padding: 30px 22px;
border-radius: 18px;
}
}
.k-post {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none !important;
color: inherit;
}
.k-post__img {
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: var(--tp-surface);
border: 1px solid var(--tp-line);
margin-bottom: 14px;
}
.k-post__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--tp-ease);
}
.k-post:hover .k-post__img img {
transform: scale(1.03);
}
.k-post__meta {
font-size: 13px;
color: var(--tp-muted);
margin-bottom: 8px;
display: flex;
gap: 10px;
align-items: center;
}
.k-post__meta b {
color: var(--tp-brand);
font-weight: 600;
}
.k-post h3 {
font-family: var(--tp-font-head);
font-size: 18px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -.015em;
color: var(--tp-ink);
margin: 0 0 8px;
}
.k-post:hover h3 {
color: var(--tp-brand);
}
.k-post p {
font-size: 14.5px;
color: var(--tp-muted);
line-height: 1.65;
margin: 0;
}
.k-feature {
display: flex;
gap: 16px;
}
.k-feature .k-icon {
margin: 0;
}
.k-feature p {
margin: 0;
font-size: 15px;
color: var(--tp-muted);
line-height: 1.65;
}
.k-chip {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border: 1px solid var(--tp-line);
border-radius: 12px;
background: #fff;
}
.k-chip i {
font-size: 20px;
color: var(--tp-ink);
width: 24px;
text-align: center;
}
.k-chip strong {
display: block;
font-size: 14.5px;
color: var(--tp-ink);
font-weight: 600;
}
.k-chip small {
display: block;
font-size: 12.5px;
color: var(--tp-muted);
}
.k-crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13.5px;
color: var(--tp-muted);
margin-bottom: 18px;
list-style: none;
padding: 0;
}
.k-crumbs a {
color: var(--tp-muted) !important;
text-decoration: none !important;
}
.k-crumbs a:hover {
color: var(--tp-ink) !important;
}
.k-crumbs li+li::before {
content: "/";
margin-right: 8px;
color: #cbd5e1;
}
.k-crumbs li[aria-current] {
color: var(--tp-ink);
font-weight: 500;
}
.k-pd-hero {
padding: 20px 0 40px;
background: linear-gradient(180deg, var(--tp-surface) 0%, #fff 100%);
border-bottom: 1px solid var(--tp-line-2);
}
.k-pd-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 48px;
align-items: start;
}
@media (max-width: 1099px) {
.k-pd-grid {
grid-template-columns: minmax(0, 1fr) 360px;
gap: 40px;
}
}
@media (max-width: 991px) {
.k-pd-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.k-pd-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.k-pd-logo {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
background: #fff;
border: 1px solid var(--tp-line);
border-radius: 10px;
margin-right: 4px;
}
.k-pd-logo img {
width: auto !important;
height: auto !important;
max-width: 120px;
max-height: 24px;
object-fit: contain;
}
.k-pd-logo .k-logo-text {
font-family: var(--tp-font-head);
font-weight: 700;
color: var(--tp-ink);
font-size: 15px;
}
.k-pd-title {
font-family: var(--tp-font-head);
font-size: clamp(1.9rem, 1.35rem + 1.8vw, 2.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.035em;
color: var(--tp-ink);
margin: 0 0 12px;
}
.k-pd-desc {
font-size: 16.5px;
line-height: 1.65;
color: var(--tp-muted);
margin: 0 0 22px;
max-width: 680px;
}
.k-specs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--tp-line);
border-radius: 14px;
background: #fff;
margin-bottom: 22px;
}
.k-spec {
padding: 13px 16px;
border-right: 1px solid var(--tp-line-2);
}
.k-spec:last-child {
border-right: 0;
}
.k-spec span {
display: block;
font-size: 12.5px;
color: var(--tp-muted);
margin-bottom: 4px;
}
.k-spec strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--tp-ink);
line-height: 1.35;
}
@media (max-width: 767px) {
.k-specs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.k-spec:nth-child(2) {
border-right: 0;
}
.k-spec:nth-child(-n+2) {
border-bottom: 1px solid var(--tp-line-2);
}
}
.k-buy {
position: sticky;
top: calc(var(--k-header-h) + 20px);
background: #fff;
border: 1px solid var(--tp-line);
border-radius: 18px;
box-shadow: var(--tp-shadow-lg);
overflow: hidden;
}
.k-buy__body {
padding: 22px 24px 24px;
}
.k-buy__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.k-buy__label {
font-size: 13px;
font-weight: 600;
color: var(--tp-muted);
}
.k-buy__price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.k-buy__price strong {
font-family: var(--tp-font-head);
font-size: 40px;
font-weight: 700;
letter-spacing: -.04em;
color: var(--tp-ink);
line-height: 1;
}
.k-buy__price span {
font-size: 15px;
color: var(--tp-muted);
}
.k-buy__old {
font-size: 15px;
color: var(--tp-muted);
text-decoration: line-through;
margin-bottom: 6px;
}
.k-buy__tax {
font-size: 13px;
color: var(--tp-muted);
margin: 6px 0 18px;
}
.k-buy__note {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--tp-surface);
border: 1px solid var(--tp-line-2);
border-radius: 10px;
font-size: 13.5px;
color: var(--tp-text);
margin-bottom: 16px;
}
.k-buy__note i {
color: var(--tp-brand);
}
.k-buy .k-btn+.k-btn {
margin-top: 10px;
}
.k-buy__list {
list-style: none;
margin: 0;
padding: 16px 24px;
border-top: 1px solid var(--tp-line-2);
background: #fbfcfe;
display: grid;
gap: 10px;
font-size: 14px;
color: var(--tp-text);
}
.k-buy__list li {
display: flex;
align-items: center;
gap: 10px;
}
.k-buy__list i {
width: 18px;
text-align: center;
color: var(--tp-ok);
}
.k-buy__pay {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 24px;
border-top: 1px solid var(--tp-line-2);
color: #94a3b8;
font-size: 22px;
}
.k-buy__pay small {
font-size: 12px;
color: var(--tp-muted);
margin-right: auto;
}
@media (max-width: 991px) {
.k-buy {
position: static;
}
}
.k-subnav {
position: sticky;
top: var(--k-header-h);
z-index: 90;
background: rgba(255, 255, 255, .9);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--tp-line);
}
.k-subnav .container {
display: flex;
align-items: center;
gap: 24px;
height: 52px;
}
.k-subnav nav {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
flex: 1;
}
.k-subnav nav::-webkit-scrollbar {
display: none;
}
.k-subnav nav a {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--tp-text) !important;
text-decoration: none !important;
white-space: nowrap;
}
.k-subnav nav a:hover,
.k-subnav nav a.is-active {
background: var(--tp-surface);
color: var(--tp-ink) !important;
}
.k-subnav__buy {
display: flex;
align-items: center;
gap: 14px;
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
}
.k-subnav.is-stuck .k-subnav__buy {
opacity: 1;
visibility: visible;
}
.k-subnav__buy strong {
font-family: var(--tp-font-head);
font-size: 18px;
color: var(--tp-ink);
letter-spacing: -.02em;
}
@media (max-width: 991px) {
.k-subnav__buy {
display: none;
}
}
[id].k-anchor {
scroll-margin-top: calc(var(--k-header-h) + 72px);
}
.k-mbuy {
display: none;
}
@media (max-width: 991px) {
.k-mbuy {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1040;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--tp-line);
box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, .2);
}
.k-mbuy strong {
display: block;
font-family: var(--tp-font-head);
font-size: 20px;
color: var(--tp-ink);
letter-spacing: -.02em;
line-height: 1.1;
}
.k-mbuy small {
font-size: 12px;
color: var(--tp-muted);
}
.k-page--pd {
padding-bottom: 76px;
}
.k-page--pd~.whatsapp-btn,
body:has(.k-mbuy) .whatsapp-btn {
bottom: 92px !important;
}
body:has(.k-mbuy) .back-to-top {
bottom: 92px !important;
}
}
.k-feat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.k-feat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--tp-line);
border-radius: 12px;
background: #fff;
font-size: 14.5px;
font-weight: 500;
color: var(--tp-ink);
}
.k-feat i {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--tp-brand-50);
color: var(--tp-brand);
font-size: 14px;
}
@media (max-width: 991px) {
.k-feat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.k-feat-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.k-split {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.k-split__aside {
position: sticky;
top: calc(var(--k-header-h) + 80px);
}
@media (max-width: 991px) {
.k-split {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.k-split__aside {
position: static;
}
}
.k-sr {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.k-js .k-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .6s var(--tp-ease), transform .6s var(--tp-ease);
}
.k-js .k-reveal.is-in {
opacity: 1;
transform: none;
}
}
.k-specs--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
}
@media (max-width: 767px) {
.k-specs--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.k-specs--3 .k-spec:nth-child(2) {
border-right: 1px solid var(--tp-line-2);
}
.k-specs--3 .k-spec:nth-child(-n+2) {
border-bottom: 0;
}
.k-specs--3 .k-spec {
padding: 12px;
}
.k-specs--3 .k-spec strong {
font-size: 14px;
}
}
.k-assure {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 16px 0 0;
padding: 0;
list-style: none;
font-size: 13.5px;
color: var(--tp-text);
}
.k-assure li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.k-assure i {
color: var(--tp-ok);
}
.k-page [hidden] {
display: none !important;
}
.k-toolbar {
position: sticky;
top: var(--k-header-h);
z-index: 80;
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--tp-line);
}
.k-toolbar__inner {
display: flex;
align-items: center;
gap: 10px 12px;
flex-wrap: wrap;
padding: 10px 0;
}
.k-toolbar__filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 1 1 auto;
min-width: 0;
}
.k-toolbar__end {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.k-toolbar .k-tabs {
padding: 3px;
border-radius: 10px;
}
.k-toolbar .k-tabs button {
height: 32px;
padding: 0 12px;
font-size: 13.5px;
border-radius: 8px;
white-space: nowrap;
}
.k-tabs--icon button {
width: 34px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.k-select {
height: 38px;
max-width: 100%;
padding: 0 32px 0 12px;
border: 1px solid var(--tp-line);
border-radius: 10px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.3 7.3 10 12l4.7-4.7 1 1L10 14 4.3 8.3z'/%3E%3C/svg%3E") right 10px center/14px no-repeat;
-webkit-appearance: none;
appearance: none;
font-size: 14px;
font-weight: 500;
color: var(--tp-ink);
cursor: pointer;
}
.k-select:focus {
outline: 2px solid var(--tp-brand-100);
border-color: var(--tp-brand);
}
@media (max-width: 767px) {
.k-toolbar {
position: static;
}
.k-toolbar__filters {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
flex-basis: 100%;
}
.k-toolbar__filters::-webkit-scrollbar {
display: none;
}
.k-toolbar__filters .k-tabs {
flex: 0 0 auto;
flex-wrap: nowrap;
}
.k-toolbar__end {
margin-left: 0;
width: 100%;
justify-content: space-between;
}
}
.k-resultbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
margin-bottom: 16px;
font-size: 14px;
color: var(--tp-muted);
}
.k-resultbar strong {
color: var(--tp-ink);
}
.k-fchip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--tp-brand-100);
background: var(--tp-brand-50);
color: var(--tp-brand-600);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.k-fchip i {
font-size: 10px;
}
.k-fchip:hover {
border-color: var(--tp-brand);
}
.k-fchip--clear {
background: transparent;
border-color: transparent;
color: var(--tp-muted);
}
.k-fchip--clear:hover {
border-color: var(--tp-line);
color: var(--tp-ink);
}
.k-ptable {
overflow-x: auto;
}
.k-ptable table {
min-width: 880px;
}
.k-ptable thead th {
font-family: var(--tp-font);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--tp-muted) !important;
white-space: nowrap;
}
.k-ptable td {
padding-top: 12px;
padding-bottom: 12px;
white-space: nowrap;
}
.k-ptable td:first-child {
white-space: normal;
}
.k-ptable tbody tr:hover td {
background: #fbfcfe;
}
.k-ptable__name {
display: flex;
align-items: center;
gap: 12px;
min-width: 240px;
}
.k-ptable__logo {
display: inline-flex;
align-items: center;
width: 84px;
height: 22px;
flex: 0 0 84px;
}
.k-ptable__logo img {
width: auto !important;
height: auto !important;
max-width: 84px;
max-height: 22px;
object-fit: contain;
}
.k-ptable__logo .k-logo-text {
font-family: var(--tp-font-head);
font-weight: 700;
font-size: 13px;
color: var(--tp-ink);
}
.k-ptable__name a {
color: var(--tp-ink) !important;
font-weight: 600;
text-decoration: none !important;
}
.k-ptable__name a:hover {
color: var(--tp-brand) !important;
}
.k-ptable__price {
white-space: nowrap;
}
.k-ptable__price strong {
font-family: var(--tp-font-head);
font-size: 17px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--tp-ink);
}
.k-ptable__price s {
display: block;
font-size: 12.5px;
color: var(--tp-muted);
}
.k-ptable td:last-child {
text-align: right;
white-space: nowrap;
}
.k-variant__label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--tp-muted);
margin-bottom: 6px;
}
.k-variant {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
padding: 4px;
margin-bottom: 18px;
background: var(--tp-surface);
border: 1px solid var(--tp-line);
border-radius: 12px;
}
.k-variant__opt {
display: flex;
flex-direction: column;
gap: 1px;
padding: 8px 10px;
border-radius: 9px;
font-size: 12.5px;
line-height: 1.35;
color: var(--tp-muted) !important;
text-decoration: none !important;
transition: background-color .15s, box-shadow .15s;
}
.k-variant__opt strong {
font-size: 14px;
font-weight: 600;
color: var(--tp-ink);
}
.k-variant__opt.is-current {
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--tp-line);
}
a.k-variant__opt:hover {
background: rgba(255, 255, 255, .7);
}
a.k-variant__opt:hover strong {
color: var(--tp-brand);
}
.k-buy__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 10px 0 18px;
font-size: 13px;
color: var(--tp-muted);
}
.k-buy__save {
display: inline-flex;
align-items: center;
gap: 8px;
}
.k-buy__save .k-buy__old {
margin: 0;
font-size: 14px;
}
.k-buy__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.k-buy__meta i {
color: var(--tp-brand);
font-size: 12px;
}
.k-pd-overview {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}
.k-pd-overview .k-feat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 991px) {
.k-pd-overview {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 575px) {
.k-pd-overview .k-feat-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.k-kv {
border: 1px solid var(--tp-line);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.k-kv__title {
margin: 0;
padding: 12px 18px;
background: var(--tp-surface);
border-bottom: 1px solid var(--tp-line-2);
font-family: var(--tp-font-head);
font-size: 15px;
font-weight: 700;
color: var(--tp-ink);
}
.k-kv dl {
margin: 0;
}
.k-kv__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 8px 16px;
border-bottom: 1px solid var(--tp-line-2);
font-size: 13.5px;
}
.k-kv__row:last-child {
border-bottom: 0;
}
.k-kv dt {
font-weight: 500;
color: var(--tp-muted);
}
.k-kv dd {
margin: 0;
font-weight: 600;
color: var(--tp-ink);
text-align: right;
}
.k-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
border: 1px solid var(--tp-line);
border-radius: 16px;
background: #fff;
overflow: hidden;
counter-reset: ktl;
}
.k-timeline__item {
position: relative;
padding: 20px 20px 18px;
border-right: 1px solid var(--tp-line-2);
counter-increment: ktl;
}
.k-timeline__item:last-child {
border-right: 0;
}
.k-timeline__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--tp-brand-100);
}
.k-timeline__item:first-child::before {
background: var(--tp-brand);
}
.k-timeline__when {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 9px;
margin-bottom: 10px;
border-radius: 999px;
background: var(--tp-brand-50);
border: 1px solid var(--tp-brand-100);
color: var(--tp-brand-600);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.k-timeline__item h3 {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 4px;
font-family: var(--tp-font-head);
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
color: var(--tp-ink);
}
.k-timeline__item h3::before {
content: counter(ktl, decimal-leading-zero);
font-family: var(--tp-font);
font-size: 12px;
font-weight: 600;
color: var(--tp-muted);
}
.k-timeline__item p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--tp-muted);
}
.k-timeline-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 22px;
margin-top: 14px;
font-size: 14px;
color: var(--tp-muted);
}
.k-timeline-foot span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.k-timeline-foot i {
color: var(--tp-brand);
}
.k-timeline-foot strong {
color: var(--tp-ink);
}
@media (max-width: 991px) {
.k-timeline {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.k-timeline__item {
border-right: 0;
border-bottom: 1px solid var(--tp-line-2);
}
.k-timeline__item:nth-child(odd) {
border-right: 1px solid var(--tp-line-2);
}
}
@media (max-width: 575px) {
.k-timeline {
grid-template-columns: minmax(0, 1fr);
}
.k-timeline__item,
.k-timeline__item:nth-child(odd) {
border-right: 0;
}
.k-timeline__item:last-child {
border-bottom: 0;
}
}
.k-mini {
display: flex;
gap: 12px;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--tp-line);
border-radius: 12px;
background: #fff;
}
.k-mini .k-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
margin: 0;
border-radius: 9px;
font-size: 14px;
}
.k-mini h3,
.k-mini strong {
display: block;
margin: 0 0 2px;
font-family: var(--tp-font-head);
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--tp-ink);
}
.k-mini p {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--tp-muted);
}
.k-section--dark .k-mini {
background: rgba(255, 255, 255, .03);
border-color: rgba(255, 255, 255, .08);
}
.k-section--dark .k-mini h3,
.k-section--dark .k-mini strong {
color: #fff;
}
.k-section--dark .k-mini p {
color: rgba(226, 232, 240, .65);
}
.k-subhead {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
font-family: var(--tp-font-head);
font-size: 16px;
font-weight: 700;
color: var(--tp-ink);
}
.k-subhead small {
font-family: var(--tp-font);
font-size: 13px;
font-weight: 500;
color: var(--tp-muted);
}
.k-plist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.k-plist li {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--tp-line);
border-radius: 10px;
background: #fff;
font-size: 12.5px;
line-height: 1.35;
color: var(--tp-muted);
}
.k-plist i {
flex: 0 0 20px;
width: 20px;
text-align: center;
font-size: 16px;
color: var(--tp-ink);
}
.k-plist strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--tp-ink);
}
.k-plist--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991px) {
.k-plist--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 400px) {
.k-plist {
grid-template-columns: minmax(0, 1fr);
}
}
.k-cols {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
@media (max-width: 991px) {
.k-cols {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
}
.k-compare__switch {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-family: var(--tp-font);
font-size: 13px;
font-weight: 600;
color: var(--tp-brand) !important;
text-decoration: none !important;
}
.k-compare thead th.is-hl .k-compare__switch {
color: #93c5fd !important;
}
.k-faq--compact summary {
padding: 14px 0;
font-size: 15.5px;
}
.k-faq--compact .k-faq__a {
padding-bottom: 14px;
font-size: 14.5px;
}
.k-hero__stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 40px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.k-hero__stats strong {
display: block;
font-family: var(--tp-font-head);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.15;
color: #fff;
}
.k-hero__stats span {
font-size: 13.5px;
color: rgba(226, 232, 240, .6);
}
@media (max-width: 767px) {
.k-hero__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 28px;
}
}
.k-logos--compact .k-logos__items img {
height: 26px !important;
max-height: 26px;
max-width: 130px;
}
.k-pd-req {
margin-top: 22px;
padding: 14px 16px;
border: 1px solid var(--tp-line);
border-radius: 14px;
background: #fff;
}
.k-pd-req__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
font-size: 14px;
}
.k-pd-req__head strong {
font-family: var(--tp-font-head);
color: var(--tp-ink);
font-weight: 700;
}
.k-pd-req__head .k-link {
font-size: 13.5px;
}
.k-pd-req ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 20px;
font-size: 13.5px;
color: var(--tp-text);
}
.k-pd-req li {
display: flex;
align-items: center;
gap: 10px;
}
.k-pd-req li i {
flex: 0 0 16px;
width: 16px;
text-align: center;
color: var(--tp-muted);
}
@media (max-width: 575px) {
.k-pd-req ul {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 991px) {
.k-timeline__item::before {
display: none;
}
}
:root {
--k-grad: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
--k-grad-h: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);
--k-grad-text: linear-gradient(90deg, #60a5fa 0%, #22d3ee 100%);
--k-grad-soft: linear-gradient(135deg, rgba(37, 99, 235, .08) 0%, rgba(14, 165, 233, .08) 100%);
--k-glow: 0 10px 30px -10px rgba(37, 99, 235, .55);
}
.k-h1 {
font-weight: 800;
letter-spacing: -.04em;
}
.k-h2 {
font-weight: 750;
letter-spacing: -.035em;
}
.k-text-grad {
background: var(--k-grad-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.k-section:not(.k-section--dark) .k-text-grad,
.k-pd-hero .k-text-grad {
background-image: var(--k-grad);
}
.k-eyebrow {
padding: 5px 12px 5px 10px;
border-radius: 999px;
background: var(--k-grad-soft);
border: 1px solid rgba(37, 99, 235, .14);
font-size: 12px;
letter-spacing: .05em;
}
.k-eyebrow::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--k-grad);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.k-section--dark .k-eyebrow,
.k-hero .k-eyebrow,
.k-cta .k-eyebrow {
background: rgba(255, 255, 255, .06);
border-color: rgba(147, 197, 253, .22);
}
.k-section--dark .k-eyebrow::before,
.k-hero .k-eyebrow::before {
background: var(--k-grad-text);
box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}
.k-btn--primary {
background: var(--k-grad);
border-color: transparent;
box-shadow: var(--k-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.k-btn--primary:hover {
background: var(--k-grad-h);
border-color: transparent;
box-shadow: 0 14px 34px -10px rgba(37, 99, 235, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.k-btn {
min-height: 44px;
}
.k-icon {
background: var(--k-grad);
border: 0;
color: #fff;
box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.k-icon i {
color: #fff;
}
.k-icon--dark {
background: var(--tp-ink);
box-shadow: none;
}
.k-section--dark .k-icon {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(147, 197, 253, .18);
color: #7dd3fc;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.k-section--dark .k-icon i {
color: #7dd3fc;
}
.k-card,
.k-pcard {
border-radius: 18px;
}
.k-card--hover:hover,
.k-pcard:hover {
border-color: transparent;
background: linear-gradient(#fff, #fff) padding-box, var(--k-grad) border-box;
box-shadow: 0 22px 44px -20px rgba(15, 23, 42, .28), 0 0 0 1px rgba(37, 99, 235, .04);
transform: translateY(-3px);
}
.k-pcard--featured,
.k-pcard--featured:hover {
border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, var(--k-grad) border-box;
box-shadow: 0 0 0 1px rgba(37, 99, 235, .08), 0 18px 40px -22px rgba(37, 99, 235, .55);
}
.k-pcard__ribbon.k-badge--dark {
background: var(--k-grad);
border-color: transparent;
box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .6);
}
.k-section--dark .k-card {
transition: border-color .2s, background-color .2s, transform .2s var(--tp-ease);
}
.k-section--dark .k-card:hover {
border-color: rgba(125, 211, 252, .28);
background: rgba(255, 255, 255, .05);
transform: translateY(-2px);
}
.k-hero::before {
background:
radial-gradient(760px 460px at 85% -5%, rgba(37, 99, 235, .45), transparent 62%),
radial-gradient(620px 420px at 55% 115%, rgba(14, 165, 233, .22), transparent 60%),
radial-gradient(520px 380px at -5% 30%, rgba(37, 99, 235, .16), transparent 60%);
}
.k-hero::after {
background-size: 56px 56px;
}
@media (prefers-reduced-motion: no-preference) {
.k-hero::before {
animation: kHeroDrift 18s ease-in-out infinite alternate;
}
}
@keyframes kHeroDrift {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(-2%, 2%, 0) scale(1.06);
}
}
.k-term {
box-shadow: 0 0 0 1px rgba(96, 165, 250, .14), 0 40px 90px -30px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.k-term__bar span:nth-child(1) {
background: #f87171;
}
.k-term__bar span:nth-child(2) {
background: #fbbf24;
}
.k-term__bar span:nth-child(3) {
background: #34d399;
}
.k-pd-hero {
position: relative;
isolation: isolate;
background:
radial-gradient(700px 320px at 95% -20%, rgba(14, 165, 233, .12), transparent 60%),
radial-gradient(640px 300px at 0% -30%, rgba(37, 99, 235, .10), transparent 60%),
linear-gradient(180deg, var(--tp-surface) 0%, #fff 100%);
}
.k-section--alt {
background:
radial-gradient(900px 300px at 50% 0%, rgba(37, 99, 235, .05), transparent 70%),
var(--tp-surface);
}
.k-cta::before {
background:
radial-gradient(620px 320px at 100% 0%, rgba(37, 99, 235, .6), transparent 60%),
radial-gradient(520px 300px at 0% 120%, rgba(14, 165, 233, .35), transparent 60%);
}
.k-cta {
box-shadow: 0 30px 70px -35px rgba(15, 23, 42, .6);
}
.k-step:first-child::before,
.k-steps .k-step::before {
transition: background-color .2s;
}
.k-step:first-child::before {
background: var(--k-grad);
border-color: transparent;
box-shadow: 0 0 0 6px #fff, var(--k-glow);
}
.k-compare thead th.is-hl {
background: var(--tp-ink) !important;
background-image: linear-gradient(135deg, #0b1220 0%, #16284a 100%) !important;
}
.k-compare {
border-radius: 18px;
box-shadow: 0 16px 40px -28px rgba(15, 23, 42, .35);
}
.k-tabs button.is-active {
box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px rgba(37, 99, 235, .25);
color: var(--tp-brand-600);
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.k-page .k-card,
.k-page .k-pcard,
.k-page .k-step,
.k-page .k-post,
.k-page .k-chip,
.k-page .k-compare,
.k-page .k-faq details {
animation: kRise linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
}
}
@keyframes kRise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 767px) {
.k-page .container {
padding-left: 18px;
padding-right: 18px;
}
.k-h1 {
font-size: clamp(2.05rem, 8.4vw, 2.6rem);
line-height: 1.08;
}
.k-h2 {
font-size: clamp(1.55rem, 6.4vw, 1.9rem);
}
.k-lead {
font-size: 1.02rem;
}
.k-head {
margin-bottom: 24px;
}
.k-hero {
padding: 44px 0 40px;
}
.k-hero__actions {
margin: 24px 0 20px;
}
.k-hero__actions .k-btn {
flex: 1 1 100%;
}
.k-hero__meta {
font-size: 13px;
gap: 8px 16px;
}
.k-term {
font-size: 12px;
}
.k-card,
.k-pcard {
padding: 20px;
border-radius: 16px;
}
.k-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
max-width: 100%;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.k-tabs::-webkit-scrollbar {
display: none;
}
.k-tabs button {
flex: 0 0 auto;
min-height: 40px;
}
.k-head--split {
align-items: stretch;
}
.k-cta {
text-align: left;
}
.k-cta__actions {
width: 100%;
}
.k-cta__actions .k-btn {
flex: 1 1 100%;
}
.k-faq summary {
font-size: 16px;
padding: 18px 0;
}
.k-faq__a {
padding-right: 0;
}
.k-compare th,
.k-compare td {
padding: 12px 14px;
font-size: 14px;
}
.k-stat strong {
font-size: 1.7rem;
}
}
/* kz-v4.css */
html.v4 {
--kz-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--kz-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--kz-ink: #111a33;
--kz-text: #303c56;
--kz-muted: #5b6680;
--kz-subtle: #8791a6;
--kz-line: #e3e9f4;
--kz-line-2: #eef2f9;
--kz-line-strong: #c7d1e3;
--kz-bg: #ffffff;
--kz-bg-soft: #f5f8fe;
--kz-bg-sunk: #ebf0fa;
--kz-n-950: #080f24;
--kz-n-900: #0d1630;
--kz-n-850: #121d3d;
--kz-n-800: #18264c;
--kz-n-700: #233563;
--kz-d-text: #d3dcf0;
--kz-d-soft: #b9c5dc;
--kz-d-muted: #9aa8c4;
--kz-d-line: rgba(255, 255, 255, .09);
--kz-d-line-2: rgba(255, 255, 255, .06);
--kz-d-fill: rgba(255, 255, 255, .04);
--kz-blue: #2a5cf6;
--kz-blue-h: #1f4be0;
--kz-blue-50: #eef3ff;
--kz-blue-100: #dbe5ff;
--kz-blue-300: #9cc4ff;
--kz-sky: #7fd6ff;
--kz-cyan: #2ee0e6;
--kz-grad: linear-gradient(120deg, #2a5cf6 0%, #1fa2ff 55%, #2ee0e6 100%);
--kz-grad-text: linear-gradient(100deg, #9cc4ff 0%, #6ff0f0 100%);
--kz-ok: #047857;
--kz-ok-bg: #ecfdf5;
--kz-ok-line: #bbf7d0;
--kz-ok-d: #34d399;
--kz-warn: #b45309;
--kz-warn-bg: #fffbeb;
--kz-warn-line: #fde68a;
--kz-warn-d: #fbbf24;
--kz-err: #b91c1c;
--kz-err-bg: #fef2f2;
--kz-err-line: #fecaca;
--kz-err-d: #f87171;
--kz-star: #f59e0b;
--kz-wa: #179a4c;
--kz-1: 4px;
--kz-2: 8px;
--kz-3: 12px;
--kz-4: 16px;
--kz-5: 24px;
--kz-6: 32px;
--kz-7: 40px;
--kz-8: 48px;
--kz-9: 64px;
--kz-10: 80px;
--kz-sec: 80px;
--kz-sec-tight: 48px;
--kz-gutter: 24px;
--kz-max: 1200px;
--kz-hdr-h: 64px;
--kz-r-xs: 6px;
--kz-r-sm: 10px;
--kz-r: 14px;
--kz-r-lg: 18px;
--kz-r-xl: 26px;
--kz-sh-1: 0 1px 2px rgba(17, 26, 51, .05);
--kz-sh-2: 0 1px 2px rgba(17, 26, 51, .04), 0 16px 36px -18px rgba(42, 92, 246, .22);
--kz-sh-3: 0 0 0 1px rgba(17, 26, 51, .03), 0 32px 72px -32px rgba(31, 75, 224, .35);
--kz-sh-d: 0 0 0 1px rgba(147, 197, 253, .1), 0 40px 90px -40px rgba(0, 0, 0, .85);
--kz-ring: 0 0 0 3px rgba(42, 92, 246, .28);
--kz-ease: cubic-bezier(.2, .7, .2, 1);
--tp-ink: var(--kz-ink);
--tp-ink-2: var(--kz-n-850);
--tp-text: var(--kz-text);
--tp-muted: var(--kz-muted);
--tp-line: var(--kz-line);
--tp-line-2: var(--kz-line-2);
--tp-surface: var(--kz-bg-soft);
--tp-white: #fff;
--tp-brand: var(--kz-blue);
--tp-brand-600: var(--kz-blue-h);
--tp-brand-50: var(--kz-blue-50);
--tp-brand-100: var(--kz-blue-100);
--tp-ok: #059669;
--tp-radius-sm: 8px;
--tp-radius: 12px;
--tp-radius-lg: 16px;
--tp-shadow-sm: var(--kz-sh-1);
--tp-shadow: var(--kz-sh-1);
--tp-shadow-lg: var(--kz-sh-2);
--tp-font: var(--kz-font);
--tp-font-head: var(--kz-font);
--tp-ease: var(--kz-ease);
--k-grad: var(--kz-grad);
--k-grad-h: var(--kz-grad);
--k-grad-text: var(--kz-grad-text);
--k-grad-soft: var(--kz-blue-50);
--k-glow: none;
--theme-primary: var(--kz-blue);
--theme-accent: var(--kz-cyan);
}
@media (max-width: 991px) {
html.v4 {
--kz-sec: 64px;
--kz-sec-tight: 40px;
}
}
@media (max-width: 767px) {
html.v4 {
--kz-sec: 48px;
--kz-sec-tight: 32px;
--kz-gutter: 16px;
}
}
html.v4 {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
html.v4 body {
font-family: var(--kz-font);
font-size: 16px;
line-height: 1.6;
letter-spacing: 0;
color: var(--kz-text);
background: var(--kz-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.v4 h1,
html.v4 h2,
html.v4 h3,
html.v4 h4,
html.v4 h5,
html.v4 h6 {
font-family: var(--kz-font);
letter-spacing: -.02em;
}
html.v4 [id] {
scroll-margin-top: calc(var(--kz-hdr-h) + 16px);
}
html.v4 ::selection {
background: #cfe0ff;
color: var(--kz-ink);
}
html.v4 :focus-visible {
outline: 2px solid var(--kz-blue) !important;
outline-offset: 2px !important;
}
html.v4 .k-hero :focus-visible,
html.v4 .k-section--dark :focus-visible,
html.v4 .k-cta :focus-visible,
html.v4 .kz-ftr :focus-visible,
html.v4 .kz-ann :focus-visible {
outline-color: var(--kz-sky) !important;
}
html.v4::-webkit-scrollbar-thumb,
html.v4 ::-webkit-scrollbar-thumb {
background: #c3cad6;
border-radius: 8px;
}
html.v4::-webkit-scrollbar-thumb:hover,
html.v4 ::-webkit-scrollbar-thumb:hover {
background: #9aa4b4;
}
html.v4 .container,
html.v4 .k-page .container {
width: 100%;
max-width: calc(var(--kz-max) + 2 * var(--kz-gutter));
padding-left: var(--kz-gutter);
padding-right: var(--kz-gutter);
margin-left: auto;
margin-right: auto;
}
html.v4 .k-page {
--k-header-h: var(--kz-hdr-h);
background: var(--kz-bg);
color: var(--kz-text);
}
html.v4 .kz-skip {
position: fixed;
top: 8px;
left: 8px;
z-index: 2000;
padding: 10px 16px;
border-radius: var(--kz-r-sm);
background: var(--kz-ink);
color: #fff !important;
font-size: 14px;
font-weight: 600;
transform: translateY(-150%);
transition: transform .15s var(--kz-ease);
}
html.v4 .kz-skip:focus {
transform: none;
}
html.v4 .kz-anchor-main {
display: block;
height: 0;
outline: 0;
}
html.v4 .kz-mono {
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
html.v4 .kz-num {
font-variant-numeric: tabular-nums;
}
html.v4 .k-section {
padding: var(--kz-sec) 0;
}
html.v4 .k-section--tight {
padding: var(--kz-sec-tight) 0;
}
html.v4 .k-section--band {
padding: 20px 0;
border-bottom: 1px solid var(--kz-line-2);
}
html.v4 .k-section--alt {
background: var(--kz-bg-soft);
border-top: 1px solid var(--kz-line-2);
border-bottom: 1px solid var(--kz-line-2);
}
html.v4 .k-section--alt + .k-section--alt {
border-top: 0;
}
html.v4 .k-section--dark {
position: relative;
isolation: isolate;
background: var(--kz-n-900);
color: var(--kz-d-text);
border: 0;
}
html.v4 .k-section--dark::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(760px 320px at 50% 0%, rgba(37, 99, 235, .16), transparent 70%);
}
html.v4 .k-section--dark .k-h2,
html.v4 .k-section--dark .k-h3,
html.v4 .k-section--dark h2,
html.v4 .k-section--dark h3 {
color: #fff;
}
html.v4 .k-section--dark .k-lead,
html.v4 .k-section--dark p {
color: var(--kz-d-muted);
}
html.v4 .k-head {
max-width: 720px;
margin-bottom: 40px;
}
html.v4 .k-head .k-lead {
max-width: 620px;
}
html.v4 .k-head--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
html.v4 .k-head--center .k-lead {
margin-left: auto;
margin-right: auto;
}
html.v4 .k-head--split {
max-width: none;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px 32px;
flex-wrap: wrap;
}
html.v4 .k-head--split > div {
max-width: 660px;
}
@media (max-width: 767px) {
html.v4 .k-head {
margin-bottom: 28px;
}
html.v4 .k-head--split {
align-items: flex-start;
}
}
html.v4 .k-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
padding: 0;
background: none;
border: 0;
border-radius: 0;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
color: var(--kz-blue);
}
html.v4 .k-eyebrow::before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 2px;
background: var(--kz-blue);
box-shadow: 0 0 0 3px var(--kz-blue-100);
}
html.v4 .k-hero .k-eyebrow,
html.v4 .k-section--dark .k-eyebrow,
html.v4 .k-cta .k-eyebrow {
color: var(--kz-sky);
background: none;
border: 0;
}
html.v4 .k-hero .k-eyebrow::before,
html.v4 .k-section--dark .k-eyebrow::before,
html.v4 .k-cta .k-eyebrow::before {
background: var(--kz-cyan);
box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
html.v4 .k-h1,
html.v4 .k-pd-title {
font-family: var(--kz-font);
font-size: clamp(2.125rem, 1.45rem + 2.7vw, 3.5rem);
font-weight: 650;
line-height: 1.06;
letter-spacing: -.04em;
color: var(--kz-ink);
margin: 0 0 16px;
text-wrap: balance;
}
html.v4 .k-h1--sm,
html.v4 .k-pd-title {
font-size: clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
line-height: 1.08;
}
html.v4 .k-h2 {
font-family: var(--kz-font);
font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
font-weight: 650;
line-height: 1.1;
letter-spacing: -.035em;
color: var(--kz-ink);
margin: 0 0 12px;
text-wrap: balance;
}
html.v4 .k-h3 {
font-family: var(--kz-font);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.015em;
color: var(--kz-ink);
margin: 0 0 8px;
}
html.v4 .k-lead {
font-size: 1.125rem;
line-height: 1.6;
color: var(--kz-muted);
margin: 0;
}
@media (max-width: 767px) {
html.v4 .k-lead {
font-size: 1.0625rem;
}
}
html.v4 .k-muted {
color: var(--kz-muted);
}
html.v4 .k-text-grad {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
color: var(--kz-blue);
}
html.v4 .k-hero .k-text-grad,
html.v4 .k-section--dark .k-text-grad,
html.v4 .k-cta .k-text-grad {
background: var(--kz-grad-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
html.v4 .k-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--kz-blue) !important;
font-weight: 550;
text-decoration: none !important;
}
html.v4 .k-link:hover {
color: var(--kz-blue-h) !important;
}
html.v4 .k-link i {
font-size: .8em;
transition: transform .15s var(--kz-ease);
}
html.v4 .k-link:hover i {
transform: translateX(3px);
}
html.v4 .k-hero .k-link,
html.v4 .k-section--dark .k-link {
color: var(--kz-sky) !important;
}
html.v4 .k-prose {
font-size: 16px;
line-height: 1.75;
color: var(--kz-text);
}
@media (min-width: 768px) {
html.v4 .k-prose {
font-size: 17px;
}
}
html.v4 .k-prose > :first-child {
margin-top: 0;
}
html.v4 .k-prose h2,
html.v4 .k-prose h3,
html.v4 .k-prose h4 {
font-family: var(--kz-font);
color: var(--kz-ink);
font-weight: 650;
letter-spacing: -.025em;
line-height: 1.25;
margin: 1.8em 0 .6em;
}
html.v4 .k-prose h2 {
font-size: 1.625rem;
}
html.v4 .k-prose h3 {
font-size: 1.25rem;
}
html.v4 .k-prose h4 {
font-size: 1.0625rem;
}
html.v4 .k-prose p {
margin: 0 0 1.15em;
}
html.v4 .k-prose ul,
html.v4 .k-prose ol {
padding-left: 1.3em;
margin: 0 0 1.2em;
}
html.v4 .k-prose li {
margin-bottom: .45em;
}
html.v4 .k-prose li::marker {
color: var(--kz-blue);
}
html.v4 .k-prose a {
color: var(--kz-blue);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(37, 99, 235, .35);
text-underline-offset: 3px;
}
html.v4 .k-prose a:hover {
text-decoration-color: currentColor;
}
html.v4 .k-prose strong {
color: var(--kz-ink);
font-weight: 600;
}
html.v4 .k-prose img {
max-width: 100%;
height: auto;
border-radius: var(--kz-r);
border: 1px solid var(--kz-line);
}
html.v4 .k-prose code {
font-family: var(--kz-mono);
font-size: .88em;
padding: .15em .4em;
border-radius: var(--kz-r-xs);
background: var(--kz-bg-sunk);
color: var(--kz-ink);
}
html.v4 .k-prose pre {
font-family: var(--kz-mono);
font-size: 14px;
line-height: 1.7;
padding: 16px 20px;
border-radius: var(--kz-r);
background: var(--kz-n-900);
color: var(--kz-d-text);
overflow-x: auto;
margin: 0 0 1.4em;
}
html.v4 .k-prose pre code {
background: none;
padding: 0;
color: inherit;
}
html.v4 .k-prose blockquote {
margin: 1.4em 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--kz-blue);
color: var(--kz-ink);
font-size: 1.05em;
}
html.v4 .k-prose table {
width: 100%;
display: block;
overflow-x: auto;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
margin: 1.4em 0;
}
html.v4 .k-prose th,
html.v4 .k-prose td {
border: 0;
border-bottom: 1px solid var(--kz-line-2);
padding: 11px 14px;
text-align: left;
vertical-align: top;
}
html.v4 .k-prose th {
background: var(--kz-bg-soft);
color: var(--kz-ink);
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
html.v4 .k-prose tr:last-child td {
border-bottom: 0;
}
html.v4 .k-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
min-height: 0;
padding: 0 18px;
border-radius: var(--kz-r-sm);
border: 1px solid transparent;
font-family: var(--kz-font);
font-size: 15px;
font-weight: 550;
letter-spacing: -.005em;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transform: none;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
html.v4 .k-btn:hover {
transform: none;
}
html.v4 .k-btn i {
font-size: .88em;
}
html.v4 .k-btn .fa-arrow-right {
transition: transform .15s var(--kz-ease);
}
html.v4 .k-btn:hover .fa-arrow-right {
transform: translateX(2px);
}
html.v4 .k-btn--primary {
background: var(--kz-blue);
border-color: var(--kz-blue);
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(10, 16, 32, .2);
}
html.v4 .k-btn--primary:hover {
background: var(--kz-blue-h);
border-color: var(--kz-blue-h);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px -8px rgba(37, 99, 235, .7);
}
html.v4 .k-btn--dark {
background: var(--kz-ink);
border-color: var(--kz-ink);
color: #fff !important;
}
html.v4 .k-btn--dark:hover {
background: var(--kz-n-800);
border-color: var(--kz-n-800);
}
html.v4 .k-btn--light {
background: #fff;
border-color: #fff;
color: var(--kz-ink) !important;
}
html.v4 .k-btn--light:hover {
background: var(--kz-bg-sunk);
border-color: var(--kz-bg-sunk);
}
html.v4 .k-btn--ghost {
background: #fff;
border-color: #d3dae5;
color: var(--kz-ink) !important;
box-shadow: var(--kz-sh-1);
}
html.v4 .k-btn--ghost:hover {
background: var(--kz-bg-soft);
border-color: #b6c0cf;
}
html.v4 .k-btn--ghost-dark {
background: rgba(255, 255, 255, .03);
border-color: rgba(255, 255, 255, .18);
color: #fff !important;
}
html.v4 .k-btn--ghost-dark:hover {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .32);
}
html.v4 .k-btn--lg {
height: 52px;
padding: 0 24px;
font-size: 16px;
}
html.v4 .k-btn--sm {
height: 36px;
padding: 0 12px;
font-size: 14px;
}
html.v4 .k-btn--block {
width: 100%;
}
html.v4 .k-btn[disabled],
html.v4 .k-btn.is-disabled {
opacity: .5;
pointer-events: none;
}
@media (pointer: coarse) {
html.v4 .k-btn--sm {
height: 44px;
}
}
html.v4 .k-badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 8px;
border-radius: var(--kz-r-xs);
border: 1px solid var(--kz-line);
background: var(--kz-bg-soft);
color: var(--kz-text);
font-family: var(--kz-font);
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
white-space: nowrap;
box-shadow: none;
}
html.v4 .k-badge i {
font-size: 10px;
}
html.v4 .k-badge--brand {
background: var(--kz-blue-50);
border-color: var(--kz-blue-100);
color: var(--kz-blue-h);
}
html.v4 .k-badge--dark {
background: var(--kz-ink);
border-color: var(--kz-ink);
color: #fff;
}
html.v4 .k-badge--ok {
background: var(--kz-ok-bg);
border-color: var(--kz-ok-line);
color: var(--kz-ok);
}
html.v4 .k-badge--warn {
background: var(--kz-warn-bg);
border-color: var(--kz-warn-line);
color: var(--kz-warn);
}
html.v4 .k-badge--glass {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .14);
color: var(--kz-d-text);
}
html.v4 .k-off {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 6px;
border-radius: var(--kz-r-xs);
background: var(--kz-ok-bg);
border: 1px solid var(--kz-ok-line);
color: var(--kz-ok);
font-size: 11.5px;
font-weight: 650;
}
html.v4 .k-card {
background: #fff;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
padding: 24px;
height: 100%;
box-shadow: none;
transform: none;
}
html.v4 .k-card--hover {
transition: border-color .2s, box-shadow .2s;
}
html.v4 .k-card--hover:hover {
background: #fff;
border-color: var(--kz-line-strong);
box-shadow: var(--kz-sh-2);
transform: none;
}
html.v4 .k-card p {
margin: 0;
color: var(--kz-muted);
font-size: 15px;
line-height: 1.6;
}
html.v4 .k-section--dark .k-card,
html.v4 .k-hero .k-card {
background: var(--kz-d-fill);
border-color: var(--kz-d-line);
}
html.v4 .k-section--dark .k-card:hover {
background: rgba(255, 255, 255, .06);
border-color: rgba(125, 211, 252, .24);
box-shadow: none;
transform: none;
}
html.v4 .k-section--dark .k-card p {
color: var(--kz-d-muted);
}
html.v4 .k-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: var(--kz-r-sm);
background: var(--kz-blue-50);
border: 1px solid var(--kz-blue-100);
color: var(--kz-blue);
font-size: 16px;
box-shadow: none;
margin-bottom: 16px;
}
html.v4 .k-icon i {
color: inherit;
}
html.v4 .k-icon--dark {
background: var(--kz-ink);
border-color: var(--kz-ink);
color: #fff;
}
html.v4 .k-section--dark .k-icon,
html.v4 .k-hero .k-icon,
html.v4 .k-cta .k-icon {
background: rgba(255, 255, 255, .05);
border: 1px solid var(--kz-d-line);
color: var(--kz-sky);
box-shadow: none;
}
html.v4 .k-section--dark .k-icon i,
html.v4 .k-hero .k-icon i {
color: var(--kz-sky);
}
html.v4 .k-grid {
display: grid;
gap: 24px;
}
@media (max-width: 767px) {
html.v4 .k-grid {
gap: 16px;
}
}
html.v4 .k-checks {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
html.v4 .k-checks li {
position: relative;
padding-left: 28px;
line-height: 1.5;
font-size: 15px;
color: var(--kz-text);
}
html.v4 .k-checks li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 0;
background: var(--kz-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center/14px no-repeat;
}
html.v4 .k-checks li.is-off {
color: var(--kz-muted);
}
html.v4 .k-checks li.is-off::before {
background: var(--kz-bg-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a93a3'%3E%3Cpath d='m6 5 4 4 4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
html.v4 .k-section--dark .k-checks li,
html.v4 .k-hero .k-checks li,
html.v4 .k-cta .k-checks li {
color: var(--kz-d-text);
}
html.v4 .k-section--dark .k-checks li::before,
html.v4 .k-hero .k-checks li::before,
html.v4 .k-cta .k-checks li::before {
background-color: rgba(125, 211, 252, .12);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237dd3fc'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E");
}
html.v4 .k-mini {
display: flex;
gap: 14px;
height: 100%;
padding: 16px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
}
html.v4 .k-mini .k-icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
margin: 0;
font-size: 14px;
}
html.v4 .k-mini h3,
html.v4 .k-mini strong {
display: block;
margin: 0 0 4px;
font-family: var(--kz-font);
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
color: var(--kz-ink);
}
html.v4 .k-mini p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--kz-muted);
}
html.v4 .k-section--dark .k-mini {
background: var(--kz-d-fill);
border-color: var(--kz-d-line);
}
html.v4 .k-section--dark .k-mini h3,
html.v4 .k-section--dark .k-mini strong {
color: #fff;
}
html.v4 .k-section--dark .k-mini p {
color: var(--kz-d-muted);
}
html.v4 .k-feature {
display: flex;
gap: 16px;
}
html.v4 .k-feature .k-icon {
margin: 0;
}
html.v4 .k-feature p {
margin: 0;
font-size: 15px;
color: var(--kz-muted);
line-height: 1.6;
}
html.v4 .k-feat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
font-size: 14.5px;
font-weight: 500;
color: var(--kz-ink);
}
html.v4 .k-feat i {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: var(--kz-r-sm);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--kz-blue-50);
color: var(--kz-blue);
font-size: 13px;
}
html.v4 .k-chip {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
}
html.v4 .k-chip i {
font-size: 18px;
color: var(--kz-ink);
width: 24px;
text-align: center;
}
html.v4 .k-chip strong {
display: block;
font-size: 14.5px;
font-weight: 600;
color: var(--kz-ink);
}
html.v4 .k-chip small {
display: block;
font-size: 13px;
color: var(--kz-muted);
}
html.v4 .k-plist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
html.v4 .k-plist li {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
font-family: var(--kz-mono);
font-size: 12px;
line-height: 1.4;
color: var(--kz-muted);
}
html.v4 .k-plist i {
flex: 0 0 20px;
width: 20px;
text-align: center;
font-size: 17px;
color: var(--kz-ink);
}
html.v4 .k-plist strong {
display: block;
font-family: var(--kz-font);
font-size: 14.5px;
font-weight: 600;
color: var(--kz-ink);
margin-bottom: 1px;
}
html.v4 .k-plist--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991px) {
html.v4 .k-plist--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 400px) {
html.v4 .k-plist,
html.v4 .k-plist--4 {
grid-template-columns: minmax(0, 1fr);
}
}
html.v4 .k-subhead {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
font-family: var(--kz-font);
font-size: 16px;
font-weight: 650;
color: var(--kz-ink);
}
html.v4 .k-kv {
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
overflow: hidden;
}
html.v4 .k-kv__title {
margin: 0;
padding: 12px 16px;
background: var(--kz-bg-soft);
border-bottom: 1px solid var(--kz-line-2);
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .k-kv__row {
padding: 10px 16px;
font-size: 14px;
}
html.v4 .k-kv dd {
font-variant-numeric: tabular-nums;
}
html.v4 .k-hero {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--kz-n-950);
color: var(--kz-d-text);
padding: 72px 0 64px;
box-shadow: inset 0 -1px 0 var(--kz-d-line);
}
html.v4 .k-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
animation: none;
background:
radial-gradient(820px 480px at 78% -12%, rgba(37, 99, 235, .34), transparent 64%),
radial-gradient(560px 380px at 104% 70%, rgba(34, 211, 238, .08), transparent 60%),
radial-gradient(520px 360px at -8% 110%, rgba(37, 99, 235, .12), transparent 62%);
}
html.v4 .k-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
background-size: 48px 48px;
background-position: -1px -1px;
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 20%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 70% at 70% 20%, #000 20%, transparent 75%);
display: none;
}
html.v4 .k-hero .k-h1 {
color: #fff;
}
html.v4 .k-hero .k-lead {
color: var(--kz-d-soft);
max-width: 560px;
}
html.v4 .k-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
html.v4 .k-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 32px 0 24px;
}
html.v4 .k-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 14px;
color: var(--kz-d-muted);
}
html.v4 .k-hero__meta span {
display: inline-flex;
align-items: center;
gap: 8px;
}
html.v4 .k-hero__meta i {
color: var(--kz-ok-d);
font-size: 13px;
}
html.v4 .k-hero__stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 56px;
padding-top: 0;
border-top: 1px solid var(--kz-d-line);
}
html.v4 .k-hero__stats > div {
padding: 20px 24px 0 0;
}
html.v4 .k-hero__stats strong {
display: block;
font-family: var(--kz-font);
font-size: 1.75rem;
font-weight: 650;
letter-spacing: -.035em;
line-height: 1.15;
color: #fff;
font-variant-numeric: tabular-nums;
}
html.v4 .k-hero__stats span {
font-size: 14px;
color: var(--kz-d-muted);
}
@media (max-width: 991px) {
html.v4 .k-hero {
padding: 48px 0 48px;
}
html.v4 .k-hero__grid {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
}
@media (max-width: 767px) {
html.v4 .k-hero {
padding: 40px 0;
}
html.v4 .k-hero__actions {
margin: 24px 0 20px;
}
html.v4 .k-hero__actions .k-btn {
flex: 1 1 100%;
}
html.v4 .k-hero__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 36px;
}
html.v4 .k-hero__stats > div {
padding: 16px 12px 0 0;
}
html.v4 .k-hero__stats strong {
font-size: 1.5rem;
}
}
html.v4 .k-pd-hero {
position: relative;
isolation: isolate;
padding: 24px 0 48px;
background: var(--kz-bg-soft);
border-bottom: 1px solid var(--kz-line);
}
html.v4 .k-pd-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: radial-gradient(rgba(10, 16, 32, .09) 1px, transparent 1px);
background-size: 20px 20px;
-webkit-mask-image: radial-gradient(ellipse 55% 90% at 100% 0%, #000 10%, transparent 70%);
mask-image: radial-gradient(ellipse 55% 90% at 100% 0%, #000 10%, transparent 70%);
display: none;
}
html.v4 .k-pd-hero .k-lead,
html.v4 .k-pd-desc {
font-size: 1.0625rem;
line-height: 1.6;
color: var(--kz-muted);
max-width: 680px;
}
html.v4 .k-pd-desc {
margin: 0 0 24px;
}
@media (max-width: 767px) {
html.v4 .k-pd-hero {
padding: 16px 0 32px;
}
}
html.v4 .k-crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
margin: 0 0 20px;
font-size: 13.5px;
color: var(--kz-muted);
}
html.v4 .k-crumbs a {
color: var(--kz-muted) !important;
text-decoration: none !important;
}
html.v4 .k-crumbs a:hover {
color: var(--kz-ink) !important;
}
html.v4 .k-crumbs li + li::before {
content: "/";
margin-right: 6px;
color: var(--kz-line-strong);
}
html.v4 .k-crumbs li[aria-current] {
color: var(--kz-ink);
font-weight: 500;
}
html.v4 .k-hero .k-crumbs,
html.v4 .k-hero .k-crumbs a {
color: var(--kz-d-muted) !important;
}
html.v4 .k-hero .k-crumbs li[aria-current] {
color: #fff;
}
html.v4 .k-pd-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 48px;
align-items: start;
}
@media (max-width: 1099px) {
html.v4 .k-pd-grid {
grid-template-columns: minmax(0, 1fr) 350px;
gap: 32px;
}
}
@media (max-width: 991px) {
html.v4 .k-pd-grid {
grid-template-columns: minmax(0, 1fr);
}
}
html.v4 .k-pd-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
html.v4 .k-pd-logo {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-sm);
margin-right: 4px;
}
html.v4 .k-pd-logo img {
width: auto !important;
height: auto !important;
max-width: 112px;
max-height: 20px;
object-fit: contain;
}
html.v4 .k-specs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
margin-bottom: 24px;
overflow: hidden;
}
html.v4 .k-spec {
padding: 12px 16px;
border-right: 1px solid var(--kz-line-2);
}
html.v4 .k-spec:last-child {
border-right: 0;
}
html.v4 .k-spec span {
display: block;
font-family: var(--kz-font);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
margin-bottom: 4px;
}
html.v4 .k-spec strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--kz-ink);
line-height: 1.35;
}
@media (max-width: 767px) {
html.v4 .k-specs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.v4 .k-spec:nth-child(2) {
border-right: 0;
}
html.v4 .k-spec:nth-child(-n+2) {
border-bottom: 1px solid var(--kz-line-2);
}
html.v4 .k-specs--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.v4 .k-specs--3 .k-spec {
padding: 10px 12px;
border-bottom: 0;
}
html.v4 .k-specs--3 .k-spec:nth-child(2) {
border-right: 1px solid var(--kz-line-2);
}
}
html.v4 .k-specs--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
}
html.v4 .k-pd-req {
margin-top: 24px;
padding: 16px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
}
html.v4 .k-pd-req__head strong {
font-family: var(--kz-font);
font-weight: 650;
}
html.v4 .k-assure {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 16px 0 0;
padding: 0;
list-style: none;
font-size: 13.5px;
color: var(--kz-text);
}
html.v4 .k-assure i {
color: var(--kz-ok);
}
html.v4 .k-term {
background: var(--kz-n-850);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--kz-r-lg);
box-shadow: var(--kz-sh-d);
overflow: hidden;
font-family: var(--kz-mono);
font-size: 13px;
}
html.v4 .k-term__bar {
display: flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px;
border-bottom: 1px solid var(--kz-d-line);
color: var(--kz-d-muted);
font-size: 12px;
}
html.v4 .k-term__bar span,
html.v4 .k-term__bar span:nth-child(1),
html.v4 .k-term__bar span:nth-child(2),
html.v4 .k-term__bar span:nth-child(3) {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
}
html.v4 .k-term__bar b {
margin-left: auto;
font-weight: 500;
}
html.v4 .k-term__body {
padding: 18px 20px 20px;
line-height: 1.85;
color: var(--kz-d-text);
overflow-x: auto;
white-space: nowrap;
}
html.v4 .k-term__body .p {
color: var(--kz-blue-300);
}
html.v4 .k-term__body .c {
color: var(--kz-d-muted);
}
html.v4 .k-term__body .ok {
color: var(--kz-ok-d);
}
html.v4 .k-term__foot {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-top: 1px solid var(--kz-d-line);
background: rgba(255, 255, 255, .02);
font-family: var(--kz-font);
}
html.v4 .k-term__foot .k-icon {
margin: 0;
width: 36px;
height: 36px;
flex-basis: 36px;
background: rgba(52, 211, 153, .1);
border-color: rgba(52, 211, 153, .25);
color: var(--kz-ok-d);
}
html.v4 .k-term__foot .k-icon i {
color: var(--kz-ok-d);
}
html.v4 .k-term__foot strong {
display: block;
color: #fff;
font-size: 14px;
font-weight: 600;
}
html.v4 .k-term__foot small {
color: var(--kz-d-muted);
font-size: 12.5px;
}
@media (max-width: 767px) {
html.v4 .k-term {
font-size: 12px;
}
}
html.v4 .k-pcard {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
padding: 20px;
height: 100%;
box-shadow: none;
transform: none;
transition: border-color .2s, box-shadow .2s;
}
html.v4 .k-pcard:hover {
background: #fff;
border-color: var(--kz-line-strong);
box-shadow: var(--kz-sh-2);
transform: none;
}
html.v4 .k-pcard--featured,
html.v4 .k-pcard--featured:hover {
border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, var(--kz-grad) border-box;
box-shadow: 0 24px 48px -36px rgba(37, 99, 235, .6);
}
html.v4 .k-pcard__ribbon,
html.v4 .k-pcard__ribbon.k-badge--dark {
position: absolute;
top: -11px;
left: 18px;
height: 22px;
padding: 0 8px;
background: var(--kz-ink);
border-color: var(--kz-ink);
color: #fff;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
box-shadow: none;
}
html.v4 .k-pcard__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 28px;
margin-bottom: 16px;
}
html.v4 .k-pcard__brand {
display: inline-flex;
align-items: center;
width: 108px;
height: 26px;
}
html.v4 .k-pcard__brand img {
width: auto !important;
height: auto !important;
max-width: 108px;
max-height: 24px;
object-fit: contain;
}
html.v4 .k-logo-text {
font-family: var(--kz-font);
font-weight: 650;
letter-spacing: -.02em;
color: var(--kz-ink);
}
html.v4 .k-pcard__title {
font-family: var(--kz-font);
font-size: 16.5px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.015em;
margin: 0 0 8px;
}
html.v4 .k-pcard__title a {
color: var(--kz-ink) !important;
text-decoration: none !important;
}
html.v4 .k-pcard__title a::after {
border-radius: var(--kz-r);
}
html.v4 .k-pcard__title a:focus-visible {
outline: 0 !important;
}
html.v4 .k-pcard__title a:focus-visible::after {
outline: 2px solid var(--kz-blue);
outline-offset: 2px;
}
html.v4 .k-pcard__sub {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 13px;
color: var(--kz-muted);
margin: 0 0 16px;
}
html.v4 .k-pcard__sub i {
font-size: 12px;
color: var(--kz-subtle);
}
html.v4 .k-pcard .k-checks {
gap: 8px;
margin-bottom: 20px;
}
html.v4 .k-pcard .k-checks li {
font-size: 14px;
padding-left: 26px;
}
html.v4 .k-pcard .k-checks li::before {
width: 18px;
height: 18px;
top: 1px;
}
html.v4 .k-pcard__price {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--kz-line-2);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
html.v4 .k-price__old {
font-size: 13px;
color: var(--kz-muted);
text-decoration: line-through;
}
html.v4 .k-price__now,
html.v4 .k-pcard .k-price__now {
font-family: var(--kz-font);
font-size: 24px;
font-weight: 650;
letter-spacing: -.03em;
color: var(--kz-ink);
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
html.v4 .k-price__now small {
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
color: var(--kz-muted);
letter-spacing: 0;
}
html.v4 .k-tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--kz-bg-sunk);
border: 1px solid var(--kz-line);
border-radius: 10px;
flex-wrap: wrap;
}
html.v4 .k-tabs button {
border: 0;
background: transparent;
color: var(--kz-text);
font-family: var(--kz-font);
font-size: 14px;
font-weight: 550;
height: 36px;
padding: 0 14px;
border-radius: 7px;
cursor: pointer;
box-shadow: none;
transition: background-color .15s, color .15s, box-shadow .15s;
}
html.v4 .k-tabs button:hover {
color: var(--kz-ink);
}
html.v4 .k-tabs button.is-active {
background: #fff;
color: var(--kz-ink);
box-shadow: var(--kz-sh-1), 0 0 0 1px var(--kz-line);
}
html.v4 .k-tabs button span {
font-family: var(--kz-mono);
font-size: 11.5px;
color: var(--kz-muted);
font-weight: 500;
margin-left: 4px;
}
@media (max-width: 767px) {
html.v4 .k-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
max-width: 100%;
scrollbar-width: none;
}
html.v4 .k-tabs::-webkit-scrollbar {
display: none;
}
html.v4 .k-tabs button {
flex: 0 0 auto;
height: 40px;
}
}
html.v4 .k-toolbar {
background: rgba(255, 255, 255, .92);
border-bottom: 1px solid var(--kz-line);
}
html.v4 .k-toolbar .k-tabs button {
height: 32px;
padding: 0 12px;
font-size: 13.5px;
}
@media (pointer: coarse) {
html.v4 .k-toolbar .k-tabs button {
height: 40px;
}
}
html.v4 .k-select {
height: 38px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-sm);
font-family: var(--kz-font);
font-size: 14px;
color: var(--kz-ink);
}
html.v4 .k-select:focus {
outline: 0;
border-color: var(--kz-blue);
box-shadow: var(--kz-ring);
}
html.v4 .k-fchip {
border-radius: var(--kz-r-xs);
}
html.v4 .k-ptable thead th {
font-family: var(--kz-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .08em;
}
html.v4 .k-ptable__price strong {
font-family: var(--kz-font);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
html.v4 .k-variant {
background: var(--kz-bg-sunk);
border-color: var(--kz-line);
border-radius: 10px;
padding: 3px;
}
html.v4 .k-variant__opt {
border-radius: 7px;
}
html.v4 .k-variant__opt.is-current {
box-shadow: var(--kz-sh-1), 0 0 0 1px var(--kz-line);
}
html.v4 .k-page [hidden] {
display: none !important;
}
html.v4 .k-buy {
position: sticky;
top: calc(var(--k-header-h) + 16px);
background: #fff;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-lg);
box-shadow: var(--kz-sh-2);
overflow: hidden;
}
html.v4 .k-buy__body {
padding: 20px 24px 24px;
}
html.v4 .k-buy__label {
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .k-buy__price strong {
font-family: var(--kz-font);
font-size: 40px;
font-weight: 650;
letter-spacing: -.045em;
color: var(--kz-ink);
line-height: 1;
font-variant-numeric: tabular-nums;
}
html.v4 .k-buy__note {
border-radius: var(--kz-r-sm);
background: var(--kz-bg-soft);
border-color: var(--kz-line-2);
}
html.v4 .k-buy__list {
background: var(--kz-bg-soft);
border-top: 1px solid var(--kz-line-2);
}
html.v4 .k-buy__list i {
color: var(--kz-ok);
}
html.v4 .k-buy__pay {
color: var(--kz-subtle);
}
@media (max-width: 991px) {
html.v4 .k-buy {
position: static;
box-shadow: none;
}
}
html.v4 .k-subnav {
position: sticky;
top: var(--k-header-h);
z-index: 90;
background: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: saturate(1.6) blur(12px);
backdrop-filter: saturate(1.6) blur(12px);
border-bottom: 1px solid var(--kz-line);
}
html.v4 .k-subnav .container {
height: 52px;
}
html.v4 .k-subnav nav a {
height: 36px;
padding: 0 12px;
border-radius: var(--kz-r-sm);
font-size: 14px;
font-weight: 500;
color: var(--kz-muted) !important;
}
html.v4 .k-subnav nav a:hover {
background: var(--kz-bg-soft);
color: var(--kz-ink) !important;
}
html.v4 .k-subnav nav a.is-active {
background: var(--kz-bg-sunk);
color: var(--kz-ink) !important;
}
html.v4 .k-subnav__buy strong {
font-family: var(--kz-font);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
html.v4 [id].k-anchor {
scroll-margin-top: calc(var(--k-header-h) + 68px);
}
@media (max-width: 991px) {
html.v4 .k-mbuy {
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, .96);
border-top: 1px solid var(--kz-line);
box-shadow: 0 -12px 32px -20px rgba(10, 16, 32, .3);
}
html.v4 .k-mbuy strong {
font-family: var(--kz-font);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
}
html.v4 .k-timeline {
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
}
html.v4 .k-timeline__item {
padding: 20px;
}
html.v4 .k-timeline__item::before {
height: 2px;
background: var(--kz-line);
}
html.v4 .k-timeline__item:first-child::before {
background: var(--kz-blue);
}
html.v4 .k-timeline__when {
height: 22px;
border-radius: var(--kz-r-xs);
font-family: var(--kz-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .04em;
}
html.v4 .k-timeline__item h3 {
font-family: var(--kz-font);
font-size: 15.5px;
font-weight: 600;
}
html.v4 .k-timeline__item h3::before {
font-family: var(--kz-mono);
font-size: 11.5px;
font-weight: 500;
color: var(--kz-blue);
}
html.v4 .k-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
counter-reset: kstep;
position: relative;
}
html.v4 .k-steps::before {
content: "";
position: absolute;
top: 18px;
left: 18px;
right: 18px;
height: 0;
border-top: 1px dashed var(--kz-line-strong);
background: none;
}
html.v4 .k-step {
position: relative;
counter-increment: kstep;
}
html.v4 .k-step::before,
html.v4 .k-step:first-child::before,
html.v4 .k-steps .k-step::before {
content: counter(kstep, decimal-leading-zero);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--kz-r-sm);
background: #fff;
border: 1px solid var(--kz-line);
color: var(--kz-blue);
font-family: var(--kz-mono);
font-size: 12.5px;
font-weight: 500;
margin-bottom: 16px;
box-shadow: 0 0 0 6px var(--kz-bg);
}
html.v4 .k-section--alt .k-step::before {
box-shadow: 0 0 0 6px var(--kz-bg-soft);
}
html.v4 .k-step p {
font-size: 15px;
line-height: 1.6;
color: var(--kz-muted);
margin: 0;
}
@media (max-width: 991px) {
html.v4 .k-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 28px;
}
html.v4 .k-steps::before {
display: none;
}
}
@media (max-width: 575px) {
html.v4 .k-steps {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
html.v4 .k-step {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 16px;
}
html.v4 .k-step::before {
grid-row: span 3;
margin: 0;
}
}
html.v4 .k-compare {
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
overflow: hidden;
background: #fff;
box-shadow: none;
}
html.v4 .k-compare table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
html.v4 .k-compare th,
html.v4 .k-compare td {
padding: 14px 18px;
border-bottom: 1px solid var(--kz-line-2);
text-align: left;
vertical-align: middle;
}
html.v4 .k-compare thead th {
background: var(--kz-bg-soft) !important;
background-image: none !important;
color: var(--kz-ink) !important;
font-family: var(--kz-font);
font-size: 15px;
font-weight: 650;
border-bottom: 1px solid var(--kz-line) !important;
}
html.v4 .k-compare thead th small {
display: block;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 400;
color: var(--kz-muted);
}
html.v4 .k-compare thead th.is-hl {
background: var(--kz-ink) !important;
background-image: none !important;
color: #fff !important;
}
html.v4 .k-compare thead th.is-hl small {
color: var(--kz-d-muted);
}
html.v4 .k-compare td:first-child {
color: var(--kz-ink);
font-weight: 500;
}
html.v4 .k-compare td.is-hl {
background: #f7faff;
}
html.v4 .k-compare tr:last-child td {
border-bottom: 0;
}
html.v4 .k-yes,
html.v4 .k-no {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 550;
}
html.v4 .k-yes {
color: var(--kz-ok);
}
html.v4 .k-no {
color: var(--kz-muted);
}
@media (max-width: 767px) {
html.v4 .k-compare {
overflow-x: auto;
}
html.v4 .k-compare table {
min-width: 560px;
}
html.v4 .k-compare th,
html.v4 .k-compare td {
padding: 12px 14px;
font-size: 14px;
}
}
html.v4 .k-faq {
border-top: 1px solid var(--kz-line);
}
html.v4 .k-faq details {
border-bottom: 1px solid var(--kz-line);
}
html.v4 .k-faq summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 44px;
padding: 18px 0;
font-family: var(--kz-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--kz-ink);
cursor: pointer;
letter-spacing: -.01em;
}
html.v4 .k-faq summary::-webkit-details-marker {
display: none;
}
html.v4 .k-faq summary::after {
content: "";
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: var(--kz-r-sm);
border: 1px solid var(--kz-line);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230a1020'%3E%3Cpath d='M9.25 4h1.5v5.25H16v1.5h-5.25V16h-1.5v-5.25H4v-1.5h5.25z'/%3E%3C/svg%3E") center/13px no-repeat;
transition: transform .2s var(--kz-ease), background-color .2s;
}
html.v4 .k-faq details[open] summary::after {
transform: rotate(45deg);
background-color: var(--kz-bg-sunk);
}
html.v4 .k-faq summary:hover {
color: var(--kz-blue);
}
html.v4 .k-faq__a {
padding: 0 48px 20px 0;
color: var(--kz-muted);
font-size: 15px;
line-height: 1.7;
}
html.v4 .k-faq__a p:last-child {
margin-bottom: 0;
}
html.v4 .k-faq--compact summary {
padding: 16px 0;
font-size: 15.5px;
}
@media (max-width: 767px) {
html.v4 .k-faq__a {
padding-right: 0;
}
}
html.v4 .k-cta {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: var(--kz-r-xl);
background: var(--kz-n-900);
color: var(--kz-d-soft);
padding: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
box-shadow: none;
border: 1px solid var(--kz-n-800);
}
html.v4 .k-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(560px 300px at 100% 0%, rgba(37, 99, 235, .42), transparent 62%),
radial-gradient(420px 260px at 0% 120%, rgba(34, 211, 238, .12), transparent 60%);
}
html.v4 .k-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
display: none;
}
html.v4 .k-cta .k-h2 {
color: #fff;
margin-bottom: 8px;
max-width: 640px;
}
html.v4 .k-cta p {
margin: 0;
font-size: 16px;
max-width: 560px;
color: var(--kz-d-soft);
}
html.v4 .k-cta__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
html.v4 .k-cta {
padding: 28px 20px;
border-radius: var(--kz-r-lg);
}
html.v4 .k-cta__actions,
html.v4 .k-cta__actions .k-btn {
width: 100%;
}
}
html.v4 .k-post {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none !important;
color: inherit;
}
html.v4 .k-post__img {
aspect-ratio: 16 / 9;
border-radius: var(--kz-r);
overflow: hidden;
background: var(--kz-bg-sunk);
border: 1px solid var(--kz-line);
margin-bottom: 16px;
}
html.v4 .k-post__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--kz-ease);
}
html.v4 .k-post:hover .k-post__img img {
transform: scale(1.02);
}
html.v4 .k-post__meta {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 8px;
font-family: var(--kz-font);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .k-post__meta b {
color: var(--kz-blue);
font-weight: 500;
}
html.v4 .k-post h3 {
font-family: var(--kz-font);
font-size: 18px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -.015em;
color: var(--kz-ink);
margin: 0 0 8px;
transition: color .15s;
}
html.v4 .k-post:hover h3 {
color: var(--kz-blue);
}
html.v4 .k-post p {
font-size: 15px;
color: var(--kz-muted);
line-height: 1.6;
margin: 0;
}
html.v4 .k-logos__label {
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .k-logos__items img {
filter: grayscale(1);
opacity: .55;
}
html.v4 .k-stats {
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: #fff;
}
html.v4 .k-stat strong {
font-family: var(--kz-font);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
html.v4 .k-split {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
html.v4 .k-split__aside {
position: sticky;
top: calc(var(--k-header-h) + 32px);
}
html.v4 .k-cols {
gap: 40px;
}
@media (max-width: 991px) {
html.v4 .k-split {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
html.v4 .k-split__aside {
position: static;
}
html.v4 .k-cols {
gap: 28px;
}
}
html.v4 .kz-pill {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%;
min-height: 32px;
padding: 3px 12px 3px 3px;
margin-bottom: 24px;
border-radius: 999px;
border: 1px solid var(--kz-d-line);
background: rgba(255, 255, 255, .04);
color: var(--kz-d-text) !important;
font-size: 13.5px;
line-height: 1.3;
text-decoration: none !important;
transition: border-color .15s, background-color .15s;
}
html.v4 .kz-pill:hover {
border-color: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .07);
}
html.v4 .kz-pill__tag {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 9px;
border-radius: 999px;
background: var(--kz-blue);
color: #fff;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
html.v4 .kz-pill i {
font-size: 11px;
color: var(--kz-d-muted);
transition: transform .15s var(--kz-ease);
}
html.v4 .kz-pill:hover i {
transform: translateX(2px);
}
html.v4 .kz-pill--light {
border-color: var(--kz-line);
background: #fff;
color: var(--kz-text) !important;
}
html.v4 .kz-display {
font-family: var(--kz-font);
font-size: clamp(2.375rem, 1.35rem + 4vw, 4.25rem);
font-weight: 650;
line-height: 1.02;
letter-spacing: -.045em;
color: #fff;
margin: 0 0 20px;
text-wrap: balance;
}
html.v4 .kz-hero {
padding: 80px 0 0;
}
html.v4 .kz-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
gap: 64px;
align-items: center;
}
html.v4 .kz-hero__copy {
max-width: 600px;
}
html.v4 .kz-hero__lead {
font-size: 1.125rem;
line-height: 1.6;
color: var(--kz-d-soft);
max-width: 540px;
margin: 0;
}
html.v4 .kz-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 32px 0 24px;
}
html.v4 .kz-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
color: var(--kz-d-muted);
}
html.v4 .kz-hero__meta li {
display: inline-flex;
align-items: center;
gap: 8px;
}
html.v4 .kz-hero__meta i {
color: var(--kz-ok-d);
font-size: 13px;
}
html.v4 .kz-hero__visual {
position: relative;
padding: 28px 0 88px;
}
html.v4 .kz-hero__visual > .kz-window {
margin-right: 40px;
}
html.v4 .kz-hero__foot {
margin-top: 64px;
}
@media (max-width: 991px) {
html.v4 .kz-hero {
padding-top: 48px;
}
html.v4 .kz-hero__grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
html.v4 .kz-hero__visual {
max-width: 620px;
padding: 28px 0 88px;
}
html.v4 .kz-hero__foot {
margin-top: 40px;
}
}
@media (max-width: 767px) {
html.v4 .kz-hero {
padding-top: 32px;
}
html.v4 .kz-hero__actions {
margin: 24px 0 20px;
}
html.v4 .kz-hero__actions .k-btn {
flex: 1 1 100%;
}
}
html.v4 .kz-float {
position: absolute;
z-index: 2;
}
html.v4 .kz-float--tl {
top: 0;
left: -28px;
}
html.v4 .kz-float--br {
right: 0;
bottom: 0;
}
@media (max-width: 1199px) {
html.v4 .kz-float--tl {
left: -8px;
}
}
@media (max-width: 575px) {
html.v4 .kz-float {
display: none;
}
html.v4 .kz-hero__visual {
padding: 0 0 8px;
}
html.v4 .kz-hero__visual > .kz-window {
margin-right: 0;
}
}
html.v4 .kz-window {
position: relative;
border-radius: var(--kz-r-lg);
background: var(--kz-n-850);
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: var(--kz-sh-d);
overflow: hidden;
color: var(--kz-d-text);
font-size: 13.5px;
line-height: 1.5;
text-align: left;
}
html.v4 .kz-window__bar {
display: flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px;
border-bottom: 1px solid var(--kz-d-line);
background: rgba(255, 255, 255, .02);
}
html.v4 .kz-window__bar > i {
width: 10px;
height: 10px;
flex: 0 0 10px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
}
html.v4 .kz-window__title {
margin-left: 10px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--kz-mono);
font-size: 12px;
color: var(--kz-d-muted);
}
html.v4 .kz-window__meta {
margin-left: auto;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--kz-mono);
font-size: 11px;
color: var(--kz-d-muted);
}
html.v4 .kz-window__body {
padding: 20px;
}
html.v4 .kz-window--light {
background: #fff;
border-color: var(--kz-line);
box-shadow: var(--kz-sh-3);
color: var(--kz-text);
}
html.v4 .kz-window--light .kz-window__bar {
background: var(--kz-bg-soft);
border-bottom-color: var(--kz-line);
}
html.v4 .kz-window--light .kz-window__bar > i {
background: #d5dbe5;
}
html.v4 .kz-window--light .kz-window__title,
html.v4 .kz-window--light .kz-window__meta {
color: var(--kz-muted);
}
html.v4 .kz-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 8px;
border-radius: var(--kz-r-xs);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
background: rgba(255, 255, 255, .06);
border: 1px solid var(--kz-d-line);
color: var(--kz-d-text);
}
html.v4 .kz-chip--ok {
background: rgba(52, 211, 153, .1);
border-color: rgba(52, 211, 153, .28);
color: var(--kz-ok-d);
}
html.v4 .kz-chip--warn {
background: rgba(251, 191, 36, .1);
border-color: rgba(251, 191, 36, .3);
color: var(--kz-warn-d);
}
html.v4 .kz-window--light .kz-chip--ok,
html.v4 .kz-cert .kz-chip--ok {
background: var(--kz-ok-bg);
border-color: var(--kz-ok-line);
color: var(--kz-ok);
}
html.v4 .kz-dot {
display: inline-block;
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--kz-subtle);
}
html.v4 .kz-dot--ok {
background: var(--kz-ok-d);
box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}
html.v4 .kz-dot--err {
background: var(--kz-err-d);
box-shadow: 0 0 0 3px rgba(248, 113, 113, .18);
}
html.v4 .kz-dot--warn {
background: var(--kz-warn-d);
box-shadow: 0 0 0 3px rgba(251, 191, 36, .18);
}
html.v4 .kz-sign__file {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--kz-d-line);
border-radius: var(--kz-r);
background: rgba(255, 255, 255, .03);
}
html.v4 .kz-sign__ficon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: var(--kz-r-sm);
background: rgba(37, 99, 235, .18);
color: var(--kz-blue-300);
font-size: 15px;
}
html.v4 .kz-sign__fname {
min-width: 0;
flex: 1 1 auto;
}
html.v4 .kz-sign__fname b {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--kz-mono);
font-size: 13px;
font-weight: 500;
color: #fff;
}
html.v4 .kz-sign__fname small {
font-size: 12px;
color: var(--kz-d-muted);
}
html.v4 .kz-sign__rows {
display: grid;
gap: 0;
margin: 16px 0;
}
html.v4 .kz-sign__rows > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 8px 0;
border-bottom: 1px dashed var(--kz-d-line);
}
html.v4 .kz-sign__rows dt {
font-weight: 400;
color: var(--kz-d-muted);
font-size: 12.5px;
}
html.v4 .kz-sign__rows dd {
margin: 0;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--kz-mono);
font-size: 12.5px;
color: var(--kz-d-text);
text-align: right;
}
html.v4 .kz-sign__bar {
height: 4px;
border-radius: 4px;
background: rgba(255, 255, 255, .08);
overflow: hidden;
}
html.v4 .kz-sign__bar span {
display: block;
height: 100%;
background: var(--kz-grad);
transform-origin: 0 50%;
}
html.v4 .kz-sign__done {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 13px;
color: var(--kz-ok-d);
font-weight: 500;
}
html.v4 .kz-sign__done small {
margin-left: auto;
font-family: var(--kz-mono);
font-size: 11.5px;
color: var(--kz-d-muted);
font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
html.v4 .kz-sign__bar span {
animation: kzFill 2.2s var(--kz-ease) .5s both;
}
html.v4 .kz-sign__done {
animation: kzFade .4s var(--kz-ease) 2.6s both;
}
}
@keyframes kzFill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes kzFade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
html.v4 .kz-cert {
width: 290px;
max-width: 100%;
padding: 16px;
border-radius: var(--kz-r);
background: #fff;
border: 1px solid var(--kz-line);
box-shadow: var(--kz-sh-3);
color: var(--kz-text);
font-size: 13px;
text-align: left;
}
html.v4 .kz-cert__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
html.v4 .kz-cert__seal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: var(--kz-r-sm);
background: var(--kz-ink);
color: #fff;
font-size: 15px;
}
html.v4 .kz-cert__name {
min-width: 0;
flex: 1 1 auto;
}
html.v4 .kz-cert__name b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--kz-ink);
line-height: 1.3;
}
html.v4 .kz-cert__name small {
font-family: var(--kz-font);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-cert__rows {
margin: 0;
display: grid;
gap: 0;
}
html.v4 .kz-cert__rows > div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-top: 1px solid var(--kz-line-2);
}
html.v4 .kz-cert__rows dt {
font-weight: 400;
color: var(--kz-muted);
}
html.v4 .kz-cert__rows dd {
margin: 0;
font-weight: 600;
color: var(--kz-ink);
text-align: right;
}
html.v4 .kz-cert__fp {
margin-top: 10px;
padding: 8px 10px;
border-radius: var(--kz-r-sm);
background: var(--kz-bg-soft);
font-family: var(--kz-mono);
font-size: 10.5px;
color: var(--kz-muted);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html.v4 .kz-toast {
display: flex;
align-items: center;
gap: 12px;
width: 280px;
max-width: 100%;
padding: 12px 14px;
border-radius: var(--kz-r);
background: #fff;
border: 1px solid var(--kz-line);
box-shadow: var(--kz-sh-3);
text-align: left;
}
html.v4 .kz-toast__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 50%;
background: var(--kz-ok-bg);
color: var(--kz-ok);
font-size: 14px;
}
html.v4 .kz-toast b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--kz-ink);
line-height: 1.3;
}
html.v4 .kz-toast small {
font-size: 12px;
color: var(--kz-muted);
}
html.v4 .kz-ss {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
html.v4 .kz-ss__item {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
html.v4 .kz-ss__cap {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-ss__note {
margin: 0;
font-size: 14.5px;
color: var(--kz-muted);
line-height: 1.55;
}
html.v4 .kz-ss__note strong {
color: var(--kz-ink);
}
html.v4 .kz-dialog {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
border-radius: var(--kz-r);
overflow: hidden;
text-align: left;
font-size: 14px;
line-height: 1.5;
}
html.v4 .kz-dialog__bar {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
font-size: 12px;
}
html.v4 .kz-dialog__body {
flex: 1 1 auto;
padding: 20px 22px;
}
html.v4 .kz-dialog__title {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 10px;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.01em;
}
html.v4 .kz-dialog__title i {
margin-top: 3px;
font-size: 18px;
}
html.v4 .kz-dialog__text {
margin: 0 0 16px;
font-size: 13.5px;
}
html.v4 .kz-dialog__kv {
margin: 0 0 18px;
display: grid;
gap: 6px;
font-size: 13.5px;
}
html.v4 .kz-dialog__kv > div {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 8px;
}
html.v4 .kz-dialog__kv dt {
font-weight: 400;
}
html.v4 .kz-dialog__kv dd {
margin: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
html.v4 .kz-dialog__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: auto;
}
html.v4 .kz-fakebtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 88px;
height: 32px;
padding: 0 12px;
border-radius: var(--kz-r-xs);
font-size: 13px;
font-weight: 600;
}
html.v4 .kz-dialog--warn {
background: var(--kz-n-850);
border: 1px solid var(--kz-n-700);
color: var(--kz-d-soft);
box-shadow: 0 24px 48px -32px rgba(10, 16, 32, .7);
}
html.v4 .kz-dialog--warn .kz-dialog__bar {
background: rgba(251, 191, 36, .1);
border-bottom: 1px solid rgba(251, 191, 36, .22);
color: var(--kz-warn-d);
font-family: var(--kz-mono);
letter-spacing: .04em;
}
html.v4 .kz-dialog--warn .kz-dialog__title {
color: #fff;
}
html.v4 .kz-dialog--warn .kz-dialog__title i {
color: var(--kz-warn-d);
}
html.v4 .kz-dialog--warn dt {
color: var(--kz-d-muted);
}
html.v4 .kz-dialog--warn dd {
color: #fff;
}
html.v4 .kz-dialog--warn .is-bad {
color: var(--kz-warn-d);
}
html.v4 .kz-dialog--warn .kz-fakebtn {
border: 1px solid rgba(255, 255, 255, .2);
color: var(--kz-d-text);
}
html.v4 .kz-dialog--warn .kz-fakebtn--pri {
background: #fff;
border-color: #fff;
color: var(--kz-ink);
}
html.v4 .kz-dialog--ok {
background: #fff;
border: 1px solid var(--kz-line);
color: var(--kz-text);
box-shadow: var(--kz-sh-3);
}
html.v4 .kz-dialog--ok .kz-dialog__bar {
background: var(--kz-bg-soft);
border-bottom: 1px solid var(--kz-line);
color: var(--kz-muted);
font-family: var(--kz-mono);
letter-spacing: .04em;
}
html.v4 .kz-dialog--ok .kz-dialog__title {
color: var(--kz-ink);
}
html.v4 .kz-dialog--ok .kz-dialog__title i {
color: var(--kz-ok);
}
html.v4 .kz-dialog--ok dt {
color: var(--kz-muted);
}
html.v4 .kz-dialog--ok dd {
color: var(--kz-ink);
}
html.v4 .kz-dialog--ok .is-good {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--kz-ok);
}
html.v4 .kz-dialog--ok .kz-fakebtn {
border: 1px solid var(--kz-line-strong);
color: var(--kz-ink);
}
html.v4 .kz-dialog--ok .kz-fakebtn--pri {
background: var(--kz-blue);
border-color: var(--kz-blue);
color: #fff;
}
@media (max-width: 767px) {
html.v4 .kz-ss {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
html.v4 .kz-dialog__body {
padding: 18px;
}
}
html.v4 .kz-pipe {
border-radius: var(--kz-r);
border: 1px solid var(--kz-d-line);
background: rgba(5, 10, 22, .55);
overflow: hidden;
font-size: 13px;
text-align: left;
}
html.v4 .kz-pipe__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--kz-d-line);
font-family: var(--kz-mono);
font-size: 11.5px;
color: var(--kz-d-muted);
}
html.v4 .kz-pipe__head b {
color: var(--kz-d-text);
font-weight: 500;
}
html.v4 .kz-pipe__steps {
list-style: none;
margin: 0;
padding: 6px 0;
}
html.v4 .kz-pipe__step {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 8px 14px;
color: var(--kz-d-muted);
}
html.v4 .kz-pipe__step b {
display: block;
font-weight: 500;
color: var(--kz-d-text);
}
html.v4 .kz-pipe__step small {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--kz-mono);
font-size: 11px;
color: var(--kz-d-muted);
}
html.v4 .kz-pipe__step time {
font-family: var(--kz-mono);
font-size: 11px;
color: var(--kz-d-muted);
font-variant-numeric: tabular-nums;
}
html.v4 .kz-pipe__ico {
position: relative;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .22);
}
html.v4 .kz-pipe__step.is-done .kz-pipe__ico {
border-color: transparent;
background: var(--kz-ok-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23050a16'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center/14px no-repeat;
}
html.v4 .kz-pipe__step.is-active {
background: rgba(37, 99, 235, .12);
box-shadow: inset 2px 0 0 var(--kz-blue);
}
html.v4 .kz-pipe__step.is-active b {
color: #fff;
}
html.v4 .kz-pipe__step.is-active .kz-pipe__ico {
border-color: rgba(147, 197, 253, .25);
border-top-color: var(--kz-blue-300);
}
@media (prefers-reduced-motion: no-preference) {
html.v4 .kz-pipe__step.is-active .kz-pipe__ico {
animation: kzSpin 1s linear infinite;
}
}
@keyframes kzSpin {
to {
transform: rotate(360deg);
}
}
html.v4 .kz-logos {
display: flex;
align-items: center;
gap: 16px 40px;
}
html.v4 .kz-logos__label {
flex: 0 0 auto;
max-width: 220px;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-marquee {
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
html.v4 .kz-marquee__track {
display: flex;
width: max-content;
}
html.v4 .kz-marquee__group {
display: flex;
align-items: center;
gap: 56px;
padding-right: 56px;
list-style: none;
margin: 0;
}
html.v4 .kz-marquee__group li {
flex: 0 0 auto;
}
html.v4 .kz-marquee a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
html.v4 .kz-marquee img {
display: block;
width: auto !important;
height: 26px !important;
max-width: none;
max-height: 26px;
filter: grayscale(1);
opacity: .55;
transition: opacity .2s, filter .2s;
}
html.v4 .kz-marquee a:hover img {
filter: none;
opacity: 1;
}
html.v4 .kz-marquee .k-logo-text {
font-size: 18px;
color: var(--kz-subtle);
}
@media (prefers-reduced-motion: no-preference) {
html.v4 .kz-marquee__track {
animation: kzMarquee 36s linear infinite;
}
html.v4 .kz-marquee:hover .kz-marquee__track {
animation-play-state: paused;
}
}
@keyframes kzMarquee {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
html.v4 .kz-marquee {
-webkit-mask-image: none;
mask-image: none;
}
html.v4 .kz-marquee__track {
width: 100%;
}
html.v4 .kz-marquee__group {
flex-wrap: wrap;
justify-content: center;
gap: 16px 40px;
padding-right: 0;
width: 100%;
}
html.v4 .kz-marquee__group[aria-hidden="true"] {
display: none;
}
}
@media (min-width: 992px) {
html.v4 .kz-marquee--fit-lg {
-webkit-mask-image: none;
mask-image: none;
}
html.v4 .kz-marquee--fit-lg .kz-marquee__track {
width: 100%;
animation: none;
}
html.v4 .kz-marquee--fit-lg .kz-marquee__group {
flex: 1 1 auto;
justify-content: space-between;
padding-right: 0;
gap: 32px;
}
html.v4 .kz-marquee--fit-lg .kz-marquee__group[aria-hidden="true"] {
display: none;
}
}
@media (max-width: 991px) {
html.v4 .kz-logos {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
html.v4 .kz-logos__label {
max-width: none;
text-align: center;
}
}
html.v4 .kz-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
border-top: 1px solid var(--kz-line);
}
html.v4 .kz-stats__item {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: 4px;
padding: 24px 24px 24px 0;
}
html.v4 .kz-stats__item + .kz-stats__item {
padding-left: 24px;
border-left: 1px solid var(--kz-line);
}
html.v4 .kz-stats dt {
font-size: 14px;
font-weight: 400;
color: var(--kz-muted);
line-height: 1.4;
}
html.v4 .kz-stats dd {
margin: 0;
font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
font-weight: 650;
letter-spacing: -.04em;
line-height: 1.1;
color: var(--kz-ink);
font-variant-numeric: tabular-nums;
}
html.v4 .kz-stats--dark {
border-top-color: var(--kz-d-line);
}
html.v4 .kz-stats--dark .kz-stats__item + .kz-stats__item {
border-left-color: var(--kz-d-line);
}
html.v4 .kz-stats--dark dt {
color: var(--kz-d-muted);
}
html.v4 .kz-stats--dark dd {
color: #fff;
}
@media (max-width: 767px) {
html.v4 .kz-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.v4 .kz-stats__item,
html.v4 .kz-stats__item + .kz-stats__item {
padding: 18px 12px 18px 0;
border-left: 0;
}
html.v4 .kz-stats__item:nth-child(even) {
padding-left: 16px;
border-left: 1px solid var(--kz-line);
}
html.v4 .kz-stats--dark .kz-stats__item:nth-child(even) {
border-left-color: var(--kz-d-line);
}
html.v4 .kz-stats__item:nth-child(n+3) {
border-top: 1px solid var(--kz-line);
}
html.v4 .kz-stats--dark .kz-stats__item:nth-child(n+3) {
border-top-color: var(--kz-d-line);
}
}
html.v4 .kz-bento {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
}
html.v4 .kz-bento__cell {
grid-column: span 4;
display: flex;
flex-direction: column;
min-width: 0;
padding: 24px;
border-radius: var(--kz-r-lg);
border: 1px solid var(--kz-line);
background: #fff;
overflow: hidden;
}
html.v4 .kz-bento__cell--12 {
grid-column: span 12;
}
html.v4 .kz-bento__cell--8 {
grid-column: span 8;
}
html.v4 .kz-bento__cell--7 {
grid-column: span 7;
}
html.v4 .kz-bento__cell--6 {
grid-column: span 6;
}
html.v4 .kz-bento__cell--5 {
grid-column: span 5;
}
html.v4 .kz-bento__cell--4 {
grid-column: span 4;
}
html.v4 .kz-bento__cell--3 {
grid-column: span 3;
}
html.v4 .kz-bento__kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-blue);
}
html.v4 .kz-bento__cell h3 {
margin: 0 0 8px;
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.02em;
color: var(--kz-ink);
}
html.v4 .kz-bento__cell p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--kz-muted);
max-width: 520px;
}
html.v4 .kz-bento__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-bottom: 16px;
border-radius: var(--kz-r-sm);
background: var(--kz-blue-50);
border: 1px solid var(--kz-blue-100);
color: var(--kz-blue);
font-size: 15px;
}
html.v4 .kz-bento__media {
margin-top: auto;
padding-top: 24px;
}
html.v4 .kz-bento__media .kz-cert {
width: 100%;
max-width: 380px;
}
html.v4 .k-section--dark .kz-bento__cell {
background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
border-color: var(--kz-d-line);
}
html.v4 .k-section--dark .kz-bento__cell h3 {
color: #fff;
}
html.v4 .k-section--dark .kz-bento__cell p {
color: var(--kz-d-muted);
}
html.v4 .k-section--dark .kz-bento__kicker {
color: var(--kz-sky);
}
html.v4 .k-section--dark .kz-bento__ico {
background: rgba(255, 255, 255, .05);
border-color: var(--kz-d-line);
color: var(--kz-sky);
}
@media (max-width: 1099px) {
html.v4 .kz-bento {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
html.v4 .kz-bento__cell,
html.v4 .kz-bento__cell--4,
html.v4 .kz-bento__cell--3 {
grid-column: span 3;
}
html.v4 .kz-bento__cell--12,
html.v4 .kz-bento__cell--8,
html.v4 .kz-bento__cell--7,
html.v4 .kz-bento__cell--6,
html.v4 .kz-bento__cell--5 {
grid-column: span 6;
}
}
@media (max-width: 639px) {
html.v4 .kz-bento {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
html.v4 .kz-bento__cell,
html.v4 .kz-bento__cell[class*="kz-bento__cell--"] {
grid-column: auto;
padding: 20px;
}
html.v4 .kz-bento__cell:has(> .kz-bento__ico) {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 14px;
padding: 16px;
}
html.v4 .kz-bento__cell:has(> .kz-bento__ico) > .kz-bento__ico {
grid-row: span 2;
margin: 0;
}
html.v4 .kz-bento__cell:has(> .kz-bento__ico) h3 {
font-size: 1rem;
margin-bottom: 4px;
}
html.v4 .kz-bento__cell:has(> .kz-bento__ico) p {
font-size: 14px;
}
}
html.v4 .kz-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
html.v4 .kz-split--top {
align-items: start;
}
@media (min-width: 992px) {
html.v4 .kz-split--reverse > :first-child {
order: 2;
}
}
@media (max-width: 991px) {
html.v4 .kz-split {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
html.v4 .kz-flist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 20px;
}
html.v4 .kz-flist--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 32px;
}
html.v4 .kz-flist--3col {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px 32px;
}
html.v4 .kz-flist__item {
display: flex;
align-items: flex-start;
gap: 14px;
min-width: 0;
}
html.v4 .kz-flist__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: var(--kz-r-sm);
background: var(--kz-blue-50);
border: 1px solid var(--kz-blue-100);
color: var(--kz-blue);
font-size: 15px;
}
html.v4 .kz-flist h3,
html.v4 .kz-flist__t {
display: block;
margin: 0 0 4px;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.01em;
color: var(--kz-ink);
}
html.v4 .kz-flist p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--kz-muted);
}
html.v4 .k-section--dark .kz-flist__ico {
background: rgba(255, 255, 255, .05);
border-color: var(--kz-d-line);
color: var(--kz-sky);
}
html.v4 .k-section--dark .kz-flist h3,
html.v4 .k-section--dark .kz-flist__t {
color: #fff;
}
html.v4 .k-section--dark .kz-flist p {
color: var(--kz-d-muted);
}
@media (max-width: 991px) {
html.v4 .kz-flist--3col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 639px) {
html.v4 .kz-flist--2col,
html.v4 .kz-flist--3col {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
}
html.v4 .kz-plans {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
html.v4 .kz-plan {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-lg);
background: #fff;
}
html.v4 .kz-plan--hl {
border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, var(--kz-grad) border-box;
box-shadow: 0 28px 56px -40px rgba(37, 99, 235, .7);
}
html.v4 .kz-plan__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
html.v4 .kz-plan__name {
margin: 0 0 4px;
font-size: 1.25rem;
font-weight: 650;
letter-spacing: -.025em;
color: var(--kz-ink);
}
html.v4 .kz-plan__desc {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--kz-muted);
}
html.v4 .kz-plan__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 8px;
padding: 16px 0;
border-top: 1px solid var(--kz-line-2);
border-bottom: 1px solid var(--kz-line-2);
}
html.v4 .kz-plan__price small {
flex: 1 1 100%;
font-family: var(--kz-font);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-plan__price strong {
font-size: 2rem;
font-weight: 650;
letter-spacing: -.04em;
line-height: 1;
color: var(--kz-ink);
font-variant-numeric: tabular-nums;
}
html.v4 .kz-plan__price span {
font-size: 14px;
color: var(--kz-muted);
}
html.v4 .kz-plan .k-checks {
flex: 1 1 auto;
}
@media (max-width: 767px) {
html.v4 .kz-plans {
grid-template-columns: minmax(0, 1fr);
}
}
html.v4 .kz-quotes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
html.v4 .kz-quote {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 24px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-lg);
background: #fff;
}
html.v4 .kz-quote__stars {
display: flex;
gap: 3px;
color: var(--kz-star);
font-size: 13px;
}
html.v4 .kz-quote blockquote {
margin: 0;
flex: 1 1 auto;
font-size: 15.5px;
line-height: 1.65;
color: var(--kz-ink);
}
html.v4 .kz-quote figcaption {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--kz-line-2);
}
html.v4 .kz-quote figcaption b {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--kz-ink);
}
html.v4 .kz-quote figcaption small {
font-size: 13px;
color: var(--kz-muted);
}
html.v4 .kz-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: 50%;
background: var(--kz-ink);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
}
html.v4 .kz-rating {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--kz-muted);
}
html.v4 .kz-rating strong {
font-size: 1.5rem;
font-weight: 650;
letter-spacing: -.03em;
color: var(--kz-ink);
}
html.v4 .kz-rating i {
color: var(--kz-star);
font-size: 13px;
}
@media (max-width: 991px) {
html.v4 .kz-quotes {
grid-template-columns: minmax(0, 1fr);
}
}
html.v4 .kz-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 24px;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
color: var(--kz-text);
}
html.v4 .kz-trust li {
display: inline-flex;
align-items: center;
gap: 8px;
}
html.v4 .kz-trust i {
color: var(--kz-ok);
font-size: 14px;
}
html.v4 .k-hero .kz-trust,
html.v4 .k-section--dark .kz-trust,
html.v4 .kz-ftr .kz-trust {
color: var(--kz-d-text);
}
html.v4 .k-hero .kz-trust i,
html.v4 .k-section--dark .kz-trust i,
html.v4 .kz-ftr .kz-trust i {
color: var(--kz-sky);
}
html.v4 .kz-gcard {
position: relative;
padding: 24px;
border: 1px solid transparent;
border-radius: var(--kz-r-lg);
background: linear-gradient(#fff, #fff) padding-box, var(--kz-grad) border-box;
}
html.v4 .k-section--dark .kz-gcard,
html.v4 .k-hero .kz-gcard {
background: linear-gradient(var(--kz-n-850), var(--kz-n-850)) padding-box, var(--kz-grad) border-box;
}
html.v4 .kz-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 48px 0;
border: 0;
height: auto;
opacity: 1;
font-family: var(--kz-font);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-divider::before,
html.v4 .kz-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, var(--kz-line) 20%, var(--kz-line) 80%, transparent);
}
html.v4 hr.kz-divider::after {
display: none;
}
html.v4 .kz-more {
display: none;
}
html.v4.k-js .kz-more {
display: flex;
justify-content: center;
margin-top: 24px;
}
html.v4.k-js .kz-collapse:not(.is-open) > .k-pcard:nth-child(n+7) {
display: none;
}
@media (max-width: 639px) {
html.v4.k-js .kz-collapse:not(.is-open) > .k-pcard:nth-child(n+5) {
display: none;
}
}
html.v4 .kz-collapse.is-open + .kz-more {
display: none;
}
html.v4 .kz-center {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
html.v4 .kz-ann {
position: relative;
z-index: 1001;
background: var(--kz-n-950);
color: var(--kz-d-text);
font-size: 13px;
border-bottom: 1px solid var(--kz-d-line);
}
html.v4 .kz-ann[hidden] {
display: none;
}
html.v4 .kz-ann__inner {
display: flex;
align-items: center;
gap: 16px;
max-width: 1440px;
min-height: 40px;
margin: 0 auto;
padding: 0 8px 0 24px;
}
html.v4 .kz-ann__link {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
min-height: 40px;
color: var(--kz-d-text) !important;
text-decoration: none !important;
}
html.v4 .kz-ann__tag {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: var(--kz-r-xs);
background: var(--kz-blue);
color: #fff;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
html.v4 .kz-ann__text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html.v4 .kz-ann__text strong {
color: #fff;
font-weight: 600;
}
html.v4 .kz-ann__sub {
color: var(--kz-d-muted);
}
html.v4 .kz-ann__link > i {
flex: 0 0 auto;
font-size: 10px;
color: var(--kz-d-muted);
transition: transform .15s var(--kz-ease);
}
html.v4 .kz-ann__link:hover > i {
transform: translateX(3px);
}
html.v4 .kz-ann__contact {
display: none;
flex: 0 0 auto;
align-items: center;
gap: 20px;
}
html.v4 .kz-ann__contact a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--kz-d-muted) !important;
text-decoration: none !important;
}
html.v4 .kz-ann__contact a:hover {
color: #fff !important;
}
html.v4 .kz-ann__contact i {
font-size: 11px;
color: var(--kz-sky);
}
html.v4 .kz-ann__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--kz-r-sm);
background: none;
color: var(--kz-d-muted);
cursor: pointer;
}
html.v4 .kz-ann__close:hover {
color: #fff;
background: rgba(255, 255, 255, .06);
}
@media (min-width: 992px) {
html.v4 .kz-ann__contact {
display: flex;
}
}
@media (max-width: 767px) {
html.v4 .kz-ann__inner {
padding-left: 16px;
}
html.v4 .kz-ann__sub {
display: none;
}
}
html.v4 .kz-hdr {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, .88);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid var(--kz-line);
transition: box-shadow .2s;
}
html.v4 .kz-hdr.no-sticky {
position: relative;
}
html.v4 .kz-hdr.is-scrolled {
box-shadow: 0 10px 30px -22px rgba(10, 16, 32, .45);
}
html.v4 .kz-hdr__inner {
position: relative;
display: flex;
align-items: center;
gap: 16px;
max-width: 1440px;
height: var(--kz-hdr-h);
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 767px) {
html.v4 .kz-hdr__inner {
padding: 0 12px 0 16px;
gap: 8px;
}
}
html.v4 .kz-logo {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
min-width: 0;
color: var(--kz-ink) !important;
text-decoration: none !important;
}
html.v4 .kz-logo__mark {
display: inline-flex;
width: 32px;
height: 32px;
flex: 0 0 32px;
}
html.v4 .kz-logo__mark svg {
display: block;
width: 32px;
height: 32px;
}
html.v4 .kz-logo__text {
display: flex;
flex-direction: column;
line-height: 1.1;
min-width: 0;
}
html.v4 .kz-logo__text b {
font-size: 16px;
font-weight: 650;
letter-spacing: -.025em;
color: inherit;
white-space: nowrap;
}
html.v4 .kz-logo__text small {
margin-top: 2px;
font-family: var(--kz-mono);
font-size: 10px;
letter-spacing: .04em;
color: var(--kz-muted);
white-space: nowrap;
}
html.v4 .kz-logo__text small strong {
font-weight: 600;
color: var(--kz-ink);
}
html.v4 .kz-logo__img {
display: block;
height: 36px;
width: auto;
max-width: 190px;
object-fit: contain;
}
html.v4 .kz-logo--dark {
color: #fff !important;
}
html.v4 .kz-logo--dark .kz-logo__text small {
color: var(--kz-d-muted);
}
html.v4 .kz-logo--dark .kz-logo__text small strong {
color: var(--kz-d-text);
}
html.v4 .kz-nav {
display: none;
flex: 1 1 auto;
min-width: 0;
margin-left: 8px;
}
html.v4 .kz-nav__list {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
html.v4 .kz-nav__item {
position: relative;
display: flex;
align-items: center;
}
html.v4 .kz-nav__item--mega {
position: static;
}
html.v4 .kz-nav__item--home {
display: none;
}
html.v4 .kz-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 10px;
border: 0;
border-radius: var(--kz-r-sm);
background: none;
font-family: var(--kz-font);
font-size: 14.5px;
font-weight: 500;
color: var(--kz-text) !important;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s, color .15s;
}
html.v4 .kz-nav__link:hover,
html.v4 .kz-nav__item.is-open > .kz-nav__link {
color: var(--kz-ink) !important;
background: var(--kz-bg-sunk);
}
html.v4 .kz-nav__item.is-current > .kz-nav__link {
color: var(--kz-ink) !important;
}
html.v4 .kz-nav__item.is-current > .kz-nav__link::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: -12px;
height: 2px;
border-radius: 2px;
background: var(--kz-blue);
}
html.v4 .kz-nav__item--has > .kz-nav__link {
padding-right: 4px;
}
html.v4 .kz-nav__caret {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 40px;
margin-left: -2px;
padding: 0;
border: 0;
border-radius: var(--kz-r-sm);
background: none;
color: var(--kz-subtle);
cursor: pointer;
}
html.v4 .kz-nav__caret i,
html.v4 .kz-nav__link .kz-nav__chev {
font-size: 9.5px;
transition: transform .2s var(--kz-ease);
}
html.v4 .kz-nav__item.is-open .kz-nav__caret i,
html.v4 .kz-nav__item.is-open > .kz-nav__link .kz-nav__chev {
transform: rotate(180deg);
}
html.v4 .kz-nav__caret:hover {
color: var(--kz-ink);
}
html.v4 .kz-nbadge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 5px;
background: var(--kz-blue-50);
border: 1px solid var(--kz-blue-100);
color: var(--kz-blue-h);
font-family: var(--kz-font);
font-size: 9.5px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
html.v4 .kz-nav .kz-nbadge {
display: none;
}
html.v4 .kz-dd {
position: absolute;
top: calc(100% + 12px);
left: -8px;
z-index: 30;
min-width: 320px;
padding: 8px;
background: #fff;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
box-shadow: var(--kz-sh-3);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .16s var(--kz-ease), transform .16s var(--kz-ease), visibility 0s linear .16s;
}
html.v4 .kz-dd::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
}
html.v4 .kz-nav__item.is-open > .kz-dd {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
html.v4 .kz-nav__item:hover > .kz-dd {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
html.v4 .kz-nav__item:hover .kz-nav__caret i {
transform: rotate(180deg);
}
html.v4 .kz-nav__item.is-closing > .kz-dd {
opacity: 0;
visibility: hidden;
}
}
html.v4 .kz-dd__link {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border-radius: var(--kz-r-sm);
color: var(--kz-text) !important;
text-decoration: none !important;
transition: background-color .12s;
}
html.v4 .kz-dd__link:hover,
html.v4 .kz-dd__link:focus-visible {
background: var(--kz-bg-soft);
}
html.v4 .kz-dd__link[aria-current="page"] {
background: var(--kz-blue-50);
}
html.v4 .kz-dd__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: var(--kz-r-sm);
background: var(--kz-bg-sunk);
border: 1px solid var(--kz-line);
color: var(--kz-ink);
font-size: 13px;
}
html.v4 .kz-dd__ico--ov,
html.v4 .kz-dd__ico--ev {
font-family: var(--kz-mono);
font-size: 10.5px;
font-weight: 600;
color: #fff;
border: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -4px var(--kz-ico-glow, rgba(15, 23, 42, .35));
}
html.v4 .kz-dd__ico--ov {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
--kz-ico-glow: rgba(37, 99, 235, .55);
}
html.v4 .kz-dd__ico--ev {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
--kz-ico-glow: rgba(5, 150, 105, .5);
}
html.v4 .kz-dd__ico--cloud {
background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
border: 0;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -4px rgba(8, 145, 178, .5);
}
html.v4 .kz-dd__ico[class*="kz-dd__ico--b-"] {
background: color-mix(in srgb, var(--kz-bc) 12%, #fff);
border-color: color-mix(in srgb, var(--kz-bc) 24%, #fff);
color: var(--kz-bc);
}
html.v4 .kz-dd__ico--b-digicert { --kz-bc: #0174c3; }
html.v4 .kz-dd__ico--b-sectigo { --kz-bc: #16a34a; }
html.v4 .kz-dd__ico--b-globalsign { --kz-bc: #1e4fa3; }
html.v4 .kz-dd__ico--b-certum { --kz-bc: #0891d1; }
html.v4 .kz-dd__ico--b-ssltrus { --kz-bc: #ea580c; }
html.v4 .kz-dd__ico--b-gogetssl { --kz-bc: #475569; }
html.v4 .kz-dd__ico {
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html.v4 .kz-dd__link:hover .kz-dd__ico,
html.v4 .kz-dd__link:focus-visible .kz-dd__ico {
transform: translateY(-1px);
}
html.v4 .kz-dd__link:hover .kz-dd__ico[class*="kz-dd__ico--b-"] {
background: var(--kz-bc);
border-color: var(--kz-bc);
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
html.v4 .kz-dd__ico {
transition: none;
}
html.v4 .kz-dd__link:hover .kz-dd__ico {
transform: none;
}
}
html.v4 .kz-dd__txt {
min-width: 0;
padding-top: 1px;
}
html.v4 .kz-dd__t {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--kz-ink);
}
html.v4 .kz-dd__d {
display: block;
margin-top: 2px;
font-size: 13px;
line-height: 1.4;
color: var(--kz-muted);
}
html.v4 .kz-dd--mega {
top: 100%;
left: 50%;
width: min(960px, calc(100vw - 48px));
padding: 20px 20px 0;
transform: translate(-50%, 4px);
}
html.v4 .kz-nav__item.is-open > .kz-dd--mega {
transform: translate(-50%, 0);
}
@media (hover: hover) and (pointer: fine) {
html.v4 .kz-nav__item:hover > .kz-dd--mega {
transform: translate(-50%, 0);
}
}
html.v4 .kz-mega__cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 16px;
}
html.v4 .kz-mega__cols--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.v4 .kz-mega__cols--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
html.v4 .kz-mega__col {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
html.v4 .kz-mega__title {
margin: 0 0 6px;
padding: 0 10px 8px;
border-bottom: 1px solid var(--kz-line-2);
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-mega__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 16px -20px 0;
padding: 14px 30px;
border-top: 1px solid var(--kz-line);
background: var(--kz-bg-soft);
border-radius: 0 0 var(--kz-r) var(--kz-r);
font-size: 13.5px;
color: var(--kz-muted);
}
html.v4 .kz-hdr__actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex: 0 0 auto;
}
html.v4 .kz-cur {
position: relative;
}
html.v4 .kz-cur__btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-sm);
background: #fff;
font-family: var(--kz-mono);
font-size: 12.5px;
font-weight: 500;
color: var(--kz-ink);
cursor: pointer;
transition: border-color .15s, background-color .15s;
}
html.v4 .kz-cur__btn:hover {
border-color: var(--kz-line-strong);
background: var(--kz-bg-soft);
}
html.v4 .kz-cur__btn i {
font-size: 9px;
color: var(--kz-subtle);
transition: transform .2s var(--kz-ease);
}
html.v4 .kz-cur.open .kz-cur__btn i {
transform: rotate(180deg);
}
html.v4 .kz-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 40;
min-width: 160px;
padding: 6px;
background: #fff;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
box-shadow: var(--kz-sh-3);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .15s var(--kz-ease), transform .15s var(--kz-ease), visibility 0s linear .15s;
}
html.v4 .open > .kz-menu {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
html.v4 .kz-menu a {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 0 10px;
border-radius: var(--kz-r-sm);
font-size: 14px;
color: var(--kz-text) !important;
text-decoration: none !important;
}
html.v4 .kz-menu a:hover {
background: var(--kz-bg-soft);
color: var(--kz-ink) !important;
}
html.v4 .kz-menu a.active {
color: var(--kz-blue) !important;
font-weight: 600;
}
html.v4 .kz-menu a i {
width: 16px;
text-align: center;
font-size: 13px;
color: var(--kz-muted);
}
html.v4 .kz-cur .kz-menu a {
font-family: var(--kz-mono);
font-size: 13px;
}
html.v4 .kz-iconbtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--kz-r-sm);
background: none;
color: var(--kz-ink) !important;
font-size: 16px;
text-decoration: none !important;
cursor: pointer;
transition: background-color .15s;
}
html.v4 .kz-iconbtn:hover {
background: var(--kz-bg-sunk);
}
html.v4 .kz-cart__n {
position: absolute;
top: 3px;
right: 1px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--kz-blue);
color: #fff;
font-size: 11px;
font-weight: 650;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px #fff;
font-variant-numeric: tabular-nums;
}
html.v4 .kz-hdr__login {
display: none;
align-items: center;
height: 40px;
padding: 0 12px;
border-radius: var(--kz-r-sm);
font-size: 14.5px;
font-weight: 500;
color: var(--kz-text) !important;
text-decoration: none !important;
white-space: nowrap;
}
html.v4 .kz-hdr__login:hover {
background: var(--kz-bg-sunk);
color: var(--kz-ink) !important;
}
html.v4 .kz-hdr__cta {
display: none !important;
}
html.v4 .kz-user {
position: relative;
display: none;
}
html.v4 .kz-user__btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 10px 0 4px;
border: 1px solid var(--kz-line);
border-radius: 999px;
background: #fff;
font-family: var(--kz-font);
font-size: 14px;
font-weight: 500;
color: var(--kz-ink);
cursor: pointer;
}
html.v4 .kz-user__btn:hover {
border-color: var(--kz-line-strong);
}
html.v4 .kz-user__btn .kz-avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 12px;
}
html.v4 .kz-user__btn > i {
font-size: 9px;
color: var(--kz-subtle);
}
html.v4 .kz-user .kz-menu {
min-width: 260px;
}
html.v4 .kz-user__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 12px;
margin-bottom: 6px;
border-bottom: 1px solid var(--kz-line-2);
}
html.v4 .kz-user__head b {
display: block;
font-size: 14px;
color: var(--kz-ink);
}
html.v4 .kz-user__head small {
display: block;
max-width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12.5px;
color: var(--kz-muted);
}
html.v4 .kz-menu hr {
margin: 6px 0;
border: 0;
border-top: 1px solid var(--kz-line-2);
opacity: 1;
}
html.v4 .kz-burger {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--kz-r-sm);
background: none;
cursor: pointer;
}
html.v4 .kz-burger:hover {
background: var(--kz-bg-sunk);
}
html.v4 .kz-burger span {
display: block;
width: 18px;
height: 1.5px;
border-radius: 2px;
background: var(--kz-ink);
}
@media (min-width: 1200px) {
html.v4 .kz-nav {
display: block;
}
html.v4 .kz-burger {
display: none;
}
html.v4 .kz-hdr__login {
display: inline-flex;
}
html.v4 .kz-user {
display: block;
}
}
@media (min-width: 1360px) {
html.v4 .kz-nav__link {
padding: 0 12px;
}
html.v4 .kz-nav__item--has > .kz-nav__link {
padding-right: 4px;
}
html.v4 .kz-nav .kz-nbadge {
display: inline-flex;
}
html.v4 .kz-hdr__cta {
display: inline-flex !important;
}
}
@media (max-width: 1199px) {
html.v4 .kz-cur__btn,
html.v4 .kz-iconbtn {
width: auto;
min-width: 44px;
height: 44px;
}
html.v4 .kz-cur__btn {
border-color: transparent;
background: none;
}
}
@media (max-width: 399px) {
html.v4 .kz-cur__sym {
display: none;
}
html.v4 .kz-logo__text b {
font-size: 15px;
}
}
html.v4 .kz-rbar {
background: var(--kz-ok-bg);
border-bottom: 1px solid var(--kz-ok-line);
color: var(--kz-ok);
font-size: 13.5px;
}
html.v4 .kz-rbar__inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 12px;
max-width: 1440px;
min-height: 40px;
margin: 0 auto;
padding: 6px 24px;
text-align: center;
}
html.v4 .kz-rbar a {
color: var(--kz-ok) !important;
font-weight: 600;
text-decoration: underline !important;
text-underline-offset: 3px;
}
html.v4 .kz-mm {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1101;
display: flex;
flex-direction: column;
width: min(420px, 100%);
background: #fff;
box-shadow: -24px 0 64px -24px rgba(5, 10, 22, .45);
transform: translateX(100%);
visibility: hidden;
transition: transform .28s var(--kz-ease), visibility 0s linear .28s;
}
html.v4 .kz-mm.active {
transform: none;
visibility: visible;
transition-delay: 0s;
}
html.v4 .kz-mm__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex: 0 0 auto;
height: var(--kz-hdr-h);
padding: 0 8px 0 16px;
border-bottom: 1px solid var(--kz-line);
}
html.v4 .kz-mm__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: var(--kz-r-sm);
background: none;
color: var(--kz-ink);
font-size: 18px;
cursor: pointer;
}
html.v4 .kz-mm__close:hover {
background: var(--kz-bg-sunk);
}
html.v4 .kz-mm__body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 16px 24px;
-webkit-overflow-scrolling: touch;
}
html.v4 .kz-mm__list {
list-style: none;
margin: 0;
padding: 0;
}
html.v4 .kz-mm__list > li {
border-bottom: 1px solid var(--kz-line-2);
}
html.v4 .kz-mm__link,
html.v4 .kz-mm__toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 4px 4px;
border: 0;
background: none;
font-family: var(--kz-font);
font-size: 16px;
font-weight: 500;
color: var(--kz-ink) !important;
text-align: left;
text-decoration: none !important;
cursor: pointer;
}
html.v4 .kz-mm__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: var(--kz-r-sm);
background: var(--kz-bg-soft);
border: 1px solid var(--kz-line);
color: var(--kz-blue);
font-size: 13px;
}
html.v4 .kz-mm__label {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
html.v4 .kz-mm__chev {
margin-left: auto;
font-size: 11px;
color: var(--kz-subtle);
transition: transform .2s var(--kz-ease);
}
html.v4 .kz-mm__toggle[aria-expanded="true"] .kz-mm__chev {
transform: rotate(180deg);
}
html.v4 .kz-mm__sub {
padding: 0 0 12px 48px;
}
html.v4 .kz-mm__sub[hidden] {
display: none;
}
html.v4 .kz-mm__sub a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
font-size: 15px;
color: var(--kz-text) !important;
text-decoration: none !important;
}
html.v4 .kz-mm__sub a:hover,
html.v4 .kz-mm__sub a[aria-current="page"] {
color: var(--kz-blue) !important;
}
html.v4 .kz-mm__sub a.kz-mm__all {
color: var(--kz-blue) !important;
font-weight: 550;
gap: 8px;
}
html.v4 .kz-mm__sub a.kz-mm__all i {
font-size: 11px;
}
html.v4 .kz-mm__grp {
display: block;
margin: 12px 0 2px;
padding: 0 4px;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .kz-mm__foot {
flex: 0 0 auto;
display: grid;
gap: 12px;
padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid var(--kz-line);
background: var(--kz-bg-soft);
}
html.v4 .kz-mm__auth {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
html.v4 .kz-mm__auth .k-btn {
height: 44px;
}
html.v4 .kz-mm__cur {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
html.v4 .kz-mm__cur a {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 64px;
height: 44px;
border: 1px solid var(--kz-line);
border-radius: var(--kz-r-sm);
background: #fff;
font-family: var(--kz-mono);
font-size: 13px;
color: var(--kz-text) !important;
text-decoration: none !important;
}
html.v4 .kz-mm__cur a.active {
border-color: var(--kz-blue);
color: var(--kz-blue) !important;
box-shadow: inset 0 0 0 1px var(--kz-blue);
}
html.v4 .kz-mm__contact {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-size: 14px;
}
html.v4 .kz-mm__contact a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
color: var(--kz-text) !important;
text-decoration: none !important;
}
html.v4 .kz-mm__contact i {
color: var(--kz-blue);
font-size: 13px;
}
html.v4 .kz-backdrop {
position: fixed;
inset: 0;
z-index: 1100;
background: rgba(5, 10, 22, .5);
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--kz-ease), visibility 0s linear .25s;
}
html.v4 .kz-backdrop.active {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
html.v4 body.kz-lock {
overflow: hidden;
}
@media (min-width: 1200px) {
html.v4 .kz-mm,
html.v4 .kz-backdrop {
display: none;
}
}
html.v4 .kz-ftr {
position: relative;
background: var(--kz-n-950);
color: var(--kz-d-muted);
font-size: 14px;
padding-top: 64px;
}
html.v4 .kz-ftr::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .5), rgba(34, 211, 238, .45), transparent);
}
html.v4 .kz-ftr__top {
display: grid;
grid-template-columns: minmax(240px, 1.2fr) minmax(0, 3fr) minmax(220px, 1.1fr);
gap: 48px;
padding-bottom: 48px;
}
html.v4 .kz-ftr__brand p {
margin: 16px 0 20px;
max-width: 320px;
line-height: 1.65;
color: var(--kz-d-muted);
}
html.v4 .kz-ftr__social {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
html.v4 .kz-ftr__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--kz-d-line);
border-radius: var(--kz-r-sm);
color: var(--kz-d-text) !important;
text-decoration: none !important;
transition: border-color .15s, background-color .15s;
}
html.v4 .kz-ftr__social a:hover {
border-color: rgba(255, 255, 255, .24);
background: rgba(255, 255, 255, .05);
}
html.v4 .kz-ftr__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 32px 24px;
}
html.v4 .kz-ftr__title {
margin: 0 0 14px;
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: #fff;
}
html.v4 .kz-ftr__links {
display: grid;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
html.v4 .kz-ftr__links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--kz-d-muted) !important;
text-decoration: none !important;
line-height: 1.4;
transition: color .15s;
}
html.v4 .kz-ftr__links a:hover {
color: #fff !important;
}
html.v4 .kz-ftr__links .kz-nbadge {
background: rgba(37, 99, 235, .18);
border-color: rgba(147, 197, 253, .25);
color: var(--kz-blue-300);
}
html.v4 .kz-ftr__contact {
display: grid;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
html.v4 .kz-ftr__contact li {
display: flex;
gap: 12px;
align-items: flex-start;
}
html.v4 .kz-ftr__contact i {
width: 16px;
margin-top: 4px;
text-align: center;
color: var(--kz-sky);
font-size: 13px;
}
html.v4 .kz-ftr__contact a,
html.v4 .kz-ftr__contact span {
color: var(--kz-d-text) !important;
text-decoration: none !important;
line-height: 1.45;
}
html.v4 .kz-ftr__contact a:hover {
color: #fff !important;
}
html.v4 .kz-ftr__contact small {
display: block;
font-size: 12.5px;
color: var(--kz-d-muted);
}
html.v4 .kz-ftr__trust {
padding: 20px 0;
border-top: 1px solid var(--kz-d-line);
border-bottom: 1px solid var(--kz-d-line);
}
html.v4 .kz-ftr__trust .kz-trust {
justify-content: space-between;
font-size: 13.5px;
}
html.v4 .kz-ftr__trust .kz-trust span {
color: var(--kz-d-muted);
}
html.v4 .kz-ftr__trust .kz-trust b {
color: var(--kz-d-text);
font-weight: 600;
}
html.v4 .kz-ftr__bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 24px;
padding: 20px 0 28px;
font-size: 13px;
}
html.v4 .kz-ftr__bottom p {
margin: 0;
color: var(--kz-d-muted);
}
html.v4 .kz-ftr__legal {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
html.v4 .kz-ftr__legal a {
color: var(--kz-d-muted) !important;
text-decoration: none !important;
}
html.v4 .kz-ftr__legal a:hover {
color: #fff !important;
}
@media (max-width: 1099px) {
html.v4 .kz-ftr__top {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
}
html.v4 .kz-ftr__cols {
grid-column: 1 / -1;
grid-row: 2;
}
}
@media (max-width: 767px) {
html.v4 .kz-ftr {
padding-top: 48px;
}
html.v4 .kz-ftr__top {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
padding-bottom: 32px;
}
html.v4 .kz-ftr__cols {
grid-row: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 16px;
}
html.v4 .kz-ftr__trust .kz-trust {
justify-content: flex-start;
gap: 12px 20px;
}
html.v4 .kz-ftr__bottom {
flex-direction: column;
align-items: flex-start;
padding-bottom: 88px;
}
}
@media (pointer: coarse) {
html.v4 .kz-ftr__links {
gap: 0;
}
html.v4 .kz-ftr__links a,
html.v4 .kz-ftr__legal a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
html.v4 .kz-ftr__social a {
width: 44px;
height: 44px;
}
}
html.v4 .kz-fab {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1030;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--kz-r);
border: 0;
font-size: 20px;
text-decoration: none !important;
cursor: pointer;
transition: opacity .2s var(--kz-ease), transform .2s var(--kz-ease), visibility 0s, background-color .15s;
}
html.v4 .kz-fab--wa {
background: var(--kz-wa);
color: #fff !important;
font-size: 24px;
box-shadow: 0 10px 24px -10px rgba(23, 154, 76, .7);
}
html.v4 .kz-fab--wa:hover {
background: #13843f;
}
html.v4 .kz-fab--top {
background: #fff;
border: 1px solid var(--kz-line);
color: var(--kz-ink);
font-size: 15px;
box-shadow: var(--kz-sh-2);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .2s var(--kz-ease), transform .2s var(--kz-ease), visibility 0s linear .2s;
}
html.v4 .kz-fab--top.visible {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
html.v4 .kz-fab--wa ~ .kz-fab--top {
bottom: 80px;
}
@media (max-width: 991px) {
html.v4 body:has(.k-mbuy) .kz-fab {
bottom: 88px;
}
html.v4 body:has(.k-mbuy) .kz-fab--wa ~ .kz-fab--top {
bottom: 148px;
}
}
@media (max-width: 767px) {
html.v4 .kz-fab {
right: 16px;
bottom: 16px;
}
html.v4 .kz-fab--wa ~ .kz-fab--top {
bottom: 76px;
}
}
html.v4 .kz-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1200;
height: 2px;
background: var(--kz-grad);
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
html.v4 #scroll-progress:not(.kz-progress) {
display: none !important;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
html.v4 .kz-rise {
animation: kzRise linear both;
animation-timeline: view();
animation-range: entry 0% entry 45%;
}
}
}
@keyframes kzRise {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
html.v4 {
scroll-behavior: auto;
}
html.v4 *,
html.v4 *::before,
html.v4 *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
html.v4 .kz-marquee__track,
html.v4 .kz-pipe__step.is-active .kz-pipe__ico {
animation: none !important;
}
}
html.v4 .kz-page--home .kz-seo__aside {
display: grid;
gap: 16px;
}
html.v4 .kz-page--home .kz-steps-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
gap: 56px;
align-items: center;
}
html.v4 .kz-page--home .kz-steps-wrap .k-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 32px;
}
html.v4 .kz-page--home .kz-steps-wrap .k-steps::before {
display: none;
}
html.v4 .kz-page--home .kz-compare-wrap {
display: grid;
gap: 24px;
}
@media (max-width: 991px) {
html.v4 .kz-page--home .kz-steps-wrap {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
@media (max-width: 575px) {
html.v4 .kz-page--home .kz-steps-wrap .k-steps {
grid-template-columns: minmax(0, 1fr);
row-gap: 20px;
}
}
html.v4 .k-pkgs {
border: 0;
margin: 0 0 16px;
padding: 0;
min-width: 0;
}
html.v4 .k-pkgs__title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
float: none;
width: 100%;
margin: 0 0 8px;
padding: 0;
font-family: var(--kz-font);
font-size: 14px;
font-weight: 600;
color: var(--kz-ink);
}
html.v4 .k-pkgs__title small {
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .k-pkgs__table {
border: 1px solid var(--kz-line);
border-radius: var(--kz-r);
background: var(--kz-bg);
overflow: hidden;
}
html.v4 .k-pkgs__head,
html.v4 .k-pkgs__row {
display: grid;
grid-template-columns: 18px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 10px 14px;
}
html.v4 .k-pkgs__head {
background: var(--kz-bg-soft);
border-bottom: 1px solid var(--kz-line);
font-family: var(--kz-font);
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--kz-muted);
}
html.v4 .k-pkgs__head span:last-child,
html.v4 .k-pkgs__price {
text-align: right;
}
html.v4 .k-pkgs__row {
position: relative;
margin: 0;
border-top: 1px solid var(--kz-line-2);
font-size: 14px;
color: var(--kz-text);
cursor: pointer;
transition: background-color .15s var(--kz-ease), box-shadow .15s var(--kz-ease);
}
html.v4 .k-pkgs__head + .k-pkgs__row {
border-top: 0;
}
html.v4 .k-pkgs__row:hover {
background: var(--kz-bg-soft);
}
html.v4 .k-pkgs__row.is-selected {
background: var(--kz-blue-50);
box-shadow: inset 0 0 0 2px var(--kz-blue);
}
html.v4 .k-pkgs__row input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--kz-blue);
}
html.v4 .k-pkgs__row input:focus-visible {
outline: none;
box-shadow: var(--kz-ring);
border-radius: 50%;
}
html.v4 .k-pkgs__name {
font-weight: 600;
color: var(--kz-ink);
}
html.v4 .k-pkgs__sig,
html.v4 .k-pkgs__price {
font-variant-numeric: tabular-nums;
}
html.v4 .k-pkgs__price {
font-weight: 600;
color: var(--kz-ink);
}
html.v4 .k-pkgs__note {
margin: 6px 0 0;
font-size: 12px;
color: var(--kz-muted);
}
html.v4 .k-cart-pkg {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 2px 8px;
border: 1px solid var(--kz-blue-100);
border-radius: var(--kz-r-xs);
background: var(--kz-blue-50);
font-size: 12.5px;
font-weight: 500;
color: var(--kz-blue-h);
font-variant-numeric: tabular-nums;
}
html.v4 .k-hero {
background: #133a1f;
}
html.v4 .k-hero::before {
background:
radial-gradient(900px 520px at 80% -10%, rgba(164, 214, 120, .55), transparent 65%),
radial-gradient(640px 420px at 105% 75%, rgba(147, 197, 114, .32), transparent 62%),
radial-gradient(620px 420px at -8% 110%, rgba(147, 197, 114, .38), transparent 62%),
linear-gradient(160deg, #1d4d28 0%, #143a1e 45%, #0d2a15 100%);
}
html.v4 .k-hero::after {
background-image:
linear-gradient(rgba(220, 245, 190, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(220, 245, 190, .07) 1px, transparent 1px);
}
html .kz-ftr, html.v4 .kz-ftr, html.tp .kz-ftr {
background-color: #133a1f !important;
background-image:
radial-gradient(900px 420px at 85% 0%, rgba(164, 214, 120, .40), transparent 65%),
radial-gradient(700px 420px at -5% 105%, rgba(147, 197, 114, .30), transparent 62%),
linear-gradient(160deg, #1d4d28 0%, #143a1e 45%, #0d2a15 100%) !important;
}
html.v4 .kz-ftr2 { padding: 56px 0 28px !important; color: rgba(236, 246, 228, .78); }
html.v4 .kz-ftr2 a { text-decoration: none; }
html.v4 .kz-f2-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 28px; margin-bottom: 48px; border-radius: 18px; background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid rgba(214, 240, 190, .18); box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); backdrop-filter: blur(6px); }
html.v4 .kz-f2-cta__txt { display: flex; align-items: center; gap: 16px; min-width: 0; }
html.v4 .kz-f2-cta__ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #0d2a15; background: linear-gradient(135deg, #d9f2c0, #93c572); }
html.v4 .kz-f2-cta h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
html.v4 .kz-f2-cta p { margin: 0; font-size: 14px; color: rgba(236, 246, 228, .75); }
html.v4 .kz-f2-cta__act { display: flex; gap: 10px; flex-wrap: wrap; }
html.v4 .kz-f2-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 11px; font-weight: 700; font-size: 14px; color: #fff !important; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); transition: background .15s, transform .15s; }
html.v4 .kz-f2-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
html.v4 .kz-f2-btn--pri { background: #fff; color: #133a1f !important; border-color: #fff; }
html.v4 .kz-f2-btn--pri:hover { background: #eef9e4; }
html.v4 .kz-f2-main { display: grid; grid-template-columns: minmax(260px, 1.15fr) 2.6fr; gap: 56px; padding-bottom: 40px; }
html.v4 .kz-f2-brand > p { margin: 16px 0 20px; font-size: 14px; line-height: 1.65; color: rgba(236, 246, 228, .72); max-width: 360px; }
html.v4 .kz-f2-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html.v4 .kz-f2-contact a, html.v4 .kz-f2-row { display: flex; align-items: center; gap: 12px; color: inherit; }
html.v4 .kz-f2-contact a:hover b { color: #d9f2c0; }
html.v4 .kz-f2-ci { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(214, 240, 190, .16); color: #c6e6a8; font-size: 14px; }
html.v4 .kz-f2-contact b { display: block; font-size: 14px; font-weight: 600; color: #fff; transition: color .15s; }
html.v4 .kz-f2-contact .kz-f2-addr { font-weight: 500; font-size: 13px; line-height: 1.45; color: rgba(236, 246, 228, .85); }
html.v4 .kz-f2-contact small { display: block; font-size: 12px; color: rgba(236, 246, 228, .55); }
html.v4 .kz-f2-social { margin-top: 18px !important; }
html.v4 .kz-f2-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
html.v4 .kz-f2-title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; color: #c6e6a8; }
html.v4 .kz-f2-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html.v4 .kz-f2-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(236, 246, 228, .78); transition: color .15s, transform .15s; }
html.v4 .kz-f2-links a:hover { color: #fff; transform: translateX(3px); }
html.v4 .kz-f2-trust { list-style: none; margin: 0 0 24px; padding: 18px 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(214, 240, 190, .14); }
html.v4 .kz-f2-trust li { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.v4 .kz-f2-ti { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; color: #133a1f; background: #c6e6a8; }
html.v4 .kz-f2-trust b { display: block; font-size: 13px; color: #fff; font-weight: 700; }
html.v4 .kz-f2-trust small { display: block; font-size: 11.5px; color: rgba(236, 246, 228, .6); }
html.v4 .kz-f2-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(214, 240, 190, .14); }
html.v4 .kz-f2-bottom p { margin: 0; font-size: 13px; color: rgba(236, 246, 228, .6); }
html.v4 .kz-f2-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
html.v4 .kz-f2-legal a { font-size: 13px; color: rgba(236, 246, 228, .65); }
html.v4 .kz-f2-legal a:hover { color: #fff; }
@media (max-width: 1100px) {
html.v4 .kz-f2-main { grid-template-columns: minmax(0, 1fr); gap: 36px; }
html.v4 .kz-f2-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
html.v4 .kz-ftr2 { padding: 40px 0 24px !important; }
html.v4 .kz-f2-cta { padding: 20px; margin-bottom: 36px; }
html.v4 .kz-f2-cta h2 { font-size: 17px; }
html.v4 .kz-f2-cta__act, html.v4 .kz-f2-btn { width: 100%; justify-content: center; }
html.v4 .kz-f2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
html.v4 .kz-f2-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html.v4 .kz-f2-bottom { flex-direction: column; align-items: flex-start; }
}
html.v4 .kz-mega2 {
width: min(1100px, calc(100vw - 48px));
padding: 22px 22px 0;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, .08);
box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .28), 0 10px 20px -12px rgba(15, 23, 42, .12);
}
html.v4 .kz-mega__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: stretch; }
html.v4 .kz-mega2 .kz-mega__cols { gap: 4px 14px; }
html.v4 .kz-mega2 .kz-mega__title {
display: flex; align-items: center; gap: 8px;
margin: 0 0 8px; padding: 0 10px 10px;
border-bottom: 1px dashed var(--kz-line, #e6e9f0);
font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none;
color: var(--kz-ink, #0f172a);
}
html.v4 .kz-mega2 .kz-mega__title::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: #7fbf5e; box-shadow: 0 0 0 3px rgba(127, 191, 94, .18); }
html.v4 .kz-mega2 .kz-dd__link { position: relative; padding: 10px 34px 10px 10px; border-radius: 12px; border: 1px solid transparent; transition: background-color .15s, border-color .15s, transform .15s; }
html.v4 .kz-mega2 .kz-dd__link::after {
content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
position: absolute; right: 12px; top: 50%; transform: translate(-4px, -50%); opacity: 0; color: #4d8a33; transition: opacity .15s, transform .15s;
}
html.v4 .kz-mega2 .kz-dd__link:hover, html.v4 .kz-mega2 .kz-dd__link:focus-visible { background: #f4faef; border-color: #dcefcf; }
html.v4 .kz-mega2 .kz-dd__link:hover::after, html.v4 .kz-mega2 .kz-dd__link:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
html.v4 .kz-mega2 .kz-dd__ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; font-size: 15px; }
html.v4 .kz-mega2 .kz-dd__ico--ov, html.v4 .kz-mega2 .kz-dd__ico--ev { font-size: 11px; }
html.v4 .kz-mega2 .kz-dd__t { font-size: 14.5px; }
html.v4 .kz-mega2 .kz-dd__d { font-size: 12.5px; }
html.v4 .kz-mega__promo {
position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
padding: 20px; margin-bottom: 4px; border-radius: 16px; color: #eaf6df;
background:
radial-gradient(260px 180px at 100% 0%, rgba(198, 230, 168, .45), transparent 70%),
linear-gradient(160deg, #1d4d28 0%, #143a1e 55%, #0d2a15 100%);
}
html.v4 .kz-mega__promo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 16px 16px; opacity: .6; pointer-events: none; }
html.v4 .kz-mega__promo > * { position: relative; z-index: 1; }
html.v4 .kz-mega__promo-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(198, 230, 168, .18); color: #d9f2c0; font-size: 11.5px; font-weight: 700; }
html.v4 .kz-mega__promo-t { margin: 2px 0 0; font-size: 17px; font-weight: 750; line-height: 1.3; color: #fff; letter-spacing: -.01em; }
html.v4 .kz-mega__promo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
html.v4 .kz-mega__promo li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(234, 246, 223, .85); }
html.v4 .kz-mega__promo li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: #93c572; color: #0d2a15; }
html.v4 .kz-mega__promo-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #fff; color: #133a1f !important; font-size: 13px; font-weight: 700; text-decoration: none !important; transition: transform .15s, background-color .15s; }
html.v4 .kz-mega__promo-btn:hover { background: #eef9e4; transform: translateY(-1px); }
html.v4 .kz-mega2 .kz-mega__foot { margin: 18px -22px 0; padding: 14px 24px; background: #f6faf2; border-top: 1px solid #e3efd9; border-radius: 0 0 18px 18px; font-size: 13px; }
html.v4 .kz-mega2 .kz-mega__foot > span i { color: #4d8a33; margin-right: 6px; }
html.v4 .kz-mega__all { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #133a1f; color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; transition: background-color .15s; }
html.v4 .kz-mega__all:hover { background: #1d4d28; }
@media (max-width: 1180px) {
html.v4 .kz-mega__wrap { grid-template-columns: minmax(0, 1fr); }
html.v4 .kz-mega__promo { display: none; }
}
@supports not selector(::-webkit-scrollbar) { html.v4 { scrollbar-width: auto; scrollbar-color: #6b778c #e6eaf0; } }
html::-webkit-scrollbar-button, body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 14px !important; height: 14px !important; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #e6eaf0; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #6b778c !important; border-radius: 10px; border: 3px solid #e6eaf0; min-height: 48px; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #4b5566 !important; }
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active { background: #334155 !important; }
html.v4 .open > .kz-menu,
html.v4 .kz-cur.open .selector-menu { pointer-events: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
html.v4 .kz-cur__btn { height: 38px; padding: 0 12px; gap: 8px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 13px; }
html.v4 .kz-cur__sym { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef6e8; color: #2f6b1f; font-size: 12px; font-weight: 800; }
html.v4 .kz-cur.open .kz-cur__btn { border-color: #b9dca0; background: #f6fbf2; }
html.v4 .kz-cur2 { min-width: 250px; padding: 8px; border-radius: 16px; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .28), 0 8px 16px -10px rgba(15, 23, 42, .12); }
html.v4 .kz-cur2__head { margin: 2px 8px 6px; font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--kz-muted, #64748b); }
html.v4 .kz-cur .kz-cur2 a.kz-cur2__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; font-family: inherit; color: var(--kz-ink, #0f172a) !important; transition: background-color .12s; }
html.v4 .kz-cur .kz-cur2 a.kz-cur2__item:hover { background: #f4faef; }
html.v4 .kz-cur2__sym { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f1f5f9; color: #334155; font-size: 15px; font-weight: 800; transition: background-color .12s, color .12s; }
html.v4 .kz-cur2__item:hover .kz-cur2__sym { background: #e3f1d8; color: #2f6b1f; }
html.v4 .kz-cur2__txt { flex: 1; min-width: 0; line-height: 1.25; }
html.v4 .kz-cur2__txt b { display: block; font-size: 14px; font-weight: 700; }
html.v4 .kz-cur2__txt small { display: block; font-size: 12px; color: var(--kz-muted, #64748b); font-weight: 500; }
html.v4 .kz-cur .kz-cur2 a.kz-cur2__item.active { background: #eef7e7; }
html.v4 .kz-cur2__item.active .kz-cur2__sym { background: linear-gradient(135deg, #93c572, #5e9e3f); color: #fff; }
html.v4 .kz-cur2__ok { color: #4d8a33; font-size: 13px; }
html.v4 .kz-cur2__note { display: flex; align-items: center; gap: 6px; margin: 6px 4px 2px; padding: 8px 8px 2px; border-top: 1px dashed var(--kz-line, #e6e9f0); font-size: 11.5px; color: var(--kz-muted, #64748b); }
html.v4 { --kz-sec: 56px; --kz-sec-tight: 36px; }
@media (max-width: 991px) { html.v4 { --kz-sec: 48px; --kz-sec-tight: 32px; } }
@media (max-width: 767px) { html.v4 { --kz-sec: 36px; --kz-sec-tight: 28px; } }
html.v4 .k-eyebrow {
display: none;
}
html.v4 .k-text-grad,
html.v4 .kz-hero .k-text-grad,
html.v4 .kz-display .k-text-grad,
html.v4 .k-hero .k-text-grad,
html.v4 .k-section--dark .k-text-grad,
html.v4 .k-cta .k-text-grad {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor !important;
background-image: none !important;
color: inherit !important;
}
html.v4 .k-btn .fa-arrow-right,
html.v4 .kz-pill .fa-arrow-right {
display: none;
}
html.v4 .kz-uac {
position: relative;
padding: 8px 0 0;
min-height: 430px;
}
html.v4 .kz-uac__item {
position: absolute;
width: min(360px, 78%);
margin: 0;
}
html.v4 .kz-uac__item--before {
top: 0;
left: 0;
opacity: .82;
}
html.v4 .kz-uac__item--after {
right: 0;
bottom: 0;
}
html.v4 .kz-uac__tag {
display: inline-block;
margin: 0 0 8px;
padding: 4px 10px;
border-radius: 6px;
background: rgba(8, 15, 36, .78);
font-size: 13px;
font-weight: 600;
color: #fff;
}
html.v4 .kz-uac__item--after .kz-uac__tag {
background: #0067c0;
}
html.v4 .kz-uac__win {
overflow: hidden;
border-radius: 8px;
background: #f3f3f3;
color: #1b1b1b;
font-family: 'Segoe UI', 'Segoe UI Variable', system-ui, -apple-system, Roboto, sans-serif;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .18);
}
html.v4 .kz-uac__bar {
padding: 9px 16px;
font-size: 13px;
color: #1b1b1b;
background: #ffd335;
}
html.v4 .kz-uac__item--after .kz-uac__bar {
color: #fff;
background: #0067c0;
}
html.v4 .kz-uac__body {
padding: 16px 16px 14px;
}
html.v4 .kz-uac__body p {
margin: 0;
}
html.v4 .kz-uac__q {
font-size: 15.5px;
line-height: 1.35;
font-weight: 600;
color: #1b1b1b;
}
html.v4 .kz-uac__app {
margin-top: 14px !important;
font-size: 15px;
font-weight: 600;
color: #1b1b1b;
}
html.v4 .kz-uac__pub,
html.v4 .kz-uac__src {
margin-top: 10px !important;
font-size: 13px;
line-height: 1.4;
color: #3b3b3b;
}
html.v4 .kz-uac__src {
margin-top: 2px !important;
}
html.v4 .kz-uac__pub b {
font-weight: 600;
color: #1b1b1b;
}
html.v4 .kz-uac__item--before .kz-uac__pub b {
color: #9a5b00;
}
html.v4 .kz-uac__item--after .kz-uac__pub b {
color: #0f5fb5;
}
html.v4 .kz-uac__btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 16px;
}
html.v4 .kz-uac__btns span {
padding: 7px 0;
border: 1px solid #d1d1d1;
border-radius: 4px;
background: #fbfbfb;
font-size: 13px;
text-align: center;
color: #1b1b1b;
}
@media (max-width: 1199px) {
html.v4 .kz-uac {
max-width: 560px;
padding: 0;
}
}
@media (max-width: 575px) {
html.v4 .kz-uac {
min-height: 0;
display: grid;
gap: 20px;
}
html.v4 .kz-uac__item {
position: static;
width: 100%;
}
html.v4 .kz-uac__item--before {
opacity: 1;
}
}
html.v4 .kz-uac--light .kz-uac__win {
box-shadow: 0 18px 44px -18px rgba(17, 26, 51, .35), 0 0 0 1px rgba(17, 26, 51, .12);
}
html.v4 .kz-uac--light .kz-uac__item--before {
opacity: .9;
}
html.v4 .kz-page--pd .kz-pd-visual,
html.v4 .kz-page--list .kz-cvisual {
padding: 0;
}
html.v4 .kz-why {
position: relative;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 40px;
align-items: center;
padding: 40px 44px;
border-radius: var(--kz-r-xl);
overflow: hidden;
color: #fff;
background:
radial-gradient(560px 340px at 96% -20%, rgba(164, 214, 120, .5), transparent 68%),
radial-gradient(460px 320px at -6% 120%, rgba(147, 197, 114, .34), transparent 66%),
linear-gradient(150deg, #1f5a2d 0%, #174423 50%, #103219 100%);
box-shadow: 0 24px 56px -30px rgba(19, 58, 31, .7);
}
html.v4 .kz-why__title {
margin: 0 0 12px;
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.2;
font-weight: 650;
letter-spacing: -.01em;
color: #fff;
}
html.v4 .kz-why__lead p {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, .92);
max-width: 38ch;
}
html.v4 .kz-why__btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 20px;
border-radius: var(--kz-r-sm);
background: #fff;
color: #133a1f;
font-weight: 650;
font-size: 15px;
text-decoration: none;
transition: transform .15s var(--kz-ease), box-shadow .15s var(--kz-ease);
}
html.v4 .kz-why__btn:hover {
color: #133a1f;
transform: translateY(-1px);
box-shadow: 0 10px 24px -10px rgba(8, 15, 36, .55);
}
html.v4 .kz-why__btn:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
html.v4 .kz-why__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 28px;
margin: 0;
padding: 0;
list-style: none;
}
html.v4 .kz-why__list li {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 0;
}
html.v4 .kz-why__list i {
flex: none;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(200, 240, 170, .18);
color: #d9f5bf;
font-size: 15px;
}
html.v4 .kz-why__list b {
display: block;
margin-bottom: 3px;
font-size: 15.5px;
font-weight: 650;
color: #fff;
}
html.v4 .kz-why__list span {
display: block;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, .9);
}
@media (max-width: 991px) {
html.v4 .kz-why {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
padding: 32px 28px;
}
}
@media (max-width: 575px) {
html.v4 .kz-why {
padding: 26px 20px;
border-radius: var(--kz-r-lg);
}
html.v4 .kz-why__list {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
html.v4 .kz-why__btn {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
html.v4 .kz-why__btn { transition: none; }
html.v4 .kz-why__btn:hover { transform: none; }
}
html.v4 {
--kz-brand: #1f6b34;
--kz-brand-deep: #143a1e;
--kz-brand-pop: #b9e88a;
--kz-blue: #1f6b34;
--kz-blue-h: #17532a;
--kz-blue-50: #eef8e8;
--kz-blue-100: #dcf0cf;
--kz-blue-300: #a9dd86;
--kz-sky: #c4ec9f;
--kz-cyan: #d9f5bf;
--kz-grad: linear-gradient(120deg, #1f6b34 0%, #3c9a4e 55%, #a4d678 100%);
--kz-grad-text: linear-gradient(100deg, #c4ec9f 0%, #e6f9d2 100%);
--kz-ring: 0 0 0 3px rgba(31, 107, 52, .3);
--kz-sh-2: 0 1px 2px rgba(17, 26, 51, .04), 0 16px 36px -18px rgba(31, 107, 52, .22);
--kz-sh-3: 0 0 0 1px rgba(17, 26, 51, .03), 0 32px 72px -32px rgba(20, 58, 30, .38);
}
html.v4 .kz-hero .k-btn--primary,
html.v4 .k-section--dark .k-btn--primary,
html.v4 .k-cta .k-btn--primary {
background: var(--kz-brand-pop);
border-color: var(--kz-brand-pop);
color: #0f2a15 !important;
box-shadow: 0 1px 2px rgba(8, 20, 10, .3);
}
html.v4 .kz-hero .k-btn--primary:hover,
html.v4 .k-section--dark .k-btn--primary:hover,
html.v4 .k-cta .k-btn--primary:hover {
background: #cdf0a6;
border-color: #cdf0a6;
}
html.v4 .kz-ann {
background: linear-gradient(90deg, #143a1e 0%, #1d4d28 55%, #143a1e 100%);
color: #e4f5d6;
border-bottom-color: rgba(220, 245, 190, .14);
}
html.v4 .kz-ann a,
html.v4 .kz-ann__text strong {
color: #fff;
}
html.v4 .kz-ann__tag {
background: var(--kz-brand-pop);
color: #0f2a15;
}
html.v4 .kz-hdr {
background: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html.v4 .kz-nav__link:hover,
html.v4 .kz-nav__item.is-open > .kz-nav__link,
html.v4 .kz-nav__item.is-current > .kz-nav__link {
color: var(--kz-brand) !important;
}
html.v4 .kz-page--auth .kz-auth__brand {
background:
radial-gradient(620px 420px at 90% -10%, rgba(164, 214, 120, .5), transparent 66%),
radial-gradient(520px 380px at -10% 108%, rgba(147, 197, 114, .34), transparent 64%),
linear-gradient(160deg, #1d4d28 0%, #143a1e 45%, #0d2a15 100%);
border-right-color: rgba(220, 245, 190, .12);
}
html.v4 .kz-page--auth .kz-auth__brand::after {
display: none;
}
html.v4 .kz-f2-co {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 20px;
margin: 0;
padding: 22px 0;
border-top: 1px solid rgba(220, 245, 190, .14);
}
html.v4 .kz-f2-co p {
margin: 0;
}
html.v4 .kz-f2-co__name {
font-size: 15px;
color: #e4f5d6;
}
html.v4 .kz-f2-co__name b {
color: #fff;
font-weight: 650;
}
html.v4 .kz-f2-co__meta {
font-size: 13.5px;
color: #c6e6a8;
font-variant-numeric: tabular-nums;
}
html.v4 .kz-f2-co__link {
margin-left: auto;
font-size: 14px;
font-weight: 600;
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 575px) {
html.v4 .kz-f2-co__link { margin-left: 0; }
}
html.v4 .k-hero {
background: #143a1e;
}
html.v4 .k-hero::before {
background: linear-gradient(180deg, #174323 0%, #123519 100%);
}
html.v4 .k-hero::after {
display: none;
}
html .kz-ftr,
html.v4 .kz-ftr,
html.tp .kz-ftr {
background-color: #123519 !important;
background-image: none !important;
}
html.v4 .kz-why {
background: #174323;
box-shadow: none;
}
html.v4 .kz-page--auth .kz-auth__brand {
background: linear-gradient(180deg, #174323 0%, #123519 100%);
}
html.v4 .kz-mega__promo {
background: #174323;
}
html.v4 .kz-mega__promo::after {
display: none;
}
html.v4 .kzm.kz-mega2 {
padding: 0;
overflow: hidden;
border-radius: 18px;
border: 1px solid #d9eacc;
background: #fff;
box-shadow: 0 28px 56px -24px rgba(20, 58, 30, .32), 0 8px 18px -10px rgba(20, 58, 30, .14);
}
html.v4 .kzm__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
}
html.v4 .kzm__col,
html.v4 .kzm__feat {
padding: 22px 16px 18px;
}
html.v4 .kzm__col + .kzm__col {
border-left: 1px solid #e8f3df;
}
html.v4 .kzm__feat {
background: #eef7e6;
padding: 22px 20px;
}
html.v4 .kzm .kzm__h {
margin: 0 0 8px;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: #4f6356;
}
html.v4 .kzm__feat .kzm__h {
padding: 0;
}
html.v4 .kzm .kzm__row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border-radius: 10px;
color: inherit;
text-decoration: none;
transition: background-color .15s ease;
}
html.v4 .kzm .kzm__row:hover,
html.v4 .kzm .kzm__row:focus-visible {
background: #eef7e6;
}
html.v4 .kzm .kzm__row:focus-visible {
outline: 2px solid #24813f;
outline-offset: 0;
}
html.v4 .kzm__row-main {
display: flex;
flex-direction: column;
min-width: 0;
margin-right: auto;
}
html.v4 .kzm__row-t {
font-size: 15px;
font-weight: 600;
color: #12261a;
}
html.v4 .kzm__row-d {
font-size: 13px;
color: #4f6356;
}
html.v4 .kzm__row--brand .kzm__row-d {
margin-right: auto;
}
html.v4 .kzm__row-p {
flex: none;
font-size: 14.5px;
font-weight: 650;
color: #1d6b34;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
html.v4 .kzm__row-p small {
font-size: 12.5px;
font-weight: 400;
color: #4f6356;
}
html.v4 .kzm__logo {
display: inline-flex;
align-items: center;
flex: none;
width: 96px;
}
html.v4 .kzm__logo img,
html.v4 .kzm__logo svg {
display: block;
height: 20px;
width: auto;
max-width: 96px;
}
html.v4 .kzm__card {
padding: 18px;
border: 1px solid #d9eacc;
border-radius: 14px;
background: #fff;
}
html.v4 .kzm .kzm__card-t {
display: block;
margin: 12px 0 4px;
font-size: 16.5px;
line-height: 1.3;
font-weight: 650;
color: #12261a;
text-decoration: none;
}
html.v4 .kzm .kzm__card-t:hover {
color: #1d6b34;
text-decoration: underline;
}
html.v4 .kzm .kzm__card-d {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: #4f6356;
}
html.v4 .kzm .kzm__card-p {
margin: 14px 0 14px;
font-variant-numeric: tabular-nums;
color: #12261a;
}
html.v4 .kzm__card-p s {
display: block;
font-size: 13px;
color: #4f6356;
}
html.v4 .kzm__card-p b {
font-size: 24px;
font-weight: 650;
letter-spacing: -.02em;
}
html.v4 .kzm__card-p small {
font-size: 13px;
color: #4f6356;
}
html.v4 .kzm__card-a {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
html.v4 .kzm .kzm__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 10px;
border: 1px solid #d9eacc;
border-radius: 10px;
background: #fff;
color: #12261a;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
html.v4 .kzm .kzm__btn:hover {
border-color: #24813f;
color: #1d6b34;
}
html.v4 .kzm .kzm__btn--pri {
border-color: #24813f;
background: #24813f;
color: #fff;
}
html.v4 .kzm .kzm__btn--pri:hover {
background: #1d6b34;
color: #fff;
}
html.v4 .kzm__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
padding: 14px 28px;
border-top: 1px solid #e8f3df;
font-size: 13.5px;
color: #4f6356;
}
html.v4 .kzm__foot-links {
display: inline-flex;
gap: 22px;
}
html.v4 .kzm .kzm__foot-links a {
font-weight: 600;
color: #1d6b34;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 1100px) {
html.v4 .kzm__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
html.v4 .kzm__feat {
grid-column: 1 / -1;
}
}
html.v4 .ct2-feats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 20px;
margin: 14px 0 16px;
padding: 12px 14px;
list-style: none;
border-radius: 12px;
background: #f4faec;
font-size: 14px;
line-height: 1.45;
color: #2a3d31;
}
html.v4 .ct2-feats li {
display: flex;
gap: 8px;
margin: 0;
}
html.v4 .ct2-feats i {
flex: none;
margin-top: 3px;
font-size: 12px;
color: #24813f;
}
@media (max-width: 640px) {
html.v4 .ct2-feats {
grid-template-columns: minmax(0, 1fr);
}
}
html.v4 .kzm__row--brand .kzm__row-p {
margin-left: auto;
}