:root {
  --primary: #334FB4;           /* Deep Royal Blue */
  --primary-dark: #263a8a;      /* Slightly darker variant for hover/focus */
  --text: #2c2c2c;              /* Neutral dark grey for readability */
  --bg-light: #f6f8ff;          /* Subtle cool white with a blue tint */
  --radius: 12px;
  --transition: 0.3s ease;
  --max-width: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  font-family: 'Manrope', sans-serif; 
  color: var(--text); 
  background: #fff; 
  line-height: 1.6; 
  scroll-behavior: smooth; 
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

section { width: 100%; padding: 100px 20px; }
.container { max-width: var(--max-width); margin: 0 auto; }

h1, h2, h3 { color: var(--primary-dark); margin-bottom: 20px; }
p { margin-bottom: 18px; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 14px 34px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--primary-dark); }

/* HERO */
.hero {
  position: relative;
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), 
              url('../img/hero.jpg') center/cover no-repeat fixed;
  color: #fff;
  text-align: center;
  padding: 220px 20px 180px;
}
.hero .container { max-width: 900px; }
.hero h1 { font-size: 3.4rem; line-height: 1.2; margin-bottom: 24px; font-weight:bold; color:white;}
.hero p { font-size: 1.3rem; margin-bottom: 40px; color: #e8e8e8; }
.hero .btn { font-size: 1.1rem; }

/* FEATURES */
.features { background: var(--bg-light); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 30px;
  margin-top: 50px;
  align-items: stretch;
}
.feature-box {
  background: #fff;
  padding: 40px 30px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.feature-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.feature-box i {
  font-size: 2.6rem;
  color: var(--primary);
  margin-bottom: 18px;
}
.feature-box h3 { font-size: 1.25rem; margin-bottom: 10px; }

/* TABLE SECTION */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
th, td {
  padding: 18px;
  border-bottom: 1px solid #e3e6f0;
  text-align: left;
  vertical-align: top;
}
th { 
  background: #ecf0ff;
  color: var(--primary-dark); 
  font-weight: 600; 
}

/* PROCESS */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.step {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.step i {
  font-size: 2.4rem;
  color: var(--primary);
  margin-bottom: 16px;
}

/* FAQ */
.faq-item {
  background: #fff;
  border-radius: var(--radius);
  padding: 25px 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.faq-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

/* CTA STRIP */
.cta-strip {
  background: var(--primary-dark);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}
.cta-strip h2 { 
  color: #fff; 
  margin-bottom: 20px; 
  font-size: 2rem; 
}
.cta-strip p { 
  max-width: 700px; 
  margin: 0 auto 30px; 
  color: #d6defc; 
}

/* FOOTER */
footer {
  background: var(--bg-light);
  text-align: center;
  padding: 60px 20px;
  font-size: 0.95rem;
  color: #555;
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2.4rem; }
  .hero p { font-size: 1.1rem; }
  section { padding: 70px 20px; }
}
  
.ftr-header{position:fixed;top:0;left:0;width:100%;background:var(--primary);color:#fff;z-index:9900;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.ftr-header .ftr-container{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;}
.ftr-logo a{color:#fff;font-size:1.3rem;font-weight:700;text-decoration:none;letter-spacing:0.5px;}
.ftr-nav ul{list-style:none;display:flex;gap:25px;align-items:center;margin:0;}
.ftr-nav a{color:#fff;text-decoration:none;font-weight:500;transition:color 0.3s;}
.ftr-nav a:hover{color:#d6defc;}
.btn-small{background:#fff;color:var(--primary);padding:8px 18px;border-radius:6px;border:none;font-weight:600;cursor:pointer;transition:all 0.3s;}
.btn-small:hover{background:#f0f0f0;color:var(--primary-dark);}

@media(max-width:800px){
  .ftr-nav ul{flex-wrap:wrap;gap:15px;justify-content:center;margin-top:10px;}
  .ftr-header .ftr-container{flex-direction:column;}
  .desktop {display: none;}
}