.page-about {
  --about-gap: 2.25rem;
  --about-space-y: clamp(2.5rem, 7vw, 5.5rem);
  overflow-x: hidden;
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(122, 0, 255, 0.12) 0%, rgba(11, 30, 58, 0) 260px),
    var(--color-deep-space);
  font-family: var(--font-body);
  color: var(--color-cloud-white);
}
.page-about .about-hero {
  position: relative;
  padding: 1.75rem 0 2.25rem;
}
.page-about .about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 247, 250, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 247, 250, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 88%);
}
.page-about .about-hero-container { position: relative; z-index: 1; }
.page-about .breadcrumb { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.page-about .about-hero-grid { display: grid; gap: var(--about-gap); align-items: center; }
.page-about .about-hero-copy { max-width: 680px; }
.page-about .about-kicker { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neon-green); }
.page-about .about-hero-copy h1 { margin: 0 0 1.25rem; font-family: var(--font-heading); font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: 0.02em; line-height: 1.12; color: var(--color-cloud-white); }
.page-about .about-hero-lead { margin: 0 0 1.5rem; color: var(--color-cloud-white); font-size: 1rem; line-height: 1.8; }
.page-about .about-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.page-about .about-hero-figure { margin: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 18px 6px 18px 6px; background: var(--color-midnight); box-shadow: var(--shadow-card); }
.page-about .about-hero-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-about .about-update-strip { position: relative; z-index: 2; margin-top: 1.75rem; background: rgba(255, 255, 255, 0.03); border-block: 1px solid var(--glass-border); }
.page-about .about-update-inner { display: grid; gap: 0.85rem; padding: 1.25rem 0; }
.page-about .about-update-label { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-gold); }
.page-about .about-update-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.page-about .about-update-list li { position: relative; padding-left: 1.4rem; color: var(--color-slate-blue); line-height: 1.6; font-size: 0.9375rem; }
.page-about .about-update-list li::before { content: ''; position: absolute; left: 2px; top: 0.58em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-neon-green); box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.16); }
.page-about .section { padding-top: var(--about-space-y); }
.page-about .section-heading { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; }
.page-about .section-number { position: relative; top: 0.2rem; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: 0.04em; background: linear-gradient(135deg, var(--color-electric-purple), var(--color-neon-green)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.page-about .section-heading-copy { display: grid; gap: 0.35rem; }
.page-about .section-kicker { margin: 0; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-slate-blue); }
.page-about .section-heading h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; color: var(--color-cloud-white); }
.page-about .intro-layout { display: grid; gap: var(--about-gap); }
.page-about .intro-text { font-size: 0.975rem; line-height: 1.8; }
.page-about .intro-text p { margin: 0 0 1rem; }
.page-about .intro-features { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.page-about .intro-features li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-bg); }
.page-about .feature-key { font-weight: 600; color: var(--color-cloud-white); }
.page-about .feature-desc { font-size: 0.875rem; color: var(--color-neon-green); text-align: right; }
.page-about .about-timeline { position: relative; display: grid; gap: 2.5rem; }
.page-about .milestone-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.page-about .milestone-row::before { content: ''; position: absolute; left: 20px; top: 26px; bottom: -2rem; width: 2px; background: linear-gradient(180deg, var(--color-electric-purple), rgba(122, 0, 255, 0.12)); transform: translateX(-1px); }
.page-about .milestone-row:last-child::before { content: none; }
.page-about .milestone-point { position: relative; width: 44px; min-height: 56px; }
.page-about .milestone-point::after { content: ''; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-electric-purple); box-shadow: 0 0 0 4px rgba(122, 0, 255, 0.18), 0 0 18px rgba(122, 0, 255, 0.55); }
.page-about .milestone-tip { position: absolute; left: 34px; top: 12px; z-index: 4; padding: 0.25rem 0.55rem; border: 1px solid var(--glass-border); border-radius: 6px; background: var(--color-midnight); color: var(--color-neon-green); font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(-4px); pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; }
.page-about .milestone-point:hover .milestone-tip,
.page-about .milestone-point:focus .milestone-tip,
.page-about .milestone-point:focus-within .milestone-tip { opacity: 1; visibility: visible; transform: translateX(0); }
.page-about .milestone-point:focus-visible { outline: 2px solid var(--color-neon-green); outline-offset: 2px; border-radius: 50%; }
.page-about .milestone-body { padding: 1.5rem; border-radius: var(--radius-md); }
.page-about .milestone-year { display: inline-block; margin-bottom: 0.75rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(0, 255, 136, 0.12); color: var(--color-neon-green); font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; }
.page-about .milestone-body h3 { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: 0.02em; color: var(--color-cloud-white); }
.page-about .milestone-body p { margin: 0; color: var(--color-slate-blue); font-size: 0.9375rem; line-height: 1.7; }
.page-about .data-grid { display: grid; gap: var(--about-gap); align-items: center; }
.page-about .data-copy p { color: var(--color-cloud-white); font-size: 0.975rem; line-height: 1.8; }
.page-about .data-copy p + p { margin-bottom: 0; }
.page-about .data-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0; }
.page-about .data-stat { padding: 1.1rem 1.25rem; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-bg); }
.page-about .data-stat dt { margin-bottom: 0.5rem; color: var(--color-slate-blue); font-size: 0.8125rem; letter-spacing: 0.06em; }
.page-about .data-stat dd { margin: 0; color: var(--color-neon-green); font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; line-height: 1.2; letter-spacing: 0.04em; }
.page-about .data-figure { margin: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--color-midnight); }
.page-about .data-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-about .team-grid { display: grid; gap: var(--about-gap); align-items: start; }
.page-about .team-lead p { margin-top: 1.25rem; margin-bottom: 1rem; color: var(--color-cloud-white); font-size: 0.975rem; line-height: 1.8; }
.page-about .team-lead .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.page-about .team-size { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; color: var(--color-neon-green); font-family: var(--font-heading); font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: 0.04em; }
.page-about .team-size span { color: var(--color-cloud-white); font-size: 1rem; font-weight: 400; letter-spacing: 0.1em; }
.page-about .team-departments { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.page-about .department-card { padding: 1.25rem 1.3rem; border-radius: var(--radius-md); }
.page-about .department-card h3 { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0.02em; color: var(--color-cloud-white); }
.page-about .department-card p { margin: 0; color: var(--color-slate-blue); font-size: 0.875rem; line-height: 1.65; }
.page-about .department-card.is-service-card { grid-column: span 1; border-color: rgba(122, 0, 255, 0.45); }
.page-about .team-figure { margin: 2rem 0 0 auto; max-width: 760px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--color-midnight); }
.page-about .team-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-about .trust-grid { display: grid; gap: 1.25rem; }
.page-about .trust-card { padding: 1.5rem; border-radius: var(--radius-md); }
.page-about .trust-card h3 { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--color-gold); }
.page-about .trust-card p { margin: 0; color: var(--color-slate-blue); line-height: 1.7; font-size: 0.9375rem; }
.page-about .trust-note { margin: 2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--color-electric-purple); color: var(--color-cloud-white); font-size: 0.9375rem; line-height: 1.8; }

@media (min-width: 640px) {
  .page-about .about-update-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .team-departments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .department-card.is-service-card { grid-column: span 2; }
}

@media (min-width: 800px) {
  .page-about .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 920px) {
  .page-about .about-hero { padding-bottom: 3.5rem; }
  .page-about .about-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; }
  .page-about .about-hero-figure { transform: perspective(900px) rotateY(-4deg); }
  .page-about .about-update-inner { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }
  .page-about .about-intro .container,
  .page-about .about-milestones .container { max-width: 1040px; }
  .page-about .intro-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .page-about .about-timeline { gap: 2rem; }
  .page-about .milestone-row { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); column-gap: 0; }
  .page-about .milestone-row::before { left: 50%; }
  .page-about .milestone-point { grid-column: 2; grid-row: 1; justify-self: center; width: 52px; }
  .page-about .milestone-point::after { left: 18px; }
  .page-about .milestone-tip { left: 36px; }
  .page-about .milestone-row:nth-child(odd) .milestone-body { grid-column: 1; grid-row: 1; text-align: right; }
  .page-about .milestone-row:nth-child(even) .milestone-body { grid-column: 3; grid-row: 1; }
  .page-about .data-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .page-about .data-copy { padding-right: 1rem; }
  .page-about .team-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}