/* ABOUT + PROCESS */
#about { background: var(--bg); }
.about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: center; }

.about-left { position: relative; }
.avatar-box {
  aspect-ratio: 1; border-radius: 28px; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.avatar-box::before {
  content: ''; position: absolute; inset: -1px;
  background: conic-gradient(from 0deg, var(--c), var(--p), var(--o), var(--c));
  border-radius: 29px; z-index: -1;
  animation: rotateBorder 4s linear infinite;
}
.avatar-box::after { content: ''; position: absolute; inset: 2px; background: var(--bg3); border-radius: 26px; z-index: 0; }
.avatar-emoji { position: relative; z-index: 1; }

.avatar-glow-blob {
  position: absolute; width: 120%; height: 120%; top: -10%; left: -10%;
  background: radial-gradient(ellipse at 60% 40%, rgba(176,96,255,0.15), transparent 60%);
  animation: blobFloat2 8s ease-in-out infinite; pointer-events: none;
}

.exp-pill {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--grad); border-radius: 16px;
  padding: 1.25rem 2rem; text-align: center;
  box-shadow: 0 15px 50px rgba(176,96,255,0.5);
}
.exp-pill .num { font-size: 2.8rem; font-weight: 900; font-family: var(--mono); color: #fff; line-height: 1; display: block; }
.exp-pill .lbl { font-size: 0.7rem; color: rgba(255,255,255,0.75); letter-spacing: 1.5px; }

.about-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; }
.about-text h2 span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.about-text p { color: var(--muted); font-size: 1rem; line-height: 1.9; margin-bottom: 1.25rem; }

.edu-cards { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.edu-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--glass); border: 1px solid var(--gb); transition: all 0.3s; }
.edu-card:hover { border-color: rgba(0,245,255,0.2); transform: translateX(6px); }
.edu-ic { font-size: 1.3rem; }
.edu-card h4 { font-size: 0.875rem; margin-bottom: 0.2rem; }
.edu-card p { font-size: 0.75rem; color: var(--muted); font-family: var(--mono); margin: 0; }

/* PROCESS */
#process { background: var(--bg2); }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.process-steps::before {
  content: ''; position: absolute; top: 5rem; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), rgba(255,255,255,0.08), transparent);
}
.p-step { padding: 2.5rem 1.5rem; text-align: center; }
.p-num { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 2px; margin-bottom: 1.5rem; display: block; }
.p-icon-wrap { width: 70px; height: 70px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 1.5rem; position: relative; z-index: 1; transition: all 0.4s; }
.p-step:hover .p-icon-wrap { background: var(--grad); border-color: transparent; transform: scale(1.1); box-shadow: 0 0 30px rgba(176,96,255,0.4); }
.p-step h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.p-step p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }