* { 
    box-sizing: border-box; 
} 

html { 
    scroll-behavior: smooth; 
} 

body { 
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #1f2937; 
    background: #f7f9fc; 
    line-height: 1.6; 
} 

img { 
    max-width: 100%; 
    height: auto; 
} 

a { 
    text-decoration: none; 
    color: inherit; 
} 

button, 
input, 
textarea { 
    font-family: inherit; 
} 

.cfn-container { 
    width: 100%; 
    max-width: 1180px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

/* HEADER */ 

.cfn-header { 
    position: relative; 
    z-index: 1000; 
    background: #0f172a; 
    color: #fff; 
    border-bottom: 1px solid rgba(255,255,255,.08); 
} 

.cfn-header-inner { 
    min-height: 76px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 30px; 
} 

.cfn-logo { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    color: #fff; 
    font-weight: 700; 
    font-size: 20px; 
    white-space: nowrap; 
} 

.cfn-logo img { 
    width: 48px; 
    height: 48px; 
    object-fit: contain; 
} 

.cfn-nav { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 24px; 
} 

.cfn-nav > a, 
.cfn-nav-link { 
    color: #dbeafe !important; 
    font-size: 15px; 
    font-weight: 500; 
    transition: color .2s ease; 
} 

.cfn-nav > a:hover, 
.cfn-nav-link:hover { 
    color: #fff !important; 
} 

.cfn-nav-button { 
    display: inline-block; 
    padding: 9px 18px; 
    border-radius: 7px; 
    background: #2563eb; 
    color: #fff !important; 
    font-size: 14px; 
    font-weight: 600; 
} 

.cfn-nav-button:hover { 
    background: #1d4ed8; 
    color: #fff !important; 
} 

.cfn-lang { 
    display: flex; 
    align-items: center; 
    gap: 9px; 
} 

.cfn-lang a { 
    color: #dbeafe !important; 
    font-size: 13px; 
} 

.cfn-lang a:hover { 
    color: #fff !important; 
} 

.cfn-menu-toggle { 
    display: none; 
    width: 42px; 
    height: 42px; 
    padding: 0; 
    border: 1px solid rgba(255,255,255,.2); 
    border-radius: 7px; 
    background: rgba(255,255,255,.05); 
    cursor: pointer; 
} 

.cfn-menu-toggle span { 
    display: block; 
    width: 20px; 
    height: 2px; 
    margin: 4px auto; 
    background: #fff; 
} 

/* DROPDOWN */ 

.cfn-nav-dropdown { 
    position: relative; 
} 

.cfn-nav-dropdown-toggle { 
    border: 0; 
    padding: 0; 
    background: transparent; 
    color: #dbeafe; 
    font-size: 15px; 
    font-weight: 500; 
    cursor: pointer; 
} 

.cfn-nav-dropdown-toggle:hover { 
    color: #fff; 
} 

.cfn-nav-dropdown-toggle span { 
    margin-left: 4px; 
    font-size: 9px; 
} 

.cfn-dropdown-menu { 
    display: none; 
    position: absolute; 
    top: calc(100% + 15px); 
    left: 50%; 
    transform: translateX(-50%); 
    width: 220px; 
    padding: 8px; 
    margin: 0; 
    list-style: none; 
    background: #fff; 
    border: 1px solid #d9dee7; 
    border-radius: 10px; 
    box-shadow: 0 12px 30px rgba(15,23,42,.15); 
    flex-direction: column; 
} 

.cfn-nav-dropdown.cfn-dropdown-open .cfn-dropdown-menu { 
    display: flex; 
} 

.cfn-dropdown-menu a { 
    display: block; 
    width: 100%; 
    padding: 10px 13px; 
    border-radius: 6px; 
    color: #1f2937; 
    font-size: 14px; 
    font-weight: 500; 
    line-height: 1.4; 
} 

.cfn-dropdown-menu a:hover { 
    background: #eff6ff; 
    color: #2563eb; 
} 

/* HERO */ 

.cfn-hero { 
    position: relative; 
    background: 
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.18), transparent 35%), 
        radial-gradient(circle at 80% 30%, rgba(14,165,233,.16), transparent 35%), 
        linear-gradient(135deg, #0f172a, #172554); 
    color: #fff; 
    padding: 100px 20px 95px; 
    text-align: center; 
} 

