.about-main {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 80px;
}

.about-crumb {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 26px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.about-main h1 {
  margin: 0 0 18px;
  color: var(--color-white);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
}
.about-main h1 span { color: var(--color-primary); }

.about-lead {
  color: rgba(232, 255, 252, 0.82);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.about-card {
  position: relative;
  border: 1px solid rgba(0, 229, 199, 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  padding: 14px;
}
.about-card .corner { position: absolute; width: 16px; height: 16px; border: 1.6px solid var(--color-primary); opacity: 0.6; z-index: 2; }
.about-card .tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.about-card .br { bottom: 5px; right: 5px; border-left: none; border-top: none; }

.about-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 14px;
  font-size: 13.5px;
}
/* dividers come from row spacing, so removing any row never leaves a gap or a double line */
.about-row + .about-row { border-top: 1px solid rgba(255,255,255,0.06); }
.about-row .k { color: var(--color-primary); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.about-row .v { color: var(--color-white); font-weight: 500; }
.about-row .v.placeholder { color: var(--color-text-muted); font-style: italic; }

.about-section-title {
  color: var(--color-white);
  font-size: 19px;
  font-weight: 700;
  margin: 30px 0 10px;
}

.about-report-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--color-primary);
  font-size: 14px;
  text-decoration: none;
  margin-top: 14px;
}


/* ---- contact ---- */
#contact { scroll-margin-top: 90px; }
.contact-list { margin-top: 14px; }
.contact-btns { display: flex; flex-direction: column; gap: 12px; }
.contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px;
  border: 1px solid rgba(0, 229, 199, 0.4); border-radius: 999px;
  background: transparent; color: var(--color-primary);
  font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.contact-btn.is-primary { background: var(--color-primary); color: #001411; border-color: var(--color-primary); }
a.contact-btn:hover, a.contact-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 0 22px rgba(0, 229, 199, 0.22); }
.contact-ico { display: flex; flex-shrink: 0; }
.contact-btn.is-pending { background: none; border: 1px dashed rgba(0, 229, 199, 0.2); color: var(--color-text-muted); cursor: default; }
.contact-btn small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.contact-email { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 8px 8px 8px 16px; border: 1px solid rgba(0, 229, 199, 0.18); border-radius: var(--radius-md); }
.contact-email-text { min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--color-white); user-select: all; }
.contact-copy { flex-shrink: 0; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(0, 229, 199, 0.4); background: none; color: var(--color-primary); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.contact-note { margin: 12px 0 0; color: var(--color-text-muted); font-size: 12.5px; }
@media (min-width: 640px) { .contact-btns { flex-direction: row; } .contact-btn { flex: 1; } }


/* ---------- layout ---------- */
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.about-side { margin: 6px 0 4px; }
.about-text > .about-section-title:first-child { margin-top: 30px; }

@media (min-width: 900px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "intro side" "text side";
    column-gap: 56px; align-items: start;
  }
  .about-intro { grid-area: intro; max-width: 720px; }
  .about-text  { grid-area: text;  max-width: 720px; }
  .about-side  { grid-area: side; margin: 4px 0 0; position: sticky; top: 100px; }
  .about-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- aim ---------- */
.about-objectives-title { margin: 18px 0 8px; color: var(--color-primary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.about-objectives { margin: 0 0 16px; padding-left: 22px; color: rgba(232, 255, 252, 0.82); font-size: 15px; line-height: 1.65; }
.about-objectives li { margin-bottom: 8px; padding-left: 4px; }
.about-objectives li::marker { color: var(--color-primary); font-family: var(--font-mono); font-weight: 700; }

/* ---------- feature cards ---------- */
.about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0 6px; }
.about-feature { display: flex; gap: 12px; padding: 16px; border: 1px solid rgba(0, 229, 199, 0.18); border-radius: var(--radius-lg); background: rgba(7, 22, 25, 0.6); }
.about-feature svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; color: var(--color-primary); }
.about-feature h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--color-white); }
.about-feature p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
@media (max-width: 560px) { .about-features { grid-template-columns: 1fr; } }

/* ---------- tags ---------- */
.about-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.about-tags li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--color-primary); border: 1px solid rgba(0, 229, 199, 0.35); padding: 6px 12px; border-radius: 999px; }