:root {
  --bg:#f6f8fc;
  --surface:#ffffff;
  --accent:#1f4f8b;
  --accent-contrast:#0b2c57;
  --accent-light:rgba(31,79,139,.10);
  --muted:#6f7d94;
  --text:#1f2d44;
  --line:#e7edf6;

  --radius:14px;
  --radius-lg:18px;
  --shadow:0 24px 60px -18px rgba(15, 50, 100, 0.18);
  --shadow-soft:0 16px 40px -16px rgba(15, 50, 100, 0.12);
  --ring:0 0 0 3px rgba(31,79,139,.25);

  --transition:.28s ease;

  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--transition), background var(--transition), box-shadow var(--transition)}
a:hover{text-decoration:underline}
a:focus-visible, button:focus-visible { outline:none; box-shadow:var(--ring); border-radius:10px }

/* Layout helpers */
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.section{padding:84px 0;position:relative}
.title{font-size:2.35rem;font-weight:700;margin:0 0 6px;text-align:center;letter-spacing:.2px}
.subtitle{max-width:720px;margin:8px auto 26px;color:var(--muted);text-align:center;font-size:1rem;line-height:1.6}
.center{text-align:center}
.small{font-size:.9rem;color:var(--muted)}
.mt-12{margin-top:12px}.mt-20{margin-top:20px}.mt-28{margin-top:28px}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:12px; flex-wrap:wrap;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.14rem; color:inherit}
.logo img{height:38px; width:auto}
.menu{display:flex; gap:22px; font-size:.95rem; font-weight:500; flex-wrap:wrap; margin:0; padding:0; list-style:none}
.menu a{padding:8px 10px; border-radius:8px; color:inherit; opacity:.9}
.menu a:hover{background:rgba(31,79,139,.08); opacity:1; text-decoration:none}
.menu a.active{font-weight:700; opacity:1}

/* Buttons */
.btn{
  padding:12px 22px; border-radius:999px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition)
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-contrast) 100%);
  color:#fff; box-shadow:var(--shadow);
}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn-secondary{
  background:#f8fbff; color:var(--accent); border:2px solid var(--accent);
}
.btn-white{background:#fff; color:var(--accent); border:2px solid #fff; box-shadow:var(--shadow-soft)}
.btn-outline{background:transparent; color:#fff; border:2px solid #fff}

/* Hero */
.hero{
  position:relative; display:flex; align-items:center;
  min-height:76vh; color:#fff; overflow:hidden;
  background:#0e1c33;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(10,15,50,.60), rgba(10,15,50,.35));
  z-index:1; pointer-events:none;
}
.hero-inner{
  margin:0 auto; max-width:900px; padding:100px 24px; text-align:center; position:relative; z-index:2;
}
.superhead{
  display:inline-block; background:rgba(255,255,255,.12);
  padding:8px 18px; border-radius:999px; font-size:.75rem; letter-spacing:.1em; font-weight:800; margin-bottom:12px
}
.hero-title, .hero h1{
  font-size:clamp(2rem, 4.4vw, 3.2rem); margin:0; font-weight:800; line-height:1.08;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero-desc{
  margin:18px auto 0; font-size:1.06rem; line-height:1.55; max-width:760px;
  text-shadow:0 6px 18px rgba(0,0,0,.28);
}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.pill-row, .pills{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px; list-style:none; padding:0
}
.pill, .pills li{
  background:rgba(255,255,255,.12); color:#fff; padding:8px 16px; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.02em
}

/* Cards */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px; margin-top:16px;
}
.card{
  background:var(--surface); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  border:1px solid var(--line); transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition)
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(31,79,139,.25)}
.card h3{margin:2px 0 6px; font-size:1.22rem; font-weight:700}
.card p{margin:0; flex:1; line-height:1.55; font-size:.98rem}
.badge{
  display:inline-flex; align-items:center; background:var(--accent-light); color:var(--accent);
  padding:6px 12px; border-radius:999px; font-size:.70rem; font-weight:700; letter-spacing:.06em; width:max-content
}

/* =========================
   Process (UPDATED: inline)
   ========================= */
.process{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr)); /* 4 in one row on desktop */
  gap:24px;
  align-items:start;
  margin-top:22px;
}
.step{display:flex; gap:16px; align-items:flex-start; margin-bottom:0}
.step-icon{
  min-width:48px; height:48px; border-radius:14px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1rem; flex-shrink:0;
  box-shadow:0 10px 24px -8px rgba(31,79,139,.5)
}
.step-body strong{display:block; font-size:1.06rem; margin-bottom:4px}

