/* STREAMING_CHUNK: Base Desktop Styles */
.saas-features-wrapper {
padding: 100px 20px;
background-color: #f8fafc;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sf-heading {
text-align: center;
font-weight: 800;
color: #0f172a;
font-size: 48px;
line-height: 1.1;
margin: 0;
}
.sf-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 100%;
max-width: 1200px;
}
.sf-card {
background: #fff;
border-radius: 24px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sf-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0,0,0,0.08);
}
.sf-icon-box {
width: 50px;
height: 50px;
background-color: #e0e7ff;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #4f46e5;
}
.sf-icon-box i {
font-size: 24px;
color: inherit;
}
.sf-icon-box svg {
fill: currentColor;
width: 24px;
height: 24px;
}
.sf-card-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin: 0 0 10px 0;
}
.sf-card-text {
font-size: 14px;
line-height: 1.6;
color: #64748b;
margin: 0;
}

/* STREAMING_CHUNK: Premium Card Styles */
.sf-card-premium {
background: linear-gradient(135deg, #4f46e5, #4338ca);
}
.sf-card-premium .sf-card-title,
.sf-card-premium .sf-card-text {
color: #fff;
}
.sf-icon-premium {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #fff;
}
.sf-icon-premium i {
color: inherit;
}
.sf-icon-premium svg {
fill: currentColor;
}

/* STREAMING_CHUNK: Bottom Banner Styles */
.sf-bottom-banner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50px;
padding: 12px 24px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border: 1px solid #e2e8f0;
gap: 10px;
width: fit-content;
color: #0f172a;
}
.sf-bottom-banner i {
font-size: 18px;
color: inherit;
}
.sf-bottom-banner svg {
fill: currentColor;
width: 18px;
height: 18px;
}
.sf-bottom-banner span {
font-weight: 700;
color: inherit;
}

/* STREAMING_CHUNK: Responsive Tablet */
@media (max-width: 1024px) {
.saas-features-wrapper {
padding: 80px 20px;
gap: 40px;
}
.sf-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.sf-heading {
font-size: 36px;
}
}

/* STREAMING_CHUNK: Responsive Mobile */
@media (max-width: 767px) {
.saas-features-wrapper {
padding: 48px 16px;
gap: 32px;
}
.sf-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.sf-heading {
font-size: 28px;
}
.sf-card {
padding: 24px;
}
.sf-icon-box {
width: 44px;
height: 44px;
margin-bottom: 16px;
}
.sf-icon-box i { font-size: 20px; }
.sf-icon-box svg { width: 20px; height: 20px; }

.sf-card-title {
    font-size: 18px;
}

.sf-bottom-banner {
    padding: 12px 20px;
    font-size: 13px;
    flex-wrap: wrap;
    text-align: center;
    border-radius: 30px;
}


}