/* Refinements retain the framed sections, typography and two-level career disclosures. */
:root {
  --hero: radial-gradient(ellipse at 90% 15%, #e8e5fa 0, transparent 60%),
    linear-gradient(125deg, #f2f6ff, #edf1fb 65%, #f3f0fb);
}
.hero-inner { display: block; padding: 42px 42px 30px; }
.hero-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  column-gap: 54px;
  align-items: center;
}
.hero-identity, .hero-role, .hero-lead, .focus-tags { grid-column: 1; }
.hero-heading h1, html[lang=en] .hero-heading h1 {
  font-size: 3.2rem;
  background-image: linear-gradient(100deg, #365f9f, #6863aa);
}
.hero-greeting { font-size: 1rem; margin-bottom: 5px; }
.hero-heading h1 .name-reading { margin-top: 7px; font-size: .9375rem; }
.hero-role { font-size: 2.15rem; line-height: 1.25; letter-spacing: -.035em; margin: 16px 0 0; }
.hero-lead { margin: 16px 0 0; font-size: 1.2rem; font-weight: 550; line-height: 1.8; color: var(--ink); }
.portrait-frame { grid-column: 2; grid-row: 1 / 5; align-self: center; margin: 0; }
.portrait-frame img { width: 220px; height: 220px; border: 3px solid #ffffffbf; box-shadow: 0 12px 36px #5362951c; }
.focus-tags { margin-top: 21px; gap: 8px; }
.focus-tags span { background: #ffffff70; color: #4d5588; padding: 5px 12px; }
.hero-inner .profile-links { padding: 12px 16px; margin-top: 28px; gap: 12px; box-shadow: none; }
.profile-links a { padding: 7px 22px; }
.hero-stats { margin: 20px auto 0; }
.hero-stats dd { font-size: 1.75rem; }
.intro.section-card { margin-top: 28px; }
.intro > p:first-of-type { margin-top: 0; }
.career-achievements { display: grid; gap: 5px; margin-top: 3px; font-size: .875rem; line-height: 1.8; color: var(--body); }
.career-achievements > span { display: block; padding-left: 13px; position: relative; }
.career-achievements > span::before { content: ''; position: absolute; top: .75em; left: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
/* A full-width second line keeps the disclosure label and count easy to scan. */
.cert-group:not(.language-block) > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 15px; gap: 6px 15px; }
.cert-group > summary::after { grid-column: 3; grid-row: 1; }
.language-block > summary { display: grid; grid-template-columns: minmax(0, 1fr) 15px; column-gap: 15px; }
.language-block > summary::after { grid-column: 2; margin-left: 0; }
.cert-group-title { grid-column: 1; grid-row: 1; min-width: 0; }
.group-count { grid-column: 2; grid-row: 1; }
.group-count, html[lang=en] .group-count { font-size: .8125rem; }
.cert-group-description { grid-column: 1 / -1; color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.75; }
.cert-list li > div { min-width: 0; overflow-wrap: anywhere; }
.company-heading, .education-row h3, .section-heading h2 { overflow-wrap: break-word; }
html[lang=en] .section-heading h2 { letter-spacing: 0; line-height: 1.4; text-wrap: balance; }
html[lang=en] .hero-lead { line-height: 1.7; }
@media (max-width: 900px) {
  .hero-inner { padding: 34px 30px 28px; }
  .hero-heading { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 28px; }
  .portrait-frame img { width: 180px; height: 180px; }
  .hero-heading h1, html[lang=en] .hero-heading h1 { font-size: 2.7rem; }
  .hero-role { font-size: 1.9rem; }
  .hero-lead { font-size: 1.125rem; }
}
@media (max-width: 600px) {
  .hero-inner { padding: 26px 24px 24px; }
  .hero-heading { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 16px; }
  .hero-identity { grid-column: 1; grid-row: 1; min-width: 0; }
  .portrait-frame { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .portrait-frame img { width: 88px; height: 88px; border-width: 2px; }
  .hero-heading h1, html[lang=en] .hero-heading h1 { font-size: 1.9rem; line-height: 1.3; letter-spacing: -.02em; }
  .hero-heading h1 .name-reading { font-size: .8125rem; letter-spacing: .025em; margin-top: 5px; }
  .hero-greeting { font-size: .875rem; margin-bottom: 5px; }
  .hero-role, .hero-lead, .focus-tags { grid-column: 1 / -1; }
  .hero-role { grid-row: 2; font-size: 1.7rem; margin-top: 23px; }
  .hero-lead { grid-row: 3; font-size: 1.0625rem; margin-top: 12px; line-height: 1.9; }
  .focus-tags { grid-row: 4; margin-top: 18px; gap: 7px; }
  .focus-tags span { padding: 5px 10px; font-size: .8125rem; }
  .hero-inner .profile-links { padding: 10px; margin-top: 22px; gap: 8px; }
  .profile-links a { font-size: .8125rem; padding: 6px 8px; }
  .hero-stats { margin-top: 18px; gap: 12px; }
  .hero-stats dd { font-size: 1.4rem; }
  .intro.section-card { margin-top: 20px; }
  .intro > p:not(.lead) { line-height: 1.95; }
  .highlights { margin-top: 22px; }
  .highlights > .highlight-card { padding: 14px 18px; }
  .highlights > .highlight-card .highlight-label { margin-bottom: 6px; }
  .company-card > summary { padding: 20px 16px; }
  .company-body { padding: 18px 16px 20px; }
  .group-body { padding: 16px 7px 10px; }
  .group-body > .group-description { margin: 0 8px 18px; }
  .company-stack > .company-card > summary { padding: 17px 12px; }
  .company-stack .company-body { padding: 16px 10px; }
  .career-achievements { font-size: .875rem; }
  .cert-group:not(.language-block) > summary { gap: 6px 10px; }
  .cert-group-description { font-size: .8125rem; line-height: 1.8; }
  html[lang=en] .cert-group-description { font-size: .875rem; }
  .group-count, html[lang=en] .group-count { font-size: .8125rem; }
}
@media (max-width: 360px) {
  .hero-heading { column-gap: 12px; grid-template-columns: minmax(0, 1fr) 76px; }
  .portrait-frame img { width: 76px; height: 76px; }
  .hero-heading h1, html[lang=en] .hero-heading h1 { font-size: 1.75rem; }
}
@media screen {
  html:root[data-theme=dark] { --hero: radial-gradient(ellipse at 88% 15%, #29273f 0, transparent 65%), linear-gradient(125deg, #192235, #1d2538 60%, #252439); }
  html[data-theme=dark] .hero-heading h1 { background-image: linear-gradient(100deg, #9abaf2, #beb3ef); }
  html[data-theme=dark] .portrait-frame img { border-color: #747ca366; box-shadow: 0 12px 36px #00000024; }
}
@media print {
  .hero-inner, .hero-heading { display: block; padding: 0; }
  .hero-heading h1 { background: none; color: var(--ink); }
  .hero-role { font-size: 1.5rem; }
  .hero-lead { margin-bottom: 20px; }
}