.cfn-hero-content { 
    max-width: 900px; 
    margin: 0 auto; 
} 

.cfn-hero-badge { 
    display: inline-block; 
    padding: 7px 15px; 
    border-radius: 30px; 
    background: rgba(255,255,255,.10); 
    border: 1px solid rgba(255,255,255,.18); 
    color: #bfdbfe; 
    font-size: 14px; 
    margin-bottom: 20px; 
} 

.cfn-hero h1 { 
    margin: 0 auto 20px; 
    max-width: 900px; 
    font-size: 48px; 
    line-height: 1.15; 
} 

.cfn-hero h1 span { 
    color: #60a5fa; 
} 

.cfn-hero p { 
    max-width: 780px; 
    margin: 0 auto; 
    font-size: 20px; 
    color: #dbeafe; 
} 

.cfn-hero-buttons { 
    margin-top: 32px; 
    display: flex; 
    justify-content: center; 
    gap: 14px; 
    flex-wrap: wrap; 
} 

/* BUTTONS */ 

.cfn-btn, 
.cfn-button { 
    display: inline-block; 
    padding: 13px 24px; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 16px; 
    transition: all .2s ease; 
    text-align: center; 
} 

.cfn-btn-primary, 
.cfn-button { 
    background: #2563eb; 
    color: #fff; 
} 

.cfn-btn-primary:hover, 
.cfn-button:hover { 
    background: #1d4ed8; 
    color: #fff; 
    transform: translateY(-1px); 
} 

.cfn-btn-secondary { 
    background: rgba(255,255,255,.08); 
    color: #fff; 
    border: 1px solid rgba(255,255,255,.25); 
} 

.cfn-btn-secondary:hover { 
    background: rgba(255,255,255,.15); 
} 

.cfn-btn-light { 
    background: #fff; 
    color: #1d4ed8; 
} 

.cfn-button-secondary { 
    background: #fff; 
    color: #2563eb; 
    border: 1px solid #2563eb; 
} 

.cfn-button-secondary:hover { 
    background: #eff6ff; 
    color: #1d4ed8; 
} 

.cfn-button-row { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
} 

/* SECTIONS */ 

.cfn-section { 
    padding: 70px 0; 
} 

.cfn-section-light { 
    background: #fff; 
} 

.cfn-section-heading { 
    text-align: center; 
    margin-bottom: 45px; 
} 

.cfn-section-heading h2 { 
    margin: 0 0 12px; 
    font-size: 34px; 
    color: #111827; 
    line-height: 1.25; 
} 

.cfn-section-heading p { 
    max-width: 720px; 
    margin: 0 auto; 
    color: #6b7280; 
    font-size: 17px; 
} 

/* COMMON CARDS & TWO COLUMN */ 

.cfn-card, 
.cfn-product, 
.cfn-feature { 
    background: #fff; 
    border: 1px solid #d9dee7; 
    border-radius: 16px; 
    padding: 30px; 
    box-shadow: 0 10px 35px rgba(15,23,42,.08); 
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; 
} 

.cfn-card:hover, 
.cfn-product:hover, 
.cfn-feature:hover { 
    border-color: #cbd5e1; 
    box-shadow: 0 14px 40px rgba(15,23,42,.11); 
    transform: translateY(-2px); 
} 

.cfn-two-column { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
    gap: 32px; 
    align-items: center; 
} 

.cfn-two-column .cfn-card { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    width: 100%; 
    margin: 0; 
} 

.cfn-two-column-reverse > *:first-child { 
    order: 2; 
} 

.cfn-two-column-reverse > *:last-child { 
    order: 1; 
} 

.cfn-image { 
    display: block; 
    width: 100%; 
    height: auto; 
    min-height: 300px; 
    border-radius: 14px; 
    object-fit: cover; 
} 

/* TESTIMONIALS & REVIEWS SECTION */

