:root{
  --bg:#f5f9ff;
  --panel:#ffffff;
  --text:#0b1b2b;
  --muted:#788fac;
  --blue:#121c29;
  --green:#182368;
  --border:#e4ebf3;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.container{
  max-width:1100px;
  margin:auto;
  padding:0 24px;
}

section{padding:96px 0}

h1{font-size:3rem}
h2{font-size:2rem}
h3{margin-bottom:8px}

p{color:var(--muted);max-width:680px}

/* HERO */

.hero{
  padding:140px 0;
  position:relative;
  background:
    radial-gradient(800px 300px at 20% 0%,rgba(83, 111, 145, 0.14),transparent),
    radial-gradient(800px 300px at 80% 0%,rgba(47,191,113,.12),transparent);
}

/* HERO STRIP – DARK TECH BLUE */

.hero-strip-top,
.hero-strip-bottom {
  width: 100%;
  height: 5px;
  background: linear-gradient(
    90deg,
    #081a3a,
    #475f98,
    #0a66ff
  );
}


.hero-strip-top{top:0}
.hero-strip-bottom{bottom:0}

.badge{
  display:inline-block;
  background:rgba(11,79,163,.08);
  color:var(--blue);
  padding:6px 14px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
}

/* BUTTONS */

.btn{
  position:relative;
  background:linear-gradient(135deg,var(--blue),var(--green));
  padding:14px 30px;
  border-radius:12px;
  color:white;
  text-decoration:none;
  font-weight:600;
  transition:.35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 14px 30px rgba(11,79,163,.35);
}

.btn:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(11,79,163,.45);
}

.secondary{
  background:white;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}

.hero-actions{margin-top:28px;display:flex;gap:14px}

/* GRID */

.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* CARDS */

.card{
  background:var(--panel);
  border-radius:20px;
  padding:28px;
  border:1px solid var(--border);
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:.35s cubic-bezier(.4,0,.2,1);
}

.card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 28px 70px rgba(0,0,0,.12);
}


.cta {
  background: linear-gradient(
    135deg,
    #0b1c3d 0%,
    #88b6e2 50%,
    #cfc3e4 100%
  );
  border-radius: 28px;
  padding: 80px 0;
  box-shadow: 0 40px 80px rgba(2, 6, 23, 0.6);
}

.cta h2 {
  color: #f8fafc;
}

.cta p {
  color: #cbd5f5;
}

footer{
  text-align:center;
  padding:36px;
  border-top:1px solid var(--border);
  color:var(--muted);
}


.hero {
  background: linear-gradient(
    180deg,
    #6f86b4 0%,
    #9a98c4 40%,
    #7b93ff 100%
  );
  color: #e6ebf3;
}
.hero h1,
.hero h2,
.hero h3 {
  color: #f8fafc;
}

.hero p {
  color: #cbd5f5;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px 300px at 30% 20%,
    rgba(70, 112, 178, 0.18),
    transparent 60%
  );
  pointer-events: none;
}


.cta .btn {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}

.cta .btn:hover {
  background: #1d4ed8;
}

.cta .btn.secondary {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid #334155;
  box-shadow: none;
}
/* =========================
   GLOBAL MOBILE RULES
   ========================= */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .header-inner {
    padding: 16px 20px;
  }

  nav {
    display: none;
  }

  .section {
    padding: 60px 20px;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  iframe {
    width: 100%;
    height: 260px;
  }

}
.header {
  height: 80px;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 40px;
}

.logo img {
  height: 50px;
  width: auto;
}
/* ===== FOOTER CONTACT (NO BOX) ===== */

.contact-section{
  padding:40px 16px 70px;
  text-align:center;
  background:linear-gradient(
    135deg,
    #5c6fd8 0%,
    #3c4f97 35%,
    #1d4686 65%,
    #1b3e67 100%
  );
}

/* heading */
.contact-title{
  font-size:22px;
  color:#fff;
  margin-bottom:2px;
}
.contact-sub{
  text-align:center;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.contact-sub{
  color:#d6e2ff;
  font-size:13px;
  margin-bottom:18px;
}

/* form width */
.contact-form{
 
  gap:10px;
}

.contact-form input,
.contact-form textarea{
  padding:8px 4px;
  font-size:14px;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.6);
  background:transparent;
  color:white;
}


/* placeholder */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#d7e3ff;
}

/* focus line */
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-bottom:1px solid #8ec5ff;
}

/* textarea size */
.contact-form textarea{
  min-height:60px;
  resize:vertical;
}

.contact-form button{
  margin-top:6px;
  padding:9px 22px;
  font-size:13px;
  border-radius:6px;
  background:#0f1d3a;
  color:white;
  border:none;
  cursor:pointer;
}



.contact-form button:hover{
  background:#08142b;
  transform:translateY(-2px);
}


.contact-title{
  text-align:center;
  margin-bottom:4px;
}
.contact-section::after{
  display:none;
}

.contact-section hr{
  display:none;
}

footer{
  border-top:none !important;
}
.contact-section{
  font-family:'Inter', sans-serif;
}
/* ===== CENTERED CONTACT FORM FIX ===== */

/* create a center column */
.contact-form{
  width:100%;
  max-width:460px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* prevent inputs from stretching across screen */
.contact-form input,
.contact-form textarea{
  width:100%;
  max-width:460px;
  margin:0 auto 14px auto;
  display:block;
}

/* center button */
.contact-form button{
  align-self:center;
}
#contact{
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* ===== FORCE STYLE FOR CONTACT FORM ===== */

#contact form{
  all: unset;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:420px;
  margin:20px auto 0 auto;
}

/* inputs */
#contact input,
#contact textarea{
  width:100%;
  padding:9px 6px;
  margin-bottom:14px;
  font-size:14px;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.65);
  background:transparent;
  color:white;
  font-family:inherit;
}

/* textarea */
#contact textarea{
  min-height:70px;
  resize:vertical;
}

/* button */
#contact button{
  padding:9px 22px;
  font-size:13px;
  border-radius:6px;
  border:none;
  background:#0f1d3a;
  color:white;
  cursor:pointer;
  transition:.2s;
}

#contact button:hover{
  background:#08142b;
}
/* trust block under contact form */

.after-contact{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* linkedin icon */
.after-linkedin{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0A66C2;
  color:white;
  border-radius:50%;
  transition:.25s;
}

.after-linkedin:hover{
  background:#004182;
  transform:translateY(-2px);
}

/* company name */
.after-company{
  font-size:13px;
  color:#dbe7f3;
  letter-spacing:.05em;
  opacity:.85;
}/* clean inline trust line */

.trust-line{
  margin-top:28px;
  text-align:center;
  font-size:13px;
  letter-spacing:.04em;
  color:#dbe7f3;
  opacity:.85;
}

.trust-company{
  color:#dbe7f3;
}

.trust-dot{
  margin:0 8px;
  opacity:.6;
}

.trust-link{
  color:#9fd3ff;
  text-decoration:none;
  font-weight:500;
  transition:.2s;
}

.trust-link:hover{
  color:white;
}/* linkedin trust block */

.contact-trust{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* linkedin circle */
.linkedin-icon-only{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0A66C2;
  color:white;
  border-radius:50%;
  transition:.25s ease;
}

.linkedin-icon-only:hover{
  background:#004182;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* company text */
.company-under{
  font-size:13px;
  letter-spacing:.05em;
  color:#dbe7f3;
  opacity:.85;
  text-align:center;
}