

.about-sec{position:relative;overflow:clip;padding:120px 24px;background:linear-gradient(180deg,#F3F6FF,#F3F6FF)}
.about-sec--pad{padding-bottom:240px}
.about-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.75 0 0 0 0 0.8 0 0 0 0 0.95 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.about-glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(64px)}
.about-glow.g1{width:480px;height:480px;left:6%;top:12%;background:radial-gradient(closest-side,rgba(25,92,255,.2),transparent 70%);animation:about-drift1 24s ease-in-out infinite alternate}
.about-glow.g2{width:340px;height:340px;left:22%;bottom:4%;background:radial-gradient(closest-side,rgba(252,61,67,.07),transparent 70%);animation:about-drift2 30s ease-in-out infinite alternate}
.about{position:relative;z-index:2;display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:center;max-width:var(--container-content);margin:0 auto;text-align:right}

.about .pwrap{position:relative;align-self:start;margin-top:var(--sp-6)}
.about .portrait{aspect-ratio:4/5;border-radius:var(--r-card);position:relative;z-index:1;background:linear-gradient(165deg,#F3F6FF,#e2eafc);border:1px solid rgba(25,92,255,0.22);box-shadow:0 26px 60px rgba(11,15,30,0.12),inset 0 1px 0 rgba(255,255,255,0.55)}
.about .portrait::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);background:radial-gradient(90% 60% at 50% 0%,rgba(25,92,255,0.12),transparent 65%)}
.about .portrait img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:105%;width:auto;max-width:none;filter:drop-shadow(0 20px 38px rgba(11,15,30,0.22))}
.about .afr{position:absolute;top:38%;left:-22px;z-index:3;width:138px;height:88px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#fff,#e2eafc);border:1px solid rgba(25,92,255,.22);box-shadow:0 22px 50px rgba(25,92,255,.22),inset 0 1px 0 rgba(255,255,255,.92);animation:about-hover 9s ease-in-out infinite alternate;transform:rotate(-4deg);--r:-4deg}
.about .afr .chip{position:absolute;top:8px;right:9px;display:flex;align-items:center;gap:5px;font-family:var(--font-label);font-weight:700;font-size:9px;letter-spacing:var(--ls-tag)/*latin*/;color:var(--muted);background:rgba(255,255,255,0.82);border:1px solid rgba(25,92,255,0.12);border-radius:100px;padding:3px 8px}
.about .afr .chip .rd{width:5px;height:5px;border-radius:50%;background:var(--red);animation:u-blink 1.6s ease-in-out infinite}
.about .afr .bar{position:absolute;bottom:9px;left:9px;right:9px;height:3px;border-radius:3px;background:rgba(25,92,255,0.12)}
.about .afr .bar::after{content:"";position:absolute;top:0;right:0;height:100%;border-radius:3px;background:var(--blue);animation:about-prog 9s linear infinite}
.about .aplay{position:absolute;bottom:32px;right:-30px;z-index:4;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(25,92,255,0.35);box-shadow:0 16px 38px rgba(25,92,255,0.22),inset 0 1px 0 rgba(255,255,255,.92);animation:about-hover 7s ease-in-out .6s infinite alternate;--r:3deg;transform:rotate(3deg);pointer-events:none}
.about .aplay::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(25,92,255,0.22);animation:about-pulse 2.6s ease-out infinite}
.about .aplay svg{position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);width:24px;height:24px;fill:var(--blue);stroke:var(--blue);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.about .spark{position:absolute;z-index:4;color:var(--blue);pointer-events:none}
.about .spark svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;overflow:visible;animation:about-breathe 4.2s ease-in-out var(--pd,0s) infinite}
.about .sp1{top:-44px;right:14%;width:30px;height:30px;--pd:.3s}
.about .sp2{top:-20px;right:2%;width:20px;height:20px;--pd:1.4s;color:var(--red)}
.about-h{font-weight:700;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:#000;margin-bottom:16px}

.about p{font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);
   color:var(--tx-ink);margin-bottom:var(--sp-6);max-width:60ch}
.about p b{font-weight:var(--fw-bold);color:var(--dark)}
.about .xbio[hidden]{display:none}
.about .amore{background:none;border:0;padding:0;cursor:pointer;position:relative}

.about .amore::after{content:"";position:absolute;inset:-9px 0}

.about .aless{background:none;border:0;padding:0;cursor:pointer;position:relative;margin-top:var(--sp-2)}
.about .aless::after{content:"";position:absolute;inset:-9px 0}
.about .amore[hidden],.about .aless[hidden]{display:none}
@keyframes about-drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-4vw,3vh) scale(1.08)}}
@keyframes about-drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3vw,-3vh) scale(1.06)}}
@keyframes about-hover{0%{transform:translateY(0) rotate(var(--r,0deg))}100%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes about-prog{0%{width:6%}100%{width:96%}}
@keyframes about-pulse{0%{transform:scale(.8);opacity:0.82}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}
@keyframes about-breathe{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2.5px) rotate(-2.5deg)}}
@media(min-width:901px) and (max-width:1100px){.about .aplay{right:16px;bottom:24px}}
@media(min-width:641px) and (max-width:900px){.about{max-width:640px;margin-inline:auto}}
@media(max-width:900px){
  .about-sec{padding-top:72px;padding-bottom:72px}
  .about-sec--pad{padding-bottom:150px}
  .about{grid-template-columns:1fr;text-align:center;gap:0}

  .about p,.about ul,.about ol,.about li,.about h3{text-align:right}
  .about p{margin-inline:auto}
  .about .pwrap{order:2;max-width:320px;width:100%;margin:96px auto 0}
    .about .afr{left:10px;top:-34px;z-index:0;width:120px;height:76px;filter:blur(1.1px);opacity:0.82}
  .about .aplay{right:16px;bottom:16px}
  .about .sp1{top:-38px;right:10%}
  .about .sp2{top:-16px;right:3%}
}