.cfn-testimonials,
.cfn-reviews-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
    gap: 24px !important; 
    align-items: stretch; 
    margin-top: 30px; 
} 

/* Каждая отдельная карточка отзыва */
.cfn-testimonial,
.cfn-review-card { 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 16px; 
    padding: 28px 20px; 
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    height: 100%; 
} 

.cfn-avatar { 
    width: 80px; 
    height: 80px; 
    margin: 0 auto 16px; 
    overflow: hidden; 
    border-radius: 50%; 
    background: #eff6ff; 
    flex-shrink: 0; 
    border: 2px solid #2563eb; 
} 

.cfn-avatar img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

.cfn-testimonial h3,
.cfn-review-card h3 { 
    margin: 0 0 8px; 
    font-size: 18px; 
    font-weight: 700; 
    color: #111827; 
} 

.cfn-testimonial p,
.cfn-review-card p { 
    margin: 0; 
    color: #4b5563; 
    font-size: 15px; 
    line-height: 1.5; 
} 

/* Адаптив под планшеты и мобильные */
@media (max-width: 1024px) { 
    .cfn-testimonials,
    .cfn-reviews-grid { 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    } 
} 

@media (max-width: 650px) { 
    .cfn-testimonials,
    .cfn-reviews-grid { 
        grid-template-columns: 1fr !important; 
    } 
}

/* FAQ */ 

.cfn-faq { 
    max-width: 850px; 
    margin: 0 auto; 
} 

.cfn-faq-item { 
    background: #fff; 
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    padding: 0 25px; 
    margin-bottom: 14px; 
} 

.cfn-faq-item summary { 
    padding: 20px 0; 
    cursor: pointer; 
    font-size: 18px; 
    font-weight: 600; 
    color: #111827; 
} 

.cfn-faq-item p { 
    margin: 0; 
    padding: 0 0 20px; 
    color: #6b7280; 
} 

/* CTA & CONTACT HORIZONTAL */ 

.cfn-cta { 
    background: linear-gradient(135deg, #1d4ed8, #2563eb); 
    color: #fff; 
    text-align: center; 
    padding: 70px 20px; 
} 

.cfn-cta h2 { 
    margin: 0 0 12px; 
    font-size: 34px; 
} 

.cfn-cta p { 
    margin: 0 auto 25px; 
    max-width: 680px; 
    color: #dbeafe; 
    font-size: 17px; 
} 

.cfn-contact-horizontal { 
    display: flex; 
    gap: 2rem; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    text-align: left; 
    margin: 2rem 0; 
} 

.cfn-contact-summary { 
    flex: 1; 
    min-width: 280px; 
} 

.cfn-contact-summary h3 { 
    margin-top: 0; 
    margin-bottom: 1rem; 
} 

.cfn-contact-map { 
    flex: 1; 
    min-width: 280px; 
    height: 260px; 
    border-radius: 12px; 
    overflow: hidden; 
} 

/* SERVICE GRID & SPECIALIZED CARDS */ 

.cfn-services-grid { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0,1fr)); 
    gap: 22px; 
} 

.cfn-feature-card { 
    background: #fff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    overflow: hidden; 
    box-shadow: 0 8px 25px rgba(15,23,42,.05); 
} 

.cfn-feature-card img { 
    display: block; 
    width: 100%; 
    height: 210px; 
    object-fit: cover; 
} 

.cfn-feature-card > div { 
    padding: 25px; 
} 

.cfn-feature-card h3 { 
    margin: 0 0 8px; 
    color: #111827; 
} 

.cfn-feature-card p { 
    margin: 0; 
    color: #6b7280; 
} 

/* STATS */ 

.cfn-stats { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 22px; 
} 

.cfn-stat { 
    background: #fff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    padding: 30px; 
    text-align: center; 
} 

.cfn-stat strong { 
    display: block; 
    font-size: 42px; 
    line-height: 1.1; 
    color: #2563eb; 
    margin-bottom: 8px; 
} 

.cfn-stat span { 
    color: #6b7280; 
} 

/* MAP */ 

.cfn-map { 
    overflow: hidden; 
    border-radius: 14px; 
    border: 1px solid #e5e7eb; 
    height: 300px; 
} 

