:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#eef3f8;
  --text:#132235;
  --muted:#5c6b7b;
  --line:#d9e2ec;
  --brand:#102135;
  --accent:#2fc1a1;
  --accent-dark:#1d9d82;
  --shadow:0 18px 50px rgba(16,33,53,.08);
  --radius:18px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.9), rgba(245,247,251,.96)),
    linear-gradient(180deg,#f7f9fc 0%, #eef3f8 100%);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 40px), var(--max)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(14,26,42,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:80px; gap:24px;
}
.logo{display:flex; align-items:center; gap:14px; font-weight:700; color:#fff}
.logo img{width:176px; height:auto}
.main-nav{display:flex; gap:28px; align-items:center}
.main-nav a{color:#dce7f2; font-size:15px}
.main-nav a.active,.main-nav a:hover{color:#fff}
.nav-cta{display:flex; gap:12px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border-radius:12px;
  font-weight:700; border:1px solid transparent; transition:.2s ease;
  cursor:pointer;
}
.btn-primary{background:var(--accent); color:white}
.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary{background:white; color:var(--brand); border-color:var(--line)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.22)}
.hero{
  padding:92px 0 72px;
  background:
    linear-gradient(90deg, rgba(16,33,53,.88), rgba(16,33,53,.38)),
    url('../assets/images/image_173590f3.png') center/cover no-repeat;
      background-size: cover; /* Ensures the image fills the entire area */
  background-position: center right; /* Keeps the technical art visible on the right */
  background-repeat: no-repeat;
  min-height: 80vh; /* Adjust based on your content height */
  display: flex;
  align-items: center;
  color:#fff;
  mix-blend-mode: multiply; /* This makes the white background transparent */
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.12); color:#e7f2fb;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.hero h1{font-size:clamp(40px, 6vw, 68px); line-height:1.02; margin:18px 0 18px}
.hero p{font-size:20px; max-width:740px; color:#edf4fb}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-card{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:22px; padding:24px; box-shadow:var(--shadow)
}
.hero-card h3{margin-top:0; margin-bottom:10px}
.hero-card ul{margin:0; padding-left:18px; color:#edf4fb}
.section{padding:82px 0}
.section-sm{padding:56px 0}
.section-dark{
  background:linear-gradient(180deg,#102135 0%, #0d1a29 100%);
  color:#fff;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.11em; font-size:12px; color:var(--accent);
  font-weight:700; margin-bottom:12px;
}
.section h2{font-size:clamp(30px, 4vw, 48px); margin:0 0 14px}
.section p.lead{font-size:19px; color:var(--muted); max-width:760px}
.section-dark p.lead,.section-dark .muted{color:#d4deea}
.trust-strip{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0; text-align:center; color:var(--muted); font-weight:600;
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-body{padding:24px}
.card h3{margin:0 0 12px; font-size:24px}
.card p{margin:0 0 12px; color:var(--muted)}
.checks{list-style:none; padding:0; margin:0}
.checks li{
  position:relative; padding-left:22px; margin-bottom:8px; color:var(--text)
}
.checks li::before{
  content:""; position:absolute; left:0; top:9px; width:10px; height:10px;
  border-radius:99px; background:var(--accent)
}
.feature-box{
  padding:28px; border-radius:var(--radius); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12)
}
.feature-box h3{margin:0 0 10px}
.steps{counter-reset:steps}
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow)
}
.step strong{display:block; font-size:22px; margin-bottom:8px}
.cta-panel{
  background:linear-gradient(135deg, #102135, #17314b);
  border-radius:24px; color:#fff; padding:34px; box-shadow:var(--shadow);
  display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap
}
.cta-panel p{margin:8px 0 0; color:#d7e3f0}
.page-hero{
  padding:78px 0 34px; background:linear-gradient(180deg,#f5f8fb 0%, #eef3f8 100%);
}
.page-hero h1{font-size:clamp(38px, 5vw, 56px); margin:0 0 12px}
.content-narrow{width:min(calc(100% - 40px), 880px); margin:0 auto}
.form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:28px;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:block; font-size:14px; font-weight:700; margin-bottom:8px}
input, select, textarea{
  width:100%; min-height:52px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:white; color:var(--text); font:inherit
}
textarea{min-height:150px; resize:vertical}
.form-help{color:var(--muted); font-size:14px}
.contact-block{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px
}
.site-footer{
  background:#0d1826; color:#dce7f2; padding:28px 0; border-top:1px solid rgba(255,255,255,.08)
}
.footer-wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.footer-nav{display:flex; gap:18px; flex-wrap:wrap}
.small{font-size:14px}
.muted{color:var(--muted)}
.divider{height:1px; background:var(--line); margin:28px 0}
.center{text-align:center}
.badge-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.badge{
  display:inline-flex; align-items:center; padding:10px 14px; background:#eff6f4;
  border:1px solid #d4ece5; border-radius:999px; color:#12302b; font-weight:700; font-size:14px
}
.mobile-toggle{display:none}

@media (max-width: 980px){
  .hero-inner,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}
  .main-nav,.nav-cta{display:none}
  .mobile-toggle{
    display:inline-flex; min-height:44px; min-width:44px; align-items:center; justify-content:center;
    color:white; background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:10px
  }
  .site-header.open .main-nav,.site-header.open .nav-cta{
    display:flex; flex-direction:column; align-items:stretch; width:100%
  }
  .site-header.open .nav-wrap{flex-wrap:wrap; padding-bottom:18px}
  .site-header.open .main-nav{gap:12px}
  .site-header.open .nav-cta{margin-top:6px}
  .hero{padding-top:72px}
}