/* =====================================================================
   ABOUT PAGE — glass-morphism + morphing blobs + scroll reveals
   Uses the site's design tokens (--blue-bright, --gold-bright, --eg-*).
   ===================================================================== */
#page-about{ --ab-glow:rgba(90,168,236,.16); }
#page-about > *{ max-width:1100px; margin-left:auto; margin-right:auto; }
#page-about .section-head{ max-width:62ch; margin-top:76px; }
#page-about p{ color:var(--cream-dim); line-height:1.75; font-size:15px; }
#page-about p b, #page-about p strong{ color:var(--cream); }
#page-about a:not(.cta-pill):not(.ab-bcard):not(.ab-link):not(.ab-img){ color:var(--blue-bright); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(90,168,236,.4); }
#page-about a:not(.cta-pill):not(.ab-bcard):not(.ab-link):not(.ab-img):hover{ color:var(--gold-bright); }

/* extra frosted layer on top of the site's .glass */
.ab-morph{ -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-radius:22px; }
.ab-morph:hover{ transform:none; }
.ab-card:hover, .ab-bcard:hover, .ab-stat:hover{ transform:translateY(-6px); }

/* ---------- morphing background blobs ---------- */
.ab-blob{ position:absolute; z-index:-1; width:340px; height:340px; filter:blur(46px); opacity:.55; pointer-events:none;
  background:linear-gradient(135deg,var(--eg-1),var(--eg-3)); animation:abMorph 14s ease-in-out infinite, abDrift 22s ease-in-out infinite; }
