/* ===== FEATURES HERO (Solid Gradient Background) ===== */
.features-hero-section{
    position: relative;
    z-index: 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding-top: 140px;
    padding-bottom: 100px;
    overflow: hidden;
    background: linear-gradient(135deg, #060C1C 0%, #0B1730 45%, #12245A 75%, #1D4ED8 100%);
}

.features-hero-section::before{
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(56,189,248,.18);
    filter: blur(120px);
    top: -120px;
    right: -100px;
    z-index: -1;
}
.features-hero-section::after{
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: rgba(29,78,216,.35);
    filter: blur(110px);
    bottom: -100px;
    left: -80px;
    z-index: -1;
}

.features-hero-section .hero-overlay{
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 20% 30%,
        rgba(56,189,248,.08) 0%,
        rgba(0,0,0,0) 55%
    );
    z-index: -1;
}

.features-hero-content{
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    width: 100%;
}
.features-hero-title{
    font-size: clamp(1.7rem, 5vw, 56px);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 25px 0;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
    word-wrap: break-word;
}
.features-hero-title span{
    background: linear-gradient(135deg, var(--accent-color), var(--primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.3));
}
.features-hero-description{
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.8;
    color: #F1F5FB;
    margin-bottom: 35px;
    text-shadow: 0 1px 12px rgba(0,0,0,.3);
}

.hero-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.hero-primary-btn{
    padding: 14px 30px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    font-weight: 600;
    border: none;
    transition: var(--transition);
    white-space: nowrap;
}
.hero-primary-btn:hover{
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 10px 25px rgba(29,78,216,.4);
}
.hero-secondary-btn{
    padding: 14px 25px;
    border-radius: 50px;
    background: transparent;
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}
.hero-secondary-btn:hover{
    background: #fff;
    color: var(--primary-color);
}

