@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#071d3b;--blue:#123d68;--cyan:#83d3f2;--ink:#15243a;--muted:#617187;--ice:#edf6fb;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7fafc;color:var(--ink);font:16px/1.65 'DM Sans',Arial,sans-serif}a{text-decoration:none;color:inherit}.topbar{height:72px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;background:#061a34;color:white;position:sticky;top:0;z-index:5}.brand{font:800 25px Manrope}.brand span{color:var(--cyan)}nav{display:flex;gap:25px;font-size:13px}nav a:hover{color:var(--cyan)}.hero{min-height:590px;padding:75px 9%;display:grid;grid-template-columns:1.3fr .7fr;gap:5vw;align-items:center;background:linear-gradient(120deg,#061a34,#0b2d54 65%,#14517e);color:white}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#4c9bc7;margin:0 0 17px}.hero .eyebrow{color:#8bd8f5}.hero h1{font:800 clamp(48px,6vw,78px)/1.05 Manrope;margin:0;letter-spacing:-2px}.hero h1 span,.section h2 span,.contact h2 span{color:var(--cyan)}.role{color:#c5d9eb;letter-spacing:.4px;margin:20px 0}.intro{max-width:570px;color:#e1edf6;font-size:17px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-block;padding:12px 19px;border-radius:6px;font-weight:700;font-size:13px}.primary{background:var(--cyan);color:#052344}.secondary{border:1px solid #ffffff70;color:white}.portrait-wrap{width:min(440px,100%);justify-self:center;position:relative}.portrait-wrap:before{content:none}.portrait{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:0;position:relative;box-shadow:none}.portrait-caption{display:none}.section{padding:85px 9%;max-width:1450px;margin:auto}.section h2,.contact h2{font:800 clamp(34px,4vw,50px)/1.13 Manrope;color:var(--navy);margin:0;letter-spacing:-1px}.profile{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.profile-text{color:#42556c;font-size:17px}.skills,.projects{max-width:none;background:var(--ice)}.skills>.inner,.projects>.inner{max-width:1250px;margin:auto}.skill-grid,.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}.skill-card,.project-card{background:white;padding:25px;border:1px solid #dce9f2;border-radius:9px}.skill-card b,.project-card span{color:#438fbd;font-size:11px;letter-spacing:1.4px}.skill-card h3,.project-card h3{font:700 19px Manrope;color:var(--navy);margin:9px 0}.skill-card p,.project-card p{font-size:14px;color:var(--muted);margin:0}.tech-strip{background:var(--navy);color:white;border-radius:8px;padding:20px 24px;margin-top:22px;font-size:13px}.tech-strip strong{color:var(--cyan);font-size:10px;letter-spacing:1.5px;margin-right:20px}.timeline{border-left:2px solid #c9dfed;margin:35px 0 0 10px}.timeline-item{display:grid;grid-template-columns:160px 1fr;gap:30px;padding:0 0 38px 28px;position:relative}.timeline-item:before{content:'';position:absolute;left:-9px;top:5px;width:12px;height:12px;background:#247db0;border:4px solid #e3f3fb;border-radius:50%}.date{color:#2679a9;font-size:13px;font-weight:700}.timeline h3{font:700 19px Manrope;color:var(--navy);margin:5px 0}.timeline p,.timeline li{color:#53647a;font-size:14px}.timeline ul{padding-left:19px}.project-grid{grid-template-columns:repeat(2,1fr)}.cert-list{max-width:900px;border-top:1px solid #dce6ee;margin-top:35px}.cert-list div{padding:16px 10px;border-bottom:1px solid #dce6ee;display:grid;grid-template-columns:85px 1fr;gap:4px 15px}.cert-list time{grid-row:span 2;color:#3989ba;font-weight:700}.cert-list strong{font:700 15px Manrope;color:var(--navy)}.cert-list small{color:var(--muted)}.contact{padding:80px 9%;background:linear-gradient(120deg,#061a34,#0c315a);color:white;display:grid;grid-template-columns:1fr 1fr;gap:7vw}.contact h2{color:white}.contact p{color:#c5d8e8;max-width:500px}.contact-form{display:grid;gap:9px;background:#ffffff0c;border:1px solid #ffffff25;padding:25px;border-radius:9px}.contact-form label{font-size:12px;color:#d7e7f3}.contact-form input,.contact-form textarea{padding:12px;border:1px solid #ffffff35;background:#061a34;color:white;border-radius:5px;font:14px 'DM Sans'}.contact-form small{font-size:11px;color:#abc0d2}footer{background:#041328;color:#b7cadd;padding:23px 7%;display:flex;justify-content:space-between;align-items:center;font-size:12px}footer p{margin:0}footer a:last-child{color:var(--cyan)}@media(max-width:780px){nav{gap:12px;font-size:11px}nav a:nth-child(2),nav a:nth-child(4){display:none}.hero{grid-template-columns:1fr;padding:55px 7%;}.portrait-wrap{grid-row:1;width:min(340px,100%);margin:0 auto 12px}.profile,.contact{grid-template-columns:1fr;gap:20px}.skill-grid{grid-template-columns:repeat(2,1fr)}.timeline-item{grid-template-columns:1fr;gap:5px}.project-grid{grid-template-columns:1fr}.section{padding:65px 7%}}@media(max-width:460px){.skill-grid{grid-template-columns:1fr}.hero h1{font-size:48px}footer{flex-wrap:wrap}}

/* Approved name banner refinement */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 88% 110%, rgba(56,145,197,.30) 0, rgba(56,145,197,0) 42%),
    linear-gradient(120deg,#061a34 0%,#0b2d54 65%,#123f68 100%);
}
.hero:after{
  content:"";
  position:absolute;
  right:-8%;
  bottom:-42%;
  width:62%;
  height:78%;
  border:1px solid rgba(135,207,239,.22);
  border-radius:50%;
  box-shadow:0 -18px 0 -1px rgba(135,207,239,.10),
             0 -38px 0 -1px rgba(135,207,239,.08),
             0 -58px 0 -1px rgba(135,207,239,.06);
  pointer-events:none;
}
.hero-copy,.portrait-wrap{position:relative;z-index:1}
.hero h1.hero-name{
  color:#fff;
  font-size:clamp(38px,5.2vw,68px);
  line-height:1.08;
  letter-spacing:-1.8px;
  white-space:normal;
}
.hero h1.hero-name span{color:#fff}
.hero .hero-tagline{
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:14px;
  letter-spacing:.7px;
  font-weight:600;
}
.hero .hero-tagline:before,.hero .hero-tagline:after{
  content:"";
  display:inline-block;
  width:34px;
  height:1px;
  background:rgba(255,255,255,.72);
}
@media(max-width:760px){
  .hero h1.hero-name{font-size:clamp(34px,8vw,48px);letter-spacing:-1px}
  .hero .hero-tagline{gap:8px;font-size:13px}
  .hero .hero-tagline:before,.hero .hero-tagline:after{width:18px}
}