.cfn-map iframe { 
    width: 100%; 
    height: 100%; 
    border: 0; 
} 

/* FOOTER */ 

.cfn-footer { 
    background: #0f172a; 
    color: #94a3b8; 
    text-align: center; 
    padding: 28px 20px; 
    font-size: 14px; 
} 

.cfn-footer strong { 
    color: #fff; 
} 

.cfn-footer a { 
    color: #94a3b8; 
} 

.cfn-footer a:hover { 
    color: #fff; 
} 

/* PAYMENT METHODS */ 

.cfn-payment-methods { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    flex-wrap: wrap; 
} 

.cfn-payment-title { 
    font-size: 14px; 
    opacity: 0.85; 
    color: #ffffff; 
} 

.cfn-payment-methods a { 
    display: inline-flex; 
    align-items: center; 
} 

.cfn-payment-methods img { 
    height: 24px; 
    width: auto; 
    max-width: 100px; 
    object-fit: contain; 
    display: block; 
    opacity: 0.9; 
    transition: opacity 0.2s ease; 
} 

.cfn-payment-methods a:hover img { 
    opacity: 1; 
} 

/* NEWS CARDS & STEPS */ 

.cfn-steps-list { 
    padding-left: 20px; 
    margin: 0; 
    line-height: 1.8; 
} 

.cfn-steps-list li { 
    margin-bottom: 10px; 
    color: #334155; 
} 

.cfn-btn-sm { 
    padding: 8px 16px; 
    font-size: 14px; 
    background: #1e293b; 
    color: #fff !important; 
} 

.cfn-btn-sm:hover { 
    background: #2563eb; 
} 

.cfn-news-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
} 

.cfn-news-card { 
    display: grid; 
    grid-template-columns: 360px 1fr; 
    gap: 30px; 
    background: #0f172a; 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 12px; 
    overflow: hidden; 
    color: #fff; 
    align-items: center; 
    padding: 24px; 
} 

.cfn-news-image { 
    width: 100%; 
    height: 220px; 
    border-radius: 8px; 
    overflow: hidden; 
} 

.cfn-news-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.3s ease; 
} 

.cfn-news-card:hover .cfn-news-image img { 
    transform: scale(1.04); 
} 

.cfn-news-date { 
    font-size: 13px; 
    color: #38bdf8; 
    font-weight: 600; 
    margin-bottom: 8px; 
} 

.cfn-news-content h3 { 
    margin: 0 0 12px 0; 
    font-size: 20px; 
    line-height: 1.4; 
} 

.cfn-news-content h3 a { 
    color: #fff; 
    transition: color 0.2s ease; 
} 

.cfn-news-content h3 a:hover { 
    color: #38bdf8; 
} 

.cfn-news-content p { 
    color: #94a3b8; 
    margin-bottom: 20px; 
    font-size: 15px; 
} 

.cfn-video-divider { 
    position: relative; 
    width: 100%; 
    height: 260px; 
    overflow: hidden; 
    background: #000; 
} 

.cfn-video-divider video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0.6; 
} 

/* ========================================== 
   BAF LINUX & PRODUCT SPECIFIC STYLES 
   ========================================== */ 

.cfn-products { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 28px; 
    align-items: stretch; 
} 

.cfn-product { 
    position: relative; 
    background: #ffffff; 
    border: 1px solid #d9dee7; 
    border-radius: 16px; 
    padding: 35px; 
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08); 
    display: flex; 
    flex-direction: column; 
    min-width: 0; 
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; 
} 

.cfn-product:hover { 
    border-color: #cbd5e1; 
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.11); 
    transform: translateY(-2px); 
} 

.cfn-product-featured { 
    border: 2px solid #2563eb; 
    box-shadow: 0 10px 35px rgba(37, 99, 235, 0.12); 
} 

.cfn-product-featured:hover { 
    border-color: #2563eb; 
    box-shadow: 0 16px 42px rgba(37, 99, 235, 0.16); 
} 

