/* ======= ABOUT CARD — flip-panel system ======= */
.about-card {
  position: relative;
  width: min(94vw, 1180px);
  margin: 16px auto 80px;
  height: calc(100vh - 240px);
  min-height: 560px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.4);
  border-top: 1.5px solid rgba(255,255,255,0.85);
  border-left: 1.5px solid rgba(255,255,255,0.7);
  background: linear-gradient(145deg, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.18) 100%);
  backdrop-filter: blur(44px) saturate(190%);
  -webkit-backdrop-filter: blur(44px) saturate(190%);
  box-shadow:
    0 48px 96px rgba(0,0,0,0.13),
    0 12px 32px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(255,255,255,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.about-card-glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: 28px;
  background: radial-gradient(1000px circle at top left, rgba(255,255,255,0.26) 0%, transparent 42%);
}

/* Panel counter — top-right */
.about-counter {
  position: absolute; top: 22px; right: 30px; z-index: 10;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(13,11,46,0.35);
}

/* ── STAGE ── */
.about-stage {
  position: relative; flex: 1; overflow: hidden; z-index: 1;
}

/* ── PANELS ── */
.about-panel {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateX(72px);
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.about-panel.active {
  opacity: 1; transform: none; pointer-events: auto;
}
.about-panel.ap-prev {
  opacity: 0; transform: translateX(-72px); pointer-events: none;
}
.about-panel.ap-next {
  opacity: 0; transform: translateX(72px); pointer-events: none;
}

.about-panel-inner {
  height: 100%;
  overflow-y: auto;
  padding: 44px 60px 32px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(65,105,225,0.25) transparent;
}
.about-panel-inner::-webkit-scrollbar { width: 4px; }
.about-panel-inner::-webkit-scrollbar-thumb { background: rgba(65,105,225,0.25); border-radius: 4px; }

.about-panel-title {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 36px;
}

/* ── NAVIGATION BAR ── */
.about-nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px 28px 18px;
  border-top: 1px solid rgba(13,11,46,0.07);
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.about-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(13,11,46,0.14); background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer; color: var(--ink-dim); font-size: 15px;
  display: grid; place-items: center; font-family: inherit;
  transition: background 180ms, border-color 180ms, transform 180ms, opacity 180ms;
  flex-shrink: 0;
}
.about-arrow:hover:not(:disabled) {
  background: rgba(255,255,255,0.95); border-color: var(--accent);
  color: var(--accent); transform: scale(1.08);
}
.about-arrow:disabled { opacity: 0.3; cursor: default; }

.about-dots {
  display: flex; gap: 8px; align-items: center;
}

.about-dot {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 7px 16px; border-radius: 100px;
  border: 1px solid rgba(13,11,46,0.12); background: transparent;
  color: var(--ink-dim); cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.about-dot:hover { background: rgba(255,255,255,0.7); border-color: var(--accent); color: var(--accent); }
.about-dot.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(65,105,225,0.35);
}

/* ── PANEL 1: PROFILE ── */
.about-profile-inner {
  display: grid; grid-template-columns: auto 1fr; gap: 0 72px; align-items: start;
  height: 100%;
}

.about-profile-left { min-width: 220px; }

.about-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent); margin-bottom: 18px;
}

.about-name {
  font-size: clamp(58px, 7.8vw, 108px);
  font-weight: 200; line-height: 0.94; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 36px;
}
.about-name span {
  font-family: 'Instrument Serif', serif; font-style: italic; color: var(--accent);
}

.about-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.about-stat { display: flex; flex-direction: column; gap: 4px; }
.about-stat-val {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 200; letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.about-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim);
}

.about-profile-right { padding-top: 6px; display: flex; flex-direction: column; justify-content: center; }

.about-bio {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.72; color: var(--ink-dim); max-width: 62ch; margin: 0 0 36px;
}
.about-bio strong { color: var(--accent); font-weight: 500; }
.about-bio em { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--accent); }

