/* -------- about page extras -------- */
.ab-hero{
  background:var(--blue); color:var(--white); padding:64px 6vw 60px; border-bottom:3px solid var(--ink);
  text-align:center; position:relative; overflow:hidden;
}
.ab-hero h1{font-size:clamp(2.2rem,7vw,4.6rem); color:var(--white);}
.ab-hero p{max-width:560px; margin:20px auto 0; color:var(--blue-soft); font-weight:500; font-size:1.05rem; line-height:1.6;}
.ab-hero .back-link{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  color:var(--blue-soft); text-decoration:none; font-weight:700; font-size:.85rem;
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em;
}
.ab-hero .back-link:hover{color:var(--white);}

.ab-story{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:80px 0;}
.ab-story h2{font-size:clamp(1.9rem,4vw,3rem); overflow:visible;}
.story-heading{padding-left:2px; overflow:visible;}
.story-line{
  display:inline-block; overflow:visible;
  opacity:0; transform:translateY(46px) rotate(3deg);
  transition:opacity .7s var(--bounce), transform .7s var(--bounce);
}
.story-heading.in .story-line:nth-of-type(1){transition-delay:.05s;}
.story-heading.in .story-line:nth-of-type(2){transition-delay:.16s;}
.story-heading.in .story-line:nth-of-type(3){transition-delay:.27s;}
.story-heading.in .story-line{opacity:1; transform:translateY(0) rotate(0deg);}
@keyframes storyFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-5px) rotate(-.35deg);}
}
.story-heading.in h2{animation:storyFloat 6s ease-in-out infinite 1.2s;}
.story-mark{
  background:var(--yellow); color:var(--ink); padding:2px 12px; display:inline-block;
  border-radius:8px; transform:rotate(-2deg);
  animation:wiggle 3.4s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{transform:scale(1) rotate(0deg);}
  50%{transform:scale(1.04) rotate(-1deg);}
}
.cta-pulse{animation:ctaPulse 2.2s ease-in-out infinite;}
.cta-pulse:hover{animation:none;}
.ab-story-card{
  background:var(--white); border:3px solid var(--ink); border-radius:26px;
  padding:40px; box-shadow:var(--shadow);
}
.ab-story-card p{font-weight:500; font-size:1.05rem; line-height:1.7; margin-bottom:18px;}
.ab-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px;}
.ab-stat-chip{
  background:var(--cream-2); border:2.5px solid var(--ink); border-radius:16px; padding:16px; text-align:center;
  transition:transform .2s var(--bounce), box-shadow .2s var(--bounce);
  box-shadow:0 0 0 var(--ink);
}
.ab-stat-chip:hover{transform:translateY(-5px) rotate(-2deg); box-shadow:4px 4px 0 var(--ink);}
.ab-stats .ab-stat-chip:nth-child(1){background:var(--blue-soft);}
.ab-stats .ab-stat-chip:nth-child(2){background:#FFD9EC;}
.ab-stats .ab-stat-chip:nth-child(3){background:#CFF5DE;}
.ab-stat-chip .emoji{font-size:1.2rem; display:block; margin-bottom:2px;}
.ab-stat-chip .num{font-family:'Archivo Black',sans-serif; font-size:1.6rem; color:var(--blue);}
.ab-stat-chip .lbl{font-size:.7rem; font-weight:700; margin-top:2px; text-transform:uppercase; font-family:'JetBrains Mono',monospace;}

.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:34px; padding:20px 0 60px; perspective:1600px;}
.team-card{
  background:transparent; border:none; padding:0; box-shadow:none;
  cursor:pointer; position:relative;
}
.flip-scene{perspective:1600px; height:520px;}
.flip-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .3s ease-out;
  transform:rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
}
.team-card.flipped .flip-inner{
  transition:transform .65s var(--bounce);
  transform:rotateX(var(--tiltX,0deg)) rotateY(calc(180deg + var(--tiltY,0deg)));
}
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--white); border:3px solid var(--ink); border-radius:26px;
  padding:32px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:box-shadow .2s var(--bounce);
}
.team-card:hover .flip-face{box-shadow:var(--shadow-lg);}
.flip-back{
  transform:rotateY(180deg);
  justify-content:center; text-align:center;
}
.flip-hint{
  position:absolute; bottom:18px; right:18px;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:700;
  color:#8a8a94; display:flex; align-items:center; gap:5px;
  animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.flip-back .team-avatar-big{
  width:70px; height:70px; border-radius:50%; border:3px solid var(--ink); margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Black',sans-serif; font-size:1.3rem; color:var(--white);
}
.flip-back h4{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:4px;}
.flip-back .team-role{position:static; display:inline-block; margin-bottom:16px;}
.flip-back p{font-weight:500; color:#4b4b57; font-size:.94rem; line-height:1.65;}
.flip-back .flip-tag{
  margin-top:20px; font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:700;
  background:var(--yellow); border:2px solid var(--ink); border-radius:100px; padding:6px 14px;
  display:inline-block; align-self:center; transform:rotate(-2deg);
}
.team-card{
  transition:transform .2s var(--bounce);
}
.team-card:hover{transform:translateY(-4px);}
.team-avatar{
  width:88px; height:88px; border-radius:50%; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Black',sans-serif; font-size:1.7rem; color:var(--white);
  margin-bottom:22px;
}
.team-card h3{font-family:'Space Grotesk',sans-serif; text-transform:none; font-weight:700; font-size:1.4rem;}
.team-card .team-role{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; color:var(--blue);
  text-transform:uppercase; letter-spacing:.05em; margin-top:4px; display:block;
}
.team-card p.team-bio{font-weight:500; color:#4b4b57; font-size:.95rem; line-height:1.65; margin-top:18px;}
.team-card .team-phone{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.86rem;
  color:var(--ink); text-decoration:none; border-bottom:2px solid var(--yellow);
  transition:transform .2s var(--bounce), color .2s;
}
.team-card .team-phone:hover{color:var(--blue); transform:translateX(5px) rotate(-1deg);}
.team-card .team-role{transition:transform .2s var(--bounce);}
.team-card:hover .team-role{transform:translateX(3px);}

.ab-company{
  background:var(--white); border:3px solid var(--ink); border-radius:26px;
  padding:40px; box-shadow:var(--shadow); margin-bottom:60px;
  transform:rotate(-.4deg); transition:transform .4s var(--bounce);
}
.ab-company:hover{transform:rotate(0deg);}
.ab-company h3{font-family:'Space Grotesk',sans-serif; text-transform:none; font-weight:700; font-size:1.3rem; margin-bottom:20px; display:flex; align-items:center; gap:8px;}
.ab-company-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.ab-company-item{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:14px; transition:transform .2s var(--bounce), box-shadow .2s var(--bounce);}
.ab-company-item:hover{transform:translateY(-4px) rotate(-1deg); box-shadow:4px 4px 0 var(--ink);}
.ab-company-grid .ab-company-item:nth-child(1){background:var(--blue-soft);}
.ab-company-grid .ab-company-item:nth-child(2){background:#FFD9EC;}
.ab-company-grid .ab-company-item:nth-child(3){background:#CFF5DE;}
.ab-company-grid .ab-company-item:nth-child(4){background:#FFEAC2;}
.ab-company-grid .ab-company-item:nth-child(5){background:#E6D9FF;}
.ab-company-grid .ab-company-item:nth-child(6){background:#D6F0FF;}
.ab-company-item .lbl{font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:700; color:#8a8a94; text-transform:uppercase; letter-spacing:.04em;}
.ab-company-item a, .ab-company-item span.val{font-weight:700; color:var(--ink); text-decoration:none; font-size:.98rem;}
.ab-company-item a:hover{color:var(--blue);}

/* -------- about page v2: playful + 3D + mobile fixes -------- */
.ab-hero{ overflow:hidden; }
.hero-orb{
  position:absolute; width:380px; height:380px; border-radius:50%;
  background:conic-gradient(from 0deg, #4C58FF, #FFD93D, #FF5C8A, #35D07F, #4C58FF);
  filter:blur(70px); opacity:.4;
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:orbitSpin 16s linear infinite;
  z-index:0; pointer-events:none;
}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
.ab-hero .back-link, .ab-hero h1, .ab-hero p{position:relative; z-index:2;}
@media (max-width:768px){
  .hero-orb{display:none;}
}
.ab-hero .sticker{position:absolute; z-index:1; pointer-events:none;}

.ab-story{perspective:1200px;}
.ab-story-card{transform-style:preserve-3d; transition:transform .15s linear, box-shadow .25s var(--bounce);}

.team-grid{perspective:1400px;}
.team-card{
  transform-style:preserve-3d;
  transition:transform .12s linear, box-shadow .25s var(--bounce);
  overflow:hidden;
}
.photo-frame{
  width:100%; aspect-ratio:1/1; border-radius:20px; border:3px solid var(--ink);
  margin-bottom:22px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transform:translateZ(20px);
  background-size:250% 250%;
  animation:shimmerBg 5s ease-in-out infinite;
}
@keyframes shimmerBg{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:none;}
.photo-frame .avatar-fallback{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  position:relative; z-index:2;
}
.photo-frame .avatar-fallback .initials{
  font-family:'Archivo Black',sans-serif; font-size:2.6rem; color:var(--white);
  display:inline-block; animation:initialsBounce 2.6s ease-in-out infinite;
}
@keyframes initialsBounce{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-6px) rotate(-3deg);}
}
.photo-frame .avatar-fallback .cam-icon{opacity:.85;}
.photo-frame .avatar-fallback .soon-tag{
  font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:700; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.18); padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.05em;
  animation:wiggle 3s ease-in-out infinite;
}
.photo-frame::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%);
  pointer-events:none;
}
.team-card h3{transform:translateZ(10px);}

.team-card .badge-corner{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%;
  background:var(--yellow); border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-size:1rem; animation:wiggle 4s ease-in-out infinite; z-index:3;
}

.ab-company-item{min-width:0;}
.ab-company-item a, .ab-company-item span.val{overflow-wrap:anywhere; word-break:break-word;}

@media (max-width:900px){
  .ab-story{grid-template-columns:1fr; gap:36px;}
  .team-grid{grid-template-columns:1fr;}
  .ab-company-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .ab-hero{padding:52px 6vw 44px;}
  .ab-hero h1{font-size:clamp(1.9rem,9vw,3rem);}
  .ab-company-grid{grid-template-columns:1fr;}
  .team-card{padding:0;}
  .ab-story-card{padding:28px;}
  .flip-scene{height:560px;}
  .flip-face{padding:24px;}
  .team-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .sticker{display:none;}
}
@media (max-width:560px){
  .wrap{padding:0 8vw;}
}