:root{
  --jef-blue: #016cb2;
  --jef-orange: #f4841f;
  --jef-green: #459049;

  --bg-top: #F6F9FC;
  --bg-mid: #EEF3F8;
  --panel: rgba(255,255,255,0.82);
  --panel2: rgba(255,255,255,0.68);
  --stroke: rgba(15, 23, 42, 0.10);
  --text: rgba(15, 23, 42, 0.92);
  --muted: rgba(15, 23, 42, 0.68);
  --muted2: rgba(15, 23, 42, 0.56);

  --shadow: 0 18px 50px rgba(2, 6, 23, 0.10);
  --shadow2: 0 10px 30px rgba(2, 6, 23, 0.08);

  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
}

*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: none;
  position: relative;
  min-height: 100%;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 15% 8%, rgba(1,108,178,0.16), transparent 55%),
    radial-gradient(720px 470px at 88% 14%, rgba(69,144,73,0.13), transparent 60%),
    radial-gradient(900px 650px at 55% 92%, rgba(244,132,31,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-top) 100%);
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
}

.section{
  padding: 110px 80px 0 80px;
}

.sectionHead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px;
}

.sectionTitle{
  font-size: 32px;
  margin: 0;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,0.94);
}

.sectionSub{
  margin: 8px 0 0 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 70ch;
}

.pill{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.55);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted2);
  white-space: nowrap;
}

.detailWrap{
  display: flex;
  justify-content: center;
}

.detailCard{
  width: 960px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 40px 44px;
}

.detailBio{
  margin: 18px 0 0;
  color: rgba(15,23,42,0.74);
  line-height: 1.75;
  font-size: 15px;
}

.detailBio p{
  margin: 0;
}

.detailBio > .bioSection + .bioSection,
.detailBio > p + .bioSection{
  margin-top: 28px;
}

.bioSection p:first-child{
  margin-bottom: 6px;
}

.bioSection p:last-child{
  margin-bottom: 0;
}

.section{
  padding: 110px 32px 0 32px;
}

.section > *{
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

.sectionTitle{
  font-size: clamp(32px, 2.2vw, 44px);
}

.sectionSub{
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.7;
  max-width: 78ch;
}

.detailCard{
  width: 100%;
  max-width: 1920px;
  padding: 40px 44px;
}

@media (max-width: 1200px){
  .section{
    padding: 90px 32px;
  }
}

@media (max-width: 768px){
  .section{
    padding: 70px 20px;
  }

  .sectionHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .sectionTitle{
    font-size: 28px;
  }

  .detailCard{
    width: 100%;
    padding: 28px 20px;
  }
}