.ab-blob.b1{ top:-110px; left:-90px; }
.ab-blob.b2{ bottom:-140px; right:-80px; width:380px; height:380px; background:linear-gradient(135deg,var(--eg-4),var(--eg-2)); animation-delay:-5s,-8s; }
.ab-blob.b3{ top:40%; right:30%; width:260px; height:260px; background:linear-gradient(135deg,var(--gold-bright),var(--eg-2)); opacity:.35; animation-delay:-9s,-3s; }
@keyframes abMorph{
  0%,100%{ border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%{ border-radius:30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%{ border-radius:50% 50% 33% 67% / 55% 27% 73% 45%; }
  75%{ border-radius:73% 27% 55% 45% / 40% 60% 40% 60%; }
}
@keyframes abDrift{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(50px,36px) rotate(40deg) scale(1.12); } }

/* ---------- hero ---------- */
.ab-hero{ position:relative; padding:64px 44px 56px; text-align:center; overflow:hidden; }
.ab-hero-inner{ position:relative; max-width:760px; margin:0 auto; }
.ab-hero h1{ font-size:clamp(30px,5.2vw,54px); line-height:1.12; margin:6px 0 10px; letter-spacing:-.5px; }
.ab-sub{ font-size:clamp(15px,2vw,19px) !important; font-weight:700; color:var(--cream) !important; margin:0 0 4px; }
.ab-hero .head-rule{ margin:16px auto 26px; width:84px; }
.ab-lead{ font-size:17px !important; color:var(--cream) !important; }
.ab-hero p{ margin:0 0 14px; }
.ab-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.ab-ctas .cta-pill{ display:inline-flex; align-items:center; gap:8px; }
.ab-hero::after, .ab-vision::after, .ab-final::after{ /* rotating conic edge-light */
  content:''; position:absolute; inset:-60%; z-index:-2; pointer-events:none; opacity:.35;
  background:conic-gradient(from 0deg, transparent 0 60%, rgba(90,168,236,.55) 75%, rgba(194,102,255,.55) 88%, transparent 100%);
  animation:abSpin 12s linear infinite; padding:0; border-radius:0; }
@keyframes abSpin{ to{ transform:rotate(360deg); } }

/* ---------- stats ---------- */
.ab-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.ab-stat{ padding:26px 14px; text-align:center; }
.ab-num{ font-family:'Press Start 2P','Poppins',sans-serif; font-size:clamp(22px,3.3vw,34px); font-weight:800; color:var(--cream);
  background:linear-gradient(120deg,var(--eg-1),var(--eg-4)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ab-lab{ margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.6px; color:var(--cream-dim); text-transform:uppercase; }

/* ---------- showcase shots ---------- */
.ab-shots{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ab-shot{ margin:0; padding:14px 14px 18px; perspective:1000px; }
.ab-frame{ display:flex; align-items:center; gap:7px; padding:4px 6px 12px; font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--cream-dim); }
.ab-frame i{ width:10px; height:10px; border-radius:50%; background:#ff5f57; display:block; }
.ab-frame i:nth-child(2){ background:#febc2e; } .ab-frame i:nth-child(3){ background:#28c840; }
.ab-frame span{ margin-left:8px; padding:3px 12px; border-radius:20px; background:rgba(255,255,255,.07); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ab-img{ position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); transform-style:preserve-3d; transition:transform .25s ease, box-shadow .3s ease; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.ab-img img{ display:block; width:100%; height:auto; transition:transform .6s ease; }
.ab-img:hover img{ transform:scale(1.045); }
.ab-img:hover{ box-shadow:0 20px 56px rgba(0,0,0,.55), 0 0 36px var(--ab-glow); }
.ab-shine{ position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%); transform:translateX(-120%); transition:transform .9s ease; pointer-events:none; }
.ab-img:hover .ab-shine{ transform:translateX(120%); }
.ab-shot figcaption{ padding:14px 6px 0; font-size:13.5px; line-height:1.6; color:var(--cream-dim); }
.ab-shot figcaption b{ color:var(--cream); }
.ab-play{ position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,0,60,.82); box-shadow:0 0 0 0 rgba(255,0,60,.55); animation:abPulse 2.2s infinite; transition:transform .25s; }
.ab-img:hover .ab-play{ transform:scale(1.12); }
@keyframes abPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,0,60,.55);} 70%{ box-shadow:0 0 0 22px rgba(255,0,60,0);} 100%{ box-shadow:0 0 0 0 rgba(255,0,60,0);} }

/* ---------- story + quote ---------- */
.ab-split{ display:grid; grid-template-columns:1.6fr 1fr; gap:22px; margin-top:76px; }
.ab-story{ padding:38px 36px; }
.ab-story h2{ font-size:clamp(22px,3vw,32px); margin:6px 0 16px; }
.ab-story p{ margin:0 0 14px; }
.ab-quote{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:40px 28px; min-height:280px; }
.ab-qmark{ position:absolute; top:6px; left:22px; font-size:120px; line-height:1; font-family:Georgia,serif; color:rgba(183,155,255,.28); }
.ab-quote p{ position:relative; font-size:clamp(22px,2.8vw,30px); font-weight:800; line-height:1.3; margin:0 0 12px; background:linear-gradient(110deg,var(--eg-1),var(--eg-3),var(--eg-4)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ab-quote small{ color:var(--cream-dim); font-weight:700; letter-spacing:.8px; }
.ab-orbit{ position:absolute; inset:0; pointer-events:none; }
.ab-orbit i{ position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 14px var(--blue-bright); animation:abOrbit 9s linear infinite; }
.ab-orbit i:nth-child(2){ background:var(--gold-bright); box-shadow:0 0 14px var(--gold-bright); animation-duration:13s; animation-direction:reverse; }
.ab-orbit i:nth-child(3){ background:var(--eg-1); box-shadow:0 0 14px var(--eg-1); animation-duration:17s; }
@keyframes abOrbit{ from{ transform:rotate(0deg) translateX(118px) rotate(0deg);} to{ transform:rotate(360deg) translateX(118px) rotate(-360deg);} }

/* ---------- feature cards ---------- */
.ab-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-card{ position:relative; padding:28px 24px 26px; --mx:50%; --my:0%; }
.ab-card::before{ /* cursor spotlight */
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(120,170,255,.22), transparent 70%); }
.ab-card:hover::before{ opacity:1; }
.ab-ico{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(90,168,236,.28),rgba(168,111,240,.28)); border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  animation:abBob 5s ease-in-out infinite; }
.ab-card:nth-child(2n) .ab-ico{ animation-delay:-1.6s; } .ab-card:nth-child(3n) .ab-ico{ animation-delay:-3.1s; }
.ab-ico .icon{ width:26px; height:26px; }
@keyframes abBob{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-5px) rotate(-4deg);} }
.ab-card h3{ font-size:17px; margin:0 0 10px; line-height:1.3; }
.ab-card p{ margin:0 0 10px; font-size:14px; }

/* ---------- vision / final ---------- */
.ab-vision, .ab-final{ position:relative; margin-top:76px; padding:56px 44px; overflow:hidden; }
.ab-vision-in, .ab-final-in{ position:relative; max-width:780px; margin:0 auto; text-align:center; }
.ab-vision h2, .ab-final h2{ font-size:clamp(24px,3.6vw,38px); margin:6px 0 14px; }
.ab-vision p, .ab-final p{ margin:0 0 14px; }
.ab-strong{ color:var(--cream) !important; font-weight:700; font-size:16px !important; }
.ab-foot{ margin-top:26px !important; font-size:13px !important; opacity:.8; }
.ab-final{ margin-top:70px; }

