/* FM Digital Solutions — About Us. Depends on: tokens.css, global.css */
.about-hero { padding-top: calc(var(--nav-h) + 5rem); padding-bottom: 4rem; border-bottom: 1px solid var(--border); }
.about-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 1rem; }
.about-h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; color: #fff; margin-bottom: 1rem; text-wrap: balance; }
.about-h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; color: #fff; margin-bottom: 1.5rem; }
.about-sub { color: var(--fg-muted); line-height: 1.7; max-width: 56ch; }
.about-section { padding-block: 4.5rem; border-bottom: 1px solid var(--border); }
.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.about-grid-2 { grid-template-columns: repeat(2, 1fr); }
.about-cell { display: block; min-width: 0; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; }
.about-cell h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--fg); margin-bottom: .5rem; }
.about-cell p { color: var(--fg-muted); font-size: .875rem; line-height: 1.6; }
.about-num { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--purple-light); margin-bottom: .75rem; }
.about-link { transition: border-color .15s; }
.about-link:hover { border-color: var(--lime); }
.about-more { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.about-founder { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.about-founder .about-h2 { margin-bottom: .75rem; }
.about-cta { padding-block: 4.5rem; }
.about-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.about-cta .about-h2 { margin-bottom: 0; }
@media (max-width: 960px) { .about-grid { grid-template-columns: repeat(2, 1fr); } .about-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .about-grid, .about-grid-2, .about-grid-3 { grid-template-columns: 1fr; } }

.about-hero { background: radial-gradient(60% 70% at 85% 0%, var(--purple-glow), transparent 70%), var(--bg); }
.about-h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.02; letter-spacing: -.04em; }
.about-accent { color: var(--purple-light); }
.about-ul { position: relative; display: inline-block; }
.about-ul::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--purple), var(--cyan)); border-radius: 2px; }
.about-hero-cta { margin-top: 1.75rem; }
.about-grid-3 { grid-template-columns: repeat(3, 1fr); }
.about-person { padding: 1.75rem; }
.about-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: #fff; background: var(--purple); margin-bottom: 1rem; }
.about-avatar-cyan { background: var(--purple); }
.about-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-light); margin-bottom: .75rem; }
.about-role-cyan { color: var(--purple-light); }
.about-person p + p { margin-top: .5rem; }

.about-story { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.about-story .about-h2 { margin-bottom: 0; }
.about-prose p { color: var(--fg-muted); line-height: 1.75; margin-bottom: 1rem; max-width: 60ch; }
.about-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.about-chips li { padding: .5rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--fg); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; }
.about-stat { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.about-stat-num { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.75rem); letter-spacing: -.03em; color: #fff; }
.about-stat-num.is-lime { color: var(--lime); } .about-stat-num.is-purple { color: var(--purple-light); } .about-stat-num.is-cyan { color: var(--cyan); }
.about-stat dt { margin-top: .35rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
@media (max-width: 900px) { .about-story { grid-template-columns: 1fr; gap: 1.25rem; } .about-stats { grid-template-columns: repeat(2, 1fr); } }

.about-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .about-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .about-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .about-grid-5 { grid-template-columns: 1fr; } }

/* ---- About page: contour background, colour flow, motion ---- */
.about-page { position: relative; --py: 0px; overflow: clip; }
.about-page { position: relative; }
.about-page::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(139,92,246,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,.10) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; background-position: 0 var(--py,0px), 0 var(--py,0px), 0 var(--py,0px), 0 var(--py,0px); -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, rgba(0,0,0,.35)); mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, rgba(0,0,0,.35)); }
.about-page > section { position: relative; z-index: 1; }
.about-section { border-bottom: 0; }
.about-section.is-p { background: linear-gradient(180deg, rgba(107,61,150,.16), rgba(107,61,150,.03)); }
.about-section.is-c, .about-section.is-l { background: rgba(255,255,255,.022); }
.about-cta { background: linear-gradient(135deg, rgba(107,61,150,.38), rgba(107,61,150,.08)); }
/* scroll reveal: only hidden when JS is running */
.about-js .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.about-js .rv.in { opacity: 1; transform: none; }
/* card tilt and hover glow */
.tilt { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .25s ease, border-color .2s, box-shadow .25s, opacity .6s ease; will-change: transform; }
.about-js .tilt.rv:not(.in) { transform: translateY(22px); }
.about-cell:hover { box-shadow: 0 18px 50px -24px rgba(107,61,150,.7); }
/* team cards: gradient border */
.about-person { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--purple), var(--purple-light)) border-box; }
/* how we operate: connector lines draw between steps */
.about-grid-5 .about-cell { position: relative; }
.about-grid-5 .about-cell::after { content: ''; position: absolute; top: 2.05rem; left: calc(1.5rem + 2.2rem); right: calc(-1rem - 1px); height: 2px; background: var(--purple-light); transform: scaleX(0); transform-origin: left; transition: transform .8s ease .4s; z-index: 2; border-radius: 2px; }
.about-grid-5.in .about-cell:not(:last-child)::after { transform: scaleX(1); }
.about-js .about-grid-5:not(.in) .about-cell::after { transform: scaleX(0); }
@media (max-width: 1100px) { .about-grid-5 .about-cell::after { display: none; } }
/* specialities: two moving rows */
.about-marq { display: grid; gap: .75rem; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.about-marq-row { display: flex; width: max-content; animation: about-marq 38s linear infinite; }
.about-marq-row.is-rev { animation-direction: reverse; animation-duration: 44s; }
.about-marq:hover .about-marq-row { animation-play-state: paused; }
.about-marq .about-chips { flex-wrap: nowrap; flex-shrink: 0; padding-right: .6rem; }
.about-marq .about-chips li { white-space: nowrap; }
@keyframes about-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .about-marq-row { animation: none; flex-wrap: wrap; width: auto; }
  .about-marq .about-chips[aria-hidden="true"] { display: none; }
  .about-js .rv, .tilt { transition: none; }
}