/* ── PANEL 2: JOURNEY ── */
.journey-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border-top: 1px solid rgba(13,11,46,0.07);
  border-left: 1px solid rgba(13,11,46,0.07);
}
.journey-item {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 22px 26px;
  border-right: 1px solid rgba(13,11,46,0.07);
  border-bottom: 1px solid rgba(13,11,46,0.07);
  transition: background 180ms; cursor: default;
}
.journey-item:hover { background: rgba(65,105,225,0.04); }
.journey-item.current { background: rgba(65,105,225,0.06); }
.journey-item.current:hover { background: rgba(65,105,225,0.09); }

.journey-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(13,11,46,0.18); margin-top: 6px;
  transition: background 180ms, box-shadow 180ms;
}
.journey-item.current .journey-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.journey-item:hover .journey-dot { background: var(--accent); }

.journey-org {
  font-size: 16px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 6px;
}
.journey-item.current .journey-org { color: var(--accent); }

.journey-role {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 5px;
}
.journey-type {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgba(13,11,46,0.3);
}

/* ── PANEL 3: SKILLS ── */
.skill-categories { display: flex; flex-direction: column; }
.skill-cat {
  padding: 22px 0;
  border-bottom: 1px solid rgba(13,11,46,0.06);
}
.skill-cat:last-child { border-bottom: none; }

.skill-cat-name {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 24px; color: var(--ink); margin-bottom: 14px; display: block;
}

/* ── PANEL 4: EDUCATION ── */
.edu-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.edu-section-label::before { content:''; width:20px; height:1px; background: rgba(13,11,46,0.2); }

.edu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.edu-card {
  padding: 28px 30px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.6);
  border-top: 1.5px solid rgba(255,255,255,0.9);
  background: linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 200ms, box-shadow 200ms;
}
.edu-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(65,105,225,0.13); }

.edu-degree {
  font-size: 23px; font-weight: 300; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.edu-field {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 27px; color: var(--accent); margin-bottom: 16px; line-height: 1.2;
}
.edu-school {
  font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 5px;
}
.edu-location {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim);
}

.certs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.cert-badge {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.85);
  background: linear-gradient(140deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.22) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 200ms, box-shadow 200ms;
}
.cert-badge:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(65,105,225,0.14); }
.cert-icon { font-size: 22px; flex-shrink: 0; line-height: 1.25; }
.cert-name { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.3; margin-bottom: 6px; }
.cert-detail {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim);
}

/* ── TAG ROW (shared with work view cards) ── */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);
  padding: 7px 14px; border: 1px solid rgba(65,105,225,0.22);
  border-radius: 100px; background: var(--accent-soft);
  transition: background 150ms, border-color 150ms;
}
.tag:hover { background: rgba(65,105,225,0.14); border-color: rgba(65,105,225,0.45); }

/* ── DOC LINKS ── */
.doc-links { display: flex; flex-wrap: wrap; gap: 12px; }
.doc-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink);
  padding: 13px 22px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; transition: border-color 200ms, box-shadow 200ms, transform 200ms;
  text-decoration: none;
}
.doc-link:hover {
  border-color: var(--accent); box-shadow: 0 0 18px var(--accent-glow);
  transform: translateY(-1px); color: var(--accent);
}
.doc-link .doc-icon { font-size: 15px; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .about-card { height: calc(100vh - 200px); }
  .about-panel-inner { padding: 32px 28px 24px; }
  .about-profile-inner { grid-template-columns: 1fr; gap: 28px 0; }
  .about-name { font-size: clamp(52px, 14vw, 80px); }
  .about-stats { gap: 18px; }
  .journey-grid { grid-template-columns: 1fr 1fr; }
  .about-dots .about-dot { font-size: 9px; padding: 6px 12px; }
}
@media (max-width: 560px) {
  .about-card { height: calc(100vh - 180px); }
  .about-panel-inner { padding: 24px 20px 20px; }
  .journey-grid { grid-template-columns: 1fr; }
  .certs-grid { grid-template-columns: 1fr; }
  .edu-grid { grid-template-columns: 1fr; }
  .about-dots { gap: 6px; }
  .about-dot { font-size: 8px; padding: 5px 10px; letter-spacing: 0.08em; }
}