/* 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-ssl.css */
:root {
--primary: #0066FF;
--primary-dark: #0052CC;
--primary-light: #4D94FF;
--primary-gradient: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
--secondary: #00D68F;
--secondary-dark: #00B377;
--warning: #FFAA00;
--danger: #FF3D71;
--info: #00CFDE;
--dark: #192038;
--dark-light: #2E3A59;
--gray-900: #1A1F36;
--gray-800: #2D3748;
--gray-700: #4A5568;
--gray-600: #718096;
--gray-500: #A0AEC0;
--gray-400: #CBD5E0;
--gray-300: #E2E8F0;
--gray-200: #EDF2F7;
--gray-100: #F7FAFC;
--white: #FFFFFF;
--dv-color: #00D68F;
--ov-color: #0066FF;
--ev-color: #9B59B6;
--wildcard-color: #FF6B35;
--multi-color: #00CFDE;
--sectigo: #2E7D32;
--comodo: #1565C0;
--digicert: #0D47A1;
--geotrust: #D32F2F;
--rapidssl: #7B1FA2;
--thawte: #00695C;
--globalsign: #E65100;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-primary: 0 10px 40px rgba(0, 102, 255, 0.3);
--radius-sm: 4px;
--radius: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--transition: all 0.3s ease;
--transition-fast: all 0.15s ease;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--gray-800);
background: var(--gray-100);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
}
.modern-topbar {
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0d0d25 100%);
padding: 0;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
}
.modern-topbar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
animation: topbarShine 8s infinite;
}
@keyframes topbarShine {
0% { transform: translateX(-50%); }
100% { transform: translateX(50%); }
}
.modern-topbar .topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
padding: 10px 0;
position: relative;
z-index: 1;
}
.modern-topbar .topbar-left {
display: flex;
align-items: center;
gap: 24px;
}
.modern-topbar .topbar-trust {
display: flex;
align-items: center;
gap: 12px;
}
.modern-topbar .trust-badge {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
background: rgba(0, 214, 143, 0.1);
border: 1px solid rgba(0, 214, 143, 0.2);
padding: 5px 12px;
border-radius: var(--radius-full);
}
.modern-topbar .trust-badge i {
color: #00D68F;
font-size: 12px;
}
.modern-topbar .topbar-link .online-dot {
width: 8px;
height: 8px;
background: #00D68F;
border-radius: 50%;
margin-left: 4px;
animation: onlinePulse 2s infinite;
box-shadow: 0 0 6px rgba(0, 214, 143, 0.6);
}
@keyframes onlinePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.2); }
}
.modern-topbar .topbar-contact {
display: flex;
align-items: center;
gap: 24px;
}
.modern-topbar .topbar-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.6);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: 6px 0;
}
.modern-topbar .topbar-item:hover {
color: var(--white);
}
.modern-topbar .topbar-item i {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, #00D68F 100%);
border-radius: 8px;
color: var(--white);
font-size: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-topbar .topbar-item:hover i {
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4);
}
.modern-topbar .topbar-notice {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
background: linear-gradient(135deg, rgba(255, 170, 0, 0.2) 0%, rgba(255, 107, 53, 0.2) 100%);
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 500;
border: 1px solid rgba(255, 170, 0, 0.3);
animation: noticePulse 2s infinite;
}
@keyframes noticePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.3); }
50% { box-shadow: 0 0 0 8px rgba(255, 170, 0, 0); }
}
.modern-topbar .topbar-notice i {
color: var(--warning);
animation: bellRing 2s infinite;
}
@keyframes bellRing {
0%, 90%, 100% { transform: rotate(0); }
92%, 96% { transform: rotate(10deg); }
94%, 98% { transform: rotate(-10deg); }
}
.modern-topbar .topbar-right {
display: flex;
align-items: center;
gap: 16px;
}
.modern-topbar .topbar-links {
display: flex;
align-items: center;
gap: 8px;
}
.modern-topbar .topbar-link {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: var(--radius-full);
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
border: 1px solid transparent;
}
.modern-topbar .topbar-link:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.modern-topbar .topbar-link i {
font-size: 11px;
opacity: 0.8;
}
.modern-topbar .topbar-divider {
width: 1px;
height: 24px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2), transparent);
}
.modern-topbar .topbar-selector {
position: relative;
}
.modern-topbar .selector-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.modern-topbar .selector-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: var(--white);
transform: translateY(-1px);
}
.modern-topbar .selector-btn .flag {
font-size: 15px;
}
.modern-topbar .selector-btn .currency-symbol {
font-weight: 700;
background: linear-gradient(135deg, var(--primary-light), #00D68F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modern-topbar .selector-btn i.fa-chevron-down {
font-size: 9px;
margin-left: 2px;
transition: transform 0.3s ease;
opacity: 0.6;
}
.modern-topbar .topbar-selector.open .selector-btn i.fa-chevron-down {
transform: rotate(180deg);
}
.modern-topbar .selector-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: var(--radius-md);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.1);
min-width: 150px;
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.95);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
.modern-topbar .topbar-selector.open .selector-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.modern-topbar .selector-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: var(--gray-700);
border-radius: var(--radius);
transition: all 0.2s ease;
font-size: 13px;
font-weight: 500;
}
.modern-topbar .selector-dropdown a:hover {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 214, 143, 0.1));
color: var(--primary);
transform: translateX(4px);
}
.modern-topbar .selector-dropdown a.active {
background: var(--primary);
color: var(--white);
}
.modern-topbar .topbar-social {
display: flex;
align-items: center;
gap: 6px;
}
.modern-topbar .topbar-social a {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-topbar .topbar-social a:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 20px rgba(0, 102, 255, 0.4);
}
.modern-header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 999;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.modern-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), #00D68F, var(--primary), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.modern-header.sticky::after {
opacity: 1;
}
.modern-header.sticky {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
padding-top: 0;
padding-bottom: 0;
}
.modern-header.sticky .header-inner {
padding: 10px 0;
}
.modern-header.sticky .logo-icon {
width: 44px;
height: 44px;
font-size: 22px;
}
.modern-header.sticky .logo-name {
font-size: 20px;
}
.modern-header.sticky .logo-tagline {
display: none;
}
.modern-header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
gap: 40px;
}
.modern-header .header-logo {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
position: relative;
}
.modern-header .logo-icon {
width: 52px;
height: 52px;
background: linear-gradient(135deg, #0066FF 0%, #00D68F 50%, #0066FF 100%);
background-size: 200% 200%;
animation: logoGradient 5s ease infinite;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 26px;
box-shadow: 0 8px 30px rgba(0, 102, 255, 0.35);
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes logoGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.modern-header .header-logo:hover .logo-icon {
transform: rotate(-5deg) scale(1.05);
box-shadow: 0 12px 40px rgba(0, 102, 255, 0.5);
}
.modern-header .logo-icon::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 17px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(0, 214, 143, 0.3));
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.modern-header .header-logo:hover .logo-icon::after {
opacity: 1;
}
.modern-header .logo-pulse {
position: absolute;
inset: 0;
border-radius: 14px;
background: linear-gradient(135deg, #0066FF, #00D68F);
animation: logoPulseAnim 2s ease-out infinite;
z-index: -1;
}
@keyframes logoPulseAnim {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.5); opacity: 0; }
}
.modern-header .logo-text {
display: flex;
flex-direction: column;
}
.modern-header .logo-name {
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
letter-spacing: -0.5px;
transition: all 0.3s ease;
}
.modern-header .header-logo:hover .logo-name {
background: linear-gradient(135deg, var(--primary) 0%, #00D68F 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modern-header .logo-tagline {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--gray-400);
letter-spacing: 1.5px;
font-weight: 600;
margin-top: 2px;
}
.modern-header .logo-tagline i {
color: #00D68F;
font-size: 9px;
}
.modern-header .header-quick-check {
flex: 0 0 auto;
max-width: 280px;
}
.modern-header .quick-check-form {
display: flex;
align-items: center;
gap: 10px;
background: var(--gray-100);
border: 2px solid transparent;
border-radius: var(--radius-full);
padding: 4px 4px 4px 16px;
transition: all 0.3s ease;
}
.modern-header .quick-check-form:focus-within {
background: var(--white);
border-color: var(--primary);
box-shadow: 0 4px 20px rgba(0, 102, 255, 0.15);
}
.modern-header .quick-check-form i {
color: var(--gray-400);
font-size: 14px;
}
.modern-header .quick-check-form:focus-within i {
color: var(--primary);
}
.modern-header .quick-check-form input {
flex: 1;
border: none;
background: none;
font-size: 13px;
font-weight: 500;
color: var(--dark);
padding: 8px 0;
outline: none;
min-width: 150px;
}
.modern-header .quick-check-form input::placeholder {
color: var(--gray-400);
}
.modern-header .quick-check-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), #00D68F);
border: none;
border-radius: 50%;
color: var(--white);
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.modern-header .quick-check-btn:hover {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4);
}
@media (max-width: 1199px) {
.modern-header .header-quick-check {
display: none;
}
}
.modern-header .header-nav {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
.modern-header .nav-link {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
background: none;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.modern-header .nav-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 214, 143, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-full);
}
.modern-header .nav-link:hover::before,
.modern-header .nav-link.active::before {
opacity: 1;
}
.modern-header .nav-link i:not(.arrow) {
font-size: 14px;
color: var(--gray-400);
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.modern-header .nav-link .arrow {
font-size: 9px;
margin-left: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.5;
position: relative;
z-index: 1;
}
.modern-header .nav-link span {
position: relative;
z-index: 1;
}
.modern-header .nav-link:hover,
.modern-header .nav-link.active {
color: var(--primary);
transform: translateY(-2px);
}
.modern-header .nav-link:hover i:not(.arrow),
.modern-header .nav-link.active i:not(.arrow) {
color: var(--primary);
transform: scale(1.1);
}
.modern-header .nav-link:hover .arrow {
opacity: 1;
}
.modern-header .nav-item.open .nav-link .arrow {
transform: rotate(180deg);
}
.modern-header .nav-item {
position: relative;
}
.modern-header .nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px) scale(0.95);
margin-top: 15px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.05);
min-width: 280px;
padding: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
.modern-header .nav-dropdown::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 8px solid rgba(255, 255, 255, 0.98);
}
.modern-header .nav-item.open .nav-dropdown,
.modern-header .nav-item:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
.modern-header .nav-dropdown a {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
color: var(--gray-700);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.modern-header .nav-dropdown a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--primary), #00D68F);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 0 3px 3px 0;
}
.modern-header .nav-dropdown a:hover {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
color: var(--primary);
transform: translateX(4px);
}
.modern-header .nav-dropdown a:hover::before {
opacity: 1;
}
.modern-header .nav-dropdown a i {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 214, 143, 0.1));
border-radius: 10px;
color: var(--primary);
font-size: 14px;
transition: all 0.3s ease;
}
.modern-header .nav-dropdown a:hover i {
background: linear-gradient(135deg, var(--primary), #00D68F);
color: var(--white);
transform: scale(1.1) rotate(-5deg);
}
.modern-header .nav-dropdown a div {
display: flex;
flex-direction: column;
}
.modern-header .nav-dropdown a strong {
font-size: 14px;
font-weight: 600;
color: var(--dark);
transition: color 0.3s ease;
}
.modern-header .nav-dropdown a:hover strong {
color: var(--primary);
}
.modern-header .nav-dropdown a span {
font-size: 12px;
color: var(--gray-500);
line-height: 1.4;
}
.modern-header .mega-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-15px) scale(0.95);
margin-top: 15px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
width: 940px;
max-width: calc(100vw - 40px);
padding: 0;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
overflow: hidden;
}
.modern-header .mega-dropdown::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), #00D68F, var(--primary));
background-size: 200% 100%;
animation: megaGradient 3s ease infinite;
}
@keyframes megaGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.modern-header .nav-item.open .mega-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
.modern-header .mega-container {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 0;
}
.modern-header .mega-section {
padding: 28px;
border-right: 1px solid rgba(0, 0, 0, 0.06);
position: relative;
}
.modern-header .mega-section:last-child {
border-right: none;
background: linear-gradient(180deg, rgba(0, 102, 255, 0.03), rgba(0, 214, 143, 0.03));
}
.modern-header .mega-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--gray-400);
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.modern-header .mega-title i {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), #00D68F);
border-radius: 6px;
color: var(--white);
font-size: 11px;
}
.modern-header .mega-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.modern-header .mega-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px;
border-radius: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.modern-header .mega-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
border-radius: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.modern-header .mega-item:hover::before {
opacity: 1;
}
.modern-header .mega-item:hover {
transform: translateX(6px);
}
.modern-header .mega-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 18px;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.modern-header .mega-item:hover .mega-icon {
transform: scale(1.1) rotate(-5deg);
}
.modern-header .mega-info {
display: flex;
flex-direction: column;
gap: 3px;
position: relative;
z-index: 1;
}
.modern-header .mega-info strong {
font-size: 14px;
font-weight: 700;
color: var(--dark);
transition: color 0.3s ease;
}
.modern-header .mega-item:hover .mega-info strong {
color: var(--primary);
}
.modern-header .mega-info span {
font-size: 12px;
color: var(--gray-500);
line-height: 1.5;
}
.modern-header .mega-count {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, var(--primary), #00D68F);
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 700;
color: var(--white);
margin-top: 6px;
}
.modern-header .mega-brands {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.modern-header .brand-link {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: var(--white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-header .brand-link:hover {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 214, 143, 0.05));
border-color: rgba(0, 102, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 102, 255, 0.1);
}
.modern-header .brand-link img {
max-height: 26px;
max-width: 90px;
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.3s ease;
}
.modern-header .brand-link:hover img {
filter: grayscale(0%);
opacity: 1;
}
.modern-header .brand-text {
font-size: 12px;
font-weight: 700;
color: var(--gray-600);
transition: color 0.3s ease;
}
.modern-header .brand-link:hover .brand-text {
color: var(--primary);
}
.modern-header .mega-viewall {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
font-size: 13px;
font-weight: 700;
color: var(--primary);
padding: 10px 18px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 214, 143, 0.1));
border-radius: var(--radius-full);
transition: all 0.3s ease;
}
.modern-header .mega-viewall:hover {
gap: 12px;
background: linear-gradient(135deg, var(--primary), #00D68F);
color: var(--white);
transform: translateX(4px);
}
.modern-header .mega-cta {
padding: 28px;
background: linear-gradient(135deg, #0066FF 0%, #00D68F 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.modern-header .mega-cta::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
animation: ctaPulse 3s ease infinite;
}
@keyframes ctaPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 0.8; }
}
.modern-header .cta-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 700;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.modern-header .mega-cta h5 {
font-size: 18px;
font-weight: 800;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.modern-header .mega-cta p {
font-size: 13px;
opacity: 0.9;
margin-bottom: 20px;
line-height: 1.6;
position: relative;
z-index: 1;
}
.modern-header .mega-cta .btn {
background: var(--white);
color: var(--primary);
border: none;
font-weight: 700;
padding: 12px 24px;
position: relative;
z-index: 1;
}
.modern-header .mega-cta .btn:hover {
background: var(--dark);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.modern-header .header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.modern-header .action-btn {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
border: 1px solid rgba(0, 102, 255, 0.1);
border-radius: 14px;
color: var(--gray-600);
font-size: 18px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.modern-header .action-btn:hover {
background: linear-gradient(135deg, var(--primary), #00D68F);
border-color: transparent;
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
}
.modern-header .action-tooltip {
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: var(--dark);
color: var(--white);
font-size: 10px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
}
.modern-header .action-btn:hover .action-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.modern-header .live-chat-btn {
background: linear-gradient(135deg, rgba(0, 214, 143, 0.15), rgba(0, 214, 143, 0.08));
border-color: rgba(0, 214, 143, 0.2);
}
.modern-header .live-chat-btn:hover {
background: linear-gradient(135deg, #00D68F, #00B377);
}
.modern-header .online-indicator {
position: absolute;
top: 8px;
right: 8px;
width: 10px;
height: 10px;
background: #00D68F;
border: 2px solid var(--white);
border-radius: 50%;
animation: onlineBlink 2s infinite;
}
@keyframes onlineBlink {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.5); }
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(0, 214, 143, 0); }
}
.modern-header .cart-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #FF6B35, #FF3366);
color: var(--white);
font-size: 11px;
font-weight: 700;
border-radius: var(--radius-full);
padding: 0 6px;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
animation: cartPulse 2s ease infinite;
}
@keyframes cartPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.modern-header .auth-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.modern-header .btn-login {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 14px;
color: var(--gray-700);
background: var(--white);
border: 2px solid rgba(0, 102, 255, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-header .btn-login:hover {
color: var(--primary);
border-color: var(--primary);
background: rgba(0, 102, 255, 0.05);
transform: translateY(-2px);
}
.modern-header .btn-login i {
font-size: 14px;
}
.modern-header .btn-register {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: 14px;
color: var(--white);
background: linear-gradient(135deg, var(--primary), #00D68F);
border: none;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}
.modern-header .btn-register:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 102, 255, 0.4);
}
.modern-header .btn-register i {
font-size: 14px;
}
.modern-header .btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: btnShine 3s infinite;
}
@keyframes btnShine {
0% { left: -100%; }
50%, 100% { left: 100%; }
}
.modern-header .auth-buttons .btn {
padding: 12px 20px;
border-radius: var(--radius-full);
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-header .auth-buttons .btn-outline-primary {
border: 2px solid rgba(0, 102, 255, 0.3);
color: var(--primary);
background: transparent;
}
.modern-header .auth-buttons .btn-outline-primary:hover {
border-color: var(--primary);
background: rgba(0, 102, 255, 0.08);
transform: translateY(-2px);
}
.modern-header .auth-buttons .btn-primary {
background: linear-gradient(135deg, var(--primary), #00D68F);
border: none;
color: var(--white);
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}
.modern-header .auth-buttons .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 102, 255, 0.4);
}
.modern-header .auth-buttons .btn i {
margin-right: 8px;
}
.modern-header .user-dropdown {
position: relative;
}
.modern-header .user-btn {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
border: 1px solid rgba(0, 102, 255, 0.1);
padding: 6px 16px 6px 6px;
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-header .user-btn:hover {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 214, 143, 0.1));
border-color: rgba(0, 102, 255, 0.2);
transform: translateY(-2px);
}
.modern-header .user-avatar {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), #00D68F);
color: var(--white);
font-size: 14px;
font-weight: 700;
border-radius: var(--radius-full);
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
transition: all 0.3s ease;
}
.modern-header .user-btn:hover .user-avatar {
transform: scale(1.05);
}
.modern-header .user-avatar.large {
width: 44px;
height: 44px;
font-size: 17px;
}
.modern-header .user-name {
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
transition: color 0.3s ease;
}
.modern-header .user-btn:hover .user-name {
color: var(--primary);
}
.modern-header .user-btn i {
font-size: 9px;
color: var(--gray-400);
transition: all 0.3s ease;
opacity: 0.7;
}
.modern-header .user-dropdown.open .user-btn i {
transform: rotate(180deg);
}
.modern-header .user-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 15px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
width: 300px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.95);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
overflow: hidden;
}
.modern-header .user-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), #00D68F);
}
.modern-header .user-dropdown.open .user-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.modern-header .user-info {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 214, 143, 0.03));
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.modern-header .user-info div {
display: flex;
flex-direction: column;
}
.modern-header .user-info strong {
font-size: 15px;
font-weight: 700;
color: var(--dark);
}
.modern-header .user-info span {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
.modern-header .user-links {
padding: 10px;
}
.modern-header .user-links a {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
color: var(--gray-700);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 14px;
font-weight: 500;
position: relative;
}
.modern-header .user-links a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: linear-gradient(180deg, var(--primary), #00D68F);
border-radius: 0 3px 3px 0;
transition: height 0.3s ease;
}
.modern-header .user-links a:hover {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
color: var(--primary);
transform: translateX(4px);
}
.modern-header .user-links a:hover::before {
height: 70%;
}
.modern-header .user-links a i {
width: 22px;
text-align: center;
color: var(--gray-400);
transition: all 0.3s ease;
}
.modern-header .user-links a:hover i {
color: var(--primary);
transform: scale(1.1);
}
.modern-header .user-logout {
padding: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.modern-header .user-logout a {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
color: var(--danger);
border-radius: 12px;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
}
.modern-header .user-logout a:hover {
background: rgba(255, 61, 113, 0.1);
transform: translateX(4px);
}
.modern-header .user-logout a i {
width: 22px;
text-align: center;
}
.modern-header .brands-dropdown .nav-dropdown.brands-menu {
width: 520px;
padding: 0;
overflow: hidden;
}
.modern-header .brands-dropdown .nav-dropdown.brands-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), #00D68F, #FF6B35, var(--primary));
background-size: 300% 100%;
animation: brandGradient 4s ease infinite;
}
@keyframes brandGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.modern-header .brands-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
padding: 16px;
max-height: 420px;
overflow-y: auto;
}
.modern-header .brand-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
border-radius: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
}
.modern-header .brand-item:hover {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
border-color: rgba(0, 102, 255, 0.1);
transform: translateX(6px);
}
.modern-header .brand-logo {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid;
flex-shrink: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.modern-header .brand-item:hover .brand-logo {
transform: scale(1.05) rotate(-3deg);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.modern-header .brand-logo img {
max-width: 38px;
max-height: 30px;
object-fit: contain;
}
.modern-header .brand-letter {
font-size: 22px;
font-weight: 800;
align-items: center;
justify-content: center;
}
.modern-header .brand-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.modern-header .brand-info strong {
font-size: 14px;
font-weight: 700;
color: var(--dark);
transition: color 0.3s ease;
}
.modern-header .brand-item:hover .brand-info strong {
color: var(--primary);
}
.modern-header .brand-info span {
font-size: 11px;
color: var(--gray-500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modern-header .brand-count {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, var(--primary), #00D68F);
color: var(--white) !important;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 10px !important;
font-weight: 700;
margin-top: 4px;
width: fit-content;
box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
}
.modern-header .brands-footer {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 214, 143, 0.03));
padding: 14px 18px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.modern-header .view-all-brands {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
background: linear-gradient(135deg, var(--primary), #00D68F);
color: var(--white);
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 700;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}
.modern-header .view-all-brands:hover {
gap: 14px;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
}
.modern-header .view-all-brands i:first-child {
font-size: 14px;
}
.modern-header .view-all-brands i:last-child {
font-size: 12px;
transition: transform 0.3s ease;
}
.modern-header .view-all-brands:hover i:last-child {
transform: translateX(4px);
}
.modern-header .brands-grid::-webkit-scrollbar {
width: 5px;
}
.modern-header .brands-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.03);
border-radius: 5px;
}
.modern-header .brands-grid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--primary), #00D68F);
border-radius: 5px;
}
.modern-header .brands-grid::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #0052cc, #00b377);
}
@media (max-width: 991px) {
.modern-header .brands-dropdown .nav-dropdown.brands-menu {
width: 100%;
}
.modern-header .brands-grid {
grid-template-columns: 1fr;
max-height: none;
padding: 8px;
}
.modern-header .brand-item {
padding: 10px;
}
.modern-header .brands-footer {
padding: 10px;
}
}
.modern-header .search-overlay {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 40px 0;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 998;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.modern-header .search-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), #00D68F, var(--primary));
background-size: 200% 100%;
animation: searchGradient 3s ease infinite;
}
@keyframes searchGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.modern-header .search-overlay.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.modern-header .search-form {
display: flex;
align-items: center;
gap: 16px;
background: var(--white);
border: 2px solid rgba(0, 102, 255, 0.15);
border-radius: var(--radius-full);
padding: 6px 6px 6px 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.modern-header .search-form:focus-within {
border-color: var(--primary);
box-shadow: 0 10px 40px rgba(0, 102, 255, 0.15);
}
.modern-header .search-form i.fa-search {
color: var(--primary);
font-size: 20px;
transition: transform 0.3s ease;
}
.modern-header .search-form:focus-within i.fa-search {
transform: scale(1.1);
}
.modern-header .search-form input {
flex: 1;
border: none;
background: none;
font-size: 18px;
font-weight: 500;
color: var(--dark);
padding: 16px 0;
outline: none;
}
.modern-header .search-form input::placeholder {
color: var(--gray-400);
font-weight: 400;
}
.modern-header .search-close {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
border: none;
border-radius: var(--radius-full);
color: var(--gray-600);
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
}
.modern-header .search-close:hover {
background: linear-gradient(135deg, var(--danger), #FF3366);
color: var(--white);
transform: rotate(90deg);
}
.modern-header .search-suggestions {
margin-top: 20px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.modern-header .search-suggestions span {
font-size: 13px;
font-weight: 600;
color: var(--gray-400);
}
.modern-header .search-suggestions a {
padding: 8px 16px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
border: 1px solid rgba(0, 102, 255, 0.1);
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
transition: all 0.3s ease;
}
.modern-header .search-suggestions a:hover {
background: linear-gradient(135deg, var(--primary), #00D68F);
border-color: transparent;
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
}
.modern-header .mobile-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 214, 143, 0.05));
border: 1px solid rgba(0, 102, 255, 0.1);
border-radius: 14px;
cursor: pointer;
gap: 5px;
padding: 12px;
transition: all 0.3s ease;
}
.modern-header .mobile-toggle:hover {
background: linear-gradient(135deg, var(--primary), #00D68F);
border-color: transparent;
}
.modern-header .mobile-toggle span {
display: block;
width: 100%;
height: 2px;
background: var(--gray-700);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-header .mobile-toggle:hover span {
background: var(--white);
}
.modern-header .mobile-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.modern-header .mobile-toggle.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.modern-header .mobile-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 1199px) {
.modern-header .mega-dropdown {
width: 750px;
}
.modern-header .mega-container {
grid-template-columns: 1fr 1fr;
}
.modern-header .mega-cta {
display: none;
}
}
@media (max-width: 991px) {
.modern-topbar .topbar-contact,
.modern-topbar .topbar-links,
.modern-topbar .topbar-notice,
.modern-topbar .topbar-trust {
display: none;
}
.modern-topbar .topbar-left {
display: none;
}
.modern-topbar .topbar-right {
width: 100%;
justify-content: center;
}
.modern-header .mobile-toggle {
display: flex;
}
.modern-header .live-chat-btn {
display: none;
}
.modern-header .action-tooltip {
display: none;
}
.modern-header .header-nav {
position: fixed;
top: 0;
left: -100%;
width: 320px;
height: 100vh;
background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 90px 16px 20px;
box-shadow: 30px 0 80px rgba(0, 0, 0, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
z-index: 1001;
}
.modern-header .header-nav::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), #00D68F);
}
.modern-header .header-nav.active {
left: 0;
}
.modern-header .nav-link {
width: 100%;
justify-content: flex-start;
padding: 16px 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 0;
}
.modern-header .nav-link::before {
display: none;
}
.modern-header .nav-item {
width: 100%;
}
.modern-header .nav-dropdown,
.modern-header .mega-dropdown {
position: static;
transform: none !important;
box-shadow: none;
border-radius: 0;
border-left: 4px solid;
border-image: linear-gradient(180deg, var(--primary), #00D68F) 1;
margin: 0 0 0 16px;
padding: 10px 0;
width: auto;
max-width: none;
display: none;
background: rgba(0, 102, 255, 0.03);
backdrop-filter: none;
}
.modern-header .nav-dropdown::before,
.modern-header .mega-dropdown::before {
display: none;
}
.modern-header .nav-item.open .nav-dropdown,
.modern-header .nav-item.open .mega-dropdown {
display: block;
opacity: 1;
visibility: visible;
}
.modern-header .mega-container {
display: block;
}
.modern-header .mega-section {
border: none;
padding: 14px 18px;
}
.modern-header .mega-brands {
grid-template-columns: repeat(3, 1fr);
}
.modern-header .auth-buttons .btn span {
display: none;
}
.modern-header .user-name {
display: none;
}
body.menu-open {
overflow: hidden;
}
body.menu-open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 26, 0.6);
backdrop-filter: blur(5px);
z-index: 1000;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
@media (max-width: 575px) {
.modern-header .header-inner {
padding: 12px 0;
}
.modern-header .logo-tagline {
display: none;
}
.modern-header .logo-name {
font-size: 18px;
}
.modern-header .logo-icon {
width: 42px;
height: 42px;
font-size: 20px;
border-radius: 10px;
}
.modern-header .logo-pulse {
border-radius: 10px;
}
.modern-header .header-actions {
gap: 6px;
}
.modern-header .action-btn {
width: 40px;
height: 40px;
font-size: 16px;
border-radius: 10px;
}
.modern-header .btn-login {
padding: 8px 12px;
font-size: 13px;
}
.modern-header .btn-login span {
display: none;
}
.modern-header .btn-register {
padding: 8px 14px;
font-size: 13px;
}
.modern-header .btn-register span {
display: none;
}
.modern-header .btn-register i {
margin: 0;
}
.modern-header .auth-buttons .btn {
padding: 10px 14px;
}
.modern-header .mobile-toggle {
width: 42px;
height: 42px;
border-radius: 10px;
}
}
.hero-slider-section {
position: relative;
overflow: hidden;
}
.hero-section {
background: linear-gradient(160deg, #0a1628 0%, #0f2847 35%, #1a365d 65%, #0d1f3c 100%);
padding: 80px 0 100px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle 800px at 20% 20%, rgba(59, 130, 246, 0.08), transparent),
radial-gradient(circle 600px at 80% 80%, rgba(16, 185, 129, 0.06), transparent),
radial-gradient(circle 400px at 50% 50%, rgba(99, 102, 241, 0.05), transparent);
opacity: 1;
}
.hero-slide {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
padding: 80px 0 60px;
background: linear-gradient(160deg, #0a1628 0%, #0f2847 35%, #1a365d 65%, #0d1f3c 100%) !important;
}
.hero-slide .container {
max-width: 1200px;
}
.hero-slide .hero-content {
max-width: 100%;
}
.hero-title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;
}
.hero-slide-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 100% 80% at 0% 0%, rgba(59, 130, 246, 0.12), transparent 50%),
radial-gradient(ellipse 80% 60% at 100% 100%, rgba(16, 185, 129, 0.08), transparent 50%),
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
pointer-events: none;
}
.min-vh-hero {
min-height: 450px;
}
#heroSlider .carousel-inner {
overflow: visible;
}
#heroSlider .carousel-item {
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.hero-slider-section:hover #heroSlider .carousel-control-prev,
.hero-slider-section:hover #heroSlider .carousel-control-next {
opacity: 1;
}
#heroSlider .carousel-control-prev {
left: 30px;
}
#heroSlider .carousel-control-next {
right: 30px;
}
#heroSlider .carousel-control-prev:hover,
#heroSlider .carousel-control-next:hover {
background: rgba(255, 255, 255, 0.2);
}
#heroSlider .carousel-indicators {
bottom: 30px;
margin-bottom: 0;
}
#heroSlider .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 2px solid transparent;
margin: 0 6px;
transition: all 0.3s ease;
}
#heroSlider .carousel-indicators button.active {
background: #fff;
transform: scale(1.2);
}
.hero-stats-bar {
background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
padding: 35px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: 13px;
color: var(--white);
margin-bottom: 24px;
backdrop-filter: blur(10px);
animation: fadeInUp 0.6s ease;
}
.hero-title {
font-size: 52px;
font-weight: 800;
color: var(--white);
line-height: 1.15;
margin-bottom: 20px;
animation: fadeInUp 0.6s ease 0.1s both;
}
.hero-title .gradient-text,
.hero-title span {
background: linear-gradient(90deg, #00D68F, #00CFDE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin-bottom: 32px;
line-height: 1.7;
animation: fadeInUp 0.6s ease 0.2s both;
}
.hero-buttons {
animation: fadeInUp 0.6s ease 0.3s both;
}
.hero-stats {
display: flex;
gap: 48px;
justify-content: center;
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
padding: 0 20px;
}
.hero-stat-value {
font-size: 36px;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.hero-stat-label {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85) !important;
margin-top: 10px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
text-transform: none;
letter-spacing: 0;
}
.hero-image {
position: relative;
z-index: 1;
animation: fadeInRight 0.8s ease 0.4s both;
}
.hero-image img {
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.search-section {
background: var(--white);
margin-top: 30px;
position: relative;
z-index: 10;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
padding: 30px 40px;
}
.filter-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.filter-tab {
padding: 10px 20px;
border-radius: var(--radius-full);
background: var(--gray-100);
color: var(--gray-700);
font-weight: 500;
font-size: 14px;
border: none;
cursor: pointer;
transition: var(--transition);
}
.filter-tab:hover {
background: var(--gray-200);
}
.filter-tab.active {
background: var(--primary);
color: var(--white);
}
.filter-tab .badge {
margin-left: 6px;
background: rgba(255, 255, 255, 0.2);
font-size: 11px;
padding: 2px 6px;
border-radius: var(--radius-full);
}
.search-input-group {
position: relative;
}
.search-input {
width: 100%;
padding: 16px 24px 16px 56px;
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
font-size: 16px;
transition: var(--transition);
}
.search-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-500);
font-size: 20px;
}
.products-section {
padding: 80px 0;
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 214, 143, 0.1));
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 600;
color: var(--primary);
margin-bottom: 16px;
}
.section-title {
font-size: 36px;
font-weight: 700;
color: var(--dark);
margin-bottom: 16px;
}
.section-subtitle {
font-size: 18px;
color: var(--gray-600);
max-width: 600px;
margin: 0 auto;
}
.product-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
border: 1px solid var(--gray-200);
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.product-card.featured {
border: 2px solid var(--primary);
}
.product-card.featured::before {
content: 'En Popüler';
position: absolute;
top: 16px;
right: -32px;
background: var(--primary);
color: var(--white);
font-size: 11px;
font-weight: 600;
padding: 6px 40px;
transform: rotate(45deg);
z-index: 1;
}
.product-header {
padding: 24px 24px 16px;
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
gap: 16px;
}
.product-brand-logo {
width: 48px;
height: 48px;
object-fit: contain;
padding: 8px;
background: var(--gray-100);
border-radius: var(--radius);
}
.product-brand-info {
flex: 1;
}
.product-brand-name {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gray-500);
margin-bottom: 2px;
}
.product-name {
font-size: 16px;
font-weight: 600;
color: var(--dark);
line-height: 1.3;
}
.product-body {
padding: 20px 24px;
flex: 1;
}
.product-price-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 16px;
}
.product-price {
font-size: 32px;
font-weight: 700;
color: var(--primary);
}
.product-price-period {
font-size: 14px;
color: var(--gray-500);
}
.product-old-price {
font-size: 16px;
color: var(--gray-400);
text-decoration: line-through;
}
.product-features {
list-style: none;
margin-bottom: 20px;
}
.product-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
color: var(--gray-700);
border-bottom: 1px dashed var(--gray-200);
}
.product-features li:last-child {
border-bottom: none;
}
.product-features li i {
color: var(--secondary);
font-size: 16px;
width: 20px;
}
.product-validation {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-validation.dv {
background: rgba(0, 214, 143, 0.1);
color: var(--dv-color);
}
.product-validation.ov {
background: rgba(0, 102, 255, 0.1);
color: var(--ov-color);
}
.product-validation.ev {
background: rgba(155, 89, 182, 0.1);
color: var(--ev-color);
}
.product-footer {
padding: 16px 24px 24px;
}
.btn-buy {
width: 100%;
padding: 14px 24px;
border-radius: var(--radius);
font-weight: 600;
font-size: 15px;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-buy-primary {
background: var(--primary);
color: var(--white);
border: none;
}
.btn-buy-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}
.btn-buy-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-buy-outline:hover {
background: var(--primary);
color: var(--white);
}
.cert-types-section {
padding: 80px 0;
background: linear-gradient(180deg, var(--white) 0%, var(--gray-100) 100%);
}
.cert-type-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
height: 100%;
border: 1px solid var(--gray-200);
}
.cert-type-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.cert-type-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
}
.cert-type-icon.dv {
background: linear-gradient(135deg, rgba(0, 214, 143, 0.15), rgba(0, 214, 143, 0.05));
color: var(--dv-color);
}
.cert-type-icon.ov {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 102, 255, 0.05));
color: var(--ov-color);
}
.cert-type-icon.ev {
background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(155, 89, 182, 0.05));
color: var(--ev-color);
}
.cert-type-icon.wildcard {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 107, 53, 0.05));
color: var(--wildcard-color);
}
.cert-type-icon.multi {
background: linear-gradient(135deg, rgba(0, 207, 222, 0.15), rgba(0, 207, 222, 0.05));
color: var(--multi-color);
}
.cert-type-icon.code {
background: linear-gradient(135deg, rgba(255, 170, 0, 0.15), rgba(255, 170, 0, 0.05));
color: var(--warning);
}
.cert-type-title {
font-size: 18px;
font-weight: 600;
color: var(--dark);
margin-bottom: 12px;
}
.cert-type-description {
font-size: 14px;
color: var(--gray-600);
margin-bottom: 16px;
line-height: 1.6;
}
.cert-type-price {
font-size: 24px;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
}
.cert-type-price span {
font-size: 14px;
font-weight: 400;
color: var(--gray-500);
}
.brands-section {
padding: 60px 0;
background: var(--white);
}
.brand-logo-card {
background: var(--gray-100);
padding: 24px 32px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
border: 1px solid transparent;
}
.brand-logo-card:hover {
background: var(--white);
box-shadow: var(--shadow-md);
border-color: var(--gray-200);
}
.brand-logo-card img {
max-height: 40px;
filter: grayscale(100%);
opacity: 0.7;
transition: var(--transition);
}
.brand-logo-card:hover img {
filter: grayscale(0%);
opacity: 1;
}
.features-section {
padding: 100px 0;
background: var(--gray-100);
}
.feature-card {
text-align: center;
padding: 40px 30px;
}
.feature-icon {
width: 80px;
height: 80px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 36px;
transition: var(--transition);
position: relative;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
box-shadow: var(--shadow-lg);
}
.feature-icon.icon-1 { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35); }
.feature-icon.icon-2 { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(139, 92, 246, 0.35); }
.feature-icon.icon-3 { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35); }
.feature-icon.icon-4 { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35); }
.feature-icon.icon-5 { background: linear-gradient(135deg, #ec4899, #db2777) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(236, 72, 153, 0.35); }
.feature-icon.icon-6 { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(6, 182, 212, 0.35); }
.feature-icon i {
color: #fff !important;
opacity: 1 !important;
}
.feature-title {
font-size: 20px;
font-weight: 600;
color: var(--dark);
margin-bottom: 12px;
}
.feature-description {
font-size: 15px;
color: var(--gray-600);
line-height: 1.7;
}
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, #0066FF 0%, #0052CC 50%, #003D99 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
border-radius: 50%;
}
.cta-content {
position: relative;
z-index: 1;
text-align: center;
}
.cta-title {
font-size: 42px;
font-weight: 700;
color: var(--white);
margin-bottom: 16px;
}
.cta-description {
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto 32px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
}
.btn-cta {
padding: 16px 32px;
border-radius: var(--radius);
font-weight: 600;
font-size: 16px;
transition: var(--transition);
}
.btn-cta-primary {
background: var(--white);
color: var(--primary);
border: none;
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.btn-cta-outline {
background: transparent;
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-cta-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--white);
}
.faq-section {
padding: 80px 0;
background: var(--white);
}
.faq-item {
background: var(--gray-100);
border-radius: var(--radius-md);
margin-bottom: 16px;
overflow: hidden;
border: 1px solid var(--gray-200);
transition: var(--transition);
}
.faq-item:hover {
border-color: var(--primary);
}
.faq-question {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-weight: 600;
color: var(--dark);
background: var(--white);
}
.faq-question i {
color: var(--primary);
transition: var(--transition);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 24px 20px;
color: var(--gray-600);
line-height: 1.7;
display: none;
}
.faq-item.active .faq-answer {
display: block;
}
.main-footer {
background: var(--dark);
padding: 80px 0 0;
color: var(--gray-400);
}
.footer-widget-title {
font-size: 16px;
font-weight: 600;
color: var(--white);
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: var(--gray-400);
font-size: 14px;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--white);
padding-left: 5px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
font-size: 14px;
}
.footer-contact-item i {
color: var(--primary);
margin-top: 3px;
}
.footer-newsletter {
margin-top: 20px;
}
.footer-newsletter-input {
display: flex;
gap: 8px;
}
.footer-newsletter-input input {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.1);
color: var(--white);
}
.footer-newsletter-input input::placeholder {
color: var(--gray-500);
}
.footer-newsletter-input button {
padding: 12px 20px;
border: none;
border-radius: var(--radius);
background: var(--primary);
color: var(--white);
cursor: pointer;
transition: var(--transition);
}
.footer-newsletter-input button:hover {
background: var(--primary-dark);
}
.footer-bottom {
margin-top: 60px;
padding: 24px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-payment-icons {
display: flex;
gap: 12px;
}
.footer-payment-icons img {
height: 28px;
opacity: 0.7;
transition: var(--transition);
}
.footer-payment-icons img:hover {
opacity: 1;
}
.footer-social-links {
display: flex;
gap: 12px;
}
.footer-social-links a {
width: 40px;
height: 40px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
transition: var(--transition);
}
.footer-social-links a:hover {
background: var(--primary);
color: var(--white);
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius);
font-weight: 500;
font-size: 14px;
transition: var(--transition);
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--primary);
color: var(--white);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background: var(--secondary);
color: var(--white);
}
.btn-outline-primary {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline-primary:hover {
background: var(--primary);
color: var(--white);
}
.btn-outline-light {
background: transparent;
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-outline-light:hover {
background: var(--white);
color: var(--primary);
}
.btn-lg {
padding: 16px 32px;
font-size: 16px;
}
.btn-sm {
padding: 8px 16px;
font-size: 13px;
}
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--dv-color) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-muted { color: var(--gray-600) !important; }
.bg-primary { background: var(--primary) !important; }
.bg-secondary { background: var(--secondary) !important; }
.bg-light { background: var(--gray-100) !important; }
.bg-dark { background: var(--dark) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
@media (max-width: 1199px) {
.hero-title {
font-size: 42px;
}
.hero-slide {
min-height: 550px;
}
}
@media (max-width: 991px) {
.hero-section {
padding: 60px 0 80px;
}
.hero-slide {
min-height: 500px;
padding: 80px 0 60px;
}
.min-vh-hero {
min-height: 380px;
}
.hero-title {
font-size: 36px;
}
.hero-stats {
gap: 24px;
}
.hero-stat-value {
font-size: 28px;
}
.section-title {
font-size: 30px;
}
.cta-title {
font-size: 32px;
}
#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
width: 45px;
height: 45px;
}
}
@media (max-width: 767px) {
.hero-section {
padding: 40px 0 60px;
text-align: center;
}
.hero-slide {
min-height: 450px;
padding: 60px 0 40px;
text-align: center;
}
.min-vh-hero {
min-height: auto;
}
.hero-title {
font-size: 28px;
}
.hero-description {
font-size: 16px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
gap: 16px;
}
.hero-stat {
padding: 0 10px;
}
.hero-stat-value {
font-size: 24px;
}
.hero-stat-label {
font-size: 12px;
}
.hero-stats-bar {
padding: 20px 0;
}
#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
display: none;
}
#heroSlider .carousel-indicators {
bottom: 15px;
}
#heroSlider .carousel-indicators button {
width: 10px;
height: 10px;
}
.hero-stats {
justify-content: center;
}
.search-section {
padding: 20px;
margin-top: -30px;
}
.filter-tabs {
justify-content: center;
}
.products-section,
.cert-types-section,
.features-section,
.faq-section {
padding: 60px 0;
}
.section-title {
font-size: 26px;
}
.cta-section {
padding: 60px 0;
}
.cta-title {
font-size: 26px;
}
.cta-buttons {
flex-direction: column;
}
}
.loading-skeleton {
background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease forwards;
}
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.modern-topbar {
background: #0f1629 !important;
padding: 0 !important;
font-size: 13px;
border-bottom: none !important;
overflow: visible !important;
}
.modern-topbar::before {
display: none !important;
}
.modern-topbar .topbar-inner {
padding: 8px 0 !important;
gap: 20px !important;
}
.modern-topbar .topbar-trust {
display: none !important;
}
.modern-topbar .topbar-item {
color: rgba(255, 255, 255, 0.7) !important;
padding: 0 !important;
gap: 8px !important;
}
.modern-topbar .topbar-item:hover {
color: #fff !important;
}
.modern-topbar .topbar-item i {
width: auto !important;
height: auto !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 13px !important;
color: var(--primary-light) !important;
}
.modern-topbar .topbar-item:hover i {
transform: none !important;
box-shadow: none !important;
}
.modern-topbar .topbar-link {
background: transparent !important;
border: none !important;
padding: 4px 10px !important;
border-radius: 4px !important;
}
.modern-topbar .topbar-link:hover {
background: rgba(255, 255, 255, 0.1) !important;
transform: none !important;
}
.modern-topbar .topbar-link .online-dot {
display: none !important;
}
.modern-topbar .selector-btn {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 5px 12px !important;
border-radius: 6px !important;
}
.modern-topbar .selector-btn:hover {
transform: none !important;
background: rgba(255, 255, 255, 0.1) !important;
}
.modern-topbar .selector-btn .currency-symbol {
background: none !important;
-webkit-text-fill-color: #00D68F !important;
}
.modern-topbar .topbar-social a {
width: 28px !important;
height: 28px !important;
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.5) !important;
}
.modern-topbar .topbar-social a:hover {
background: transparent !important;
color: #fff !important;
transform: none !important;
box-shadow: none !important;
}
.modern-topbar .topbar-divider {
background: rgba(255, 255, 255, 0.15) !important;
height: 20px !important;
}
.modern-header {
background: #fff !important;
backdrop-filter: none !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
border-bottom: none !important;
}
.modern-header::after {
display: none !important;
}
.modern-header .header-inner {
padding: 12px 0 !important;
gap: 30px !important;
}
.modern-header .nav-link {
padding: 10px 16px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #374151 !important;
border-radius: 8px !important;
}
.modern-header .nav-link::before {
display: none !important;
}
.modern-header .nav-link:hover,
.modern-header .nav-link.active {
color: var(--primary) !important;
background: rgba(0, 102, 255, 0.06) !important;
transform: none !important;
}
.modern-header .nav-link i:not(.arrow) {
color: #9CA3AF !important;
font-size: 13px !important;
}
.modern-header .nav-link:hover i:not(.arrow),
.modern-header .nav-link.active i:not(.arrow) {
color: var(--primary) !important;
transform: none !important;
}
.modern-header .nav-link .arrow {
opacity: 0.4 !important;
font-size: 10px !important;
}
.modern-header .header-actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.modern-header .search-btn,
.modern-header .cart-btn {
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f3f4f6 !important;
border: none !important;
border-radius: 10px !important;
box-shadow: none !important;
color: #6B7280 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
position: relative !important;
text-decoration: none !important;
}
.modern-header .search-btn:hover,
.modern-header .cart-btn:hover {
background: #e5e7eb !important;
color: var(--primary) !important;
transform: none !important;
box-shadow: none !important;
}
.modern-header .cart-btn .cart-badge {
position: absolute !important;
top: -4px !important;
right: -4px !important;
min-width: 18px !important;
height: 18px !important;
font-size: 10px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 9px !important;
background: var(--primary) !important;
color: #fff !important;
box-shadow: none !important;
animation: none !important;
}
.modern-header .auth-buttons {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.modern-header .btn-login {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
border: 2px solid #e5e7eb !important;
color: #374151 !important;
padding: 8px 18px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: none !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.modern-header .btn-login::before,
.modern-header .btn-login::after {
display: none !important;
}
.modern-header .btn-login:hover {
border-color: var(--primary) !important;
color: var(--primary) !important;
background: rgba(0, 102, 255, 0.05) !important;
transform: none !important;
}
.modern-header .btn-login i {
font-size: 13px !important;
}
.modern-header .btn-register {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: var(--primary) !important;
border: none !important;
color: #fff !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: none !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.modern-header .btn-register i {
font-size: 13px !important;
}
.modern-header .btn-register::before {
display: none !important;
}
.modern-header .btn-register:hover {
background: #0052cc !important;
transform: none !important;
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3) !important;
}
.modern-header .nav-dropdown {
border-radius: 12px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
margin-top: 10px !important;
padding: 8px !important;
}
.modern-header .nav-dropdown::before {
display: none !important;
}
.modern-header .nav-dropdown a {
padding: 10px 14px !important;
border-radius: 8px !important;
gap: 12px !important;
}
.modern-header .nav-dropdown a:hover {
background: rgba(0, 102, 255, 0.06) !important;
transform: none !important;
}
.modern-header .mega-menu {
border-radius: 16px !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12) !important;
margin-top: 10px !important;
padding: 24px !important;
}
.modern-header .mega-menu::before {
display: none !important;
}
.modern-header .mega-menu-title {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
color: #9CA3AF !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
border-bottom: 1px solid #f3f4f6 !important;
}
.modern-header .mega-menu-link {
padding: 8px 12px !important;
border-radius: 8px !important;
gap: 10px !important;
}
.modern-header .mega-menu-link:hover {
background: rgba(0, 102, 255, 0.06) !important;
transform: none !important;
}
.modern-header .mega-menu-link::before {
display: none !important;
}
.modern-header .mega-menu-icon {
width: 36px !important;
height: 36px !important;
border-radius: 8px !important;
font-size: 14px !important;
}
.modern-header .mega-menu-link:hover .mega-menu-icon {
transform: none !important;
}
.modern-header .mega-menu-text h6 {
font-size: 13px !important;
font-weight: 600 !important;
}
.modern-header .mega-menu-text small {
font-size: 11px !important;
color: #9CA3AF !important;
margin-top: 2px !important;
}
.modern-header .mega-menu-highlight,
.modern-header .mega-promo,
.modern-header .mega-feature {
display: none !important;
}
.modern-header .brands-dropdown {
border-radius: 16px !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12) !important;
margin-top: 10px !important;
padding: 20px !important;
}
.modern-header .brands-dropdown::before {
display: none !important;
}
.modern-header .brands-grid {
gap: 10px !important;
}
.modern-header .brand-item {
padding: 14px !important;
border-radius: 10px !important;
background: #f9fafb !important;
border: 1px solid #f3f4f6 !important;
}
.modern-header .brand-item:hover {
background: #fff !important;
border-color: var(--primary) !important;
transform: none !important;
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1) !important;
}
.modern-header .brand-item img {
max-height: 28px !important;
}
.modern-header .user-menu .user-dropdown {
border-radius: 12px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
padding: 8px !important;
}
.modern-header .user-menu .user-dropdown::before {
display: none !important;
}
.search-overlay .search-container {
border-radius: 16px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}
.search-overlay .search-input-wrap {
border-radius: 12px !important;
}
@media (max-width: 991px) {
.modern-header .mobile-menu {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}
.modern-header .mobile-nav-link {
padding: 12px 16px !important;
border-radius: 8px !important;
}
.modern-header .mobile-nav-link:hover {
background: rgba(0, 102, 255, 0.06) !important;
}
}
.modern-header.sticky {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}
.modern-header.sticky .header-inner {
padding: 10px 0 !important;
}
.modern-header .mega-dropdown {
border-radius: 16px !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12) !important;
margin-top: 10px !important;
padding: 24px !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.modern-header .mega-dropdown::before,
.modern-header .mega-dropdown::after {
display: none !important;
}
.modern-header .mega-container {
gap: 24px !important;
}
.modern-header .mega-section {
padding: 0 !important;
}
.modern-header .mega-title {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #9CA3AF !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
border-bottom: 1px solid #f3f4f6 !important;
}
.modern-header .mega-title i {
margin-right: 8px !important;
color: var(--primary) !important;
}
.modern-header .mega-grid {
gap: 6px !important;
}
.modern-header .mega-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 12px !important;
border-radius: 10px !important;
transition: all 0.2s ease !important;
}
.modern-header .mega-item:hover {
background: rgba(0, 102, 255, 0.05) !important;
transform: none !important;
}
.modern-header .mega-icon {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 10px !important;
font-size: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.modern-header .mega-item:hover .mega-icon {
transform: none !important;
}
.modern-header .mega-info {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.modern-header .mega-info strong {
font-size: 13px !important;
font-weight: 600 !important;
color: #1F2937 !important;
}
.modern-header .mega-info span {
font-size: 11px !important;
color: #9CA3AF !important;
}
.modern-header .mega-count {
font-size: 10px !important;
color: var(--primary) !important;
font-weight: 600 !important;
}
.modern-header .mega-brands {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 12px 0 !important;
}
.modern-header .brand-link {
padding: 10px 14px !important;
background: #f9fafb !important;
border: 1px solid #f3f4f6 !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
}
.modern-header .brand-link:hover {
background: #fff !important;
border-color: var(--primary) !important;
transform: none !important;
}
.modern-header .brand-link img {
height: 20px !important;
max-width: 80px !important;
object-fit: contain !important;
}
.modern-header .mega-viewall {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--primary) !important;
transition: all 0.2s ease !important;
}
.modern-header .mega-viewall:hover {
color: #0052cc !important;
}
.modern-header .mega-viewall i {
font-size: 11px !important;
transition: transform 0.2s ease !important;
}
.modern-header .mega-viewall:hover i {
transform: translateX(3px) !important;
}
.modern-header .mega-cta {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%) !important;
border: 1px solid rgba(0, 102, 255, 0.1) !important;
padding: 20px !important;
border-radius: 12px !important;
text-align: center !important;
}
.modern-header .mega-cta .cta-badge {
display: inline-block !important;
background: var(--primary) !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 20px !important;
margin-bottom: 10px !important;
}
.modern-header .mega-cta h5 {
font-size: 15px !important;
font-weight: 700 !important;
color: #1F2937 !important;
margin-bottom: 6px !important;
}
.modern-header .mega-cta p {
font-size: 12px !important;
color: #6B7280 !important;
margin-bottom: 12px !important;
}
.modern-header .mega-cta .btn {
font-size: 13px !important;
padding: 8px 16px !important;
}
.modern-header .brands-menu {
min-width: 600px !important;
padding: 20px !important;
}
.modern-header .brands-menu .brands-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
}
.modern-header .brands-menu .brand-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 16px 12px !important;
background: #f9fafb !important;
border: 1px solid #f3f4f6 !important;
border-radius: 12px !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
}
.modern-header .brands-menu .brand-item:hover {
background: #fff !important;
border-color: var(--primary) !important;
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.1) !important;
transform: none !important;
}
.modern-header .brands-menu .brand-logo {
width: 50px !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
margin-bottom: 10px !important;
}
.modern-header .brands-menu .brand-logo img {
max-width: 40px !important;
max-height: 30px !important;
object-fit: contain !important;
}
.modern-header .brands-menu .brand-letter {
font-size: 18px !important;
font-weight: 800 !important;
}
.modern-header .brands-menu .brand-info strong {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #1F2937 !important;
margin-bottom: 2px !important;
}
.modern-header .brands-menu .brand-info span {
font-size: 11px !important;
color: #9CA3AF !important;
}
.modern-header .brands-menu .brand-count {
display: block !important;
font-size: 10px !important;
color: var(--primary) !important;
font-weight: 600 !important;
margin-top: 4px !important;
}
.modern-header .brands-footer {
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1px solid #f3f4f6 !important;
text-align: center !important;
}
.modern-header .view-all-brands {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--primary) !important;
transition: all 0.2s ease !important;
}
.modern-header .view-all-brands:hover {
color: #0052cc !important;
}
.site-topbar {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 10px 0;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-topbar .topbar-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.site-topbar .topbar-left,
.site-topbar .topbar-right {
display: flex;
align-items: center;
gap: 20px;
}
.site-topbar .topbar-contact {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.7);
transition: color 0.2s;
}
.site-topbar .topbar-contact:hover {
color: #fff;
}
.site-topbar .topbar-contact i {
color: var(--primary-light);
font-size: 12px;
}
.site-topbar .topbar-link {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
transition: color 0.2s;
}
.site-topbar .topbar-link:hover {
color: #fff;
}
.site-topbar .topbar-link i {
font-size: 11px;
}
.site-topbar .topbar-sep {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.15);
}
.site-topbar .topbar-dropdown {
position: relative;
}
.site-topbar .topbar-dropdown-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.site-topbar .topbar-dropdown-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.site-topbar .topbar-dropdown-btn i.fa-chevron-down {
font-size: 9px;
transition: transform 0.2s;
}
.site-topbar .topbar-dropdown.open .topbar-dropdown-btn i.fa-chevron-down {
transform: rotate(180deg);
}
.site-topbar .topbar-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
min-width: 140px;
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.2s;
z-index: 1000;
}
.site-topbar .topbar-dropdown.open .topbar-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-topbar .topbar-dropdown-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
color: var(--gray-700);
border-radius: 6px;
font-size: 13px;
transition: all 0.15s;
}
.site-topbar .topbar-dropdown-menu a:hover {
background: var(--gray-100);
color: var(--primary);
}
.site-topbar .topbar-dropdown-menu a.active {
background: var(--primary);
color: #fff;
}
.site-header {
background: #fff;
padding: 0;
position: sticky;
top: 0;
z-index: 999;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.site-header.sticky {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.site-header .header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
gap: 30px;
}
.site-header .site-logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.site-header .logo-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary) 0%, #00D68F 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.site-header .site-logo:hover .logo-icon {
transform: rotate(-5deg) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
}
.site-header .logo-text {
display: flex;
flex-direction: column;
}
.site-header .logo-name {
font-size: 20px;
font-weight: 800;
color: var(--dark);
line-height: 1.2;
}
.site-header .logo-desc {
font-size: 11px;
color: var(--gray-500);
font-weight: 500;
letter-spacing: 0.5px;
}
.site-header .main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.site-header .nav-menu {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.site-header .nav-item {
position: relative;
}
.site-header .nav-link {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
border-radius: 8px;
transition: all 0.2s;
white-space: nowrap;
background: transparent;
border: none;
cursor: pointer;
}
.site-header .nav-link:hover,
.site-header .nav-link.active {
color: var(--primary);
background: rgba(0, 102, 255, 0.06);
}
.site-header .nav-link i.fa-chevron-down {
font-size: 10px;
opacity: 0.5;
transition: transform 0.2s;
}
.site-header .nav-item.open .nav-link i.fa-chevron-down {
transform: rotate(180deg);
}
.site-header .dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
background: #fff;
border-radius: 12px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
min-width: 240px;
padding: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease;
z-index: 1000;
margin-top: 10px;
}
.site-header .nav-item.has-dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.site-header .nav-item.has-dropdown.open .dropdown-menu.brands-dropdown {
transform: translateY(0);
}
.site-header .dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
color: var(--gray-700);
border-radius: 8px;
transition: all 0.15s;
}
.site-header .dropdown-item:hover {
background: rgba(0, 102, 255, 0.06);
color: var(--primary);
}
.site-header .dropdown-item i {
width: 18px;
color: var(--gray-500);
font-size: 14px;
}
.site-header .dropdown-item:hover i {
color: var(--primary);
}
.site-header .dropdown-item span {
flex: 1;
}
.site-header .dropdown-item strong {
display: block;
font-size: 14px;
font-weight: 600;
}
.site-header .dropdown-item small {
display: block;
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
.site-header .dropdown-footer {
padding: 10px 14px;
border-top: 1px solid var(--gray-200);
margin-top: 6px;
text-align: center;
}
.site-header .dropdown-footer a {
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.site-header .dropdown-footer a:hover {
text-decoration: underline;
}
.site-header .brands-dropdown {
min-width: 360px;
padding: 16px;
left: 0;
transform: translateY(5px);
}
.site-header .nav-item.has-dropdown.open .brands-dropdown {
transform: translateY(0);
}
.site-header .brands-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.site-header .brand-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px;
border-radius: 10px;
transition: all 0.2s;
text-align: center;
}
.site-header .brand-item:hover {
background: var(--gray-100);
}
.site-header .brand-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
}
.site-header .brand-name {
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
}
.site-header .megamenu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
width: 800px;
max-width: calc(100vw - 40px);
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.25s ease;
z-index: 1000;
margin-top: 10px;
}
.site-header .nav-item.has-megamenu.open .megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.site-header .megamenu-inner {
display: grid;
grid-template-columns: 1fr 1fr 220px;
gap: 30px;
}
.site-header .megamenu-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--gray-500);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--gray-200);
}
.site-header .megamenu-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.site-header .megamenu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
transition: all 0.2s;
}
.site-header .megamenu-item:hover {
background: var(--gray-100);
}
.site-header .megamenu-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
flex-shrink: 0;
}
.site-header .megamenu-text {
flex: 1;
min-width: 0;
}
.site-header .megamenu-text strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--gray-800);
}
.site-header .megamenu-text small {
display: block;
font-size: 12px;
color: var(--gray-500);
margin-top: 1px;
}
.site-header .megamenu-badge {
background: var(--primary);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 20px;
}
.site-header .megamenu-brands {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.site-header .brand-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
background: var(--gray-100);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
transition: all 0.2s;
border: 2px solid transparent;
}
.site-header .brand-chip:hover {
background: #fff;
border-color: var(--brand-color, var(--primary));
color: var(--brand-color, var(--primary));
}
.site-header .brand-chip span {
font-size: 11px;
color: var(--gray-500);
}
.site-header .megamenu-viewall {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.site-header .megamenu-viewall:hover {
text-decoration: underline;
}
.site-header .megamenu-promo .promo-card {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
border: 1px solid rgba(0, 102, 255, 0.1);
border-radius: 14px;
padding: 24px;
text-align: center;
}
.site-header .promo-badge {
display: inline-block;
background: var(--primary);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 12px;
}
.site-header .promo-card h4 {
font-size: 16px;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 8px;
}
.site-header .promo-card p {
font-size: 13px;
color: var(--gray-600);
margin-bottom: 16px;
}
.site-header .promo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
transition: all 0.2s;
}
.site-header .promo-btn:hover {
background: var(--primary-dark);
}
.site-header .header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.site-header .action-btn {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border: none;
border-radius: 10px;
color: var(--gray-600);
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.site-header .action-btn:hover {
background: var(--gray-200);
color: var(--primary);
}
.site-header .cart-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
background: var(--primary);
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.site-header .user-dropdown {
position: relative;
}
.site-header .user-btn {
display: flex;
align-items: center;
gap: 10px;
background: var(--gray-100);
border: none;
border-radius: 10px;
padding: 6px 14px 6px 6px;
cursor: pointer;
transition: all 0.2s;
}
.site-header .user-btn:hover {
background: var(--gray-200);
}
.site-header .user-avatar {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--primary), #00D68F);
color: #fff;
font-size: 13px;
font-weight: 700;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.site-header .user-avatar.lg {
width: 44px;
height: 44px;
font-size: 16px;
border-radius: 12px;
}
.site-header .user-name {
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
}
.site-header .user-btn i {
font-size: 10px;
color: var(--gray-500);
transition: transform 0.2s;
}
.site-header .user-dropdown.open .user-btn i {
transform: rotate(180deg);
}
.site-header .user-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
min-width: 260px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.2s;
z-index: 1000;
overflow: hidden;
}
.site-header .user-dropdown.open .user-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header .user-header {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
}
.site-header .user-header strong {
display: block;
font-size: 14px;
color: var(--gray-800);
}
.site-header .user-header small {
display: block;
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
.site-header .user-links {
padding: 8px;
}
.site-header .user-links a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
color: var(--gray-700);
border-radius: 8px;
font-size: 13px;
transition: all 0.15s;
}
.site-header .user-links a:hover {
background: var(--gray-100);
color: var(--primary);
}
.site-header .user-links a i {
width: 18px;
color: var(--gray-500);
}
.site-header .user-links a:hover i {
color: var(--primary);
}
.site-header .user-footer {
padding: 8px;
border-top: 1px solid var(--gray-200);
}
.site-header .logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px;
background: var(--gray-100);
color: var(--danger);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
transition: all 0.2s;
}
.site-header .logout-btn:hover {
background: rgba(255, 61, 113, 0.1);
}
.site-header .auth-btns {
display: flex;
align-items: center;
gap: 8px;
}
.site-header .btn-login {
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
border: 2px solid var(--gray-200);
border-radius: 10px;
transition: all 0.2s;
}
.site-header .btn-login:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(0, 102, 255, 0.05);
}
.site-header .btn-register {
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--primary);
border-radius: 10px;
transition: all 0.2s;
}
.site-header .btn-register:hover {
background: var(--primary-dark);
}
.site-header .mobile-toggle {
display: none;
width: 42px;
height: 42px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: var(--gray-100);
border: none;
border-radius: 10px;
cursor: pointer;
}
.site-header .mobile-toggle span {
width: 20px;
height: 2px;
background: var(--gray-700);
border-radius: 2px;
transition: all 0.2s;
}
.search-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 120px;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.search-overlay.active {
opacity: 1;
visibility: visible;
}
.search-overlay-inner {
width: 100%;
max-width: 600px;
background: #fff;
border-radius: 16px;
padding: 8px;
transform: translateY(-20px);
transition: transform 0.3s;
}
.search-overlay.active .search-overlay-inner {
transform: translateY(0);
}
.search-overlay .search-form {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
}
.search-overlay .search-form i {
color: var(--gray-500);
font-size: 18px;
}
.search-overlay .search-form input {
flex: 1;
border: none;
outline: none;
font-size: 18px;
padding: 12px 0;
background: transparent;
}
.search-overlay .search-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border: none;
border-radius: 10px;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.search-overlay .search-close:hover {
background: var(--gray-200);
}
.search-overlay .search-tags {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--gray-200);
flex-wrap: wrap;
}
.search-overlay .search-tags span {
font-size: 13px;
color: var(--gray-500);
}
.search-overlay .search-tags a {
padding: 6px 12px;
background: var(--gray-100);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
transition: all 0.2s;
}
.search-overlay .search-tags a:hover {
background: var(--primary);
color: #fff;
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: #fff;
z-index: 2001;
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--gray-200);
}
.mobile-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
color: var(--dark);
}
.mobile-logo i {
color: var(--primary);
font-size: 22px;
}
.mobile-close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border: none;
border-radius: 8px;
color: var(--gray-600);
cursor: pointer;
}
.mobile-menu-body {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.mobile-link {
display: block;
padding: 14px 16px;
font-size: 15px;
font-weight: 600;
color: var(--gray-700);
border-radius: 10px;
transition: all 0.2s;
}
.mobile-link:hover {
background: var(--gray-100);
color: var(--primary);
}
.mobile-menu-footer {
padding: 16px;
border-top: 1px solid var(--gray-200);
display: flex;
gap: 10px;
}
.mobile-btn {
flex: 1;
padding: 12px;
text-align: center;
font-size: 14px;
font-weight: 600;
background: var(--primary);
color: #fff;
border-radius: 10px;
transition: all 0.2s;
}
.mobile-btn.outline {
background: transparent;
border: 2px solid var(--gray-200);
color: var(--gray-700);
}
.mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.mobile-backdrop.active {
opacity: 1;
visibility: visible;
}
.whatsapp-btn {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: #25D366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
z-index: 999;
transition: all 0.3s;
}
.whatsapp-btn:hover {
background: #128c7e;
color: #fff;
transform: scale(1.1);
}
@media (max-width: 1199px) {
.site-header .megamenu {
width: 700px;
}
.site-header .megamenu-inner {
grid-template-columns: 1fr 1fr;
}
.site-header .megamenu-promo {
display: none;
}
}
@media (max-width: 991px) {
.site-topbar .topbar-left {
display: none;
}
.site-topbar .topbar-right {
width: 100%;
justify-content: center;
}
.site-header .main-nav {
display: none;
}
.site-header .mobile-toggle {
display: flex;
}
.site-header .auth-btns {
display: none;
}
}
@media (max-width: 767px) {
.site-topbar {
padding: 8px 0;
}
.site-topbar .topbar-link span {
display: none;
}
.site-header .header-wrapper {
padding: 12px 0;
}
.site-header .logo-text {
display: none;
}
}
@media (max-width: 480px) {
.site-header .action-btn {
width: 38px;
height: 38px;
}
.site-header .mobile-toggle {
width: 38px;
height: 38px;
}
.search-overlay {
padding-top: 80px;
padding-left: 16px;
padding-right: 16px;
}
.mobile-menu {
width: 100%;
}
}
.custom-block-section {
padding: 0;
margin: 0;
}
.custom-block-modern {
}
.custom-block-modern > section {
margin-bottom: 0;
}
.custom-block-section .container {
max-width: 1200px;
}
.custom-block-section h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.custom-block-section h3 {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 600;
color: var(--gray-800);
}
.custom-block-section p {
color: var(--gray-600);
line-height: 1.7;
}
.custom-block-section .card {
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.custom-block-section .card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.custom-block-section .btn-primary {
background: var(--primary-gradient);
border: none;
padding: 12px 28px;
border-radius: var(--radius-full);
font-weight: 600;
transition: all 0.3s ease;
}
.custom-block-section .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 102, 255, 0.35);
}
.custom-block-section .table {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.custom-block-section .table thead {
background: var(--primary-gradient);
color: white;
}
.custom-block-section .table th {
border: none;
padding: 16px;
font-weight: 600;
}
.custom-block-section .table td {
padding: 14px 16px;
vertical-align: middle;
border-color: var(--gray-200);
}
.custom-block-section .table tbody tr:hover {
background: var(--gray-100);
}
.custom-block-section .text-white h1,
.custom-block-section .text-white h2,
.custom-block-section .text-white h3,
.custom-block-section .text-white h4,
.custom-block-section .text-white h5,
.custom-block-section .text-white h6,
.custom-block-section .text-white p,
.custom-block-section .text-white span,
.custom-block-section .text-white small,
.custom-block-section .text-white li,
.custom-block-section .text-white label,
.custom-block-section .text-white a:not(.btn) {
color: inherit !important;
}
.custom-block-section .text-light h1,
.custom-block-section .text-light h2,
.custom-block-section .text-light h3,
.custom-block-section .text-light h4,
.custom-block-section .text-light h5,
.custom-block-section .text-light h6,
.custom-block-section .text-light p,
.custom-block-section .text-light span,
.custom-block-section .text-light small {
color: inherit !important;
}
.custom-block-section [style*="color:#fff"] h2,
.custom-block-section [style*="color:#fff"] h3,
.custom-block-section [style*="color:#fff"] p,
.custom-block-section [style*="color: #fff"] h2,
.custom-block-section [style*="color: #fff"] h3,
.custom-block-section [style*="color: #fff"] p,
.custom-block-section [style*="color:white"] h2,
.custom-block-section [style*="color:white"] h3,
.custom-block-section [style*="color:white"] p,
.custom-block-section [style*="color: white"] h2,
.custom-block-section [style*="color: white"] h3,
.custom-block-section [style*="color: white"] p {
color: inherit !important;
}
.custom-block-section .bg-dark h2,
.custom-block-section .bg-dark h3,
.custom-block-section .bg-dark p,
.custom-block-section .bg-primary h2,
.custom-block-section .bg-primary h3,
.custom-block-section .bg-primary p {
color: #fff;
}
.custom-block-section .text-white .text-muted {
color: rgba(255, 255, 255, 0.65) !important;
}
.custom-block-section .text-light .text-muted {
color: rgba(255, 255, 255, 0.5) !important;
}
.custom-block-section .text-white .opacity-75 {
opacity: 0.75 !important;
}
.custom-block-section .text-white .opacity-90 {
opacity: 0.9 !important;
}
.custom-block-section .product-pricing-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg, 12px);
padding: 0;
overflow: hidden;
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
transition: all 0.3s ease;
}
.custom-block-section .product-pricing-card:hover {
box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.12));
transform: translateY(-4px);
}
.custom-block-section .product-pricing-card .pricing-header {
padding: 24px;
text-align: center;
border-bottom: 1px solid var(--gray-200);
}
.custom-block-section .product-pricing-card .pricing-header h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--gray-900) !important;
margin-bottom: 8px;
}
.custom-block-section .product-pricing-card .pricing-brand {
font-size: 0.85rem;
color: var(--gray-500);
margin-bottom: 12px;
}
.custom-block-section .product-pricing-card .pricing-price {
font-size: 2rem;
font-weight: 800;
color: var(--primary, #0066FF);
}
.custom-block-section .product-pricing-card .pricing-price small {
font-size: 0.875rem;
font-weight: 400;
color: var(--gray-500);
}
.custom-block-section .product-pricing-card .pricing-features {
padding: 24px;
}
.custom-block-section .product-pricing-card .pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
.custom-block-section .product-pricing-card .pricing-features li {
padding: 8px 0;
border-bottom: 1px solid var(--gray-100);
font-size: 0.9rem;
color: var(--gray-700);
}
.custom-block-section .product-pricing-card .pricing-features li:last-child {
border-bottom: none;
}
.custom-block-section .product-pricing-card .pricing-features li i {
margin-right: 8px;
}
.custom-block-section .product-pricing-card .btn {
margin: 0 24px 24px;
width: calc(100% - 48px);
}
.custom-block-section .comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: var(--radius-lg, 12px);
overflow: hidden;
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}
.custom-block-section .comparison-table thead tr {
background: var(--primary-gradient, linear-gradient(135deg, #0066FF, #0052CC));
color: #fff;
}
.custom-block-section .comparison-table th {
padding: 16px;
font-weight: 600;
text-align: center;
border: none;
color: #fff;
}
.custom-block-section .comparison-table td {
padding: 14px 16px;
text-align: center;
border-bottom: 1px solid var(--gray-200);
color: var(--gray-700);
}
.custom-block-section .comparison-table tbody tr:hover {
background: var(--gray-50, #f8fafc);
}
.hero-trust-widget {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.trust-widget-floating-icons {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.floating-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
animation: float 3s ease-in-out infinite;
}
.floating-icon.icon-1 {
top: 10%;
left: 5%;
background: linear-gradient(135deg, #0066FF, #0052CC);
color: white;
animation-delay: 0s;
}
.floating-icon.icon-2 {
bottom: 15%;
right: 10%;
background: linear-gradient(135deg, #00D68F, #00B377);
color: white;
animation-delay: 1.5s;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.trust-card {
background: white;
border-radius: 20px;
padding: 30px;
width: 320px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
position: relative;
}
.trust-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.trust-card-header .lock-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #00D68F 0%, #00B377 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.trust-card-header .trust-title {
color: #00D68F;
font-weight: 600;
font-size: 14px;
}
.trust-card-domain {
font-size: 22px;
font-weight: 700;
color: #1a1f36;
margin-bottom: 20px;
}
.trust-features {
list-style: none;
padding: 0;
margin: 0;
}
.trust-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
color: #4a5568;
font-size: 14px;
}
.trust-features li i {
color: #00D68F;
font-size: 16px;
}
.trust-card-check {
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: linear-gradient(135deg, #00D68F 0%, #00B377 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
box-shadow: 0 5px 20px rgba(0, 214, 143, 0.4);
}
.hero-widget-image {
border-radius: 16px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}
.hero-custom-widget {
display: flex;
align-items: center;
justify-content: center;
}
.hero-slider-section {
position: relative;
overflow: hidden;
background: #050816;
}
.hero-slider-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 80% 60% at 10% 90%, rgba(59, 130, 246, 0.15), transparent 40%),
radial-gradient(ellipse 60% 50% at 90% 10%, rgba(147, 51, 234, 0.15), transparent 40%),
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(6, 182, 212, 0.1), transparent 40%);
pointer-events: none;
z-index: 0;
}
.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(60px, 60px); }
}
.hero-slide::after {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
border-radius: 50%;
filter: blur(40px);
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 30px) scale(1.1); }
}
.hero-slide {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
padding: 100px 0 80px;
background: linear-gradient(135deg, #050816 0%, #0a1628 30%, #0f172a 60%, #1e1b4b 100%) !important;
}
.hero-slide-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 60% 40% at 0% 50%, rgba(59, 130, 246, 0.12), transparent 50%),
radial-gradient(ellipse 50% 50% at 100% 80%, rgba(147, 51, 234, 0.1), transparent 50%);
pointer-events: none;
}
.min-vh-hero {
min-height: 500px;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 50px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 28px;
animation: slideInLeft 0.6s ease;
}
.hero-badge i {
color: #00D68F;
font-size: 16px;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
animation: slideInUp 0.6s ease 0.1s both;
}
.hero-title .gradient-text,
.hero-title span {
background: linear-gradient(135deg, #00D68F 0%, #00CFDE 50%, #3B82F6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
max-width: 550px;
margin-bottom: 36px;
line-height: 1.8;
animation: slideInUp 0.6s ease 0.2s both;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
animation: slideInUp 0.6s ease 0.3s both;
}
.btn-cta-primary {
background: linear-gradient(135deg, #00D68F 0%, #00B377 100%);
color: #fff !important;
padding: 16px 32px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
border: none;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 214, 143, 0.3);
}
.btn-cta-primary::before {
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;
}
.btn-cta-primary:hover::before {
left: 100%;
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 214, 143, 0.4);
}
.btn-outline-light {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #fff !important;
padding: 16px 32px;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
}
#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
}
.hero-slider-section:hover #heroSlider .carousel-control-prev,
.hero-slider-section:hover #heroSlider .carousel-control-next {
opacity: 1;
}
#heroSlider .carousel-control-prev { left: 40px; }
#heroSlider .carousel-control-next { right: 40px; }
#heroSlider .carousel-control-prev:hover,
#heroSlider .carousel-control-next:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.2);
}
#heroSlider .carousel-indicators {
bottom: 40px;
gap: 8px;
}
#heroSlider .carousel-indicators button {
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
border: none;
margin: 0;
transition: all 0.3s ease;
}
#heroSlider .carousel-indicators button.active {
width: 60px;
background: linear-gradient(90deg, #00D68F, #00CFDE);
}
.hero-stats-bar {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(20px);
padding: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}
.hero-stats-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 214, 143, 0.5), transparent);
}
.hero-stats {
display: flex;
justify-content: center;
gap: 80px;
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
position: relative;
}
.hero-stat::after {
content: '';
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
}
.hero-stat:last-child::after {
display: none;
}
.hero-stat-value {
font-size: 42px;
font-weight: 800;
background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 8px;
}
.hero-stat-label {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6) !important;
text-transform: uppercase;
letter-spacing: 1px;
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.modern-price-section {
padding: 100px 0;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
position: relative;
}
.modern-price-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(180deg, #050816 0%, transparent 100%);
pointer-events: none;
}
.price-card-modern {
background: #fff;
border-radius: 24px;
padding: 0;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #e2e8f0;
height: 100%;
display: flex;
flex-direction: column;
}
.price-card-modern:hover {
transform: translateY(-12px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
border-color: transparent;
}
.price-card-modern.featured {
border: 2px solid transparent;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #00D68F, #00CFDE, #3B82F6) border-box;
transform: scale(1.05);
z-index: 2;
}
.price-card-modern.featured:hover {
transform: scale(1.05) translateY(-12px);
}
.price-card-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #00D68F, #00B377);
color: #fff;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(0, 214, 143, 0.3);
}
.price-card-header {
padding: 40px 32px 24px;
text-align: center;
position: relative;
}
.price-card-icon {
width: 72px;
height: 72px;
margin: 0 auto 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
position: relative;
}
.price-card-icon.dv {
background: linear-gradient(135deg, rgba(0, 214, 143, 0.1), rgba(0, 214, 143, 0.05));
color: #00D68F;
}
.price-card-icon.ov {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
color: #3B82F6;
}
.price-card-icon.ev {
background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(147, 51, 234, 0.05));
color: #9333EA;
}
.price-card-icon.code-signing {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
color: #F59E0B;
}
.price-card-title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.price-card-subtitle {
font-size: 14px;
color: #64748b;
}
.price-card-price {
padding: 24px 32px;
text-align: center;
border-top: 1px solid #f1f5f9;
border-bottom: 1px solid #f1f5f9;
}
.price-amount {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 4px;
}
.price-currency {
font-size: 20px;
font-weight: 600;
color: #64748b;
margin-top: 8px;
}
.price-value {
font-size: 56px;
font-weight: 800;
color: #0f172a;
line-height: 1;
}
.price-period {
font-size: 16px;
color: #94a3b8;
margin-top: 8px;
}
.price-old {
font-size: 18px;
color: #94a3b8;
text-decoration: line-through;
margin-top: 8px;
}
.price-card-features {
padding: 32px;
flex: 1;
}
.price-feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.price-feature-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
font-size: 15px;
color: #475569;
border-bottom: 1px solid #f1f5f9;
}
.price-feature-list li:last-child {
border-bottom: none;
}
.price-feature-list li i {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 10px;
}
.price-feature-list li i.fa-check {
background: rgba(0, 214, 143, 0.1);
color: #00D68F;
}
.price-feature-list li i.fa-times {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
}
.price-card-footer {
padding: 24px 32px 32px;
}
.btn-price-primary {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #fff;
border: none;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-price-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.btn-price-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
}
.btn-price-primary:hover::before {
left: 100%;
}
.price-card-modern.featured .btn-price-primary {
background: linear-gradient(135deg, #00D68F, #00B377);
}
.price-card-code-signing {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #fff;
}
.price-card-code-signing .price-card-title,
.price-card-code-signing .price-value {
color: #fff;
}
.price-card-code-signing .price-card-subtitle,
.price-card-code-signing .price-currency,
.price-card-code-signing .price-period {
color: rgba(255, 255, 255, 0.7);
}
.price-card-code-signing .price-feature-list li {
color: rgba(255, 255, 255, 0.9);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.price-card-code-signing .btn-price-primary {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
@media (max-width: 991px) {
.price-card-modern.featured {
transform: scale(1);
}
.price-card-modern.featured:hover {
transform: translateY(-12px);
}
.hero-stats {
gap: 40px;
}
.hero-stat::after {
display: none;
}
}
@media (max-width: 768px) {
.hero-slide {
min-height: 500px;
padding: 80px 0 60px;
}
.hero-title {
font-size: 2rem;
}
.hero-stat-value {
font-size: 32px;
}
.price-value {
font-size: 42px;
}
}
.table-modern {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.table-modern thead {
background: linear-gradient(135deg, #0f172a, #1e293b);
}
.table-modern thead th {
color: #fff;
font-weight: 600;
padding: 18px 20px;
border: none;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
}
.table-modern tbody tr {
transition: all 0.3s ease;
}
.table-modern tbody tr:hover {
background: rgba(59, 130, 246, 0.05);
transform: scale(1.01);
}
.table-modern tbody td {
padding: 16px 20px;
border-color: #f1f5f9;
vertical-align: middle;
}
.table-modern tbody tr:last-child td {
border-bottom: none;
}
.ssl-compare-section {
padding: 60px 0;
background: #f8fafc;
}
.ssl-compare-header {
text-align: center;
margin-bottom: 50px;
}
.ssl-compare-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.ssl-compare-header p {
font-size: 1.1rem;
color: #64748b;
}
.ssl-compare-table {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.ssl-compare-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ssl-compare-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.ssl-compare-card.popular {
border-color: #10b981;
}
.ssl-compare-card.popular::before {
content: 'Popüler';
position: absolute;
top: 20px;
right: -35px;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 6px 40px;
font-size: 12px;
font-weight: 600;
transform: rotate(45deg);
z-index: 10;
}
.ssl-card-header {
padding: 16px 16px 12px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.ssl-card-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
}
.ssl-card-brand img {
height: 26px;
width: auto;
}
.ssl-card-brand-name {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
}
.ssl-card-name {
font-size: 1rem;
font-weight: 700;
color: #1e293b;
line-height: 1.3;
}
.ssl-card-price {
padding: 14px 16px;
text-align: center;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.ssl-price-main {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.ssl-price-currency {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
}
.ssl-price-amount {
font-size: 2rem;
font-weight: 800;
color: #1e293b;
line-height: 1;
}
.ssl-price-period {
font-size: 1rem;
color: #64748b;
margin-left: 4px;
}
.ssl-price-old {
font-size: 1rem;
color: #94a3b8;
text-decoration: line-through;
margin-top: 8px;
}
.ssl-validation-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
margin-top: 10px;
}
.ssl-validation-badge.dv {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.ssl-validation-badge.ov {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.ssl-validation-badge.ev {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
.ssl-validation-badge.wildcard {
background: rgba(249, 115, 22, 0.1);
color: #f97316;
}
.ssl-card-features {
padding: 12px 16px;
flex: 1;
}
.ssl-feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid #f1f5f9;
}
.ssl-feature-item:last-child {
border-bottom: none;
}
.ssl-feature-icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 10px;
flex-shrink: 0;
}
.ssl-feature-icon.check {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.ssl-feature-icon.globe {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.ssl-feature-icon.lock {
background: rgba(249, 115, 22, 0.1);
color: #f97316;
}
.ssl-feature-icon.clock {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
.ssl-feature-icon.shield {
background: rgba(6, 182, 212, 0.1);
color: #06b6d4;
}
.ssl-feature-text {
font-size: 14px;
color: #475569;
}
.ssl-feature-text strong {
color: #1e293b;
}
.ssl-card-footer {
padding: 12px 16px 16px;
}
.ssl-buy-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #3b82f6, #2563eb);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.ssl-buy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
color: #fff;
}
.ssl-compare-card.popular .ssl-buy-btn {
background: linear-gradient(135deg, #10b981, #059669);
}
.ssl-compare-card.popular .ssl-buy-btn:hover {
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.view-toggle {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
padding: 6px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.view-toggle-btn {
padding: 10px 16px;
border: none;
background: transparent;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.view-toggle-btn:hover {
color: #3b82f6;
}
.view-toggle-btn.active {
background: #3b82f6;
color: #fff;
}
@media (max-width: 1200px) {
.ssl-compare-table {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.ssl-compare-table {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ssl-compare-section { padding: 40px 0; }
}
@media (max-width: 768px) {
.ssl-compare-header h2 {
font-size: 1.75rem;
}
.ssl-compare-header p {
font-size: 0.95rem;
}
.ssl-price-amount {
font-size: 2.5rem;
}
.ssl-card-header { padding: 14px 14px 10px; }
.ssl-card-price { padding: 12px 14px; }
.ssl-card-features { padding: 10px 14px; }
.ssl-card-footer { padding: 10px 14px 14px; }
.ssl-card-name { font-size: 0.95rem; }
.ssl-feature-item { padding: 6px 0; }
.ssl-feature-text { font-size: 12px; }
.ssl-buy-btn { padding: 10px 16px; font-size: 13px; }
.ssl-compare-section { padding: 30px 0; }
.ssl-compare-header { margin-bottom: 30px; }
}
@media (max-width: 480px) {
.ssl-compare-table {
grid-template-columns: 1fr;
}
.ssl-price-amount { font-size: 1.8rem; }
.ssl-price-currency { font-size: 1rem; }
.ssl-card-name { font-size: 0.95rem; }
.ssl-validation-badge { font-size: 10px; padding: 4px 10px; }
.ssl-compare-header h2 { font-size: 1.5rem; }
}
.brand-showcase-section {
padding: 60px 0;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.brand-showcase-header {
text-align: center;
margin-bottom: 40px;
}
.brand-showcase-header .section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
color: #3b82f6;
padding: 8px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.brand-showcase-header h2 {
font-size: 2.25rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 12px;
}
.brand-showcase-header p {
font-size: 1rem;
color: #64748b;
max-width: 500px;
margin: 0 auto;
}
.brand-showcase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.brand-showcase-card {
background: #fff;
border-radius: 16px;
padding: 24px;
position: relative;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.brand-showcase-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-color, #3b82f6), var(--brand-color-light, #60a5fa));
border-radius: 16px 16px 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.brand-showcase-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
border-color: transparent;
}
.brand-showcase-card:hover::before {
opacity: 1;
}
.brand-showcase-logo {
height: 36px;
margin-bottom: 16px;
display: flex;
align-items: center;
}
.brand-showcase-logo img {
max-height: 36px;
max-width: 140px;
width: auto;
object-fit: contain;
}
.brand-showcase-logo-text {
font-size: 1.5rem;
font-weight: 800;
color: #1e293b;
}
.brand-showcase-price {
margin-bottom: 12px;
}
.brand-showcase-price-label {
font-size: 10px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.brand-showcase-price-value {
display: flex;
align-items: baseline;
gap: 2px;
}
.brand-showcase-price-currency {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
}
.brand-showcase-price-amount {
font-size: 2.25rem;
font-weight: 800;
color: #1e293b;
line-height: 1;
letter-spacing: -1px;
}
.brand-showcase-price-decimal {
font-size: 1rem;
font-weight: 600;
color: #64748b;
}
.brand-showcase-desc {
font-size: 13px;
color: #64748b;
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.brand-showcase-features {
display: none;
}
.brand-showcase-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 20px;
background: #0f172a;
color: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.brand-showcase-btn:hover {
background: #1e293b;
color: #fff;
}
.brand-showcase-btn i {
font-size: 12px;
transition: transform 0.3s ease;
}
.brand-showcase-btn:hover i {
transform: translateX(3px);
}
.brand-product-count {
position: absolute;
top: 16px;
right: 16px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
padding: 4px 10px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.brand-product-count i {
font-size: 10px;
}
.brand-trust-badges {
display: none;
}
@media (max-width: 992px) {
.brand-showcase-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.brand-showcase-section {
padding: 40px 0;
}
.brand-showcase-header h2 {
font-size: 1.75rem;
}
.brand-showcase-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.brand-showcase-card {
padding: 20px;
}
.brand-showcase-price-amount {
font-size: 2rem;
}
}
.brand-showcase-card[data-brand="sectigo"] { --brand-color: #00b140; --brand-color-light: #39d270; }
.brand-showcase-card[data-brand="comodo"] { --brand-color: #c8102e; --brand-color-light: #ff4d6a; }
.brand-showcase-card[data-brand="digicert"] { --brand-color: #0066b3; --brand-color-light: #3399e0; }
.brand-showcase-card[data-brand="geotrust"] { --brand-color: #1e4b7b; --brand-color-light: #3b82f6; }
.brand-showcase-card[data-brand="rapidssl"] { --brand-color: #0077c8; --brand-color-light: #36a3f7; }
.brand-showcase-card[data-brand="thawte"] { --brand-color: #6d2077; --brand-color-light: #9333ea; }
.brand-showcase-card[data-brand="globalsign"] { --brand-color: #f26f21; --brand-color-light: #fb923c; }
.brand-showcase-card[data-brand="alphassl"] { --brand-color: #0077c8; --brand-color-light: #38bdf8; }
.brand-showcase-card[data-brand="gogetssl"] { --brand-color: #00a651; --brand-color-light: #22c55e; }
.brand-showcase-card[data-brand="certum"] { --brand-color: #0066b3; --brand-color-light: #3b82f6; }
.ssl-categories-section {
padding: 60px 0;
background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
}
.ssl-categories-header {
text-align: center;
margin-bottom: 50px;
}
.ssl-categories-header .section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
color: #3b82f6;
padding: 10px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.ssl-categories-header h2 {
font-size: 2.25rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 12px;
}
.ssl-categories-header p {
font-size: 1rem;
color: #64748b;
max-width: 550px;
margin: 0 auto;
}
.ssl-filter-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.ssl-filter-tab {
padding: 10px 20px;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.ssl-filter-tab:hover {
border-color: #3b82f6;
color: #3b82f6;
}
.ssl-filter-tab.active {
background: linear-gradient(135deg, #3b82f6, #2563eb);
border-color: transparent;
color: #fff;
}
.ssl-categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ssl-category-card {
background: #fff;
border-radius: 20px;
padding: 32px 28px;
text-align: center;
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.ssl-category-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
border-color: transparent;
}
.ssl-category-icon {
width: 72px;
height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 28px;
color: #fff;
position: relative;
}
.ssl-category-icon::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 23px;
background: inherit;
opacity: 0.3;
z-index: -1;
}
.ssl-category-icon.dv {
background: linear-gradient(135deg, #10b981, #059669);
}
.ssl-category-icon.ov {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.ssl-category-icon.ev {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.ssl-category-icon.wildcard {
background: linear-gradient(135deg, #f97316, #ea580c);
}
.ssl-category-icon.san {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.ssl-category-icon.code {
background: linear-gradient(135deg, #a855f7, #9333ea);
}
.ssl-category-title {
font-size: 1.25rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
}
.ssl-category-desc {
font-size: 14px;
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
min-height: 44px;
}
.ssl-category-price {
margin-bottom: 20px;
}
.ssl-category-price-amount {
font-size: 1.75rem;
font-weight: 800;
color: #0f172a;
}
.ssl-category-price-period {
font-size: 14px;
color: #94a3b8;
font-weight: 500;
}
.ssl-category-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
background: transparent;
border: 2px solid #e2e8f0;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: #3b82f6;
text-decoration: none;
transition: all 0.3s ease;
}
.ssl-category-btn:hover {
background: linear-gradient(135deg, #3b82f6, #2563eb);
border-color: transparent;
color: #fff;
}
.ssl-category-card:hover .ssl-category-btn {
background: linear-gradient(135deg, #3b82f6, #2563eb);
border-color: transparent;
color: #fff;
}
@media (max-width: 992px) {
.ssl-categories-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.ssl-categories-section {
padding: 40px 0;
}
.ssl-categories-header h2 {
font-size: 1.75rem;
}
.ssl-categories-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.ssl-category-card {
padding: 24px 20px;
}
.ssl-filter-tabs {
gap: 8px;
}
.ssl-filter-tab {
padding: 8px 16px;
font-size: 13px;
}
}
.ssl-category-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 40px;
}
.ssl-category-tab {
padding: 12px 24px;
border: 2px solid #e2e8f0;
background: #fff;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.ssl-category-tab:hover {
border-color: #3b82f6;
color: #3b82f6;
}
.ssl-category-tab.active {
background: linear-gradient(135deg, #3b82f6, #2563eb);
border-color: transparent;
color: #fff;
}
.ssl-category-tab i {
font-size: 16px;
}
.ssl-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.ssl-product-card {
background: #fff;
border-radius: 16px;
border: 1px solid #e8ecf1;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.ssl-product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #10b981);
opacity: 0;
transition: opacity 0.3s;
}
.ssl-product-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
border-color: #d1d9e6;
}
.ssl-product-card:hover::before {
opacity: 1;
}
.ssl-card-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.ssl-card-body {
padding: 28px 24px 20px;
flex-grow: 1;
}
.ssl-product-header {
margin-bottom: 16px;
}
.ssl-brand-badge {
display: inline-flex;
align-items: center;
padding: 5px 14px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
background: #fafbfc;
}
.ssl-brand-badge-img {
height: 18px;
width: auto;
}
.ssl-brand-badge-text {
font-size: 11px;
font-weight: 700;
color: #475569;
letter-spacing: 1px;
}
.ssl-product-brand {
height: 24px;
width: auto;
opacity: 0.8;
}
.ssl-product-brand-text {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ssl-product-type {
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ssl-product-type.dv {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.ssl-product-type.ov {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.ssl-product-type.ev {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
.ssl-product-type.wildcard {
background: rgba(249, 115, 22, 0.1);
color: #f97316;
}
.ssl-product-type.san {
background: rgba(6, 182, 212, 0.1);
color: #06b6d4;
}
.ssl-product-type.code {
background: rgba(168, 85, 247, 0.1);
color: #a855f7;
}
.ssl-product-name {
font-size: 17px;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
line-height: 1.4;
}
.ssl-product-desc {
font-size: 13.5px;
color: #64748b;
line-height: 1.65;
margin-bottom: 16px;
min-height: 66px;
}
.ssl-product-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 0;
}
.ssl-feature-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #475569;
background: #f4f6f9;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid #e8ecf1;
font-weight: 500;
}
.ssl-feature-pill i {
color: #94a3b8;
font-size: 11px;
}
.ssl-product-features span {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #64748b;
background: #f8fafc;
padding: 4px 8px;
border-radius: 6px;
}
.ssl-product-features span i {
color: #3b82f6;
font-size: 10px;
}
.ssl-card-footer {
padding: 20px 24px 24px;
border-top: 1px solid #f0f2f5;
}
.ssl-product-price {
margin-bottom: 16px;
}
.ssl-price-amount {
font-size: 26px;
font-weight: 800;
color: #0f172a;
}
.ssl-price-period {
font-size: 14px;
color: #94a3b8;
font-weight: 500;
}
.ssl-product-btn {
width: 100%;
padding: 13px 20px;
background: linear-gradient(135deg, #e8952e, #d4791a);
color: #fff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
}
.ssl-product-btn:hover {
background: linear-gradient(135deg, #d4791a, #c06a10);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(212, 121, 26, 0.3);
color: #fff;
}
.ssl-view-all {
text-align: center;
margin-top: 20px;
}
.btn-view-all {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: transparent;
border: 2px solid #3b82f6;
color: #3b82f6;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-view-all:hover {
background: #3b82f6;
color: #fff;
}
.btn-view-all i {
transition: transform 0.3s ease;
}
.btn-view-all:hover i {
transform: translateX(5px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1200px) {
.ssl-products-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 992px) {
.ssl-products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px;
}
.ssl-category-tabs {
gap: 8px;
}
.ssl-category-tab {
padding: 10px 16px;
font-size: 13px;
}
.ssl-card-body {
padding: 24px 20px 16px;
}
.ssl-product-desc {
min-height: auto;
}
.ssl-product-name {
font-size: 16px;
}
}
@media (max-width: 768px) {
.ssl-products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px;
}
.ssl-card-body {
padding: 20px 16px 14px;
}
.ssl-card-footer {
padding: 16px 16px 20px;
}
.ssl-product-name {
font-size: 15px;
margin-bottom: 8px;
}
.ssl-product-desc {
font-size: 12.5px;
min-height: auto;
margin-bottom: 12px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ssl-product-features {
gap: 6px;
}
.ssl-feature-pill {
font-size: 11px;
padding: 4px 8px;
}
.ssl-brand-badge {
padding: 4px 10px;
}
.ssl-brand-badge-text {
font-size: 10px;
}
.ssl-brand-badge-img {
height: 15px;
}
.ssl-price-amount {
font-size: 22px;
}
.ssl-product-btn {
padding: 12px 16px;
font-size: 13px;
min-height: 44px;
}
.ssl-category-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
justify-content: flex-start;
scrollbar-width: none;
}
.ssl-category-tabs::-webkit-scrollbar { display: none; }
.ssl-category-tab {
flex-shrink: 0;
padding: 9px 14px;
font-size: 12.5px;
}
}
@media (max-width: 576px) {
.ssl-products-grid {
grid-template-columns: 1fr !important;
gap: 14px;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.ssl-card-body {
padding: 20px 18px 16px;
}
.ssl-card-footer {
padding: 16px 18px 20px;
}
.ssl-product-name {
min-height: auto;
font-size: 16px;
}
.ssl-product-desc {
min-height: auto;
font-size: 13px;
-webkit-line-clamp: unset;
display: block;
overflow: visible;
}
.ssl-product-features {
gap: 6px;
}
.ssl-feature-pill {
font-size: 11.5px;
padding: 5px 9px;
}
.ssl-product-btn {
padding: 14px 20px;
font-size: 14px;
min-height: 48px;
border-radius: 12px;
}
.ssl-price-amount {
font-size: 24px;
}
}
@media (max-width: 400px) {
.ssl-products-grid {
gap: 12px;
max-width: 100%;
}
.ssl-card-body {
padding: 18px 16px 14px;
}
.ssl-card-footer {
padding: 14px 16px 18px;
}
.ssl-product-name {
font-size: 15px;
}
.ssl-product-desc {
font-size: 12.5px;
}
.ssl-feature-pill {
font-size: 11px;
padding: 4px 8px;
}
.ssl-price-amount {
font-size: 22px;
}
.ssl-brand-badge {
padding: 4px 10px;
}
.ssl-brand-badge-text {
font-size: 10px;
}
}
@media (hover: none) and (pointer: coarse) {
.ssl-product-card:hover {
transform: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
border-color: #e8ecf1;
}
.ssl-product-card:hover::before {
opacity: 0;
}
.ssl-product-btn:hover {
transform: none;
box-shadow: none;
}
.ssl-product-card:active {
transform: scale(0.98);
transition: transform 0.15s ease;
}
}
.features-section,
.steps-section,
.trust-section,
.reviews-section,
.faq-section,
.seo-info-section,
.seo-types-section,
.seo-usecases-section,
.comparison-section {
position: relative;
}
.features-section {
padding: 90px 0;
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%);
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::after {
content: '';
position: absolute;
bottom: -200px;
left: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.features-section .feature-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 36px 28px 32px;
text-align: center;
height: 100%;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}
.features-section .feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.features-section .feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
border-color: rgba(99, 102, 241, 0.15);
}
.features-section .feature-card:hover::before {
transform: scaleX(1);
}
.features-section .feature-icon {
width: 72px;
height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 28px;
position: relative;
transition: transform 0.4s ease;
}
.features-section .feature-card:hover .feature-icon {
transform: scale(1.1) rotate(-3deg);
}
.features-section .feature-icon.icon-1 { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.2)); color: #6366f1; }
.features-section .feature-icon.icon-2 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2)); color: #10b981; }
.features-section .feature-icon.icon-3 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2)); color: #f59e0b; }
.features-section .feature-icon.icon-4 { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2)); color: #ef4444; }
.features-section .feature-icon.icon-5 { background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.2)); color: #06b6d4; }
.features-section .feature-icon.icon-6 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.2)); color: #a855f7; }
.features-section .feature-title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.features-section .feature-description {
font-size: 14.5px;
color: #64748b;
line-height: 1.7;
margin-bottom: 0;
}
.features-section .feature-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 14px;
color: #6366f1;
font-weight: 600;
font-size: 13.5px;
text-decoration: none;
transition: gap 0.3s ease, color 0.3s;
}
.features-section .feature-link:hover {
gap: 8px;
color: #4f46e5;
}
.steps-section {
padding: 90px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.steps-section::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
transform: translateY(-50%);
pointer-events: none;
}
.steps-section .step-card {
background: #fff;
border-radius: 20px;
padding: 36px 24px 32px;
text-align: center;
position: relative;
border: 1px solid #e8ecf1;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
height: 100%;
}
.steps-section .step-card::after {
content: '';
position: absolute;
top: 40px;
right: -32px;
width: 48px;
height: 2px;
background: linear-gradient(90deg, #6366f1, rgba(99, 102, 241, 0.2));
z-index: 1;
}
.steps-section .col-lg-3:last-child .step-card::after {
display: none;
}
.steps-section .step-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04);
border-color: rgba(99, 102, 241, 0.2);
}
.steps-section .step-number {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #fff;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
margin-bottom: 0;
position: relative;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
transition: transform 0.4s ease;
}
.steps-section .step-card:hover .step-number {
transform: scale(1.1) rotate(-5deg);
}
.steps-section .step-card h4,
.steps-section .step-card .h5 {
font-size: 17px;
font-weight: 700;
color: #0f172a;
margin-top: 16px;
margin-bottom: 10px;
}
.steps-section .step-card p {
font-size: 14px;
color: #64748b;
line-height: 1.65;
margin-bottom: 0;
}
.trust-section {
padding: 90px 0;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.trust-section h2 {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.trust-section > .container > .row > .col-lg-6:first-child > p {
font-size: 16px;
color: #64748b;
line-height: 1.7;
}
.trust-section .trust-list li {
padding: 14px 16px;
border-radius: 14px;
transition: background 0.3s ease;
}
.trust-section .trust-list li:hover {
background: rgba(99, 102, 241, 0.04);
}
.trust-section .trust-icon {
min-width: 42px;
min-height: 42px;
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 16px;
}
.trust-section .trust-list strong {
font-size: 15px;
color: #0f172a;
display: block;
margin-bottom: 2px;
}
.trust-section .trust-list .small {
font-size: 13.5px;
line-height: 1.55;
}
.trust-section .trust-stats {
background: #fff !important;
border-radius: 24px !important;
padding: 36px !important;
border: 1px solid #e8ecf1;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.trust-section .stat-box {
padding: 16px 12px;
}
.trust-section .stat-number {
font-size: 2.8rem;
font-weight: 800;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 6px;
}
.trust-section .stat-label {
font-size: 13.5px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.trust-section .security-badges {
padding-top: 16px;
}
.trust-section .security-badges .badge {
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
border-radius: 8px;
}
.reviews-section {
padding: 90px 0;
background: linear-gradient(180deg, #f0f0ff 0%, #f8f8ff 50%, #f0f0ff 100%);
position: relative;
overflow: hidden;
}
.reviews-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.reviews-section h2 {
font-size: 2.2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.reviews-section .review-card {
background: #fff !important;
border-radius: 20px !important;
padding: 32px !important;
border: 1px solid rgba(99, 102, 241, 0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative;
}
.reviews-section .review-card::before {
content: '\u201C';
position: absolute;
top: 20px;
right: 24px;
font-size: 64px;
font-family: Georgia, serif;
color: rgba(99, 102, 241, 0.08);
line-height: 1;
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);
}
.reviews-section .review-stars .fa-star,
.reviews-section .review-stars .fa-star-half-alt {
font-size: 16px;
}
.reviews-section .review-text {
font-size: 15px;
color: #334155;
line-height: 1.75;
font-style: italic;
}
.reviews-section .review-avatar {
width: 44px !important;
height: 44px !important;
font-size: 15px;
font-weight: 700;
}
.reviews-section .review-author strong {
font-size: 14.5px;
color: #0f172a;
}
.reviews-section .review-author .small {
font-size: 12.5px;
}
.reviews-section > .container > .text-center:last-child .bg-white {
background: #fff !important;
border: 1px solid #e8ecf1;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
padding: 12px 28px !important;
border-radius: 50px !important;
}
.faq-section {
padding: 90px 0 !important;
background: #fff !important;
}
.faq-section .section-header {
text-align: left !important;
margin-bottom: 20px !important;
}
.faq-section .faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-section .faq-item {
background: #f8fafc;
border: 1px solid #e8ecf1;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-section .faq-item:hover {
border-color: #c7d2fe;
}
.faq-section .faq-item.active {
background: #fff;
border-color: #818cf8;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08);
}
.faq-section .faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: #1e293b;
gap: 16px;
transition: color 0.3s;
user-select: none;
}
.faq-section .faq-question:hover {
color: #4f46e5;
}
.faq-section .faq-question i {
font-size: 14px;
color: #6366f1;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-section .faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s;
}
.faq-section .faq-item.active .faq-answer {
max-height: 500px;
padding: 0 24px 20px;
}
.faq-section .faq-answer div {
font-size: 14.5px;
color: #475569;
line-height: 1.75;
}
.faq-section .btn-primary {
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
border: none !important;
border-radius: 12px;
padding: 12px 28px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}
.faq-section .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}
.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: '';
position: absolute;
top: -50%;
left: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
border-radius: 50%;
animation: ctaOrb1 15s ease-in-out infinite;
pointer-events: none;
}
.cta-section::after {
content: '';
position: absolute;
bottom: -40%;
right: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
border-radius: 50%;
animation: ctaOrb2 18s ease-in-out infinite;
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;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 16px;
line-height: 1.25;
}
.cta-section .cta-description {
font-size: 17px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
margin-bottom: 32px;
}
.cta-section .cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.cta-section .btn-cta {
padding: 16px 36px;
border-radius: 14px;
font-weight: 700;
font-size: 15px;
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.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);
border: none;
}
.cta-section .btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0, 214, 143, 0.45);
}
.cta-section .btn-cta-outline {
background: rgba(255, 255, 255, 0.06);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
}
.cta-section .btn-cta-outline:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-3px);
color: #fff;
}
.seo-info-section {
padding: 90px 0 !important;
background: #fff;
}
.seo-info-section h2 {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
line-height: 1.3;
}
.seo-info-section .lead {
font-size: 16.5px !important;
color: #475569 !important;
line-height: 1.75;
}
.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;
}
.seo-info-section .info-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
border-color: #c7d2fe !important;
}
.seo-info-section .info-card h3 {
font-size: 16px;
font-weight: 700;
color: #0f172a;
}
.seo-info-section .info-card p {
font-size: 14px;
line-height: 1.7;
}
.seo-how-works-box {
background: linear-gradient(135deg, #f8fafc, #eef2ff) !important;
border: 1px solid #e0e7ff;
border-radius: 24px !important;
padding: 36px !important;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.06) !important;
}
.seo-how-works-box h3 {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
}
.seo-hw-num {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.seo-types-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f8fafc 0%, #f0f0ff 100%) !important;
}
.seo-types-section h2 {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.seo-type-card {
background: #fff;
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-type-card.featured::before {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
padding: 5px 20px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.seo-type-badge {
width: 52px;
height: 52px;
border-radius: 14px;
font-size: 17px;
}
.seo-usecases-section {
padding: 90px 0 !important;
background: #fff;
}
.seo-usecases-section h2 {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.seo-usecase-card {
background: #fff;
border-radius: 18px !important;
padding: 28px 24px !important;
border: 1px solid #e8ecf1 !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04) !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;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
}
.seo-usecase-icon i {
font-size: 26px;
color: #6366f1;
}
.seo-usecase-card h4 {
font-size: 15px !important;
font-weight: 700;
color: #0f172a;
}
.seo-usecase-card p {
font-size: 13.5px !important;
color: #64748b;
line-height: 1.65;
}
.comparison-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #f8fafc, #f0f0ff) !important;
}
.comparison-section h2 {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.comparison-section .table-responsive {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
}
.comparison-section .comparison-table {
margin-bottom: 0;
border: none !important;
}
.comparison-section .comparison-table thead {
background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
}
.comparison-section .comparison-table thead th {
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 18px 20px;
border: none;
letter-spacing: 0.3px;
}
.comparison-section .comparison-table tbody td {
padding: 16px 20px;
font-size: 14px;
color: #475569;
border-color: #f1f5f9;
vertical-align: middle;
}
.comparison-section .comparison-table tbody td strong {
color: #0f172a;
font-weight: 700;
}
.comparison-section .comparison-table tbody tr:hover td {
background: #f8fafc;
}
.comparison-section .comparison-table .fa-check {
font-size: 16px;
}
.comparison-section .comparison-table .fa-times {
font-size: 16px;
}
.comparison-section .btn-primary.btn-lg {
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
border: none !important;
border-radius: 14px;
padding: 16px 36px;
font-weight: 700;
font-size: 15px;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
transition: all 0.35s ease;
}
.comparison-section .btn-primary.btn-lg:hover {
transform: translateY(-3px);
box-shadow: 0 12px 36px rgba(99, 102, 241, 0.35);
}
.cert-types-section {
padding: 90px 0 !important;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
}
.cert-types-section .cert-type-card {
background: #fff;
border-radius: 20px;
padding: 36px 28px;
border: 1px solid #e8ecf1;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
height: 100%;
position: relative;
overflow: hidden;
}
.cert-types-section .cert-type-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #6366f1, #06b6d4);
opacity: 0;
transition: opacity 0.3s;
}
.cert-types-section .cert-type-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.15);
}
.cert-types-section .cert-type-card:hover::before {
opacity: 1;
}
.cert-types-section .cert-type-icon {
width: 64px;
height: 64px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 20px;
}
.cert-types-section .cert-type-icon.dv {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.2));
color: #06b6d4;
}
.cert-types-section .cert-type-icon.ev {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.2));
color: #8b5cf6;
}
.cert-types-section .cert-type-title {
font-size: 19px;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
}
.cert-types-section .cert-type-description {
font-size: 14.5px;
color: #64748b;
line-height: 1.65;
margin-bottom: 16px;
}
.cert-types-section .cert-type-price {
font-size: 22px;
font-weight: 800;
color: #0f172a;
margin-bottom: 16px;
}
.cert-types-section .cert-type-price span {
font-size: 14px;
font-weight: 500;
color: #94a3b8;
}
.cert-types-section .btn-outline-primary {
border-radius: 10px;
font-weight: 600;
padding: 8px 20px;
transition: all 0.3s ease;
border-color: #6366f1 !important;
color: #6366f1 !important;
}
.cert-types-section .btn-outline-primary:hover {
background: #6366f1 !important;
color: #fff !important;
}
.ssl-categories-section .ssl-categories-header h2 {
font-size: 2.2rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.ssl-categories-section .ssl-categories-header p {
font-size: 16px;
color: #64748b;
}
.platform-formats-section {
padding: 90px 0 !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;
}
.steps-section .step-card::after {
display: none;
}
.trust-section h2,
.reviews-section h2,
.seo-info-section h2,
.seo-types-section h2,
.seo-usecases-section h2,
.comparison-section h2 {
font-size: 1.75rem;
}
}
@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;
}
.cta-section .cta-description {
font-size: 15px;
}
.cta-section .cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-section .btn-cta {
width: 100%;
justify-content: center;
max-width: 320px;
}
.features-section .feature-card {
padding: 28px 22px 24px;
}
.trust-section h2,
.reviews-section h2,
.seo-info-section h2,
.seo-types-section h2,
.seo-usecases-section h2,
.comparison-section h2 {
font-size: 1.5rem;
}
.trust-section .stat-number {
font-size: 2.2rem;
}
.reviews-section .review-card {
padding: 24px !important;
}
.faq-section .faq-question {
padding: 16px 20px;
font-size: 14px;
}
.seo-how-works-box {
padding: 28px 24px !important;
}
.seo-type-card {
padding: 28px 22px !important;
}
.steps-section .step-card {
padding: 28px 20px 24px;
}
.steps-section .step-number {
width: 52px;
height: 52px;
font-size: 20px;
border-radius: 14px;
}
}
@media (max-width: 576px) {
.cta-section .cta-title {
font-size: 1.4rem;
}
.trust-section .stat-number {
font-size: 1.8rem;
}
.trust-section .trust-stats {
padding: 24px !important;
border-radius: 18px !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;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}
.features-section .feature-card:active,
.steps-section .step-card:active,
.reviews-section .review-card:active {
transform: scale(0.98) !important;
transition: transform 0.15s ease;
}
}
/* pages-modern.css */
:root {
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-blue: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%);
--gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
--gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
--gradient-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
--gradient-pink: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
--gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
--gradient-mesh: radial-gradient(at 40% 20%, hsla(228, 65%, 60%, 0.3) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189, 75%, 60%, 0.2) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355, 75%, 60%, 0.15) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(140, 60%, 50%, 0.15) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22, 75%, 60%, 0.15) 0px, transparent 50%);
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--glass-dark-bg: rgba(15, 23, 42, 0.8);
--glass-dark-border: rgba(255, 255, 255, 0.1);
}
.page-hero-modern {
position: relative;
padding: 80px 0 100px;
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
overflow: hidden;
}
.page-hero-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 80% 50% at 20% -20%, rgba(120, 119, 198, 0.3), transparent),
radial-gradient(ellipse 60% 40% at 80% 120%, rgba(255, 119, 198, 0.15), transparent),
radial-gradient(ellipse 50% 30% at 10% 80%, rgba(59, 130, 246, 0.2), transparent),
radial-gradient(ellipse 40% 40% at 90% 30%, rgba(16, 185, 129, 0.15), transparent);
pointer-events: none;
}
.page-hero-bg {
display: none !important;
}
.page-hero-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
line-height: 1.2;
}
.page-hero-desc {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 30px;
max-width: 550px;
line-height: 1.7;
}
.breadcrumb-nav {
margin-bottom: 24px;
}
.breadcrumb-wrapper {
display: inline-block;
position: relative;
}
.breadcrumb-modern {
display: flex;
align-items: center;
gap: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 100%);
padding: 14px 28px;
border-radius: 16px;
margin: 0 0 20px 0;
list-style: none;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-link {
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 8px;
position: relative;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.breadcrumb-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.breadcrumb-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.18) 100%);
border-radius: 8px;
font-size: 12px;
transition: all 0.3s ease;
}
.breadcrumb-link:hover .breadcrumb-icon {
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
transform: scale(1.1);
}
.breadcrumb-separator {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.75);
margin: 0 4px;
}
.breadcrumb-separator svg {
width: 14px;
height: 14px;
opacity: 0.85;
}
.breadcrumb-current {
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 6px 14px;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.4) 0%, rgba(2, 132, 199, 0.3) 100%);
border-radius: 8px;
border: 1px solid rgba(14, 165, 233, 0.4);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@keyframes breadcrumbFadeIn {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.breadcrumb-item {
animation: breadcrumbFadeIn 0.4s ease forwards;
}
.breadcrumb-item:nth-child(1) {
animation-delay: 0.1s;
}
.breadcrumb-item:nth-child(2) {
animation-delay: 0.15s;
}
.breadcrumb-item:nth-child(3) {
animation-delay: 0.2s;
}
.breadcrumb-item:nth-child(4) {
animation-delay: 0.25s;
}
.breadcrumb-item:nth-child(5) {
animation-delay: 0.3s;
}
@media (max-width: 768px) {
.breadcrumb-modern {
padding: 10px 16px;
border-radius: 12px;
}
.breadcrumb-link {
font-size: 13px;
padding: 4px 8px;
}
.breadcrumb-icon {
width: 24px;
height: 24px;
font-size: 11px;
}
.breadcrumb-current {
font-size: 13px;
padding: 4px 10px;
}
}
.hero-icon-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-icon-box i {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
background: linear-gradient(135deg, #0066FF 0%, #00D68F 100%);
color: #fff;
border-radius: 20px;
margin-bottom: 12px;
}
.hero-icon-box span {
color: #fff;
font-weight: 700;
font-size: 1rem;
}
.btn-modern-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, #0066FF 0%, #00D68F 100%);
color: #fff;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4);
}
.btn-modern-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 102, 255, 0.5);
color: #fff;
}
.btn-modern-outline {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
color: #fff;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
.btn-modern-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.hero-section {
position: relative;
padding: 100px 0 120px;
background: var(--gradient-dark);
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-mesh);
opacity: 0.8;
}
.hero-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(to top, #f8fafc 0%, transparent 100%);
}
.hero-section .container {
position: relative;
z-index: 1;
}
.hero-content {
max-width: 680px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 50px;
color: #60a5fa;
font-size: 13px;
font-weight: 600;
margin-bottom: 24px;
backdrop-filter: blur(10px);
}
.hero-badge i {
font-size: 14px;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -0.02em;
}
.hero-title span {
background: linear-gradient(135deg, #60a5fa 0%, #34d399 50%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
margin-bottom: 32px;
max-width: 560px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
border: none;
text-decoration: none;
box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
transition: all 0.3s ease;
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 50px rgba(59, 130, 246, 0.5);
color: #fff;
}
.btn-outline-light {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-3px);
}
.hero-stats {
display: flex;
gap: 48px;
flex-wrap: wrap;
}
.hero-stat {
text-align: left;
}
.hero-stat-value {
font-size: 32px;
font-weight: 800;
color: #fff;
line-height: 1;
margin-bottom: 6px;
}
.hero-stat-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.hero-image {
position: relative;
}
.hero-image img {
filter: drop-shadow(0 20px 50px rgba(59, 130, 246, 0.3));
animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.search-section {
background: #fff;
border-radius: 20px;
padding: 24px;
margin-top: -60px;
position: relative;
z-index: 10;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 20px;
}
.filter-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #f1f5f9;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-tab:hover {
background: #e2e8f0;
color: #475569;
}
.filter-tab.active {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.filter-tab .badge {
background: rgba(0, 0, 0, 0.1);
padding: 2px 8px;
border-radius: 20px;
font-size: 11px;
}
.filter-tab.active .badge {
background: rgba(255, 255, 255, 0.2);
}
.search-input-group {
position: relative;
flex: 1;
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 16px;
}
.search-input {
width: 100%;
padding: 16px 20px 16px 52px;
background: #f8fafc;
border: 2px solid transparent;
border-radius: 12px;
font-size: 15px;
color: #1e293b;
transition: all 0.2s ease;
}
.search-input:focus {
outline: none;
border-color: #3b82f6;
background: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
.search-input::placeholder {
color: #94a3b8;
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 50px;
color: #3b82f6;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.section-badge i {
font-size: 12px;
}
.section-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: #0f172a;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.section-subtitle {
font-size: 17px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
.cert-types-section {
padding: 80px 0;
background: #f8fafc;
}
.cert-type-card {
background: #fff;
border-radius: 20px;
padding: 32px;
height: 100%;
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cert-type-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
opacity: 0;
transition: opacity 0.3s;
}
.cert-type-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
border-color: transparent;
}
.cert-type-card:hover::before {
opacity: 1;
}
.cert-type-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
margin-bottom: 24px;
position: relative;
}
.cert-type-icon.dv {
background: linear-gradient(135deg, #10b981, #059669);
}
.cert-type-icon.ov {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.cert-type-icon.ev {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.cert-type-icon.wildcard {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.cert-type-icon.multi {
background: linear-gradient(135deg, #ec4899, #db2777);
}
.cert-type-icon.code {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.cert-type-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
}
.cert-type-description {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.cert-type-price {
font-size: 24px;
font-weight: 800;
color: #0f172a;
margin-bottom: 20px;
}
.cert-type-price span {
font-size: 14px;
font-weight: 500;
color: #64748b;
}
.products-section {
padding: 80px 0;
background: #fff;
}
.product-card {
background: #fff;
border-radius: 20px;
border: 1px solid #e2e8f0;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.product-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg, transparent 0%, transparent 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 0;
}
.product-card:hover::before {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
opacity: 1;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.product-card.featured {
border-color: #3b82f6;
}
.product-card.featured::after {
content: 'Popüler';
position: absolute;
top: 16px;
right: -32px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 40px;
transform: rotate(45deg);
z-index: 1;
}
.product-header {
padding: 24px 24px 0;
display: flex;
align-items: center;
gap: 16px;
}
.product-brand-logo {
width: 48px;
height: 48px;
object-fit: contain;
padding: 8px;
background: #f8fafc;
border-radius: 12px;
}
.product-brand-info {
flex: 1;
}
.product-brand-name {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-name {
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin-top: 2px;
}
.product-body {
padding: 24px;
flex: 1;
}
.product-price-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 16px;
}
.product-price {
font-size: 28px;
font-weight: 800;
color: #0f172a;
}
.product-price-period {
font-size: 14px;
color: #64748b;
}
.product-old-price {
font-size: 16px;
color: #94a3b8;
text-decoration: line-through;
}
.product-validation {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 20px;
}
.product-validation.dv {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.product-validation.ov {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
.product-validation.ev {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
}
.product-validation.wildcard {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.product-features {
list-style: none;
padding: 0;
margin: 0;
}
.product-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
font-size: 14px;
color: #475569;
border-bottom: 1px solid #f1f5f9;
}
.product-features li:last-child {
border-bottom: none;
}
.product-features li i {
width: 20px;
color: #10b981;
font-size: 14px;
}
.product-footer {
padding: 20px 24px 24px;
margin-top: auto;
}
.btn-buy {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-buy-primary {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.btn-buy-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
color: #fff;
}
.brands-section {
padding: 80px 0;
background: #f8fafc;
}
.brand-logo-card {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
padding: 20px;
transition: all 0.3s ease;
}
.brand-logo-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.brand-logo-card img {
max-height: 40px;
max-width: 120px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.brand-logo-card:hover img {
filter: grayscale(0%);
opacity: 1;
}
.features-section {
padding: 80px 0;
background: #fff;
}
.feature-card {
background: #fff;
border-radius: 20px;
padding: 32px;
height: 100%;
border: 1px solid #e2e8f0;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
border-color: transparent;
}
.feature-icon {
width: 72px;
height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff !important;
margin: 0 auto 24px;
position: relative;
}
.feature-icon i {
color: #fff !important;
opacity: 1 !important;
font-size: 28px;
}
.feature-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: inherit;
filter: blur(20px);
opacity: 0.4;
z-index: -1;
}
.feature-icon.icon-1 {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}
.feature-icon.icon-2 {
background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}
.feature-icon.icon-3 {
background: linear-gradient(135deg, #10b981, #059669) !important;
}
.feature-icon.icon-4 {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.feature-icon.icon-5 {
background: linear-gradient(135deg, #ec4899, #db2777) !important;
}
.feature-icon.icon-6 {
background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}
.feature-title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
}
.feature-description {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin: 0;
}
.faq-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: #cbd5e1;
}
.faq-item.active {
border-color: #3b82f6;
box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.faq-question:hover {
background: #f8fafc;
}
.faq-question span {
font-size: 16px;
font-weight: 600;
color: #0f172a;
}
.faq-question i {
font-size: 12px;
color: #94a3b8;
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
color: #3b82f6;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
}
.faq-answer {
padding: 0 24px;
font-size: 15px;
color: #64748b;
line-height: 1.7;
}
.faq-item.active .faq-answer {
padding: 0 24px 24px;
}
.cta-section {
padding: 100px 0;
background: var(--gradient-dark);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-mesh);
opacity: 0.6;
}
.cta-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: #fff;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.cta-description {
font-size: 17px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
margin-bottom: 36px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-cta-primary {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 50px rgba(59, 130, 246, 0.5);
color: #fff;
}
.btn-cta-outline {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.btn-cta-outline:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-3px);
}
.contact-section {
padding: 80px 0;
background: #f8fafc;
}
.contact-card {
background: #fff;
border-radius: 24px;
padding: 40px;
height: 100%;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.contact-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
margin-bottom: 24px;
}
.contact-icon.phone {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.contact-icon.email {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.contact-icon.whatsapp {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.contact-icon.address {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.contact-form-card {
background: #fff;
border-radius: 24px;
padding: 48px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 24px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.form-control {
width: 100%;
padding: 14px 18px;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
color: #1e293b;
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: #3b82f6;
background: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
.form-control::placeholder {
color: #94a3b8;
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.about-hero {
padding: 80px 0;
background: var(--gradient-dark);
position: relative;
overflow: hidden;
}
.about-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-mesh);
opacity: 0.6;
}
.about-section {
padding: 80px 0;
}
.about-card {
background: #fff;
border-radius: 24px;
padding: 40px;
height: 100%;
border: 1px solid #e2e8f0;
text-align: center;
transition: all 0.3s ease;
}
.about-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.about-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #fff;
margin: 0 auto 24px;
}
.stat-card {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 24px;
padding: 40px;
text-align: center;
color: #fff;
}
.stat-value {
font-size: 48px;
font-weight: 800;
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 16px;
opacity: 0.8;
}
.product-detail-section {
padding: 60px 0;
background: #f8fafc;
}
.product-detail-card {
background: #fff;
border-radius: 24px;
padding: 48px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.product-detail-header {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid #e2e8f0;
}
.product-detail-logo {
width: 80px;
height: 80px;
padding: 16px;
background: #f8fafc;
border-radius: 20px;
object-fit: contain;
}
.product-detail-title {
font-size: 28px;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.cloud-product-card {
background: #fff;
border-radius: 20px;
padding: 28px;
height: 100%;
display: flex;
flex-direction: column;
border: 2px solid #e0f2fe;
transition: .4s;
position: relative;
overflow: hidden;
}
.cloud-product-card:hover {
border-color: #06b6d4;
box-shadow: 0 12px 30px rgba(6, 182, 212, .15);
transform: translateY(-4px);
}
.cloud-premium {
border-color: #c4b5fd;
}
.cloud-premium:hover {
border-color: #8b5cf6;
box-shadow: 0 12px 30px rgba(139, 92, 246, .2);
}
.cloud-p-badge {
position: absolute;
top: 16px;
right: 16px;
font-size: .7rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 50px;
z-index: 2;
}
.os-badge {
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
}
.premium-badge {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: #fff;
}
.ev-badge {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
}
.best-badge {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: #fff;
}
.cloud-type-badge {
font-size: .7rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 6px;
}
.ctb-ov {
background: #ecfeff;
color: #0e7490;
}
.ctb-ev {
background: #f5f3ff;
color: #7c3aed;
}
.cloud-highlights {
margin: 14px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cloud-hl {
font-size: .78rem;
font-weight: 600;
color: #0e7490;
padding: 5px 10px;
background: #f0fdfa;
border-radius: 8px;
}
.cloud-hl i {
margin-right: 6px;
}
.cloud-hl-ev {
color: #7c3aed;
background: #f5f3ff;
}
.cloud-cs-btn {
display: block;
text-align: center;
padding: 14px;
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: #fff;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
margin-top: auto;
transition: .3s;
}
.cloud-cs-btn:hover {
background: linear-gradient(135deg, #0891b2, #0e7490);
color: #fff;
transform: translateY(-2px);
}
.cloud-btn-ev {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.cloud-btn-ev:hover {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.cs-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.cs-brand-logo {
height: 24px;
}
.cs-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
}
.cs-title a {
color: inherit;
text-decoration: none;
transition: color .2s;
}
.cs-title a:hover {
color: #06b6d4;
}
.cs-price {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
text-align: center;
}
.cs-price-old {
text-decoration: line-through;
color: #94a3b8;
font-size: 13px;
font-weight: 500;
margin-bottom: 2px;
}
.cs-price-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 3px;
}
.cs-price-current {
font-size: 26px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.5px;
line-height: 1.2;
}
.cs-price-period {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.cs-price-tax {
font-size: 0.7rem;
color: #94a3b8;
margin-top: 4px;
}
.cs-price-discount {
display: inline-block;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 50px;
margin-top: 6px;
}
.cs-price-discount i {
margin-right: 3px;
}
.cloud-premium .cs-price {
background: linear-gradient(135deg, #faf5ff, #f3e8ff);
border-color: #e9d5ff;
}
.cs-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.cs-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #64748b;
background: #f8fafc;
padding: 6px 12px;
border-radius: 8px;
}
.cs-meta-item i {
color: #06b6d4;
}
.cs-features {
list-style: none;
padding: 0;
margin: 0 0 20px;
flex-grow: 1;
}
.cs-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
color: #475569;
border-bottom: 1px solid #f1f5f9;
}
.cs-features li:last-child {
border-bottom: none;
}
.cs-features li i {
color: #10b981;
font-size: 12px;
}
.product-detail-brand {
font-size: 14px;
color: #64748b;
}
.product-detail-price {
font-size: 48px;
font-weight: 800;
color: #0f172a;
margin-bottom: 24px;
}
.product-detail-price span {
font-size: 18px;
font-weight: 500;
color: #64748b;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid #f1f5f9;
}
.feature-list li:last-child {
border-bottom: none;
}
.feature-list li i {
width: 24px;
height: 24px;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.feature-list li span {
font-size: 15px;
color: #475569;
}
.sidebar-card {
background: #fff;
border-radius: 20px;
padding: 32px;
border: 1px solid #e2e8f0;
margin-bottom: 24px;
}
.sidebar-card-title {
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #e2e8f0;
}
@media (max-width: 992px) {
.cloud-product-card {
padding: 22px;
}
.cs-price {
padding: 12px 14px;
}
.cs-price-current {
font-size: 22px;
}
.cs-price-old {
font-size: 12px;
}
.cs-title {
font-size: 16px;
}
.cs-features li {
font-size: 13px;
padding: 6px 0;
}
.cloud-cs-btn {
padding: 12px;
font-size: 14px;
}
}
@media (max-width: 768px) {
.cloud-product-card {
padding: 18px;
border-radius: 16px;
}
.cs-card-header {
gap: 8px;
margin-bottom: 12px;
}
.cs-brand-logo {
height: 20px;
}
.cloud-type-badge {
font-size: .65rem;
padding: 2px 8px;
}
.cs-title {
font-size: 15px;
margin-bottom: 10px;
}
.cs-price {
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 12px;
}
.cs-price-current {
font-size: 20px;
}
.cs-price-period {
font-size: 12px;
}
.cs-price-old {
font-size: 11px;
}
.cs-price-tax {
font-size: 0.65rem;
}
.cs-price-discount {
font-size: 0.6rem;
padding: 2px 8px;
}
.cs-meta {
gap: 8px;
margin-bottom: 14px;
}
.cs-meta-item {
font-size: 11px;
padding: 4px 8px;
}
.cloud-highlights {
margin: 10px 0;
gap: 4px;
}
.cloud-hl {
font-size: .72rem;
padding: 4px 8px;
}
.cs-features {
margin-bottom: 14px;
}
.cs-features li {
font-size: 13px;
padding: 6px 0;
gap: 8px;
}
.cloud-cs-btn {
padding: 12px;
border-radius: 10px;
font-size: 14px;
}
.cloud-p-badge {
top: 12px;
right: 12px;
font-size: .65rem;
padding: 4px 10px;
}
}
@media (max-width: 480px) {
.cloud-product-card {
padding: 14px;
border-radius: 14px;
}
.cs-card-header {
gap: 6px;
margin-bottom: 8px;
}
.cs-brand-logo {
height: 18px;
}
.cs-title {
font-size: 14px;
margin-bottom: 8px;
}
.cs-price {
padding: 8px 10px;
border-radius: 8px;
}
.cs-price-current {
font-size: 18px;
}
.cs-price-period {
font-size: 11px;
}
.cloud-highlights {
margin: 8px 0;
}
.cloud-hl {
font-size: .68rem;
padding: 3px 7px;
}
.cs-features li {
font-size: 12px;
}
.cloud-cs-btn {
padding: 11px;
font-size: 13px;
}
.cloud-p-badge {
top: 10px;
right: 10px;
font-size: .6rem;
padding: 3px 8px;
}
}
.ssl-v3-tab {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border: 2px solid #e2e8f0;
border-radius: 50px;
background: #fff;
color: #64748b;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s;
white-space: nowrap;
}
.ssl-v3-tab:hover {
border-color: #06b6d4;
color: #0e7490;
background: #f0fdfa;
}
.ssl-v3-tab.active {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
@media (max-width: 768px) {
.ssl-v3-tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 8px;
justify-content: flex-start !important;
gap: 6px !important;
margin-bottom: 24px !important;
}
.ssl-v3-tabs::-webkit-scrollbar {
display: none;
}
.ssl-v3-tab {
flex-shrink: 0;
font-size: 13px;
padding: 8px 16px;
}
.ssl-compare-section {
padding: 40px 0 50px !important;
}
.ssl-compare-section h2 {
font-size: 1.3rem !important;
}
.ssl-compare-section p {
font-size: 0.85rem !important;
}
.brand-products-group > div:first-child {
gap: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 16px !important;
}
.brand-products-group > div:first-child h3 {
font-size: 1rem !important;
}
.brand-products-group > div:first-child > div:first-child {
width: 36px !important;
height: 36px !important;
}
.brand-products-group > div:first-child > span:last-child {
font-size: 11px !important;
padding: 3px 10px !important;
}
.cloud-cs-btn {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.cloud-product-card {
margin-bottom: 0;
}
.home-product-item {
margin-bottom: 4px;
}
}
@media (max-width: 480px) {
.ssl-v3-tab {
font-size: 12px;
padding: 7px 14px;
}
.ssl-compare-section h2 {
font-size: 1.1rem !important;
}
.cloud-product-card {
padding: 16px;
border-width: 1px;
}
.cs-title {
font-size: 14px;
line-height: 1.3;
}
.cs-price-current {
font-size: 20px;
}
.cloud-highlights {
margin: 8px 0;
gap: 4px;
}
.cloud-hl {
font-size: 0.7rem;
padding: 4px 8px;
border-radius: 6px;
}
.cs-features {
margin-bottom: 12px;
}
.cs-features li {
font-size: 12px;
padding: 5px 0;
gap: 6px;
}
.cloud-cs-btn {
padding: 12px;
font-size: 13px;
min-height: 44px;
border-radius: 10px;
}
.brand-products-group {
margin-bottom: 32px !important;
}
}
@media (max-width: 992px) {
.hero-section {
padding: 60px 0 100px;
}
.hero-stats {
gap: 32px;
}
.search-section {
margin-top: -40px;
}
.filter-tabs {
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 40px 0 80px;
}
.page-hero-modern {
padding: 50px 0 40px;
}
.page-hero-title {
font-size: 1.6rem;
line-height: 1.3;
}
.page-hero-desc {
font-size: 0.95rem;
}
.hero-buttons {
flex-direction: column;
}
.hero-buttons .btn {
width: 100%;
justify-content: center;
}
.hero-stats {
justify-content: center;
text-align: center;
}
.search-section {
margin-top: -30px;
padding: 20px;
border-radius: 14px;
}
.filter-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar {
display: none;
}
.filter-tab {
flex-shrink: 0;
font-size: 13px;
padding: 8px 14px;
}
.search-input-group {
margin-top: 12px;
}
.search-input {
font-size: 16px;
padding: 12px 14px 12px 40px;
}
.section-header {
margin-bottom: 32px;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .btn-cta {
width: 100%;
justify-content: center;
}
.product-detail-card {
padding: 24px;
}
.contact-form-card {
padding: 24px;
}
.hero-icon-box {
width: 140px;
height: 140px;
border-radius: 20px;
}
.hero-icon-box i {
font-size: 28px;
width: 64px;
height: 64px;
}
.brands-section {
padding: 40px 0;
}
.brand-logo-card {
padding: 16px 12px;
border-radius: 12px;
}
.features-section {
padding: 40px 0;
}
.feature-card {
padding: 24px 16px;
}
}
@media (max-width: 480px) {
.page-hero-modern {
padding: 35px 0 30px;
}
.page-hero-title {
font-size: 1.4rem;
}
.page-hero-desc {
font-size: 0.88rem;
}
.search-section {
padding: 16px;
margin-top: -24px;
}
.filter-tab {
font-size: 12px;
padding: 6px 12px;
}
}
/* 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;
}