/* =========================================
   HOMEPAGE REDESIGN — PREMIUM SECTIONS
   ========================================= */

/* --- Shared Components --- */
.hp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
.hp-eyebrow-light{color:var(--accent-cyan)}
.hp-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px rgba(29,79,159,.4)}
.hp-dot-light{background:var(--accent-cyan);box-shadow:0 0 8px rgba(0,210,255,.5)}
.hp-section-heading{font-size:42px;font-weight:800;line-height:1.15;margin-bottom:20px;color:var(--dark);letter-spacing:-1px}
.hp-gradient-text{background:linear-gradient(135deg,var(--primary),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hp-section-header{margin-bottom:50px}
.hp-section-sub{font-size:16px;color:var(--gray);max-width:650px;margin:0 auto;line-height:1.7}
.hp-btn-primary{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;text-decoration:none;font-size:15px;transition:all .3s ease;border:2px solid transparent;cursor:pointer}
.hp-btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(29,79,159,.3)}
.hp-svc-link{font-size:14px;font-weight:600;color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .3s}
.hp-svc-link:hover{color:var(--accent-cyan);gap:10px}

/* --- Company Overview --- */
.hp-overview{padding:70px 0;background:linear-gradient(180deg,#f8f9fa,#fff);position:relative}
.hp-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.hp-overview-text .hp-lead{font-size:17px;color:var(--dark);line-height:1.75;margin-bottom:16px;font-weight:500}
.hp-overview-text .hp-body{font-size:15px;color:var(--gray);line-height:1.8;margin-bottom:32px}
.hp-img-frame{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.hp-img-frame img{width:100%;height:450px;object-fit:cover;transition:transform .6s}
.hp-img-frame:hover img{transform:scale(1.03)}
.hp-img-badge{position:absolute;bottom:24px;right:24px;background:rgba(29,79,159,.92);color:#fff;padding:14px 22px;border-radius:14px;display:flex;flex-direction:column;align-items:center;backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.hp-img-badge span{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent-cyan)}
.hp-img-badge strong{font-size:34px;font-weight:800;line-height:1}

/* --- Hero Stats Bar (inside slider bottom) --- */
.hp-hero-stats{position:absolute;bottom:0;left:0;right:0;z-index:20;padding:0 24px 24px;background:transparent}
.hp-fstats-bar{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:0;padding:20px 32px;border-top:1px solid rgba(255,255,255,.08);background:transparent}
.hp-fstat{display:flex;flex-direction:column;align-items:center;text-align:center}
.hp-fstat-num-row{display:flex;align-items:baseline;gap:2px}
.hp-fstat-num-row .hp-stat-num{font-size:36px;font-weight:800;color:#fff;line-height:1}
.hp-fstat-num-row .hp-stat-plus{font-size:24px;font-weight:700;color:var(--accent-cyan)}
.hp-fstat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.4);margin-top:6px}
.hp-fstat-divider{width:1px;height:44px;background:rgba(255,255,255,.08)}

/* --- Services Dark Premium --- */
.hp-svc-section{padding:70px 0;background:linear-gradient(160deg,#040c1e,#0d2255 40%,#091a42 80%,#061432);position:relative;overflow:hidden}
@keyframes cinematicZoom{0%{transform:scale(1)}100%{transform:scale(1.15)}}
.hp-svc-section::before{content:'';position:absolute;inset:0;background-image:url('images/What We Do.png');background-size:cover;background-position:center;opacity:0.1;pointer-events:none;z-index:1;animation:cinematicZoom 25s ease-in-out infinite alternate}
.hp-svc-bg-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(0,210,255,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:1}
.hp-svc-showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2}
.hp-svc-item{padding:36px 28px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);transition:all .4s ease;position:relative;overflow:hidden;text-align:center}
.hp-svc-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:3px;background:linear-gradient(90deg,var(--accent-cyan),var(--primary));border-radius:0 0 3px 3px;transition:all .4s ease;opacity:0}
.hp-svc-item:hover{transform:translateY(-8px);background:rgba(255,255,255,.08);border-color:rgba(0,210,255,.3);box-shadow:0 20px 50px rgba(0,210,255,.1)}
.hp-svc-item:hover::before{width:100%;opacity:1}
.hp-svc-step{font-size:52px;font-weight:900;background:linear-gradient(135deg,rgba(0,210,255,.15),rgba(29,79,159,.1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:16px}
.hp-svc-icon-v2{width:76px;height:76px;border-radius:18px;background:linear-gradient(135deg,rgba(0,210,255,.12),rgba(29,79,159,.15));border:1px solid rgba(0,210,255,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;transition:all .4s}
.hp-svc-icon-v2 i{font-size:32px;color:var(--accent-cyan);transition:transform .3s}
.hp-svc-item:hover .hp-svc-icon-v2{background:linear-gradient(135deg,rgba(0,210,255,.2),rgba(29,79,159,.25));transform:scale(1.1)}
.hp-svc-item:hover .hp-svc-icon-v2 i{transform:rotate(5deg) scale(1.1)}
.hp-svc-item h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:10px}
.hp-svc-item p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:16px}

/* --- What We Do Best — Horizontal Cards --- */
.hp-best-section{padding:70px 0;background:#fff}
.hp-best-grid{display:flex;flex-direction:column;gap:28px}
.hp-best-card{display:grid;grid-template-columns:360px 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #eef2f7;box-shadow:0 4px 24px rgba(0,0,0,.05);transition:all .4s}
.hp-best-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(29,79,159,.12)}
.hp-best-img{overflow:hidden;width:360px;height:260px}
.hp-best-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.hp-best-card:hover .hp-best-img img{transform:scale(1.05)}
.hp-best-body{padding:36px;position:relative;display:flex;flex-direction:column;justify-content:center}
.hp-best-num{position:absolute;top:20px;right:28px;font-size:72px;font-weight:900;color:rgba(29,79,159,.06);line-height:1;font-family:'Montserrat',sans-serif}
.hp-best-body h3{font-size:22px;font-weight:700;color:var(--dark);margin-bottom:14px}
.hp-best-body ul{list-style:none;padding:0;margin:0 0 20px}
.hp-best-body li{font-size:14px;color:var(--gray);line-height:1.5;padding:5px 0 5px 20px;position:relative}
.hp-best-body li::before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent-cyan));box-shadow:0 0 6px rgba(0,210,255,.3)}
.hp-feat-tag{display:inline-block;padding:4px 14px;border-radius:20px;background:rgba(29,79,159,.08);border:1px solid rgba(29,79,159,.15);color:var(--primary);font-size:11px;font-weight:600;letter-spacing:.5px;margin-bottom:14px;width:fit-content}

/* --- Portfolio --- */
.hp-portfolio{padding:70px 0;background:var(--light-bg)}
.hp-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hp-port-card{border-radius:20px;overflow:hidden;background:#fff;border:1px solid #eef2f7;transition:all .4s;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.hp-port-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(29,79,159,.1)}
.hp-port-img{overflow:hidden;height:220px}
.hp-port-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hp-port-card:hover .hp-port-img img{transform:scale(1.05)}
.hp-port-body{padding:28px}
.hp-port-tags{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.hp-port-tags span{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;background:#eef4ff;color:var(--primary);letter-spacing:.3px}
.hp-port-body h3{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:10px}
.hp-port-body p{font-size:14px;color:var(--gray);line-height:1.7;margin-bottom:16px}

/* --- Blog --- */
.hp-blog{padding:70px 0;background:#fff}
.hp-blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hp-blog-card{display:grid;grid-template-columns:180px 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #eef2f7;transition:all .4s;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.hp-blog-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(29,79,159,.1)}
.hp-blog-img{position:relative;overflow:hidden;min-height:200px}
.hp-blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block}
.hp-blog-card:hover .hp-blog-img img{transform:scale(1.05)}
.hp-blog-date{position:absolute;bottom:10px;left:10px;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px}
.hp-blog-body{padding:24px;display:flex;flex-direction:column;justify-content:center}
.hp-blog-body h3{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:10px;line-height:1.4}
.hp-blog-body p{font-size:13px;color:var(--gray);line-height:1.7;margin-bottom:16px}

/* --- Contact --- */
.hp-contact{padding:70px 0;background:var(--light-bg)}
.hp-contact-card{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.1)}
.hp-contact-info{background:linear-gradient(140deg,#0d2255,var(--primary));padding:50px;color:#fff}
.hp-contact-info h2{font-size:36px;font-weight:800;margin-bottom:16px}
.hp-contact-info>p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:32px}
.hp-contact-details{display:flex;flex-direction:column;gap:18px}
.hp-contact-row{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.8)}
.hp-contact-row i{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--accent-cyan);font-size:16px}
.hp-contact-form{background:#fff;padding:50px}
.hp-form-group{margin-bottom:20px}
.hp-form-group label{display:block;font-size:13px;font-weight:600;color:var(--dark);margin-bottom:6px;letter-spacing:.3px}
.hp-form-group input,.hp-form-group textarea{width:100%;padding:14px 18px;border:2px solid #e8eef6;border-radius:12px;font-family:inherit;font-size:15px;color:var(--dark);transition:all .3s;background:#f8f9fa;outline:none}
.hp-form-group input:focus,.hp-form-group textarea:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(29,79,159,.1)}
.hp-form-group textarea{min-height:120px;resize:vertical}

/* --- Scroll Animations --- */
.hp-animate{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.hp-animate.hp-visible{opacity:1;transform:translateY(0)}

/* --- Responsive --- */
@media(max-width:1024px){
    .hp-overview-grid,.hp-contact-card{grid-template-columns:1fr}
    .hp-svc-showcase{grid-template-columns:1fr 1fr}
    .hp-portfolio-grid{grid-template-columns:1fr 1fr}
    .hp-section-heading{font-size:34px}
    .hp-best-card{grid-template-columns:300px 1fr}
    .hp-blog-card{grid-template-columns:160px 1fr}
    .hp-fstats-bar{grid-template-columns:1fr auto 1fr;padding:28px 32px;gap:20px}
    .hp-fstat-divider:nth-child(4){display:none}
    .hp-fstat:nth-child(7),.hp-fstat:nth-child(9){grid-column:auto}
}
@media(max-width:768px){
    .hp-send-btn { width: auto !important; }
    .hp-svc-showcase,.hp-portfolio-grid,.hp-blog-grid{grid-template-columns:1fr}
    .hp-section-heading{font-size:28px}
    .hp-overview,.hp-svc-section,.hp-best-section,.hp-portfolio,.hp-blog,.hp-contact{padding:50px 0}
    .hp-contact-info,.hp-contact-form{padding:32px}
    .hp-img-frame img{height:320px}
    .hp-best-card{grid-template-columns:1fr}
    .hp-best-img{height:220px;min-height:auto}
    .hp-blog-card{grid-template-columns:1fr}
    .hp-blog-img{height:200px;min-height:200px}
    .hp-fstat-data .hp-stat-num{font-size:28px}

    /* Stats bar: single line marquee scrolling right-to-left */
    .hp-hero-stats { overflow: hidden; padding: 0 0 6px; }
    .hp-fstats-bar {
        display: flex !important;
        grid-template-columns: unset !important;
        width: max-content;
        gap: 0;
        padding: 14px 0;
        border-top: 1px solid rgba(255,255,255,.1);
        animation: statsMarquee 16s linear infinite;
    }
    .hp-fstat { padding: 0 28px; flex-shrink: 0; }
    .hp-fstat-divider {
        display: flex !important;
        width: 1px;
        height: 44px;
        background: rgba(255,255,255,.08);
        align-self: center;
        flex-shrink: 0;
    }
    .hp-fstat-num-row .hp-stat-num { font-size: 28px; }
    .hp-fstat-num-row .hp-stat-plus { font-size: 18px; }
    @keyframes statsMarquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}

/* ==================================================
   CLEAN PREMIUM SOLUTIONS — WHITE BACKGROUND
   ================================================== */
.clean-solutions {
    padding: 70px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.clean-solutions::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(29, 79, 159, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.cs-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}
.cs-header .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 18px;
}
.cs-header .eyebrow::before,
.cs-header .eyebrow::after {
    content: '';
    display: block;
    width: 36px; height: 1px;
    background: linear-gradient(to right, transparent, var(--primary));
    opacity: 0.5;
}
.cs-header .eyebrow::after {
    background: linear-gradient(to left, transparent, var(--primary));
}
.cs-header h2 {
    font-size: 46px;
    font-weight: 900;
    color: #121829;
    letter-spacing: -1.5px;
}
.cs-header h2 span {
    background: linear-gradient(135deg, #00d2ff, #1d4f9f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
}

.cs-card {
    background: #ffffff;
    border-radius: 30px;
    position: relative;
    box-shadow: 0 10px 40px rgba(18, 24, 41, 0.04), 
                inset 0 0 0 1px rgba(18, 24, 41, 0.05);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.cs-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(29, 79, 159, 0.1),
                inset 0 0 0 2px rgba(0, 210, 255, 0.2);
}

.cs-img-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid rgba(18, 24, 41, 0.05);
}

.cs-card-body {
    padding: 35px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

.cs-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.cs-card:hover .cs-img-wrapper img {
    transform: scale(1.08);
}

.cs-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1d4f9f;
    background: #eef4ff;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
    align-self: flex-start;
    position: relative;
    z-index: 2;
}

.cs-card h3 {
    font-size: 24px;
    font-weight: 800;
    color: #121829;
    margin-bottom: 16px;
    line-height: 1.3;
    position: relative;
    z-index: 2;
}

.cs-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.cs-card ul li {
    font-size: 15px;
    color: #5a667b;
    padding-left: 24px;
    position: relative;
    margin-bottom: 12px;
    line-height: 1.5;
}

.cs-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d2ff;
}

.cs-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1d4f9f;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

.cs-cta i {
    transition: transform 0.3s ease;
}

.cs-card:hover .cs-cta {
    color: #00d2ff;
}

.cs-card:hover .cs-cta i {
    transform: translateX(6px);
}

.cs-num {
    position: absolute;
    bottom: -5px;
    right: 20px;
    font-size: 80px;
    font-weight: 900;
    color: rgba(29, 79, 159, 0.04);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    transition: color 0.5s ease;
    font-family: 'Montserrat', sans-serif;
}

.cs-card:hover .cs-num {
    color: rgba(0, 210, 255, 0.08);
}
@media (max-width: 1024px) {
    .cs-grid {
        grid-template-columns: 1fr;
    }
}