/* ---------- blog ---------- */
.ab-blog{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-bcard{ display:flex; flex-direction:column; padding:26px 24px 22px; color:inherit; text-decoration:none; }
.ab-bcard .icon{ width:30px; height:30px; margin-bottom:14px; }
.ab-bcard h3{ font-size:17px; margin:0 0 10px; line-height:1.3; }
.ab-bcard p{ margin:0 0 14px; font-size:14px; flex:1; }
.ab-more{ font-size:13px; font-weight:800; color:var(--blue-bright); transition:letter-spacing .25s, color .25s; }
.ab-bcard:hover .ab-more{ letter-spacing:.6px; color:var(--gold-bright); }
.ab-latest{ padding:24px 24px 20px; }
.ab-latest h3{ font-size:17px; margin:0 0 12px; }
.ab-latest ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ab-latest li a{ display:block; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); text-decoration:none !important; transition:background .2s, transform .2s; }
.ab-latest li a:hover{ background:rgba(90,168,236,.14); transform:translateX(4px); }
.ab-latest li b{ display:block; font-size:13px; color:var(--cream); line-height:1.35; }
.ab-latest li small{ color:var(--cream-dim); font-size:11.5px; }

/* ---------- join ---------- */
.ab-join{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ab-jcard{ padding:30px 28px; }
.ab-jcard h3{ font-size:20px; margin:0 0 16px; }
.ab-ip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; padding:10px 12px; border-radius:12px; background:rgba(7,13,26,.45); border:1px solid rgba(255,255,255,.1); }
.ab-ip span{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--cream-dim); min-width:92px; }
.ab-ip code{ flex:1; font-size:15px; font-weight:700; color:var(--cream); }
.ab-jcard ol{ margin:14px 0 0; padding-left:20px; color:var(--cream-dim); font-size:14px; line-height:1.9; }
.ab-jcard ol b{ color:var(--cream); }

/* ---------- FAQ ---------- */
.ab-faqs{ display:grid; gap:12px; max-width:860px !important; }
.ab-faq{ padding:0; }
.ab-faq summary{ list-style:none; cursor:pointer; padding:18px 56px 18px 22px; font-weight:800; font-size:15.5px; color:var(--cream); position:relative; user-select:none; }
.ab-faq summary::-webkit-details-marker{ display:none; }
.ab-faq summary::after{ content:'+'; position:absolute; right:20px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%; display:grid; place-items:center; font-size:20px; line-height:1;
  color:var(--blue-bright); background:rgba(90,168,236,.14); transition:transform .3s, background .3s; }
.ab-faq[open] summary::after{ transform:rotate(135deg); background:rgba(194,102,255,.22); color:var(--gold-bright); }
.ab-a{ padding:0 22px 20px; color:var(--cream-dim); font-size:14.5px; line-height:1.75; animation:abFaqIn .35s ease; }
.ab-a code{ background:rgba(90,168,236,.12); color:var(--blue-bright); padding:2px 7px; border-radius:5px; font-size:13px; }
@keyframes abFaqIn{ from{ opacity:0; transform:translateY(-6px);} }

/* ---------- scroll reveal (only active when JS adds .ab-js, so crawlers/no-JS still see everything) ---------- */
#page-about.ab-js .ab-reveal{ opacity:0; transform:translateY(34px) scale(.97); filter:blur(6px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; transition-delay:var(--d,0ms); }
#page-about.ab-js .ab-reveal.in{ opacity:1; transform:none; filter:none; }
#page-about.ab-js .ab-reveal.in.glass{ transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .25s ease, filter .8s ease var(--d,0ms), box-shadow .25s ease, border-color .25s ease; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ab-features, .ab-blog{ grid-template-columns:1fr 1fr; }
  .ab-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .ab-shots, .ab-split, .ab-join, .ab-features, .ab-blog{ grid-template-columns:1fr; }
  .ab-hero, .ab-vision, .ab-final{ padding:40px 20px; }
  .ab-story{ padding:28px 22px; }
  #page-about .section-head{ margin-top:56px; }
  .ab-ip span{ min-width:0; width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .ab-blob, .ab-ico, .ab-orbit i, .ab-play, .ab-hero::after, .ab-vision::after, .ab-final::after{ animation:none !important; }
  #page-about.ab-js .ab-reveal{ opacity:1; transform:none; filter:none; transition:none; }
}