/* About Me follows the introduction's spacious, blue visual language. */
html body.portfolio-home #section-about.about-simple {
  --about-bg: #fff;
  --about-text: #192638;
  --about-muted: #536378;
  --about-accent: #1469ac;
  --about-line: #e4eaf1;
  --about-tint: #eaf4fc;
  background: var(--about-bg) !important;
  padding: 0 0 44px !important;
  border-block: 1px solid var(--about-line);
}
html body.portfolio-home.dark #section-about.about-simple {
  --about-bg: #141c29;
  --about-text: #f5f7fb;
  --about-muted: #b2bfd0;
  --about-accent: #80c8ff;
  --about-line: #334256;
  --about-tint: #244363;
}
#section-about.about-simple::before { display: none; }
.about-simple-heading { padding: 24px var(--home-gutter); background: var(--home-section-heading); border-bottom: 1px solid var(--about-line); text-align: center; }
.about-simple-shell { width: min(1160px, calc(100% - 2 * var(--home-gutter))); margin-inline: auto; padding-top: 28px; }
#section-about .about-simple-label { margin: 0; color: var(--about-accent); font: 800 32px/1.2 'Manrope', sans-serif; letter-spacing: -1px; }
.about-simple-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 7vw, 110px); align-items: center; }
.about-profile-wrap { position: relative; padding: 10px 0; max-width: 370px; width: 100%; margin-inline: auto; }
.about-profile-orbit { position: absolute; width: 195px; height: 195px; border-radius: 50%; background: var(--about-tint); top: -17px; left: -30px; }
.about-profile { position: relative; overflow: hidden; border-radius: 26px; background: #173d5a; padding: 36px 30px 27px; color: #fff; }
.about-profile::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); top: -100px; right: -100px; pointer-events: none; }
.about-profile-mark { display: flex; align-items: center; min-height: 132px; margin-bottom: 26px; }
.about-profile-mark img { display: block; width: 240px; max-width: 100%; height: auto; filter: brightness(0) invert(1); }
#section-about .about-profile-name { margin: 0 0 5px; color: #fff; font: 800 25px/1.3 'Manrope', sans-serif; letter-spacing: -.7px; }
#section-about .about-profile-role { margin: 0 0 12px; color: #e8f4ff; font-size: 14px; line-height: 1.5; }
#section-about .about-profile-location { margin: 0; color: #bdd3e5; font-size: 11px; line-height: 1.7; }
#section-about .about-profile-certificate { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-block: 20px; border-block: 1px solid rgba(255,255,255,.18); color: #fff !important; font-size: 13px; font-weight: 700; }
.about-profile-certificate svg { flex: 0 0 26px; width: 26px; height: 26px; color: #97d5ff; }
.about-profile-certificate small { display: block; margin-top: 3px; color: #bdd3e5; font-size: 11px; font-weight: 400; }
.about-profile-certificate > span:last-child { margin-left: auto; color: #97d5ff; font-size: 17px; }
#section-about .about-profile-availability { display: flex; align-items: center; gap: 11px; margin: 20px 0 0; color: #deecf6; font-size: 11px; line-height: 1.6; }
#section-about .about-simple-title { margin: 0 0 20px; color: var(--about-text); font: 800 clamp(27px, 2.8vw, 38px)/1.2 'Manrope', sans-serif; letter-spacing: -1.2px; text-transform: none; }
#section-about .about-simple-bio { margin: 0 0 24px; color: var(--about-muted); font-size: 15px; line-height: 1.85; max-width: 570px; }
.about-simple-skills { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.about-simple-skills li { display: flex; align-items: flex-start; gap: 13px; }
.about-skill-check { display: grid; place-items: center; flex: 0 0 21px; height: 21px; border-radius: 50%; background: var(--about-tint); color: var(--about-accent); font-size: 12px; font-weight: 800; }
#section-about .about-simple-skills h4 { margin: 0 0 4px; color: var(--about-text); font: 700 14px/1.5 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; }
#section-about .about-simple-skills p { margin: 0; color: var(--about-muted); font-size: 13px; line-height: 1.7; }
.about-simple-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#section-about .about-simple-actions .home-button { min-height: 48px; padding: 13px 19px; font: 600 12px/1.5 'Manrope', sans-serif; border-radius: 10px; }
#section-about .about-resume-button { background: transparent; border-color: var(--about-line); color: var(--about-text) !important; cursor: pointer; }
.about-simple-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--about-line); }
.about-simple-stack > span { color: var(--about-muted); font-size: 12px; }
.about-simple-stack ul { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.about-simple-stack li { color: var(--about-text); font-size: 12px; font-weight: 600; }
#section-about .about-simple-stack > a { margin-left: auto; color: var(--about-accent) !important; font-size: 12px; font-weight: 700; }
.about-simple-stack > a span { margin-left: 8px; }
html body.portfolio-home.home-at-about #hsnakd-notice { visibility: hidden !important; pointer-events: none !important; }
body.portfolio-home.home-at-about .chatbot-invite { display: none !important; }
@media (min-width: 801px) and (max-height: 800px) {
  html body.portfolio-home #section-about.about-simple { padding-block: 0 30px !important; }
  .about-simple-heading { padding-block: 22px; }
  .about-simple-shell { padding-top: 24px; }
  #section-about .about-simple-title { font-size: 30px; margin-bottom: 16px; }
  #section-about .about-simple-bio { font-size: 14px; margin-bottom: 20px; }
  .about-simple-skills { gap: 14px; }
  .about-simple-actions { margin-top: 22px; }
  .about-simple-stack { margin-top: 28px; padding-top: 20px; }
  .about-profile-mark { min-height: 110px; margin-bottom: 20px; }
}
@media (max-width: 1000px) {
  .about-simple-grid { grid-template-columns: .85fr 1.15fr; gap: 40px; }
  .about-profile { padding-inline: 24px; }
  .about-simple-stack > a { margin-left: 0; }
}
@media (max-width: 800px) {
  html body.portfolio-home #section-about.about-simple { padding-block: 0 40px !important; }
  .about-simple-shell { max-width: 560px; padding-top: 36px; }
  .about-simple-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-profile-wrap { max-width: 100%; padding: 0; }
  .about-profile { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; padding: 24px; border-radius: 20px; }
  .about-profile-mark { grid-row: 1 / 4; min-height: 0; margin: 0; width: 100px; }
  .about-profile-mark img { width: 100%; }
  #section-about .about-profile-name { font-size: 21px; }
  #section-about .about-profile-role { margin-bottom: 6px; font-size: 12px; }
  #section-about .about-profile-location { font-size: 10px; }
  #section-about .about-profile-certificate { grid-column: 1 / -1; margin-top: 20px; padding-block: 16px; }
  #section-about .about-profile-availability { grid-column: 1 / -1; margin-top: 16px; }
  #section-about .about-simple-title { font-size: 31px; }
  .about-simple-stack { gap: 16px; margin-top: 30px; }
  .about-simple-stack > span, .about-simple-stack ul { width: 100%; }
  .about-simple-stack ul { gap: 12px 20px; }
}
@media (max-width: 540px) {
  .about-simple-shell { width: calc(100% - 40px); }
  .about-profile { padding: 22px; column-gap: 16px; }
  .about-profile-mark { width: 78px; }
  #section-about .about-profile-name { font-size: 19px; }
  #section-about .about-simple-label { font-size: 28px; }
  #section-about .about-simple-title { font-size: 29px; letter-spacing: -.8px; }
  #section-about .about-simple-bio { font-size: 14px; }
  .about-simple-actions { gap: 10px; }
  #section-about .about-simple-actions .home-button { padding: 12px 15px; font-size: 11px; gap: 10px; }
}
@media (max-width: 360px) {
  .about-profile { column-gap: 12px; padding: 20px 16px; }
  .about-profile-mark { width: 58px; }
  #section-about .about-profile-name { font-size: 17px; }
  #section-about .about-simple-title { font-size: 26px; }
}