/* About page — content/proof enhancements in the existing EMX visual system.
   Loaded only on about.html. Purple + neon-green glass, no palette changes. */

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Hero visual: glow, badge, tilt */
.about-hero-visual { position: relative; margin: 0; border-radius: 20px; transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.about-hero-visual img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid rgba(184,156,255,.28); box-shadow: 0 30px 70px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(168,85,247,.16), 0 0 44px -6px rgba(168,85,247,.45), 0 0 60px -10px rgba(125,255,80,.28); }
.about-hero-visual::after { content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 30px; background: radial-gradient(60% 60% at 30% 20%, rgba(168,85,247,.4), transparent 70%), radial-gradient(60% 60% at 80% 90%, rgba(125,255,80,.28), transparent 70%); filter: blur(30px); opacity: .8; }
.about-badge { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 100px; font: 800 .64rem/1 var(--emx-font-body, "Inter", sans-serif); letter-spacing: .14em; color: #eafce0; background: rgba(8,5,16,.7); border: 1px solid rgba(125,255,80,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.about-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--emx-green, #7dff4f); box-shadow: 0 0 10px var(--emx-green, #7dff4f); }

/* PRIORITY 1 — real work grid */
.built-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.built-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: 18px; text-decoration: none; color: #f4f1ff;
  background: linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.012)) padding-box, linear-gradient(150deg, rgba(255,255,255,.16), rgba(168,85,247,.34) 52%, rgba(125,255,80,.28)) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 16px 40px rgba(0,0,0,.34); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; }
.built-card:hover, .built-card:focus-visible { transform: translateY(-6px); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 28px 62px rgba(0,0,0,.46), 0 0 30px rgba(176,70,255,.24); outline: none; }
.built-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0710; }
.built-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.built-card:hover .built-shot img { transform: scale(1.06); }
.built-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(8,4,13,.7)); }
.built-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 17px 18px; }
.built-cat { color: var(--emx-green, #7dff4f); font: 800 .62rem/1 var(--emx-font-body, "Inter", sans-serif); letter-spacing: .14em; }
.built-body b { font: 800 1.08rem/1.2 var(--emx-font-display, "Space Grotesk", sans-serif); }
.built-body small { color: var(--emx-muted, #aca5c8); font-size: .84rem; line-height: 1.5; }
.built-go { margin-top: 6px; color: #d9d2f2; font: 800 .72rem/1 var(--emx-font-body, "Inter", sans-serif); font-style: normal; letter-spacing: .04em; transition: color .2s; }
.built-card:hover .built-go, .built-card:focus-visible .built-go { color: var(--emx-green, #7dff4f); }

/* PRIORITY 2 — journey timeline */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.journey-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) padding-box, linear-gradient(150deg, rgba(255,255,255,.14), rgba(168,85,247,.3) 52%, rgba(125,255,80,.24)) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.3); }
.journey-num { font: 800 1.9rem/1 var(--emx-font-display, "Space Grotesk", sans-serif); color: transparent; background: linear-gradient(120deg, #35e0ff, #a855f7 50%, #7dff4f); -webkit-background-clip: text; background-clip: text; }
.journey-step b { font: 800 1.02rem/1.25 var(--emx-font-display, "Space Grotesk", sans-serif); }
.journey-step small { color: var(--emx-muted, #aca5c8); font-size: .82rem; line-height: 1.5; }
.journey-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: rgba(168,85,247,.7); font-size: 1.1rem; z-index: 2; }

/* PRIORITY 4 — ecosystem flow */
.eco-flow { display: flex; align-items: stretch; gap: 8px; }
.eco-node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border: 1px solid transparent; border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) padding-box, linear-gradient(150deg, rgba(255,255,255,.14), rgba(168,85,247,.3) 52%, rgba(125,255,80,.24)) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.3); }
.eco-node.eco-core { border-image: linear-gradient(140deg, #35e0ff, #a855f7 50%, #7dff4f) 1; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.4), 0 0 26px rgba(168,85,247,.22); }
.eco-tag { color: var(--emx-green, #7dff4f); font: 800 .6rem/1 var(--emx-font-body, "Inter", sans-serif); letter-spacing: .14em; }
.eco-node h3 { margin: 0; font: 800 1.25rem/1.15 var(--emx-font-display, "Space Grotesk", sans-serif); }
.eco-node p { margin: 0; color: var(--emx-muted, #aca5c8); font-size: .86rem; line-height: 1.55; flex: 1; }
.eco-node .emx-button { align-self: flex-start; margin-top: 4px; }
.eco-arrow { align-self: center; flex: 0 0 auto; color: rgba(168,85,247,.75); font-size: 1.5rem; font-weight: 700; }

/* PRIORITY 3 — balanced proof grid (no 3+1) */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.proof-grid .feature-card { height: 100%; }

/* PRIORITY 6 — final CTA */
.about-cta { position: relative; text-align: center; padding: clamp(30px, 5vw, 52px); border: 1px solid transparent; border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, rgba(139,92,246,.16), rgba(233,61,224,.1) 50%, rgba(125,255,80,.1)) padding-box, linear-gradient(140deg, #35e0ff, #a855f7 50%, #7dff4f) border-box;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.5), 0 0 30px -6px rgba(168,85,247,.3); }
.about-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 100% at 50% -10%, rgba(168,85,247,.3), transparent 70%); pointer-events: none; }
.about-cta > * { position: relative; z-index: 1; }
.about-cta .eyebrow { justify-content: center; }
.about-cta h2 { margin: 6px 0 12px; }
.about-cta > p { max-width: 620px; margin: 0 auto; color: #e2def5; }
.about-cta .hero-actions { justify-content: center; margin-top: 24px; }
.about-cta-contact { margin-top: 16px; font-size: .86rem; color: var(--emx-muted, #aca5c8); }
.about-cta-contact a { color: var(--emx-green, #7dff4f); }

@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
  .journey-step:not(:last-child)::after { display: none; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-flow { flex-direction: column; }
  .eco-arrow { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .about-badge { font-size: .56rem; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .about-hero-visual, .built-shot img, .built-card, .eco-node { transition: none !important; }
}