:root{
  --navy:#0b2a4a;
  --blue:#13558c;
  --ice:#5fb3d4;
  --gold:#c9a227;
  --bg:#f4f7fa;
  --text:#22303c;
  --muted:#5b6b78;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.65;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
header{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;padding:26px 20px;text-align:center;
}
.brand{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.logo{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#bfe7f5,var(--ice));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--navy);font-size:1.15rem;letter-spacing:1px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
header h1{font-size:1.55rem;letter-spacing:.5px}
header .tag{color:var(--ice);font-weight:600;margin-top:4px;font-size:1.05rem}

/* Nav */
nav{
  background:var(--navy);position:sticky;top:0;z-index:10;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:0 10px;
  border-top:3px solid var(--gold);
}
nav a{
  color:#dce8f2;padding:13px 18px;font-size:.9rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
}
nav a:hover{background:var(--blue);color:#fff;text-decoration:none}

/* Hero */
.hero{
  background:linear-gradient(rgba(11,42,74,.82),rgba(19,85,140,.78)),
    url("img/financial-markets.jpg");
  background-size:cover;background-position:center;
  color:#fff;text-align:center;padding:96px 20px;
}
.hero h2{font-size:2.1rem;margin-bottom:12px}
.hero p{font-size:1.12rem;max-width:660px;margin:0 auto 26px;color:#e6f1f9}
.btn{
  display:inline-block;background:var(--gold);color:var(--navy);
  padding:13px 30px;border-radius:4px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;
}
.btn:hover{background:#e0b733;text-decoration:none}

/* Layout */
.wrap{max-width:980px;margin:0 auto;padding:54px 20px}
section{border-bottom:1px solid #e1e8ee}
h3{color:var(--navy);font-size:1.55rem;margin-bottom:18px;
   display:inline-block;border-bottom:3px solid var(--gold);padding-bottom:6px}
h4{color:var(--blue);margin:18px 0 8px;font-size:1.12rem}
.lead{font-size:1.06rem;color:var(--muted);margin-bottom:16px}
p{margin-bottom:14px}

.media{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-top:6px}
.media-text{flex:1 1 320px}
.media-img{
  flex:1 1 300px;max-width:480px;width:100%;border-radius:10px;
  box-shadow:0 6px 22px rgba(11,42,74,.18);object-fit:cover;
}

.cols{display:flex;gap:28px;flex-wrap:wrap;margin-top:10px}
.card{
  flex:1 1 260px;background:#fff;border:1px solid #e1e8ee;border-radius:8px;
  padding:24px;box-shadow:0 2px 10px rgba(11,42,74,.05);
}
.card h4{margin-top:0}

/* Steps */
.steps{counter-reset:step;margin-top:10px}
.step{
  background:#fff;border:1px solid #e1e8ee;border-left:4px solid var(--gold);
  border-radius:6px;padding:18px 20px 18px 64px;margin-bottom:14px;position:relative;
  box-shadow:0 1px 6px rgba(11,42,74,.04);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:16px;top:18px;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.step h4{margin-top:0}
.quote{
  background:var(--bg);border-left:3px solid var(--ice);
  padding:10px 16px;margin:10px 0;font-style:italic;color:#3a4a57;
}
.note{background:#fff8e6;border:1px solid #f0e0a8;border-radius:6px;padding:14px 18px;margin-top:18px}

/* Contact */
.contact{background:#fff;padding:42px 0;border-top:1px solid #e1e8ee}
.contact-inner{max-width:980px;margin:0 auto;padding:0 20px}
.contact-grid{display:flex;gap:30px;flex-wrap:wrap}
.contact-grid>div{flex:1 1 280px}
.info b{color:var(--navy)}
.pill{
  display:inline-block;background:var(--bg);border:1px solid #dce5ec;
  border-radius:6px;padding:10px 16px;margin:6px 6px 6px 0;font-weight:600;
}

footer{background:var(--navy);color:#bcd0e2;text-align:center;padding:26px 20px;font-size:.88rem}
footer a{color:var(--ice)}