/* Responsive columns for process */
@media (max-width: 1000px){
  .process{grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
}
@media (max-width: 600px){
  .process{grid-template-columns:1fr; gap:18px}
}

/* Testimonials (horizontal scroll on small) */
.testimonials{background:#eef4fa; padding:84px 0}
.test-grid{
  display:flex; gap:18px; overflow-x:auto; padding:18px;
  scroll-snap-type:x mandatory
}
.testimonial{
  flex:0 0 290px; background:var(--surface); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:12px; scroll-snap-align:center;
  border:1px solid var(--line)
}
.stars{color:#d4af37; font-size:14px; letter-spacing:2px}
.client{display:flex; gap:12px; align-items:center; margin-top:8px; font-weight:600}
.client img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.client .role, .client span{display:block; color:var(--muted); font-weight:500; font-size:.9rem}

/* Partners */
.partners{padding:84px 0; background:#fff}
.partner-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:20px}
.partner{
  background:var(--surface); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:10px; border:1px solid var(--line)
}
.partner-title{margin:0; font-size:1.25rem; font-weight:700}
.partner-role{font-size:.9rem; color:var(--muted); margin-bottom:6px}
.inactive{color:var(--muted); opacity:.75; cursor:not-allowed}

/* Compliance (2 cards layout) */
.cred{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px; margin-top:22px;
}
.cred-box{
  background:linear-gradient(180deg,#f9fbff 0%, #f3f7fd 100%); border-radius:var(--radius);
  padding:18px; display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition)
}
.cred-box:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(31,79,139,.22)}
.cred-box img{height:50px; width:auto; object-fit:contain}
.cred-text{flex:1}
.cred-text strong{display:block; font-size:1.06rem; margin-bottom:4px}

/* CTA band */
.contact-cta{
  margin-top:40px; background:linear-gradient(135deg, var(--accent), var(--accent-contrast));
  color:#fff; border-radius:var(--radius-lg); display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between; padding:28px 24px; box-shadow:var(--shadow)
}
.contact-cta h2{margin:0; font-size:1.8rem}
.contact-cta p{margin:6px 0; font-size:1rem}
.contact-cta a{margin-top:8px; display:inline-block}

/* Forms */
form input, form textarea{
  width:100%; padding:12px 14px; border:1px solid #d7dfe9; border-radius:10px;
  font-size:1rem; margin-bottom:12px; resize:vertical; background:#fff
}
form input:focus, form textarea:focus{outline:none; box-shadow:var(--ring); border-color:#cfe0ff}
form label{display:block; margin-bottom:4px; font-weight:600; font-size:.92rem}
.form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.submit-wrap{text-align:left}
.error{color:#d9534f; font-size:.82rem; margin-top:4px}

/* Footer */
.footer{background:#1f2d44; color:#cdd3e0; font-size:.94rem}
.footer-inner{
  max-width:1120px; margin:0 auto; display:grid; gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); padding:60px 32px
}
.footer h4{margin-top:0; font-weight:700; color:#fff; font-size:1rem}
.footer a{color:rgba(205,211,224,.92)}
.footer small{display:block; margin-top:6px; color:rgba(205,211,224,.72)}
.social{display:flex; gap:12px; margin-top:6px; align-items:center}

/* Animations */
.fade-up{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.visible{opacity:1; transform:translateY(0)}

/* Responsive tweaks (kept, minus the old .process override) */
@media (max-width:1024px){
  .test-grid{flex-direction:column}
  .partner-grid{grid-template-columns:1fr}
  .contact-cta{flex-direction:column; text-align:center; align-items:flex-start}
}

/* Optional: subtle active state for current page link */
.menu a[href*="index.html"].active,
.menu a.active { background:rgba(31,79,139,.10); color:var(--accent-contrast) }