/* dot grid over the hero for extra texture */
.about-hero { position: relative; }
.about-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: radial-gradient(70% 90% at 80% 20%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 90% at 80% 20%, #000, transparent 75%); }
.about-hero > .wrap { position: relative; z-index: 1; }

/* team: copy left, deck of cards right */
.about-team { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }
.about-h2-xl { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.02; }
.about-h2-xl strong { color: var(--purple-light); font-weight: 800; }
.about-team-sub { color: var(--muted, #a1a1aa); font-size: 1.05rem; line-height: 1.6; max-width: 34ch; }
.about-team-sub strong { color: #fff; }
.about-hand { position: relative; height: 380px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 10px; }
.pcard { position: absolute; bottom: 0; width: 220px; height: 310px; border-radius: 14px; background: linear-gradient(160deg, #1b1a24, #111118); border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 1px rgba(167,139,250,.55), 0 26px 50px -22px rgba(0,0,0,.9); transform-origin: 50% 120%; transition: transform .4s cubic-bezier(.2,.8,.2,1); padding: 0; overflow: hidden; }
.pcard::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; pointer-events: none; }
.pcard { cursor: pointer; }
.pcard.is-front { transform: translateX(-8px) rotate(-3deg); z-index: 3; }
.pcard.is-back { transform: translateX(14px) translateY(-8px) rotate(3deg); z-index: 2; filter: brightness(.8); }
.about-hand:hover .pcard.is-back { transform: translateX(20px) translateY(-12px) rotate(4.5deg); }
.pcard:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }
.pc-idx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-family: var(--font-head); z-index: 2; }
.pc-idx b { font-size: 1.15rem; color: #fff; }
.pc-idx i { font-style: normal; font-size: .95rem; color: var(--purple-light); margin-top: 2px; }
.pc-tl { top: 14px; right: 14px; }
.pc-br { bottom: 14px; left: 14px; transform: rotate(180deg); }
.pc-body { position: absolute; inset: 0; padding: 2.6rem 1.1rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pcard .about-avatar { width: 54px; height: 54px; font-size: 1.3rem; margin-bottom: .7rem; }
.pcard h3 { font-size: 1.02rem; margin: 0 0 .25rem; color: #fff; }
.pc-role { font-family: var(--font-mono, monospace); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-light); margin: 0 0 .6rem; }
.pc-text { font-size: .78rem; line-height: 1.45; color: var(--muted, #a1a1aa); margin: 0; }
.pcard .about-more { margin-top: auto; margin-bottom: 1.1rem; font-size: .62rem; }
@media (max-width: 860px) {
  .about-team { grid-template-columns: 1fr; gap: 2rem; }
  .about-hand { height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } }

.pc-idx em { font-style: normal; font-family: var(--font-mono, monospace); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #a1a1aa); margin-bottom: 4px; }
.pcard .pc-body { transition: opacity .25s; }
.pcard.is-back .pc-body { opacity: 0; }

/* team: tighter spacing, chess king/queen glyphs */
.about-section:has(.about-team) { padding-block: 3.5rem; }
.about-team { gap: 2rem; }
.about-hand { height: 340px; padding-bottom: 0; }
.pc-idx b { font-size: 1.5rem; font-weight: 400; line-height: 1; }
@media (max-width: 860px) { .about-hand { height: 330px; } .about-section:has(.about-team) { padding-block: 2.5rem; } }

/* stronger section headings */
.about-page .about-h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin-bottom: 1.75rem; text-shadow: 0 2px 30px rgba(139,92,246,.25); }
.about-page .about-h2-xl { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.about-page .about-section .about-h2::after { content: ''; display: block; width: 56px; height: 4px; margin-top: .9rem; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--purple-light)); }
.about-page .about-cta .about-h2::after, .about-page .about-team .about-h2::after { display: none; }
.about-page .about-eyebrow { color: var(--purple-light); }

/* team card links (local inline SVG icons, no external icon font) */
.pc-links { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; z-index: 3; }
.pc-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(167,139,250,.5); color: var(--purple-light); background: rgba(107,61,150,.15); transition: background .2s, color .2s, transform .2s; }
.pc-ico:hover, .pc-ico:focus-visible { background: var(--purple); color: #fff; transform: translateY(-2px); }

/* about hero image */
.about-hero { background-image: linear-gradient(90deg, #0d0d12 0%, #0d0d12 30%, rgba(13,13,18,.6) 55%, rgba(13,13,18,.1) 100%), linear-gradient(180deg, rgba(13,13,18,0) 70%, #0d0d12 100%), url('../img/about-hero.webp'); background-size: cover, cover, cover; background-position: center, center, right center; background-repeat: no-repeat; min-height: 560px; }
.about-hero::before { display: none; }
@media (max-width: 760px) { .about-hero { background-image: linear-gradient(180deg, rgba(13,13,18,.92) 0%, rgba(13,13,18,.7) 60%, #0d0d12 100%), url('../img/about-hero.webp'); background-size: cover, cover; background-position: center, 70% center; min-height: 0; } }

/* glowing green pulse link + "Click me" hover tip */
.pc-ico { width: 34px; height: 34px; background: #2ea043; border-color: #4ade80; color: #fff; position: relative; box-shadow: 0 0 12px rgba(74,222,128,.7); animation: pc-pulse 1.8s ease-out infinite; }
.pc-ico:hover, .pc-ico:focus-visible { background: #3fb950; color: #fff; transform: translateY(-2px) scale(1.08); animation-play-state: paused; box-shadow: 0 0 22px rgba(74,222,128,.95); }
.pc-ico::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 4px 9px; border-radius: 6px; background: #fff; color: #0d0d12; font: 700 .68rem/1 var(--font-head, sans-serif); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.pc-ico:hover::after, .pc-ico:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@keyframes pc-pulse { 0% { box-shadow: 0 0 10px rgba(74,222,128,.7), 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 14px rgba(74,222,128,.8), 0 0 0 12px rgba(74,222,128,0); } 100% { box-shadow: 0 0 10px rgba(74,222,128,.7), 0 0 0 0 rgba(74,222,128,0); } }
@media (prefers-reduced-motion: reduce) { .pc-ico { animation: none; } }

.pc-ico.pc-li { background: rgba(107,61,150,.25); border-color: rgba(167,139,250,.6); color: #fff; box-shadow: none; animation: none; }
.pc-ico.pc-li:hover, .pc-ico.pc-li:focus-visible { background: #0a66c2; border-color: #0a66c2; box-shadow: 0 0 16px rgba(10,102,194,.8); }
.pc-ico:not([data-tip])::after { display: none; }

/* back card: light snake running round the border + soft pulse */
@property --snake { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pcard::after { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 4;
  background: conic-gradient(from var(--snake), transparent 0 62%, rgba(167,139,250,.25) 74%, #a78bfa 90%, #fff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pcard.is-back::after { opacity: 1; animation: pc-snake 3.2s linear infinite; }
.pcard.is-back { animation: pc-glow 2.4s ease-in-out infinite; }
@keyframes pc-snake { to { --snake: 360deg; } }
@keyframes pc-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(167,139,250,.4), 0 0 14px rgba(139,92,246,.25), 0 26px 50px -22px rgba(0,0,0,.9); } 50% { box-shadow: 0 0 0 1px rgba(167,139,250,.7), 0 0 30px rgba(139,92,246,.6), 0 26px 50px -22px rgba(0,0,0,.9); } }
@media (prefers-reduced-motion: reduce) { .pcard.is-back::after, .pcard.is-back { animation: none; } }

/* USP cards: expanding accordion (compact) */
.about-page .about-acc { display: flex; gap: 14px; height: 270px; grid-template-columns: none; }
.about-acc .acc-cell { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: pointer; padding: 1.4rem; transition: flex .55s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s, opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.about-acc .acc-cell.is-open { flex: 3.4; border-color: rgba(167,139,250,.55); background: linear-gradient(160deg, rgba(107,61,150,.22), var(--surface, #111118)); }
.about-acc .acc-cell h3, .about-acc .acc-cell p { width: 270px; max-width: 100%; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s; }
.about-acc .acc-cell.is-open h3, .about-acc .acc-cell.is-open p { opacity: 1; transform: none; transition-delay: .18s; }
.acc-v { position: absolute; left: 50%; bottom: 1.2rem; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: #fff; white-space: nowrap; transition: opacity .25s; }
.acc-cell.is-open .acc-v { opacity: 0; }
.acc-cell:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }
@media (max-width: 860px) {
  .about-page .about-acc { flex-direction: column; height: auto; }
  .about-acc .acc-cell, .about-acc .acc-cell.is-open { flex: none; }
  .about-acc .acc-cell h3, .about-acc .acc-cell p { width: auto; opacity: 1; transform: none; }
  .acc-v { display: none; }
}
@media (prefers-reduced-motion: reduce) { .about-acc .acc-cell { transition: none; } }

/* performance: static, GPU-composited pattern layer (no repaint on scroll) */
.about-page::before { background-position: 0 0 !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: .85; will-change: transform; transform: translateZ(0); }
.about-page .about-h2 { text-shadow: none; }
.about-section, .about-cta { contain: layout paint; }