/*
  Theme Name: Sapiens IT Lab
  Description: Custom Theme for the Sapiens IT Lab Website
  Author: Sapiens IT Lab
  Version: 1.0
  Template: blocksy
  Text Domain: blocksy
 */
 :root{
    --navy-950:#081226;      /* deepest navy - header/footer bg */
    --navy-900:#0b1f3a;      /* primary brand navy */
    --navy-700:#123a63;      /* secondary navy, cards on dark */
    --blue-600:#1e6fd9;      /* primary accent / CTAs / links */
    --blue-500:#2f8cf0;      /* hover state */
    --cyan-500:#17b8c4;      /* secondary accent - highlights, icons */
    --ink-900:#111827;       /* body text, near-black */
    --ink-600:#5b6b7c;       /* muted/secondary text */
    --ink-300:#c3cbd6;       /* borders, dividers on light */
    --paper-0:#ffffff;
    --paper-50:#f6f9fc;
    --paper-100:#eef2f8;

    --font-display:'Poppins', sans-serif;
    --font-body:'Inter', sans-serif;

    --radius-md:10px;
    --radius-lg:16px;
    --container:1180px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink-900);
    background:var(--paper-0);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}
  h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.15; color:var(--navy-900);}
  section{padding:88px 0;}
  .eyebrow{
    display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--blue-600); margin-bottom:14px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
    font-weight:600; font-size:15.5px; padding:14px 26px; border-radius:8px;
    cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{ background:var(--blue-600); color:#fff; box-shadow:0 8px 20px -6px rgba(30,111,217,.55);}
  .btn-primary:hover{ background:var(--blue-500); transform:translateY(-1px);}
  .btn-ghost{ background:transparent; color:var(--paper-0); border:1.5px solid rgba(255,255,255,.4);}
  .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08);}
  .btn-outline-dark{ background:transparent; color:var(--navy-900); border:1.5px solid var(--ink-300);}
  .btn-outline-dark:hover{ border-color:var(--blue-600); color:var(--blue-600);}

  header{
    position:sticky; top:0; z-index:50;
    background:rgba(8,18,38,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
  .logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff;}
  .logo-mark{
    width:36px; height:36px; border-radius:9px; flex-shrink:0;
    background:linear-gradient(135deg, var(--blue-600), var(--cyan-500));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px;
  }
  .nav-links{ display:flex; align-items:center; gap:32px;}
  .nav-links a{ font-size:14.5px; font-weight:500; color:#dbe3ef; transition:color .15s;}
  .nav-links a:hover{ color:#fff;}
  .nav-cta{ display:flex; align-items:center; gap:14px;}
  .nav-phone{ font-size:14px; font-weight:600; color:#fff;}
  .nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}

  .hero{
    background:radial-gradient(1100px 500px at 15% -10%, #12356a 0%, var(--navy-900) 45%, var(--navy-950) 100%);
    color:#fff; padding:96px 0 110px; position:relative; overflow:hidden;
  }
  .hero::after{
    content:''; position:absolute; right:-120px; top:-80px; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(23,184,196,.18), transparent 70%);
  }
  .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; z-index:2;}
  .hero h1{ color:#fff; font-size:44px; letter-spacing:-.01em; margin-bottom:20px;}
  .hero p.lead{ font-size:18px; color:#c9d5e6; max-width:520px; margin-bottom:32px;}
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
  .trust-row{ display:flex; flex-wrap:wrap; gap:24px; font-size:13.5px; color:#a9bdd6;}
  .trust-row span{ display:flex; align-items:center; gap:8px;}
  .trust-row span::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan-500);}

  .hero-panel{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg);
    padding:32px; backdrop-filter:blur(6px);
  }
  .hero-panel h3{ color:#fff; font-size:16px; margin-bottom:18px; font-weight:600;}
  .stack-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:14.5px; color:#dbe3ef;}
  .stack-row:last-child{ border-bottom:none;}
  .stack-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan-500); margin-right:10px; display:inline-block;}

  .why{ background:var(--paper-50);}
  .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .why h2{ font-size:32px; margin-bottom:18px;}
  .why > .wrap > .why-grid > div:first-child p{ color:var(--ink-600); font-size:16px; margin-bottom:16px;}
  .reason-list{ display:flex; flex-direction:column; gap:22px;}
  .reason{ display:flex; gap:16px;}
  .reason-num{
    flex-shrink:0; width:38px; height:38px; border-radius:10px; background:var(--navy-900); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px;
  }
  .reason h4{ font-size:16.5px; margin-bottom:4px;}
  .reason p{ font-size:14.5px; color:var(--ink-600);}

  .section-head{ text-align:center; max-width:640px; margin:0 auto 52px;}
  .section-head h2{ font-size:32px; margin-bottom:12px;}
  .section-head p{ color:var(--ink-600); font-size:16px;}
  .industry-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
  .industry-card{
    background:var(--paper-0); border:1px solid var(--paper-100); border-radius:var(--radius-md);
    padding:26px 20px; text-align:left; transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  }
  .industry-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(11,31,58,.18); border-color:var(--blue-600);}
  .industry-icon{ width:42px; height:42px; border-radius:10px; background:var(--paper-100); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--blue-600);}
  .industry-card h4{ font-size:16px; margin-bottom:8px;}
  .industry-card p{ font-size:13.5px; color:var(--ink-600); margin-bottom:14px;}
  .card-link{ font-size:13.5px; font-weight:600; color:var(--blue-600); display:inline-flex; align-items:center; gap:5px;}
  .card-link svg{ width:14px; height:14px; transition:transform .15s;}
  .industry-card:hover .card-link svg{ transform:translateX(3px);}

  .services{ background:var(--paper-50);}
  .services-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:44px;}
  .tab-pill{ font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px; background:var(--paper-0); border:1px solid var(--paper-100); color:var(--ink-600);}
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .service-card{
    background:var(--paper-0); border:1px solid var(--paper-100); border-radius:var(--radius-md); padding:28px;
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .service-card:hover{ box-shadow:0 18px 34px -18px rgba(11,31,58,.22); transform:translateY(-3px);}
  .service-icon{
    width:46px; height:46px; border-radius:12px; margin-bottom:18px;
    background:linear-gradient(135deg, var(--blue-600), var(--cyan-500));
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .service-card h4{ font-size:16.5px; margin-bottom:8px;}
  .service-card p{ font-size:14px; color:var(--ink-600); margin-bottom:14px;}

  .process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
  .process-row::before{
    content:''; position:absolute; top:24px; left:12%; right:12%; height:1px; background:var(--ink-300); z-index:0;
  }
  .process-step{ position:relative; z-index:1; text-align:center; padding:0 16px;}
  .process-badge{
    width:48px; height:48px; border-radius:50%; background:var(--navy-900); color:#fff; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  }
  .process-step h4{ font-size:16px; margin-bottom:8px;}
  .process-step p{ font-size:13.5px; color:var(--ink-600);}

  .testimonials{ background:var(--navy-900); color:#fff;}
  .testimonials .section-head h2{ color:#fff;}
  .testimonials .section-head p{ color:#a9bdd6;}
  .t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .t-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md); padding:26px;}
  .t-quote{ font-size:14.5px; color:#dbe3ef; margin-bottom:20px; font-style:italic;}
  .t-name{ font-size:14px; font-weight:700; color:#fff;}
  .t-role{ font-size:12.5px; color:#8fa5c2;}

  .faq-item{ border-bottom:1px solid var(--paper-100); padding:22px 0;}
  .faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:16px; color:var(--navy-900);}
  .faq-q svg{ width:18px; height:18px; flex-shrink:0; transition:transform .2s; color:var(--blue-600);}
  .faq-item.open .faq-q svg{ transform:rotate(45deg);}
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-item.open .faq-a{ max-height:220px;}
  .faq-a p{ padding-top:14px; font-size:14.5px; color:var(--ink-600);}

  .final-cta{
    background:linear-gradient(120deg, var(--navy-900), #0e2a52); color:#fff; text-align:center; border-radius:var(--radius-lg);
    padding:64px 40px; margin:0 24px;
  }
  .final-cta h2{ color:#fff; font-size:30px; margin-bottom:12px;}
  .final-cta p{ color:#c9d5e6; margin-bottom:30px; font-size:16px;}
  .final-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  footer{ background:var(--navy-950); color:#a9bdd6; padding:64px 0 28px; font-size:14px;}
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:44px;}
  .footer-col h5{ color:#fff; font-size:14px; margin-bottom:16px; font-weight:600;}
  .footer-col ul li{ margin-bottom:10px;}
  .footer-col ul li a:hover{ color:#fff;}
  .footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:#7d90ab;}

  .proof-strip{background:var(--paper-0); padding:28px 0; border-bottom:1px solid var(--paper-100);}
  .proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .proof-item{text-align:center; padding:18px; border-right:1px solid var(--paper-100);}
  .proof-item:last-child{border-right:none;}
  .proof-item strong{display:block; font-family:var(--font-display); font-size:24px; color:var(--navy-900);}
  .proof-item span{font-size:13.5px; color:var(--ink-600);}
  .featured-solution{background:var(--navy-900); color:#fff;}
  .featured-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  .featured-solution h2,.featured-solution h3{color:#fff;}
  .featured-solution p{color:#c9d5e6;}
  .feature-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0;}
  .feature-list li{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:13px 14px; font-size:14px; color:#e8eef7;}
  .dashboard-mock{background:#fff; border-radius:16px; padding:20px; box-shadow:0 24px 50px rgba(0,0,0,.25);}
  .mock-bar{height:12px; width:42%; background:var(--paper-100); border-radius:8px; margin-bottom:18px;}
  .mock-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
  .mock-card{padding:18px; background:var(--paper-50); border:1px solid var(--paper-100); border-radius:10px;}
  .mock-card strong{display:block; color:var(--navy-900); font-size:20px;}
  .mock-card span{font-size:12px; color:var(--ink-600);}
  .case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .case-card{border:1px solid var(--paper-100); border-radius:var(--radius-md); padding:28px; background:#fff;}
  .case-card .case-label{font-size:12px; font-weight:700; color:var(--blue-600); text-transform:uppercase; letter-spacing:.07em;}
  .case-card h3{font-size:19px; margin:10px 0;}
  .case-card p{font-size:14px; color:var(--ink-600); margin-bottom:12px;}
  .case-result{padding-top:14px; border-top:1px solid var(--paper-100); font-weight:600; color:var(--navy-900);}
  @media(max-width:900px){.proof-grid{grid-template-columns:repeat(2,1fr)} .featured-grid{grid-template-columns:1fr} .case-grid{grid-template-columns:1fr}}
  @media(max-width:560px){.proof-grid{grid-template-columns:1fr}.feature-list{grid-template-columns:1fr}.proof-item{border-right:none;border-bottom:1px solid var(--paper-100)}}

  @media (max-width:900px){
    .nav-links{ display:none; }
    .nav-toggle{ display:block; }
    .hero-grid{ grid-template-columns:1fr;}
    .hero h1{ font-size:32px;}
    .why-grid{ grid-template-columns:1fr; gap:36px;}
    .industry-grid{ grid-template-columns:repeat(2,1fr);}
    .service-grid{ grid-template-columns:repeat(2,1fr);}
    .t-grid{ grid-template-columns:1fr;}
    .process-row{ grid-template-columns:1fr; gap:36px;}
    .process-row::before{ display:none;}
    .footer-grid{ grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .industry-grid{ grid-template-columns:1fr;}
    .service-grid{ grid-template-columns:1fr;}
    .footer-grid{ grid-template-columns:1fr;}
    section{ padding:56px 0;}
  }
  
  /* Floating Mobile WhatsApp Bar */
.mobile-wa-bar {
  display: none; /* Hidden on desktop by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(8, 18, 38, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.25);
}

.wa-info {
  display: flex;
  flex-direction: column;
}

.wa-label {
  font-size: 12px;
  color: #a9bdd6;
  font-weight: 500;
}

.wa-status {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #25d366; /* WhatsApp Green */
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #25d366;
}

.btn-wa-float {
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-wa-float:active {
  transform: scale(0.96);
  background: #20ba5a;
}

/* Show only on mobile screens (up to 900px wide) */
@media (max-width: 900px) {
  .mobile-wa-bar {
    display: flex;
  }
  
  /* Adds bottom padding so the floating bar doesn't cover footer text */
  footer {
    padding-bottom: 80px;
  }
}

@media (max-width: 900px) {
    .nav-links.mobile-open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 16px 24px;
        background: var(--navy-950);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.2);
    }

    .nav-links.mobile-open a {
        display: block;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav {
        position: relative;
    }
}

/* Force strict layout isolation over active theme defaults */
body.page-template-template-custom-home {
  background-color: #081226 !important;
  color: #111827;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-template-template-custom-home .wrap {
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Fix text contrast over dark panels */
body.page-template-template-custom-home .hero h1,
body.page-template-template-custom-home .featured-solution h2,
body.page-template-template-custom-home .testimonials h2 {
  color: #ffffff !important;
}