/* =========================================================================
   ABOUT PAGE — interactive sections
   Loaded after about.css and inherits its tokens. Everything here is
   additive: no existing selector is redefined.

   Motion policy: every animation is decorative and driven by a `.in` class
   added on scroll, so nothing is required to read the page. The whole file
   degrades to a static layout under prefers-reduced-motion.
   ========================================================================= */

/* ── Shared reveal primitives ─────────────────────────────────────────── */
.ab-r            { opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.ab-r.left       { transform:translateX(-46px); }
.ab-r.right      { transform:translateX(46px); }
.ab-r.zoom       { transform:scale(.9); }
.ab-r.in         { opacity:1; transform:none; }
.ab-r[data-delay="1"]{transition-delay:.09s}
.ab-r[data-delay="2"]{transition-delay:.18s}
.ab-r[data-delay="3"]{transition-delay:.27s}
.ab-r[data-delay="4"]{transition-delay:.36s}
.ab-r[data-delay="5"]{transition-delay:.45s}
.ab-r[data-delay="6"]{transition-delay:.54s}

.ab-sec        { max-width:1180px; margin:0 auto; padding:88px 28px; position:relative; z-index:2; }
.ab-head       { text-align:center; max-width:660px; margin:0 auto 52px; }
.ab-tag        { display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:50px;
                 background:rgba(144,57,228,.1); color:#9039e4; font-size:.74rem; font-weight:700;
                 letter-spacing:1.4px; text-transform:uppercase; margin-bottom:16px; }
.ab-head h2    { font-family:'Poppins',sans-serif; font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:800;
                 letter-spacing:-.7px; color:var(--text); margin-bottom:14px; line-height:1.2; }
.ab-head h2 em { font-style:normal; color:#9039e4; }
.ab-head p     { color:var(--text2); font-size:1rem; line-height:1.8; }

/* ── Hero trust bar ───────────────────────────────────────────────────── */
.ab-trust      { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.ab-chip       { display:inline-flex; align-items:center; gap:9px; padding:10px 20px; border-radius:50px;
                 background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(18px);
                 -webkit-backdrop-filter:blur(18px); font-size:.85rem; font-weight:600; color:var(--text2);
                 box-shadow:var(--shadow-glass); transition:transform .3s, box-shadow .3s, color .3s; }
.ab-chip:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); color:#9039e4; }
.ab-chip i     { color:#9039e4; }

/* ── Logo / industry marquee ──────────────────────────────────────────── */
.ab-marquee    { overflow:hidden; padding:26px 0; border-top:1px solid rgba(144,57,228,.12);
                 border-bottom:1px solid rgba(144,57,228,.12); position:relative; z-index:2;
                 -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
                 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.ab-mq-track   { display:flex; gap:56px; width:max-content; animation:abMarquee 38s linear infinite; }
.ab-marquee:hover .ab-mq-track { animation-play-state:paused; }
.ab-mq-item    { display:inline-flex; align-items:center; gap:11px; font-family:'Poppins',sans-serif;
                 font-size:1.02rem; font-weight:600; color:var(--text3); white-space:nowrap; transition:color .3s; }
.ab-mq-item:hover { color:#9039e4; }
.ab-mq-item i  { font-size:1.15rem; color:#9039e4; opacity:.65; }
@keyframes abMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Impact rings ─────────────────────────────────────────────────────── */
/* Six tiles: an explicit 3×2 grid, because auto-fit leaves a lone orphan
   on the second row at common desktop widths. */
.ab-rings      { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .ab-rings { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .ab-rings { grid-template-columns:1fr; } }
.ab-ring-card  { background:var(--glass); border:1px solid var(--glass-border); border-radius:22px;
                 padding:30px 20px; text-align:center; backdrop-filter:blur(20px);
                 -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow-glass);
                 transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
.ab-ring-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); }
.ab-ring       { position:relative; width:118px; height:118px; margin:0 auto 16px; }
.ab-ring svg   { transform:rotate(-90deg); display:block; }
.ab-ring circle{ fill:none; stroke-width:8; stroke-linecap:round; }
.ab-ring .bg   { stroke:rgba(144,57,228,.12); }
.ab-ring .fg   { stroke:url(#abGrad); stroke-dasharray:326.7; stroke-dashoffset:326.7;
                 transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1); }
.ab-ring-val   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                 font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:800; color:var(--text); }
.ab-ring-l     { font-size:.87rem; color:var(--text2); font-weight:500; line-height:1.5; }

/* ── Interactive timeline ─────────────────────────────────────────────── */
.ab-tl         { display:grid; grid-template-columns:190px 1fr; gap:40px; align-items:start; }
.ab-tl-years   { display:flex; flex-direction:column; gap:4px; position:relative; }
.ab-tl-years::before { content:''; position:absolute; left:13px; top:14px; bottom:14px; width:2px;
                 background:linear-gradient(180deg,rgba(144,57,228,.25),rgba(144,57,228,.05)); }
.ab-tl-y       { display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:12px;
                 background:none; border:none; cursor:pointer; font-family:'Poppins',sans-serif;
                 font-size:.98rem; font-weight:700; color:var(--text3); text-align:left;
                 transition:color .28s, background .28s; position:relative; }
.ab-tl-y::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--bg3);
                 border:2px solid rgba(144,57,228,.3); flex:0 0 12px; transition:all .28s; z-index:1; }
.ab-tl-y:hover { color:var(--text); background:rgba(144,57,228,.05); }
.ab-tl-y.on    { color:#9039e4; background:rgba(144,57,228,.09); }
.ab-tl-y.on::before { background:#9039e4; border-color:#9039e4; box-shadow:0 0 0 5px rgba(144,57,228,.16); }

.ab-tl-panes   { position:relative; min-height:250px; }
.ab-tl-pane    { position:absolute; inset:0; opacity:0; transform:translateY(18px); pointer-events:none;
                 transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
                 background:var(--glass); border:1px solid var(--glass-border); border-radius:22px;
                 padding:34px 36px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
                 box-shadow:var(--shadow-glass); }
.ab-tl-pane.on { opacity:1; transform:none; pointer-events:auto; position:relative; }
.ab-tl-pane h3 { font-family:'Poppins',sans-serif; font-size:1.3rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.ab-tl-pane .yr{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:1.3px; color:#9039e4;
                 background:rgba(144,57,228,.1); padding:5px 13px; border-radius:50px; margin-bottom:14px; }
.ab-tl-pane p  { color:var(--text2); font-size:.94rem; line-height:1.85; margin-bottom:16px; }
.ab-tl-stats   { display:flex; gap:26px; flex-wrap:wrap; padding-top:16px; border-top:1px solid rgba(144,57,228,.1); }
.ab-tl-stat b  { display:block; font-family:'Poppins',sans-serif; font-size:1.35rem; font-weight:800; color:#9039e4; }
.ab-tl-stat span{ font-size:.79rem; color:var(--text3); }

/* ── Capability bars ──────────────────────────────────────────────────── */
.ab-caps       { display:grid; grid-template-columns:1fr 1fr; gap:26px 46px; }
.ab-cap        { }
.ab-cap-top    { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.ab-cap-top h4 { font-family:'Poppins',sans-serif; font-size:.95rem; font-weight:600; color:var(--text); }
.ab-cap-top b  { font-family:'Poppins',sans-serif; font-size:.9rem; font-weight:800; color:#9039e4; }
.ab-cap-rail   { height:9px; border-radius:50px; background:rgba(144,57,228,.1); overflow:hidden; }
.ab-cap-fill   { height:100%; width:0; border-radius:50px;
                 background:linear-gradient(90deg,#9039e4,#c084fc,#FF6B2C);
                 transition:width 1.5s cubic-bezier(.16,1,.3,1); position:relative; }
.ab-cap-fill::after{ content:''; position:absolute; inset:0;
                 background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
                 animation:abShine 2.6s ease-in-out infinite; }
@keyframes abShine { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ── Flip value cards ─────────────────────────────────────────────────── */
.ab-flips      { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.ab-flip       { perspective:1200px; height:246px; }
.ab-flip-in    { position:relative; width:100%; height:100%; transition:transform .75s cubic-bezier(.16,1,.3,1);
                 transform-style:preserve-3d; }
.ab-flip:hover .ab-flip-in, .ab-flip:focus-within .ab-flip-in { transform:rotateY(180deg); }
.ab-flip-f, .ab-flip-b { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
                 border-radius:22px; padding:30px 26px; display:flex; flex-direction:column;
                 align-items:center; justify-content:center; text-align:center; }
.ab-flip-f     { background:var(--glass); border:1px solid var(--glass-border);
                 backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow-glass); }
.ab-flip-b     { background:linear-gradient(135deg,#1E1B3A,#3b1e63); transform:rotateY(180deg); color:#fff; }
.ab-flip-ico   { width:58px; height:58px; border-radius:17px; display:flex; align-items:center; justify-content:center;
                 font-size:1.4rem; margin-bottom:16px; background:rgba(144,57,228,.1); color:#9039e4; }
.ab-flip-f h3  { font-family:'Poppins',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.ab-flip-f p   { font-size:.85rem; color:var(--text3); line-height:1.6; margin:0; }
.ab-flip-b h4  { font-family:'Poppins',sans-serif; font-size:.95rem; font-weight:700; margin-bottom:10px; color:#c084fc; }
.ab-flip-b p   { font-size:.86rem; line-height:1.75; color:rgba(255,255,255,.8); margin:0; }
.ab-flip-hint  { position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:.7rem;
                 color:var(--text3); letter-spacing:.5px; opacity:.75; }

/* ── Comparison toggle ────────────────────────────────────────────────── */
.ab-cmp-switch { display:flex; justify-content:center; gap:6px; margin-bottom:30px; }
.ab-cmp-switch button { padding:11px 26px; border-radius:50px; border:1px solid var(--glass-border);
                 background:var(--glass); font-family:'Poppins',sans-serif; font-size:.88rem; font-weight:600;
                 color:var(--text2); cursor:pointer; transition:all .3s; backdrop-filter:blur(16px); }
.ab-cmp-switch button.on { background:#9039e4; border-color:#9039e4; color:#fff;
                 box-shadow:0 8px 24px rgba(144,57,228,.3); }
.ab-cmp-panes  { max-width:760px; margin:0 auto; }
.ab-cmp-pane   { display:none; }
.ab-cmp-pane.on{ display:block; animation:abFade .45s cubic-bezier(.16,1,.3,1); }
@keyframes abFade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.ab-cmp-row    { display:flex; align-items:flex-start; gap:14px; padding:15px 20px; border-radius:14px;
                 background:var(--glass); border:1px solid var(--glass-border); margin-bottom:10px;
                 backdrop-filter:blur(16px); font-size:.92rem; color:var(--text2); line-height:1.65;
                 transition:transform .3s, box-shadow .3s; }
.ab-cmp-row:hover { transform:translateX(5px); box-shadow:var(--shadow-glass); }
.ab-cmp-row i  { flex:0 0 auto; margin-top:3px; font-size:.95rem; }
.ab-cmp-row.bad i { color:#dc2626; }
.ab-cmp-row.good i{ color:#059669; }

/* ── Team ─────────────────────────────────────────────────────────────── */
.ab-team       { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px; }
.ab-tm         { background:var(--glass); border:1px solid var(--glass-border); border-radius:22px;
                 padding:28px 22px; text-align:center; backdrop-filter:blur(20px);
                 -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow-glass);
                 transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; position:relative; overflow:hidden; }
.ab-tm::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
                 background:linear-gradient(90deg,#9039e4,#FF6B2C); transform:scaleX(0); transform-origin:left;
                 transition:transform .45s; }
.ab-tm:hover   { transform:translateY(-9px); box-shadow:var(--shadow-hover); }
.ab-tm:hover::before { transform:scaleX(1); }
.ab-tm-av      { width:88px; height:88px; border-radius:50%; margin:0 auto 15px; padding:3px;
                 background:linear-gradient(135deg,#9039e4,#FF6B2C); }
.ab-tm-av img  { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:var(--bg3); }
.ab-tm h3      { font-family:'Poppins',sans-serif; font-size:1rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.ab-tm .role   { font-size:.79rem; font-weight:600; color:#9039e4; margin-bottom:11px; }
.ab-tm p       { font-size:.83rem; color:var(--text3); line-height:1.65; margin-bottom:13px; }
.ab-tm-skills  { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.ab-tm-skills span { font-size:.68rem; font-weight:600; padding:3px 9px; border-radius:50px;
                 background:rgba(144,57,228,.08); color:#9039e4; }

/* ── Testimonial rotator ──────────────────────────────────────────────── */
.ab-quotes     { max-width:820px; margin:0 auto; position:relative; }
.ab-q          { display:none; text-align:center; }
.ab-q.on       { display:block; animation:abFade .55s cubic-bezier(.16,1,.3,1); }
.ab-q blockquote { font-family:'Poppins',sans-serif; font-size:clamp(1.05rem,2.2vw,1.4rem); font-weight:500;
                 line-height:1.65; color:var(--text); margin:0 0 24px; }
.ab-q-who      { display:flex; align-items:center; justify-content:center; gap:13px; }
.ab-q-who img  { width:50px; height:50px; border-radius:50%; object-fit:cover; }
.ab-q-who h5   { font-family:'Poppins',sans-serif; font-size:.93rem; font-weight:700; color:var(--text); margin:0; }
.ab-q-who span { font-size:.8rem; color:var(--text3); }
.ab-q-stars    { color:var(--gold); margin-bottom:18px; font-size:.9rem; letter-spacing:2px; }
.ab-dots       { display:flex; justify-content:center; gap:8px; margin-top:28px; }
.ab-dots button{ width:9px; height:9px; border-radius:50%; border:none; cursor:pointer; padding:0;
                 background:rgba(144,57,228,.25); transition:all .3s; }
.ab-dots button.on { background:#9039e4; width:26px; border-radius:50px; }

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.ab-faq        { max-width:780px; margin:0 auto; }
.ab-faq details{ background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
                 padding:18px 22px; margin-bottom:11px; backdrop-filter:blur(18px); box-shadow:var(--shadow-glass); }
.ab-faq summary{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.96rem; color:var(--text);
                 cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.ab-faq summary::-webkit-details-marker { display:none; }
.ab-faq summary::after { content:'+'; color:#9039e4; font-size:1.35rem; font-weight:400; flex:0 0 auto; transition:transform .3s; }
.ab-faq details[open] summary::after { content:'\2212'; }
.ab-faq details p { margin:13px 0 0; font-size:.9rem; line-height:1.8; color:var(--text2);
                 animation:abFade .4s cubic-bezier(.16,1,.3,1); }

/* ── Split intro with floating stat ───────────────────────────────────── */
.ab-split      { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
/* The portfolio shots are full-page captures, so the frame has to define the
   height — otherwise a 4000px-tall screenshot dictates the whole row. */
.ab-split-img  { position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-hover);
                 height:475px; }
.ab-split-img img { width:100%; height:100%; object-fit:cover; object-position:50% 0%; display:block;
                 transition:object-position 6s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.ab-split-img:hover img { object-position:50% 100%; }
.ab-float      { position:absolute; bottom:20px; left:20px; right:20px; display:flex; gap:12px; }
.ab-float div  { flex:1; background:rgba(255,255,255,.88); backdrop-filter:blur(16px); border-radius:14px;
                 padding:13px 10px; text-align:center; box-shadow:0 8px 26px rgba(20,14,45,.18); }
.ab-float b    { display:block; font-family:'Poppins',sans-serif; font-size:1.25rem; font-weight:800; color:#9039e4; line-height:1.1; }
.ab-float span { font-size:.7rem; color:var(--text3); font-weight:600; }
.ab-split-txt h2 { font-family:'Poppins',sans-serif; font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:800;
                 letter-spacing:-.7px; color:var(--text); margin-bottom:16px; line-height:1.22; }
.ab-split-txt h2 em { font-style:normal; color:#9039e4; }
.ab-split-txt p{ color:var(--text2); font-size:.97rem; line-height:1.85; margin-bottom:15px; }
.ab-ticks      { list-style:none; padding:0; margin:20px 0 0; }
.ab-ticks li   { display:flex; align-items:flex-start; gap:11px; font-size:.92rem; color:var(--text2);
                 margin-bottom:11px; line-height:1.6; }
.ab-ticks i    { color:#059669; margin-top:3px; flex:0 0 auto; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ab-tl       { grid-template-columns:1fr; gap:26px; }
  .ab-tl-years { flex-direction:row; overflow-x:auto; padding-bottom:8px; }
  .ab-tl-years::before { display:none; }
  .ab-tl-y     { white-space:nowrap; }
  .ab-tl-pane  { position:relative; display:none; }
  .ab-tl-pane.on { display:block; }
  .ab-caps     { grid-template-columns:1fr; }
  .ab-split    { grid-template-columns:1fr; gap:30px; }
  .ab-sec      { padding:64px 22px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ab-r        { opacity:1 !important; transform:none !important; transition:none !important; }
  .ab-mq-track { animation:none; }
  .ab-cap-fill::after { animation:none; }
  .ab-flip:hover .ab-flip-in, .ab-flip:focus-within .ab-flip-in { transform:none; }
  .ab-flip-b   { display:none; }
  .ab-ring .fg { transition:none; }
  *            { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}