.hero-section{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:5rem 0 4rem;position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;top:-80px;right:-80px;width:400px;height:400px;background:rgba(79,70,229,.15);border-radius:50%}
.hero-section::after{content:'';position:absolute;bottom:-60px;left:-60px;width:300px;height:300px;background:rgba(16,185,129,.1);border-radius:50%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:.35rem 1rem;font-size:.8rem;font-weight:500;margin-bottom:1.25rem;backdrop-filter:blur(8px)}
.hero-title{font-size:2.4rem;font-weight:800;line-height:1.2;margin-bottom:1rem;position:relative;z-index:1}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.75);max-width:560px;line-height:1.6;margin-bottom:2rem}
.btn-hero-primary{background:#4f46e5;color:#fff;border:none;padding:.75rem 1.75rem;border-radius:50px;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;transition:.25s}
.btn-hero-primary:hover{background:#4338ca;color:#fff;transform:translateY(-2px)}
.btn-hero-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);padding:.75rem 1.75rem;border-radius:50px;font-weight:500;font-size:.95rem;text-decoration:none;transition:.25s}
.btn-hero-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

.section-tag{display:inline-block;background:#ede9fe;color:#6d28d9;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .85rem;border-radius:50px;margin-bottom:.75rem}
.section-title{font-size:1.75rem;font-weight:700;color:#1a1a2e;margin-bottom:1rem}
.overview-text{font-size:1rem;color:#4b5563;line-height:1.8;max-width:760px; margin-bottom:15px;}

.feature-card{background:#fff;border-radius:16px;border:1px solid #e8eaf0;padding:1.75rem;height:100%;transition:.3s ease}
.feature-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.08)}
.icon-badge{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.25rem}
.icon-badge.purple{background:#ede9fe;color:#6d28d9}
.icon-badge.green{background:#d1fae5;color:#065f46}
.icon-badge.amber{background:#fef3c7;color:#92400e}
.icon-badge.red{background:#fee2e2;color:#991b1b}
.feature-card h5{font-size:1rem;font-weight:700;color:#1a1a2e;margin-bottom:1rem}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;font-size:.9rem;color:#374151;border-bottom:1px solid #f3f4f6}
.check-list li:last-child{border-bottom:none}
.check-list li i{color:#10b981;font-size:1rem;flex-shrink:0;margin-top:1px}
.arrow-list{list-style:none;padding:0;margin:0}
.arrow-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;font-size:.9rem;color:#374151;border-bottom:1px solid #f3f4f6}
.arrow-list li:last-child{border-bottom:none}
.arrow-list li i{color:#4f46e5;font-size:1rem}
.main-section{padding:4rem 0}
.row{
    display:flex;
    flex-wrap:wrap;
    margin-right:-12px;
    margin-left:-12px;
}

/* Columns */
[class*="col-"]{
    padding-right:12px;
    padding-left:12px;
    box-sizing:border-box;
    margin-bottom:15px;
}

/* Desktop (≥768px) */
@media (min-width:768px){

    .col-md-3{
        flex:0 0 25%;
        max-width:25%;
    }

    .col-md-4{
        flex:0 0 33.333333%;
        max-width:33.333333%;
    }

    .col-md-6{
        flex:0 0 50%;
        max-width:50%;
    }

    .col-md-12{
        flex:0 0 100%;
        max-width:100%;
    }
}

/* Mobile */
@media (max-width:767.98px){

    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-12{
        flex:0 0 100%;
        max-width:100%;
    }
    .main-section{padding:25px;}
    .feature-card {
  padding: 17px;}
  .check-list li{font-size: 14px;}
  .section-title {
  font-size: 23px;}
  .overview-text {
  font-size: 15px;}

}
.bg-light{background:#f6f6f6;}
 .icon-circle{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.card{
    transition:.3s ease;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 1rem 2rem rgba(0,0,0,.12)!important;
}

.card ul li{
    padding:8px 0;
    font-size:.95rem;
}

.card h5{
    color:#1f2937;
}