/* About page themed styles: matches styles.css primitives */

.about-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.about-bg .agrid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(169,211,255,0.12), transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(255,224,191,0.12), transparent 40%),
              radial-gradient(circle at 45% 80%, rgba(215,255,230,0.12), transparent 40%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 60%, transparent);
}
.about-bg .ashape {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.3;
  mix-blend-mode: multiply;
  animation: abFloat 22s ease-in-out infinite alternate;
}
.about-bg .ashape.s1 { left: 8%; top: 16%; background: #a9d3ff; }
.about-bg .ashape.s2 { right: 10%; top: 40%; background: #ffe0bf; animation-duration: 26s; }
.about-bg .ashape.s3 { left: 42%; bottom: 10%; background: #d7ffe6; animation-duration: 28s; }
@keyframes abFloat { to { transform: translateY(-26px) translateX(16px) scale(1.06); } }

/* Page scaffold */
.about-page { position: relative; z-index: 1; }

.about-hero {
  position: relative;
  padding: 120px 0 48px; /* offset fixed navbar */
}
.about-hero .hero-content h1 {
  margin: 0 0 12px;
  font-size: clamp(42px, 6vw, 56px);
  line-height: 1.1;
}
.about-hero .hero-content p {
  margin: 0 0 18px;
  color: var(--muted, #5a5f67);
  font-size: clamp(16px, 2.4vw, 20px);
}
.about-hero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.btn.primary { background: #111111; color: #ffffff; padding: 12px 18px; border-radius: 10px; text-decoration: none; }
.btn.ghost { background: transparent; color: #111111; border: 1px solid rgba(0,0,0,0.12); padding: 12px 18px; border-radius: 10px; text-decoration: none; }
.btn.primary:hover { opacity: 0.95; }
.btn.ghost:hover { background: rgba(0,0,0,0.04); }

.hero-accents { position: absolute; inset: -20px 0 -40px 0; overflow: hidden; pointer-events: none; }
.hblob { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(22px); opacity: 0.32; mix-blend-mode: multiply; animation: hFloat 18s ease-in-out infinite alternate; }
.hblob.h1 { left: 10%; top: 8%; background: #a9d3ff; }
.hblob.h2 { right: 8%; top: 36%; background: #ffe0bf; animation-duration: 20s; }
.hblob.h3 { left: 44%; bottom: -10px; background: #d7ffe6; animation-duration: 22s; }
@keyframes hFloat { to { transform: translateY(-24px) translateX(16px) scale(1.06); } }

/* Story */
.about-story { padding: 24px 0 8px; }
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.story-card {
  background: #ffffff;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.story-card h2 { margin: 0 0 8px; font-size: 20px; }
.story-card p { margin: 0; color: var(--muted, #5a5f67); }

/* Values */
.about-values { padding: 24px 0; }
.about-values h2 { text-align: center; margin: 0 0 16px; font-size: clamp(24px, 3.6vw, 32px); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.value {
  position: relative;
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(180deg, #111 0%, #1d1d1d 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.value .icon-bubble { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; margin-bottom: 8px; }
.value h3 { margin: 0 0 6px; font-size: 16px; }
.value p { margin: 0; color: rgba(255,255,255,0.86); }

/* Experience */
.about-experience { padding: 24px 0; }
.about-experience h2 { text-align: center; margin: 0 0 10px; font-size: clamp(24px, 3.6vw, 32px); }
.about-experience .lead { text-align: center; max-width: 780px; margin: 0 auto 18px; color: var(--muted, #5a5f67); }
.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.xp-card { background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.1)); border-radius: 14px; padding: 18px; box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.xp-card h3 { margin: 0 0 6px; font-size: 16px; }
.xp-card p { margin: 0; color: var(--muted, #5a5f67); }

/* Process */
.about-process { padding: 24px 0; }
.about-process h2 { text-align: center; margin: 0 0 16px; font-size: clamp(24px, 3.6vw, 32px); }
.process { position: relative; padding: 32px 0 0; }
.process-track { display: none; }
.process-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; }
.p-step { text-align: center; position: relative; }
.p-node { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 16px 40px rgba(99, 102, 241, 0.4); display: grid; place-items: center; animation: bob 5s ease-in-out infinite; border: 2px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; }
.p-step:hover .p-node { transform: scale(1.1) translateY(-4px); box-shadow: 0 20px 50px rgba(99, 102, 241, 0.5); }
.p-node span { color: #fff; font-weight: 700; font-size: 18px; }
.p-step .p-arrow { position: absolute; left: calc(50% + 60px); top: 36px; width: calc(100% - 120px); height: 0; display: block; pointer-events: none; }
.p-step .p-arrow span { position: relative; display: block; width: 85%; height: 3px; background: linear-gradient(90deg, #94a3b8, #cbd5e1); opacity: 0.8; border-radius: 2px; }
.p-step .p-arrow span::after { content: ""; position: absolute; right: -12px; top: -6px; width: 0; height: 0; border-left: 12px solid #cbd5e1; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.p-step:last-child .p-arrow { display: none; }
.p-step p { margin: 0; color: #111111; font-weight: 700; letter-spacing: .3px; font-size: 16px; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }

/* Metrics */
.about-metrics { padding: 8px 0 24px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric { background:#fff; border:1px solid var(--border, rgba(0,0,0,0.1)); border-radius: 14px; padding: 18px; text-align:center; box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.metric .num { margin: 0; font-size: 36px; font-weight: 800; color: #f6b400; }
.metric .label { margin: 4px 0 0; color: var(--muted, #5a5f67); font-weight: 600; }

/* CTA */
.about-cta { padding: 8px 0 64px; text-align: center; }
.about-cta h2 { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 32px); }
.about-cta p { margin: 0 0 18px; color: var(--muted, #5a5f67); }
.about-cta .btn.primary { position: relative; animation: ctaPulse 2.4s ease-in-out infinite; }
@keyframes ctaPulse { 0%,100% { transform: translateY(0); box-shadow: 0 8px 24px rgba(0,0,0,0.08);} 50% { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.12);} }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .xp-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .about-hero { padding-top: 110px; }
  .story-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .xp-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr; }
}