body.dark-mode section,
body.dark-mode .features-hero-section{ background: #0F172A !important; }

/* ===== FEATURE HIGHLIGHTS ===== */
.feature-highlights-section{ padding:100px 0; overflow: hidden; }
.feature-highlight-card{
    background:#fff; padding:40px 30px; border-radius:20px; text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08); transition:.35s; height:100%;
    position:relative; overflow:hidden;
}
.feature-highlight-card::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:4px;
    background:linear-gradient(135deg,#1D4ED8,#38BDF8);
    transform:scaleX(0); transition:.35s;
}
.feature-highlight-card:hover{ transform:translateY(-10px); }
.feature-highlight-card:hover::before{ transform:scaleX(1); }
.feature-highlight-icon{
    width:80px; height:80px; margin:0 auto 25px; border-radius:20px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#1D4ED8,#0B1730);
    color:#fff; font-size:34px; transition:.35s; flex-shrink: 0;
}
.feature-highlight-card:hover .feature-highlight-icon{ transform:rotate(8deg) scale(1.08); }
.feature-highlight-card h4{
    font-size: clamp(18px, 2.5vw, 24px); font-weight:600; color:var(--heading-color); margin-bottom:15px;
    word-break: break-word;
}
.feature-highlight-card p{ color:var(--text-color); line-height:1.8; margin-bottom:0; word-break: break-word; }

/* ===== AI SOLUTIONS ===== */
.ai-solutions-section{ padding:100px 0; overflow: hidden; }
.solution-item{ margin-bottom:100px; }
.solution-image img{ width:100%; max-width:520px; display:block; margin:auto; height:auto; }
.solution-content{ max-width:520px; width: 100%; }
.solution-content p{ color:var(--text-color); line-height:1.9; margin:20px 0; }
.solution-list{ list-style:none; padding:0; margin:30px 0 0; }
.solution-list li{
    display:flex; align-items:center; gap:12px; margin-bottom:18px;
    font-size:16px; color:var(--heading-color); font-weight:500;
    word-break: break-word;
}
.solution-list li i{ color:var(--accent-color); font-size:20px; flex-shrink: 0; }

/* ===== WORKFLOW ===== */
.workflow-section{ padding:100px 0; background:#0F172A; overflow: hidden; }
.workflow-section .section-title,
.workflow-section .section-description{ color:#fff; }
.workflow-card{
    background:rgba(255,255,255,.08); backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.1); border-radius:22px;
    padding:40px 30px; text-align:center; position:relative;
    transition:.35s; height:100%;
}
.workflow-card:hover{ transform:translateY(-10px); border-color:#1D4ED8; }
.workflow-icon{
    width:75px; height:75px; margin:0 auto 20px; border-radius:20px;
    background:linear-gradient(135deg,#1D4ED8,#38BDF8);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:30px; flex-shrink: 0;
}
.workflow-number{
    position:absolute; top:20px; right:20px; font-size:34px;
    font-weight:700; color:rgba(255,255,255,.12);
}
.workflow-card h4{ color:#fff; margin-bottom:15px; font-size: clamp(16px, 2.2vw, 20px); word-break: break-word; }
.workflow-card p{ color:#CBD5E1; line-height:1.8; margin-bottom:0; word-break: break-word; }

/* ===== INTEGRATIONS ===== */
.integration-section{ padding:100px 0; background:#F8FAFF; }
.integration-card{
    background:#fff; border-radius:20px; padding:35px 20px; text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08); transition:.35s; height:100%;
    border:1px solid transparent;
}
.integration-card:hover{ transform:translateY(-10px); border-color:#1D4ED8; }
.integration-card i{
    font-size:42px; color:var(--primary-color); margin-bottom:20px; display:block;
}
.integration-card h6{ margin:0; font-size:18px; font-weight:600; color:var(--heading-color); word-break: break-word; }

/* ===== PERFORMANCE STATS ===== */
.performance-section{ padding:100px 0; background:#0F172A; overflow: hidden; }
.performance-card{
    background:rgba(255,255,255,.08); backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12); border-radius:22px;
    padding:40px 25px; transition:.35s; height:100%;
}
.performance-card:hover{ transform:translateY(-10px); border-color:#1D4ED8; }
.performance-card h2{
    display:inline-block; font-size: clamp(1.8rem, 4.5vw, 52px); font-weight:700; color:#fff; margin-bottom:10px;
}
.performance-card span{ font-size: clamp(1.2rem, 2.5vw, 30px); font-weight:700; color:var(--accent-color); }
.performance-card p{
    color:#CBD5E1; margin-top:15px; margin-bottom:0; font-size:16px; line-height:1.7;
}

/* ============================================================
   FULLY RESPONSIVE MEDIA QUERIES (Large -> Small -> Extra Small)
   ============================================================ */

/* 1199px and below */
@media (max-width:1199.98px){
    .features-hero-section{ padding: 130px 0 90px; }
    .solution-content{ text-align: left; }
}

/* Tablets / Small laptops */
@media (max-width:991.98px){
    .features-hero-section{ padding: 120px 0 80px; text-align: center; min-height: 60vh; }
    .features-hero-content{ margin: 0 auto; text-align: center; }
    .hero-buttons{ justify-content: center; }

    .feature-highlights-section{ padding: 70px 0; }
    .feature-highlight-card{ text-align: center; }

    .ai-solutions-section{ padding: 70px 0; }
    .solution-item{ margin-bottom: 60px; }
    .solution-content{ max-width: 100%; text-align: center; margin: 30px auto 0; }
    .solution-list{ display: inline-block; text-align: left; }

    .workflow-section{ padding: 70px 0; }
    .workflow-card{ margin-bottom: 20px; text-align: center; }

    .integration-section{ padding: 70px 0; }
    .integration-card{ margin-bottom: 20px; text-align: center; }

    .performance-section{ padding: 70px 0; }
    .performance-card{ margin-bottom: 20px; text-align: center; }
}

/* Large Mobiles / Small Tablets */
@media (max-width:767.98px){
    .features-hero-section{ padding: 110px 0 60px; min-height: auto; text-align: center; }
    .features-hero-title{ margin: 18px 0; }
    .features-hero-description{ margin-bottom: 28px; }
    .hero-buttons{ flex-direction: column; width: 100%; justify-content: center; align-items: center; }
    .hero-primary-btn, .hero-secondary-btn{ width: 100%; max-width: 320px; justify-content: center; text-align: center; }

    .section-title{ text-align: center; }
    .section-description{ text-align: center; }

    .feature-highlights-section{ padding: 55px 0; }
    .feature-highlight-card{ padding: 32px 22px; text-align: center; }
    .feature-highlight-icon{ width: 68px; height: 68px; font-size: 26px; margin: 0 auto 25px; }

    .ai-solutions-section{ padding: 55px 0; }
    .solution-item{ margin-bottom: 45px; text-align: center; }
    .solution-image img{ margin: 0 auto; }
    .solution-content{ text-align: center; margin: 25px auto 0; }
    .solution-list{ text-align: left; margin: 20px auto 0; }

    .workflow-section{ padding: 55px 0; }
    .workflow-card{ padding: 30px 20px; text-align: center; }
    .workflow-icon{ width: 60px; height: 60px; font-size: 24px; margin: 0 auto 20px; }
    .workflow-number{ font-size: 24px; top: 15px; right: 15px; }

    .integration-section{ padding: 55px 0; }
    .integration-card{ padding: 25px 15px; text-align: center; }

    .performance-section{ padding: 55px 0; }
    .performance-card{ padding: 30px 20px; text-align: center; }
}

/* Small Mobiles */
@media (max-width:575.98px){
    .container{ padding-left: 16px; padding-right: 16px; }

    .features-hero-section{ padding: 100px 0 50px; text-align: center; }
    .features-hero-description{ line-height: 1.7; }
    .hero-primary-btn, .hero-secondary-btn{ padding: 12px 20px; font-size: 14.5px; }

    .section-title{ text-align: center; }
    .section-description{ text-align: center; }

    .feature-highlights-section{ padding: 45px 0; }
    .feature-highlight-card{ padding: 26px 18px; text-align: center; }
    .feature-highlight-icon{ width: 60px; height: 60px; font-size: 22px; border-radius: 16px; margin: 0 auto 20px; }

    .ai-solutions-section{ padding: 45px 0; }
    .solution-item{ margin-bottom: 35px; text-align: center; }
    .solution-content .section-title{ text-align: center; }
    .solution-list{ margin-top: 20px; text-align: left; }
    .solution-list li{ margin-bottom: 12px; }

    .workflow-section{ padding: 45px 0; }
    .workflow-card{ padding: 26px 16px; text-align: center; }
    .workflow-icon{ width: 55px; height: 55px; font-size: 22px; margin: 0 auto 18px; }
    .workflow-number{ font-size: 20px; }

    .integration-section{ padding: 45px 0; }
    .integration-card{ padding: 20px 10px; text-align: center; }

    .performance-section{ padding: 45px 0; }
    .performance-card{ padding: 24px 16px; text-align: center; }
}

/* 480px and below */
@media (max-width:480px){
    .features-hero-section{ padding: 90px 0 45px; text-align: center; }
    .features-hero-title{ font-size: 26px; }
    .features-hero-description{ font-size: 14px; }

    .feature-highlight-card{ padding: 22px 16px; text-align: center; }
    .feature-highlight-icon{ width: 56px; height: 56px; font-size: 20px; margin: 0 auto 16px; }

    .solution-content{ text-align: center; }
    .solution-list{ text-align: left; }

    .workflow-card{ padding: 22px 14px; text-align: center; }
    .integration-card{ padding: 18px 10px; text-align: center; }
    .performance-card{ padding: 20px 14px; text-align: center; }
    .performance-card h2{ font-size: 30px; }
}

/* Extra Small Mobiles (very small screens) */
@media (max-width:400px){
    .features-hero-section{ text-align: center; }
    .features-hero-title{ font-size: 24px; }
    .features-hero-description{ font-size: 13.5px; }
    .hero-primary-btn, .hero-secondary-btn{ padding: 11px 16px; font-size: 13.5px; text-align: center; }

    .feature-highlight-card{ text-align: center; }
    .feature-highlight-icon{ width: 54px; height: 54px; font-size: 20px; margin: 0 auto 14px; }
    .feature-highlight-card h4{ font-size: 16.5px; }

    .solution-content{ text-align: center; }

    .workflow-card{ text-align: center; }
    .workflow-icon{ width: 50px; height: 50px; font-size: 20px; margin: 0 auto 14px; }
    .workflow-card h4{ font-size: 16px; }

    .integration-card{ padding: 16px 8px; text-align: center; }
    .integration-card i{ font-size: 24px; }
    .integration-card h6{ font-size: 13px; }

    .performance-card{ text-align: center; }
    .performance-card h2{ font-size: 28px; }
    .performance-card span{ font-size: 18px; }
}

/* Ultra Small Mobiles (320px and below) */
@media (max-width:359.98px){
    .features-hero-section{ text-align: center; }
    .features-hero-title{ font-size: 21px; }
    .features-hero-description{ font-size: 13px; }
    .section-title{ font-size: 20px; text-align: center; }

    .feature-highlight-card{ padding: 20px 14px; text-align: center; }
    .workflow-card{ padding: 20px 12px; text-align: center; }
    .integration-card{ padding: 14px 6px; text-align: center; }
    .integration-card h6{ font-size: 12px; }
    .performance-card{ text-align: center; }
    .performance-card h2{ font-size: 24px; }
}