.cfn-product-label { 
    position: absolute; 
    top: -14px; 
    left: 25px; 
    background: #2563eb; 
    color: #ffffff; 
    padding: 5px 13px; 
    border-radius: 20px; 
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
} 

.cfn-icon { 
    width: 52px; 
    height: 52px; 
    border-radius: 12px; 
    background: #eff6ff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
} 

.cfn-icon svg { 
    width: 28px; 
    height: 28px; 
    stroke: #2563eb; 
} 

.cfn-product h3 { 
    margin: 0 0 8px; 
    font-size: 25px; 
    line-height: 1.3; 
    color: #111827; 
} 

.cfn-product-subtitle { 
    color: #6b7280; 
    margin-top: 0; 
    margin-bottom: 20px; 
} 

.cfn-price { 
    font-size: 40px; 
    font-weight: 700; 
    color: #111827; 
    margin: 5px 0 20px; 
} 

.cfn-price small { 
    font-size: 14px; 
    color: #6b7280; 
    font-weight: 400; 
} 

.cfn-list { 
    padding: 0; 
    margin: 0 0 25px; 
    list-style: none; 
} 

.cfn-list li { 
    position: relative; 
    padding-left: 27px; 
    margin-bottom: 10px; 
    color: #374151; 
} 

.cfn-list li::before { 
    content: "✓"; 
    position: absolute; 
    left: 0; 
    color: #2563eb; 
    font-weight: 700; 
} 

.cfn-product .cfn-button, 
.cfn-product .cfn-btn { 
    margin-top: auto; 
    text-align: center; 
} 

.cfn-additional { 
    max-width: 850px; 
    margin: 35px auto 0; 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    padding: 25px 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 25px; 
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05); 
} 

.cfn-additional-content { 
    flex: 1; 
} 

.cfn-additional h3 { 
    margin: 0 0 6px; 
    color: #111827; 
    font-size: 20px; 
} 

.cfn-additional p { 
    margin: 0; 
    color: #6b7280; 
    font-size: 15px; 
} 

.cfn-additional-price { 
    flex-shrink: 0; 
    font-size: 28px; 
    font-weight: 700; 
    color: #111827; 
    white-space: nowrap; 
} 

.cfn-os-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 18px; 
} 

.cfn-os-item, 
.cfn-os { 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    padding: 22px; 
    text-align: center; 
} 

.cfn-os-item strong, 
.cfn-os strong { 
    display: block; 
    color: #111827; 
    font-size: 17px; 
    margin-bottom: 5px; 
} 

.cfn-os-item span, 
.cfn-os span { 
    color: #6b7280; 
    font-size: 14px; 
} 

.cfn-feature-grid, 
.cfn-features { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 22px; 
} 

.cfn-feature { 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    padding: 25px; 
} 

.cfn-feature h3 { 
    margin: 0 0 8px; 
    color: #111827; 
    font-size: 19px; 
} 

.cfn-feature p { 
    margin: 0; 
    color: #6b7280; 
    font-size: 15px; 
} 

.cfn-install, 
.cfn-guide { 
    max-width: 900px; 
    margin: 0 auto; 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    padding: 32px; 
} 

.cfn-install-intro { 
    color: #4b5563; 
    margin-top: 0; 
    margin-bottom: 25px; 
} 

