:root{ 
    --bg:#ffffff;
    --text:#1a1a1a; 
    --muted:#4a5568; 
    --card:#f8f9fb; 
    --accent1:#007bff; 
    --accent2:#00c2ff; 
    --glass:#f2f4f7; 
    --radius:14px; 
    --maxw:1200px; 
    --shadow:0 6px 24px rgba(0,0,0,0.08); } 
    
    *{box-sizing:border-box}
     html,body{height:100%}
     body{
         margin:0; 
         font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
         background:var(--bg);
         color:var(--text);
         -webkit-font-smoothing:antialiased;
         -moz-osx-font-smoothing:grayscale; 
         line-height:1.45; } 
         
         .container{max-width:var(--maxw);
            margin:0 auto;padding:28px;} 
            
  /* NAV */
     header{
        position:sticky;
        top:12px;
        z-index:50;      
        backdrop-filter:blur(8px); }
                 
     .nav{
         display:flex;
         align-items:center;
         justify-content:space-between; 
         background:#ffffffee;
         padding:10px 18px;
         border-radius:12px; 
         box-shadow:var(--shadow);
         border:1px solid #e5e7eb; } 
                      
     .brand{
         display:flex;
         align-items:center;
         gap:12px}
                    
     .logo{
         width:44px;
         height:44px;
         border-radius:10px; 
         background:linear-gradient(135deg,var(--accent1),var(--accent2)); 
         display:flex;
         align-items:center;
         justify-content:center;
         font-weight:700;
         color:#fff;
         font-family:Poppins; 
         box-shadow: 0 8px 20px rgba(0,130,255,0.2); } 
                    
     .brand h1{
         font-size:16px;
         margin:0;color:var(--text)} 
      nav ul{
         display:flex;
         gap:14px;
         list-style:none;
         padding:0;
         margin:0;
         align-items:center} 
     nav a{
         color:var(--muted);
         text-decoration:none;
         font-weight:600;
         font-size:14px;
         padding:8px 10px;
         border-radius:8px} 
     nav a:hover{
         color:var(--text);
         background:#eef2f6}
                    
     .cta-btn{ 
         background: linear-gradient(90deg,var(--accent1),var(--accent2)); 
         padding:10px 14px;
         border-radius:10px;
         color:white;
         font-weight:700;
         text-decoration:none } 
                        
 /* HERO */ 
     .hero{
         display:grid;
         grid-template-columns:1fr 480px;
         gap:28px;
         align-items:center;
         margin-top:30px; } 
     .hero-left h2{
         font-size:34px;
         margin:0 0 12px 0;
         line-height:1.05;
         font-weight:800} 
     .hero-left p{
         color:var(--muted);
         margin:0 0 18px 0;
         font-size:16px} 
     .pill{
         display:inline-block; 
         padding:6px 10px;
         border-radius:999px;
         background:#eef2f7; 
         color:var(--muted);
         font-weight:600;
         font-size:13px }
     .kpis{
         display:flex;
         gap:14px;
         margin-top:10px} 
     .kpi{ 
         background:#f1f4f8; 
         padding:12px;
         border-radius:12px; 
         min-width:120px;
         text-align:center; 
         border:1px solid #e2e6ea }
     .kpi strong{
         display:block;
         font-size:18px;
         color:var(--text)} 
     .kpi span{
         color:var(--muted);
         font-size:13px} 
                             
     .hero-right{
         background:white; 
         padding:18px;
         border-radius:12px; 
         border:1px solid #e6e9ed;
         box-shadow:var(--shadow); } 
                        
     .flow-diagram{
         display:flex;
         flex-direction:column;
         gap:12px} 
     .flow-step{ 
         display:flex;
         align-items:center;
         gap:12px; 
         padding:12px;
         border-radius:10px; 
         background:#f7f9fc; 
         border:1px solid #e7e9ef; } 
                        
     .dot{ 
         width:40px;
         height:40px;
         border-radius:8px;
         background:#e9f5ff; 
         color:#0066cc; 
         display:flex;
         align-items:center;
         justify-content:center;
         font-weight:700 }  

 /*about page */
      .about-full {
        width: 100%;
        max-width: none;
        padding: 60px 80px;
        box-sizing: border-box;
      }   
       
      /* =========================
   ABOUT PAGE – ENTERPRISE
========================= */

.about-hero {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  padding: 72px;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 52px;
}

.about-hero h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 14px;
}

.about-hero p {
  font-size: 18px;
  max-width: 900px;
  color: var(--muted);
}

.about-section {
  background: #ffffff;
  padding: 52px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  margin-bottom: 44px;
}

.about-section h3 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
}

.about-section h3::after {
  content: "";
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  display: block;
  margin-top: 10px;
  border-radius: 3px;
}

.about-section p,
.about-section ul {
  max-width: 900px;
}

.about-section ul li {
  margin-bottom: 8px;
}

.emphasis {
  font-size: 18px;
  font-weight: 600;
  margin-top: 18px;
}

/* What We Do cards */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.about-card {
  background: #f8fafc;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  font-weight: 600;
  transition: all 0.3s ease;
}

.about-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
}

/* Vision */
.about-section.vision {
  background: linear-gradient(135deg, #eef7ff, #f8fafc);
}

/* Closing */
.about-closing {
  background: linear-gradient(135deg, #eef7ff, #f8fafc);
  padding: 64px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid #dbeafe;
}

.about-closing h3 {
  font-size: 34px;
  margin-bottom: 10px;
}

.about-closing p {
  font-size: 18px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .about-hero,
  .about-section,
  .about-closing {
    padding: 32px 22px;
  }

  .about-hero h2 {
    font-size: 30px;
  }

  .about-section h3 {
    font-size: 24px;
  }
}

/* usecase page */
  /* Full-width pages (About, Use Cases) */
.page-full {
  width: 100%;
  max-width: none;
  padding: 60px 80px;
  box-sizing: border-box;
}

/* =========================
   USE CASES – PRESENTATION
========================= */

.usecase-hero {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  padding: 64px;
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 48px;
}

.usecase-hero h2 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 14px;
}

.usecase-hero p {
  font-size: 18px;
  max-width: 900px;
  color: var(--muted);
}

.usecase-section {
  background: #ffffff;
  padding: 52px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  margin-bottom: 44px;
}

.usecase-section h3 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 28px;
  position: relative;
}

.usecase-section h3::after {
  content: "";
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  display: block;
  margin-top: 10px;
  border-radius: 3px;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.usecase-card {
  background: #f8fafc;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.usecase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
}

.usecase-card h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.usecase-card ul {
  padding-left: 18px;
  margin-top: 12px;
}

.usecase-card ul li {
  margin-bottom: 6px;
}

.usecase-grid.simple .usecase-card {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

/* Closing CTA */
.usecase-closing {
  background: linear-gradient(135deg, #eef7ff, #f8fafc);
  text-align: center;
  padding: 64px 40px;
  border-radius: 22px;
  border: 1px solid #dbeafe;
}

.usecase-closing h3 {
  font-size: 34px;
  margin-bottom: 10px;
}

.usecase-closing p {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .usecase-hero,
  .usecase-section {
    padding: 32px 22px;
  }

  .usecase-hero h2 {
    font-size: 30px;
  }

  .usecase-section h3 {
    font-size: 24px;
  }
}

    /* =========================
   USE CASES PAGE STYLES
========================= */

/* how it works */
main.container h2,
main.container h3,
main.container h4 {
    margin-top: 10px;   /* space above heading */
    margin-bottom: 10px; /* space below heading */
    padding: 4px 0;
}

main.container p {
    margin-top: 10px;    /* small space above paragraph */
    margin-bottom: 12px; /* small space below paragraph */
    line-height: 1.5;    /* optional for readability */
    padding: 0 2px;
}

main.container ol,
main.container ul {
    margin-top: 6px;
    margin-bottom: 12px;
    padding-left: 20px;
}

main.container li {
    margin-bottom: 6px;
}
 
/* service-page */
  .services-full section {
    padding: 0;
  }
   .services-full .page-section {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 50px
}
     .services-full h2 {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 18px;
}

.services-full h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
    .services-full p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 14px;
  color: #222;
}
  .services-full ul {
  padding-left: 20px;
  margin-top: 10px;
}

.services-full ul li {
  margin-bottom: 8px;
  line-height: 1.6;
}
  .muted {
  color: #666;
}
 .services-full.closing {
  background: linear-gradient(135deg, #f4f7fb, #eef2ff);
  padding: 42px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
}

.page-section.closing h3 {
  margin-bottom: 8px;
} */

/* ===== COMMON PAGE LAYOUT (About, Services, Use cases) ===== */

.services-full {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 60px 20px;
}

/* Page sections as cards */
.page-section {
  background: #ffffff;
  border-radius: 14px;
  padding: 40px;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect (presentation feel) */
.page-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

/* Headings */
.page-section h2 {
  font-size: 32px;
  margin-bottom: 14px;
  position: relative;
}

.page-section h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

/* Blue underline accent (like About page) */
.page-section h2::after,
.page-section h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #2563eb;
  margin-top: 10px;
  border-radius: 4px;
}

/* Paragraphs */
.page-section p {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 18px;
}

/* Lists */
.page-section ul {
  padding-left: 20px;
}

.page-section ul li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Closing section highlight */
.page-section.closing {
  background: linear-gradient(135deg, #f0f6ff, #ffffff);
  border-left: 5px solid #2563eb;
}

/* ===== HOW IT WORKS PAGE (MATCH ABOUT / SERVICES) ===== */

.how-full {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Each section behaves like a card */
.how-full section {
  max-width: 1200px;
  margin: 0 auto 40px;
  background: #ffffff;
  padding: 50px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Headings */
.how-full h2 {
  font-size: 32px;
  margin-bottom: 18px;
}

.how-full h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.how-full h4 {
  font-size: 18px;
  margin-top: 24px;
}

/* Text readability */
.how-full p,
.how-full li {
  font-size: 16px;
  line-height: 1.7;
}

/* Lists spacing */
.how-full ul {
  padding-left: 18px;
  margin: 12px 0;
}


/* knowledgehub */
#postsList .card {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8f9fb;
}

#postForm input, #postForm textarea {
  margin-bottom: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ced4da;
}
#postForm button {
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}



 /* SECTIONS */
     section{
         padding:64px 0}
     .grid{
         display:grid;
         grid-template-columns:repeat(3,1fr);
         gap:18px} 
     .card{
         background:var(--card); 
         padding:18px;
         border-radius:12px; 
         box-shadow:var(--shadow); 
         border:1px solid #e5e7eb } 
     .card h3{
         margin:0 0 8px 0} 
      .muted{
         color:var(--muted)} 
                    
/* HOW IT WORKS */ 
     .steps{
          display:flex;
          flex-direction:column;
          gap:12px} 
     .step{
          display:flex;
          gap:12px;
          align-items:flex-start} 
     .step .num{
          width:44px;
          height:44px;
          border-radius:10px; 
          background:linear-gradient(90deg,var(--accent1),var(--accent2)); 
          display:flex;
          align-items:center;
          justify-content:center; 
          font-weight:700;
          color:white } 
                            
   /*contact section heading*/
   .contact-header{
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #f4f7fb, #eef2ff);
    border-radius: 16px;
   }  
   
   .contact-header h2{
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #0f172a;
   }

   .contact-header p{
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    color: #64748b;
   }

/* Knowledge Hub Page Styling */
body {
  font-family: "Inter", "Poppins", Arial, sans-serif;
  background-color: #f8f9fb;
  color: #222;
  margin: 0;
  padding: 0;
}

/* Main container */
#posts {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

/* Page heading */
h1 {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #0a2540;
}

/* Each post card */
.post {
  background: #ffffff;
  padding: 30px 35px;
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* Post title */
.post h3 {
  font-size: 26px;
  margin-bottom: 15px;
  color: #111827;
}

/* Post content */
.post p {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  white-space: pre-line; /* keeps line breaks */
}

/* Divider */
.post hr {
  border: none;
  height: 1px;
  background: #e5e7eb;
  margin-top: 30px;
}

 /* CTA */ 
     .big-cta{ 
         display:flex;
         align-items:center;
         justify-content:space-between; 
         padding:20px;
         border-radius:12px; 
         background:#eef7ff; 
         border:1px solid #d7e8ff; } 
                        
      footer{
         padding:28px;
         color:var(--muted);
         font-size:14px
        } 

 .post-card {
  background: #fff;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.post-card h3 {
  margin-bottom: 12px;
  color: #0a3cff;
}

                            
 /* RESPONSIVE */ 
      @media (max-width:980px){ 
      .hero{
        grid-template-columns:1fr;
        gap:18px;
      } 

      .grid{
        grid-template-columns:repeat(2,1fr);
    } 
  } 
      @media (max-width:640px){
         nav ul{
            display:none;
        } 
                    
      .container{
        padding:12px;
    } 
      .grid{
        grid-template-columns:1fr;
    } 
  } 

     @media (max-width: 768px){
        .about-full {
            padding: 30px 20px;
        }
     }

     @media (max-width: 768px) {
        .page-full {
            padding: 32px 20px;
        }
     }
                    
      input,textarea{
          background:white;
          border:1px solid #ced4da; 
          padding:12px;
          border-radius:10px; 
          color:var(--text);
          width:100%;
          outline:none } 
      input:focus,textarea:focus{
          border-color:#0099ff; 
          box-shadow:0 0 0 3px rgba(0,153,255,0.15) } 
                         
    .btn{ 
         padding:10px 14px;
         border-radius:10px; 
         background:linear-gradient(90deg,var(--accent1),var(--accent2)); 
         color:white;
         font-weight:700;
         border:none;
         cursor:pointer }