.cfn-install-steps { 
    counter-reset: cfn-step; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.cfn-install-steps li { 
    counter-increment: cfn-step; 
    position: relative; 
    padding-left: 55px; 
    margin-bottom: 24px; 
} 

.cfn-install-steps li::before { 
    content: counter(cfn-step); 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    background: #2563eb; 
    color: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
} 

.cfn-install-steps strong { 
    display: block; 
    color: #111827; 
    margin-bottom: 5px; 
} 

.cfn-code { 
    display: inline-block; 
    background: #f1f5f9; 
    border: 1px solid #e2e8f0; 
    border-radius: 6px; 
    padding: 3px 7px; 
    font-family: Consolas, Monaco, monospace; 
    font-size: 14px; 
    color: #334155; 
} 

.cfn-source { 
    display: inline-block; 
    color: #2563eb; 
    font-weight: 600; 
    word-break: break-all; 
} 

.cfn-note { 
    margin-top: 25px; 
    padding: 16px 18px; 
    background: #eff6ff; 
    border-left: 4px solid #2563eb; 
    border-radius: 6px; 
    color: #374151; 
} 

.cfn-requirements { 
    max-width: 850px; 
    margin: 0 auto; 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    padding: 30px; 
} 

.cfn-requirements ul { 
    margin: 0; 
    padding-left: 22px; 
} 

.cfn-requirements li { 
    margin-bottom: 10px; 
} 

/* MOBILE MEDIA QUERIES */ 

@media (max-width: 1000px) { 
    .cfn-products { 
        grid-template-columns: repeat(2, minmax(0,1fr)); 
    } 

    .cfn-testimonials { 
        grid-template-columns: repeat(2, minmax(0,1fr)); 
    } 

    .cfn-services-grid, 
    .cfn-features { 
        grid-template-columns: repeat(2, minmax(0,1fr)); 
    } 
} 

@media (max-width: 900px) { 
    .cfn-menu-toggle { 
        display: block; 
    } 

    .cfn-nav { 
        display: none; 
        position: absolute; 
        top: 76px; 
        left: 0; 
        right: 0; 
        padding: 20px; 
        background: #0f172a; 
        border-top: 1px solid rgba(255,255,255,.08); 
        flex-direction: column; 
        align-items: stretch; 
        gap: 0; 
    } 

    .cfn-nav.cfn-nav-open { 
        display: flex; 
    } 

    .cfn-nav > a, 
    .cfn-nav-dropdown, 
    .cfn-lang { 
        margin: 0; 
        padding: 10px 5px; 
    } 

    .cfn-nav-dropdown-toggle { 
        padding: 0; 
    } 

    .cfn-dropdown-menu { 
        position: static; 
        width: 100%; 
        min-width: 0; 
        transform: none; 
        margin-top: 10px; 
        box-shadow: none; 
    } 

    .cfn-lang { 
        justify-content: flex-start; 
    } 

    .cfn-nav-button { 
        text-align: center; 
        margin-top: 8px !important; 
    } 

    .cfn-two-column { 
        grid-template-columns: 1fr; 
    } 

    .cfn-two-column-reverse > *:first-child { 
        order: initial; 
    } 

    .cfn-two-column-reverse > *:last-child { 
        order: initial; 
    } 

    .cfn-two-column .cfn-image { 
        height: 320px; 
    } 

    .cfn-hero h1 { 
        font-size: 40px; 
    } 

    .cfn-news-card { 
        grid-template-columns: 1fr; 
    } 

    .cfn-news-image { 
        height: 200px; 
    } 
} 

@media (max-width: 850px) { 
    .cfn-products, 
    .cfn-feature-grid, 
    .cfn-features { 
        grid-template-columns: 1fr; 
    } 

    .cfn-os-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 

    .cfn-additional { 
        flex-direction: column; 
        align-items: flex-start; 
    } 
} 

@media (max-width: 650px) { 
    .cfn-products, 
    .cfn-testimonials, 
    .cfn-services-grid, 
    .cfn-features, 
    .cfn-stats { 
        grid-template-columns: 1fr; 
    } 

    .cfn-hero { 
        padding: 70px 20px; 
    } 

    .cfn-hero h1 { 
        font-size: 32px; 
    } 

    .cfn-hero p { 
        font-size: 17px; 
    } 

    .cfn-section { 
        padding: 50px 0; 
    } 

    .cfn-section-heading h2 { 
        font-size: 28px; 
    } 

    .cfn-card, 
    .cfn-product { 
        padding: 24px 20px; 
    } 

    .cfn-price { 
        font-size: 34px; 
    } 

    .cfn-os-grid { 
        grid-template-columns: 1fr; 
    } 

    .cfn-install, 
    .cfn-guide { 
        padding: 24px 20px; 
    } 

    .cfn-install-steps li { 
        padding-left: 48px; 
    } 

    .cfn-additional { 
        padding: 22px; 
    } 

    .cfn-additional-price { 
        font-size: 25px; 
    } 

}